Javascript从文本文件中读取值并显示在html页面中

Question

我在下面复制了一个html文件，试图在linux服务器中设置密码策略。 因此，我的问题是“在我的网页上，如果我单击“密码策略”链接，则它将读取Linux服务器中的pwquality.conf文件并在文本区域中打印最小值和最大值，或者滚动条应指向该值最后，如果我在html页面中进行了任何更改，然后单击Submit，则这些值应在同一文件中更新。”

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields */
input {
  width: 25%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the reset button */
input[type=reset] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #6877a0;
  padding: 20px;
}
input[type=range] {
-webkit-appearance: none;
background-color: transparent;
width: 300px;
height: 20px;
  padding-top:10px;
  overflow:hidden;
  display: inline-block;
  vertical-align: middle;
}
input[type=range]:focus{
  outline:none;
}
input[type="range"]::-webkit-slider-thumb {
  position:relative;
     -webkit-appearance: none;
    cursor:pointer;
    background-color: #f1f1f1;
    width: 10px;
    height: 30px;
    box-shadow: 1px 5px 10px -1px rgba( 0, 0,0.2),
    -25px 0 0 20px rgba(90, 184, 6, 0.5),
    -75px 0 0 20px rgba(90, 184, 6, 0.5),
    -125px 0 0 20px rgba(90, 184, 6, 0.5),
    -175px 0 0 20px rgba(90, 184, 6, 0.5),
    -225px 0 0 20px rgba(90, 184, 6, 0.5),
    -275px 0 0 20px rgba(90, 184, 6, 0.5),
    -325px 0 0 20px rgba(90, 184, 6, 0.5);
  z-index:2;
}
input[type="number"] {
    width: 65px;
    height: 20px;
}
input[type=number]:focus{
  outline:none;
}
.number-wrapper {
    position: relative;
}
</style>
</head>
<body bgcolor="#f1f1f1">

<h2 align= "center"><u>Password policy setting page</u></h2>
<div class="container" align = "center">
<form id="myForm" align="center">

   Expiry<br><input type="range" name="ExpiryRange" min="0" max="100" value="30" oninput="this.form.ExpiryInput.value=this.value" />
             <span class='number-wrapper'><input type="number" name="ExpiryInput" min="0" max="100" value="30" oninput="this.form.ExpiryRange.value=this.value" onkeyup="checkLength1(this)" /></span><br>
   Min.Length<br><input type="range" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
                 <input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
   Max.Length<br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
                 <input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
   Lowercase Letter<br><input type="range" name="LCRange" min="0" max="4" value="1" oninput="this.form.LCInput.value=this.value" />
                 <input type="number" name="LCInput" min="0" max="4" value="1" oninput="this.form.LCRange.value=this.value" onkeyup="checkLength2(this)" /><br>
   Uppercase Letter<br><input type="range" name="UCRange" min="0" max="4" value="1" oninput="this.form.UCInput.value=this.value" />
                 <input type="number" name="UCInput" min="0" max="4" value="1" oninput="this.form.UCRange.value=this.value" onkeyup="checkLength2(this)" /><br>
   Digit<br><input type="range" name="DRange" min="1" max="4" value="1" oninput="this.form.DInput.value=this.value" />
                 <input type="number" name="DInput" min="1" max="4" value="1" oninput="this.form.DRange.value=this.value" onkeyup="checkLength2(this)" /><br>
   Symbol<br><input type="range" name="SRange" min="1" max="4" value="1" oninput="this.form.SInput.value=this.value" />
                 <input type="number" name="SInput" min="1" max="4" value="1" oninput="this.form.SRange.value=this.value" onkeyup="checkLength2(this)" /><br>
     <br><br>
</form>
</div>
<div align="center">
<input type="Submit" align="center" onclick="alert('Success!!!')">
<input id="reset" onclick="resetFunc()" type="button" value="Reset">
</div>
<script>
function resetFunc(){
    document.getElementById("myForm").reset();
  }
function checkLength1(elem) {
  if (elem.value > 100) {
    alert('Max value is 100')
    elem.value = '';
  }
}
function checkLength2(elem) {
  if (elem.value > 4) {
    alert('Max value is 4')
    elem.value = '';
  }
}
function readValue() {

}
</script>
</body>
</html>

请帮助。

Answer 1

好的，将标签更新为显示node.js ，因为这是对您有帮助的重要信息。

因此，不幸的是，要回答您的问题不是一个简单的答案。 客户端和服务器，Rest API Websocket等之间有多种通信方式。

首先要说的是Rest API，此链接可能有助于您入门-> https://medium.com/@onejohi/building-a-simple-rest-api-with-nodejs-and-express -da6273ed7ca9

我要做的是首先为您的pwquality.conf创建一个具有简单GET＆PUT动词的简单REST api，请不要担心客户端部分。 您可以使用POSTMAN https://www.getpostman.com/等实用工具进行测试，如果您的Linux专家也可以使用curl进行测试。

现在这里还有安全措施，您可以现在或以后实施。 如果您只是想让事情先工作，那么可以做下一部分。

因此，您现在在网站上有了一个简单的REST API服务，并且已经按预期测试了GET＆PUT动词。 现在，要使您的客户使用这些动词，可以使用Ajax或大多数浏览器现在拥有的新的fetch API。 这并不难，但是我首先要使您的GET / PUT工作，然后再在SO上问另一个有关如何使用fetch https://developer.mozilla.org/en-US/docs/Web/API/ Fetch_API / ajax https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

最后，不要忘了安全性，特别是如果您计划将网站向公众开放。 安全性是另一个大问题，因此您可能最好在SO上问另一个问题。

最后，您可能会发现所有这些从一开始就令人不知所措。 别担心，按照我刚才提到的步骤进行，您将很快启动并运行。

Javascript从文本文件中读取值并显示在html页面中

问题描述

1 个解决方案

解决方案1
0 2019-07-31 12:06:42

Javascript从文本文件中读取值并显示在html页面中

问题描述

1 个解决方案

解决方案1 0 2019-07-31 12:06:42

解决方案1
0 2019-07-31 12:06:42