时间戳

首页 > 解决方案 > Javascript 从文本文件中读取值并显示在 html 页面中

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

问题描述

我在下面复制了一个 html 文件，我试图在 linux 服务器中设置密码策略。所以，我的问题是“在我的网页上，如果我点击‘密码策略’链接，那么它应该读取 Linux 服务器中的 pwquality.conf 文件并在文本区域中打印最小值和最大值，或者滚动条应该指向该值“

<!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>

请帮忙。

标签： javascripthtmlnode.js

解决方案

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

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

我想说的最简单的开始是 Rest API，这个链接可能会帮助你开始 -> https://medium.com/@onejohi/building-a-simple-rest-api-with-nodejs-and-express -da6273ed7ca9

我要做的是首先为您的 GET 和 PUT 动词创建简单的 REST api pwquality.conf，不要担心客户端部分。您可以使用 POSTMAN https://www.getpostman.com/之类的实用程序来测试这一点，或者即使curl您是 Linux 专家。

现在这里还需要注意安全性，您可以现在或以后实施。如果你只是想让事情先工作，你可以做下一点。

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

最后，不要忘记安全性，特别是如果您打算让您的网站向公众开放。安全性是另一个大问题，所以当你开始这样做时，你最好再问一个关于 SO 的问题。

最后，你可能会发现这一切一开始就让人不知所措。别担心，就像我提到的那样分阶段进行，您很快就会启动并运行。

推荐阅读