接口API

  • 不同功能层之间的通信规则
  • 主要概念：
    • 参数 ：username，password
    • 返回值，一般是json
  • 文档、使用案例
  • json模拟的数据库

这里设计登录使用get，注册使用post

实现登录与注册

代码写的很烂，基本上是能用就行
app.js

  1. const http = require("http");
  2. const querystring = require("querystring");
  3. const fs = require("fs");
  5. const users = {
  6.     admin: 123456,
  7. };
  8. const loginError = {
  9.     err: 1,
  10.     msg: "用户名不存在",
  11. };
  12. http
  13.     .createServer((req, res) => {
  14.         //获取数据
  15.         let path;
  16.         if (req.method === "GET") {
  17.             const data = new URL(`${req.url}`, "http://localhost:8080/"); // new一个URL实例
  18.             // console.log(data); // 可以打印出来看看里面有什么，
  19.             const username = data.searchParams.get("username"); // 通过searchParams的get可以获取到想要获取的数据
  20.             const password = data.searchParams.get("password");
  21.             path = data.pathname;
  22.             const get = { username, password };
  23.             // console.log(get);
  24.             // console.log(path);
  25.             complete(get);
  26.         } else if (req.method === "POST") {
  27.             let arr = [];
  28.             path = req.url;
  29.             // get = { username, password };
  30.             // console.log("22222", path);
  31.             req.on("data", buffer => {
  32.                 arr.push(buffer);
  33.             });
  34.             req.on("end", () => {
  35.                 const data = Buffer.concat(arr).toString();
  36.                 const post = querystring.parse(data);
  37.                 // console.log("@", post);
  38.                 complete(post);
  39.             });
  40.         }
  42.         function complete(data) {
  43.             if (path === "/login") {
  44.                 res.writeHead(200, {
  45.                     "Content-Type": "text/plain;charset=utf-8",
  46.                 });
  47.                 const { username, password } = data;
  48.                 // console.log(get);
  49.                 if (!users[username]) {
  50.                     res.end(JSON.stringify(loginError));
  51.                 } else if (users[username] != password) {
  52.                     // console.log(users[username]);
  53.                     // console.log(password);
  54.                     res.end(
  55.                         JSON.stringify({
  56.                             err: 1,
  57.                             msg: "密码错误",
  58.                         })
  59.                     );
  60.                 } else {
  61.                     res.end(
  62.                         JSON.stringify({
  63.                             err: 0,
  64.                             msg: "登录成功",
  65.                         })
  66.                     );
  67.                 }
  68.             } else if (path === "/reg") {
  69.                 res.writeHead(200, {
  70.                     "Content-Type": "text/plain;charset=utf-8",
  71.                 });
  72.                 const { username, password } = data;
  73.                 // console.log("@", data);
  74.                 if (users[username]) {
  75.                     res.end(
  76.                         JSON.stringify({
  77.                             err: 1,
  78.                             msg: "账户已存在",
  79.                         })
  80.                     );
  81.                 } else {
  82.                     users[username] = password;
  83.                     // console.log("@", users);
  84.                     res.end(
  85.                         JSON.stringify({
  86.                             err: 0,
  87.                             msg: "注册成功",
  88.                         })
  89.                     );
  90.                 }
  91.             } else {
  92.                 fs.readFile(`static/${path}`, (err, data) => {
  93.                     err ? res.end("404") : res.end(data);
  94.                 });
  95.             }
  96.         }
  97.     })
  98.     .listen(8080);

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Login</title>
  9.     <link rel="stylesheet" type="text/css" href="./css/login.css" />
  10.   </head>
  12.   <body>
  13.     <div class="container">
  14.       <h1>Please Login</h1>
  15.       <form>
  16.         <div class="form-control">
  17.           <input type="text" required id="username" />
  18.           <label>
  19.             Email
  20.             <!-- <span style="transition-delay : 0ms;">E</span>
  21.             <span style="transition-delay : 50ms;">m</span>
  22.             <span style="transition-delay : 100ms;">a</span>
  23.             <span style="transition-delay : 150ms;">i</span>
  24.             <span style="transition-delay : 200ms;">l</span> -->
  25.           </label>
  26.         </div>
  27.         <div class="form-control">
  28.           <input type="password" required id="password">
  29.           <label>Password</label>
  30.         </div>
  32.         <button class="btn" id="login">Login</button>
  33.         <p class="text">
  34.           Dont't have an account?<button class="btn small" id="reg">Register</button>
  35.         </p>
  36.       </form>
  37.     </div>
  39.     <script>
  40.       const labels = document.querySelectorAll('.form-control label');
  42.       labels.forEach(label => {
  43.         label.innerHTML = label.innerText.split('')
  44.           .map((letter, idx) => `<span style="transition-delay:${idx*50}ms">${letter}</span>`)
  45.           .join('');
  46.       })
  47.     </script>
  48.     <script src='./jquery.min.js'></script>
  49.     <script>
  50.       $('#login').click(function () {
  51.         $.ajax({
  52.           url: "/login",
  53.           data: {
  54.             username: $('#username').val(),
  55.             password: $('#password').val()
  56.           },
  57.           dataType: "json",
  58.           success(res) {
  59.             if (res.err) {
  60.               alert(res.msg)
  61.             } else {
  62.               alert("登录成功");
  63.               location.href = 'admin.html'
  64.             }
  65.           }
  66.         })
  67.       })
  68.       $('#reg').click(function () {
  69.         $.ajax({
  70.           url: "/reg",
  71.           method: 'post',
  72.           data: {
  73.             username: $('#username').val(),
  74.             password: $('#password').val()
  75.           },
  76.           dataType: "json",
  77.           success(res) {
  78.             console.log("@", res)
  79.             res.err ?
  80.               alert(res.msg) :
  81.               alert("注册成功")
  82.           }
  83.         })
  84.       })
  85.     </script>
  86.   </body>
  88. </html>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background-color: steelblue;
  9.   color: white;
  10.   font-family: sans-serif;
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14.   height: 100vh;
  15. }
  17. .container {
  18.   background-color: rgba(0, 0, 0, 0.4);
  19.   padding: 20px 40px;
  20.   border-radius: 5px;
  21. }
  22. .container h1 {
  23.   text-align: center;
  24.   margin-bottom: 30px;
  25. }
  26. .container a {
  27.   text-decoration: none;
  28.   color: lightblue;
  29. }
  31. .btn {
  32.   cursor: pointer;
  33.   width: 100%;
  34.   background-color: lightblue;
  35.   padding: 15px;
  36.   border: 0;
  37.   font-size: 16px;
  38.   font-family: inherit;
  39. }
  40. .btn:focus {
  41.   outline: 10px solid pink;
  42. }
  43. .btn:active {
  44.   transform: scale(0.98);
  45. }
  46. .btn.small {
  47.   display:inline;
  48.   width: 100px; 
  49.   height:40px;
  50.   text-align: center; 
  51. }
  53. .text {
  54.   margin-top: 30px;
  55. }
  57. .form-control {
  58.   position: relative;
  59.   width: 300px;
  60.   margin: 20px 0 40px;
  61. }
  62. .form-control input {
  63.   background-color: transparent;
  64.   border: 0;
  65.   border-bottom: 2px solid white;
  66.   display: block;
  67.   width: 100%;
  68.   padding: 15px 0;
  69.   font-size: 18px;
  70.   color: white;
  71. }
  72. .form-control input:focus {
  73.   outline: 0;
  74.   border-bottom-color: lightblue;
  75. }
  76. .form-control input:focus + label span {
  77.   transform: translateY(-30px);
  78.   color: lightblue;
  79. }
  80. .form-control input:valid {
  81.   border-bottom-color: lightblue;
  82. }
  83. .form-control input:valid + label span {
  84.   transform: translateY(-30px);
  85.   color: lightblue;
  86. }
  87. .form-control label {
  88.   position: absolute;
  89.   left: 0;
  90.   top: 15px;
  91. }
  92. .form-control label span {
  93.   display: inline-block;
  94.   font-size: 18px;
  95.   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  96. }

css不是重点，我只是把之前做的好看的login界面拿来用了\
admin.html 登录成功后的界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Login</title>
  9.     <link rel="stylesheet" type="text/css" href="./css/login.css" />
  10.   </head>
  12.   <body>
  13.     <div class="container">
  14.       <form>
  16.         <p>登录成功</p>
  17.       </form>
  18.     </div>
  21.   </body>
  23. </html>

总结

深入建议

  • koa
  • express
  • 数据库：mongodb、mysql