动态服务器跟静态服务器最主要的区别就是在于是否请求了数据

今天做一个简易版的注册 登录功能 ,AJAX 的实战：包含不限于( Cookie Session)

下面是文件目录

/ -> db
     -> users.json       //存用户账号和密码文件 
  -> public
     -> home.html        //显示已登录 or 未登录网页    
     -> register.html    //注册网页
     -> sign_in.html     //登录网页
  -> server.js           //服务器
  -> session.json        //防止用户篡改的数据库(主要目的是防止用户更改ID)

1. Register.html 注册页面

<!-- -->
<body>
  <form id="registerForm">
    <div> <label for="">用户名:<input type="text" name="name"/></label></div>

    <div> <label for="">密码:<input type="password" name="password"/></label></div>

    <div> <button type="submit">注册</button> </div>
  </form>
  <!-- 引用jQuery库 -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    const $form = $("#registerForm")
    $form.on("submit",(e)=>{
      e.preventDefault();

      const name = $form.find("input[name=name]").val()
      const password = $form.find("input[name=password]").val()

      $.ajax({
        method:"POST",
        url:"/register",
        contentType:"text/json;charset=UTF-8",
        data:JSON.stringify({name,password})
      }).then(
        ()=>{
          alert('注册成功')
          location.href="./sign_in.html"
        },
        ()=>{}
        )
    })
  </script>
</body>
<!--Event.preventDefault:当点击注册页面会刷新,此方法是阻止这种默认的行为-->
<!--find():找到该元素并且获得元素的值val()  -->
<!--$ajax()：发送请求(时带着 请求方法 url 内容类型 数据)  -->
<!--then():接收两个参数第一个成功(时做什么)第二个失败(时做什么) -->
<!--location.href:该操作会跳转到设置的网页 -->

写在 server.js 里做出响应

//以下代码不是完整代码 只是当请求/register 做出响应
if(path === "/register" && method === "POST"){
  response.setHeader("ContentType","text/html;charset=UTF-8")

  const userArray = JSON.parse(fs.readFileSync("./db/users.json"))

  const array = []

  request.on("data",(chunk)=>{
    array.push(chunk)
  })

  request.on("end",()=>{
    const string = Buffer.concat(array).toString()
    const obj = JSON.parse(string)
    //创建一个对象包含新的用户名
    const newUser = {
      id:userArray.length ===0?1:userArray[userArray.length-1].id+1,
      name:obj.name,
      password:obj.password
    }
    //添加新的用户名
    userArray.push(newUser)
    //写出数据库 user.json
    fs.writeFileSync("./db/user.json",JSON.stringify(userArray))
    //响应结束
    response.end()
  })
}

2. sign_in .html 登录页面

<form id="signInForm">
  <div> <label for="">用户名<input type="text" name="name"/> </label> </div>

  <div> <label for="">密码<input type="password" name="password" /> </label> </div>

  <div> <button type="submit">登录</button>
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  const $form = $("#signInForm")
  $form.on("submit", (e)=>{
    e.preventDefault()

    const name = $form.find("input[name=name]").val()
    const password = $form.find("input[name=password]").val()

    $.ajax({
      method:"POST",
      url:"/sign_in",
      contentType:"text/json;charset=UTF-8",
      data:JSON.stringify({name,password})
    }).then(
      ()=>{
        alert('登录成功')
        location.href="./home.html"
      },
      ()=>{}
    )
  })
  //基本跟注册差不多,区别就在后端里处理跟返回不一样
</script>

写在 server.js 里做出响应

if (path === "/sign_in" && method === "POST") {
    response.setHeader("Content-Type", "text/html;charset=UTF-8");
    const userArray = JSON.parse(fs.readFileSync("./db/users.json"));

    const array = [];
    request.on("data", chunk => {
      array.push(chunk);
    });
    request.on("end", () => {
      const string = Buffer.concat(array).toString();
      const obj = JSON.parse(string);
      const user = userArray.find(
        user => user.name === obj.name && user.password === obj.password
      );
      if (user === undefined) {
        response.statusCode = 400;
        response.setHeader("Content-Type", "text/json  ;charset=UTF-8");
        response.end(`{"errorCode":4001}`);
      } else {
        response.statusCode = 200;
        const random = Math.random();
        session[random] = { user_id: user.id };
        fs.writeFileSync("./session.json", JSON.stringify(session));
        response.setHeader("Set-Cookie", `session_id=${random};HttpOnly`);
        response.end();
      }
    });
}
//唯一思路就是在user.json里找到它并且成功返回即可.在sign_in里有js代码自动跳转到home页面

注册跟登录在前台这一块区别不大都是获取到数据传给后台。逻辑在后台比较好.只不过后台返回给前台的各有不同

注册：前台把用户名和密码传给后台,后台存入数据库.

登录：前台把用户名和密码传给后台,后台读取数据库,看在不在数据库里面即可.

完整源代码