一、创建html页面

创建4个页面，index.html、register.html、sign_in.html、home.html

  • index.html 默认主页
  • register.html 用于注册账号
  • sign_in.html 用于登录账号
  • home.html 用于显示登录后的页面

主要代码片段

register.html

  1. <form id="registerForm">
  2.     <div>
  3.         <label for="">用户名：<input type="text" name="name" id=""></label>
  4.     </div>
  5.     <div>
  6.         <label for="">密码：<input type="password" name="password" id=""></label>
  7.     </div>
  8.     <div>
  9.         <button type="submit">注册</button>
  10.     </div>
  11. </form>
  12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  13. <script>
  14. let $form = $('#registerForm')
  15. $form.on('submit', (e) => {
  16.     e.preventDefault()
  17.     const name = $form.find("input[name=name]").val()
  18.     const password = $form.find('input[name=password').val()
  19.     console.log(name, password)
  20.     // pass AJAX post data
  21.     $.ajax({
  22.         method: 'post',
  23.         url: '/register',
  24.         contentType: 'text/json; charset=UTF-8',
  25.         data: JSON.stringify({
  26.             name, // name: name 
  27.             password // password: password
  28.         })
  29.     }).then(() => {
  30.         alert('注册成功')
  31.         location.href = '/sign_in.html'
  32.     }, () => {})
  33. })
  34. </script>

sign_in.html

  1. <form id="signInForm">
  2.     <div>
  3.         <label for="">用户名：<input type="text" name="name" id=""></label>
  4.     </div>
  5.     <div>
  6.         <label for="">密码：<input type="password" name="password" id=""></label>
  7.     </div>
  8.     <div>
  9.         <button type="submit">登录</button>
  10.     </div>
  11. </form>
  12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  13. <script>
  14.     let $form = $('#signInForm')
  15.     $form.on('submit', (e) => {
  16.         e.preventDefault()
  17.         // get name password
  18.         const name = $form.find("input[name=name]").val()
  19.         const password = $form.find('input[name=password').val()
  20.         // pass AJAX post data
  21.         $.ajax({
  22.             method: 'POST',
  23.             url: '/sign_in',
  24.             contentType: 'text/json; charset=UTF-8',
  25.             data: JSON.stringify({
  26.                 name,
  27.                 password
  28.             })
  29.         }).then(() => {
  30.             alert('登录成功')
  31.             location.href = '/home.html'
  32.         }, () => {})
  33.     })
  34. </script>

home.html

  1. <p>
  2.     {{loginStatus}}
  3. </p>
  4. <p>
  5.     你好,{{user.name}}
  6. </p>
  7. <p>
  8.     <a href="sign_in.html">登录</a>
  9. </p>

二、Node服务器

  1. var http = require('http')
  2. var fs = require('fs')
  3. var url = require('url')
  4. var port = process.argv[2]
  6. if (!port) {
  7.     console.log('请输入指定端口。如：\nnode server.js 8888')
  8.     process.exit(1)
  9. }
  11. var server = http.createServer(function (request, response) {
  12.     var parsedUrl = url.parse(request.url, true)
  13.     var pathWithQuery = request.url
  14.     var queryString = ''
  15.     if (pathWithQuery.indexOf('?') >= 0) {
  16.         queryString = pathWithQuery.substring(pathWithQuery.indexOf('?'))
  17.     }
  18.     var path = parsedUrl.pathname
  19.     var query = parsedUrl.query
  20.     var method = request.method
  22.     /******** main start ************/
  23.     // 读取 session 文件,转化为对象
  24.     const session = JSON.parse(fs.readFileSync('./session.json').toString())
  26.     if (path === '/sign_in' && method === 'POST') {
  27.         // 读数据库
  28.         let userArray = JSON.parse(fs.readFileSync('./database/users.json'))
  29.         const array = []
  30.         // 每次接受数据就添加进数组
  31.         request.on('data', (chunk) => {
  32.             array.push(chunk)
  33.         })
  34.         request.on('end', () => {
  35.             // 转化字符串
  36.             const string = Buffer.concat(array).toString()
  37.             // 在转化为对象
  38.             const obj = JSON.parse(string)
  39.             // 找到符合的 user
  40.             const user = userArray.find(user => user.name === obj.name && user.password === obj.password) // 成功返回符合的对象，失败返回undefined
  41.             if (user === undefined) { // 失败
  42.                 response.statusCode = 400
  43.                 response.setHeader('content-Type', 'text/JSON; charset=UTF-8')
  44.                 response.end(`{"errorCode":4001}`)
  45.             } else { // 成功
  46.                 response.statusCode = 200
  47.                 // 设置 Cookie
  48.                 const random = Math.random()
  49.                 session[random] = {
  50.                     user_id: user.id
  51.                 }
  52.                 // 写入数据
  53.                 fs.writeFileSync('./session.json', JSON.stringify(session))
  54.                 response.setHeader("Set-Cookie", `'session_id=${random}; HttpOnly'`)
  55.                 response.end()
  56.             }
  57.         })
  58.     } else if (path === '/home.html') {
  59.         // 获取 Cookie
  60.         const cookie = request.headers['cookie']
  61.         let sessionId
  62.         try { // 读取 Cookie 中的 id 值
  63.             sessionId = cookie.split(';').filter(s => s.indexOf('session_id=') >= 0)[0].split('=')[1]
  64.         } catch (error) {}
  65.         if (sessionId && session[sessionId]) {
  66.             // 从 session 中读取对应的值
  67.             const userId = session[sessionId].user_id
  68.             // 读数据库
  69.             let userArray = JSON.parse(fs.readFileSync('./database/users.json'))
  70.             // 找到符合的 user
  71.             let user = userArray.find(user => user.id === userId)
  72.             const homeHtml = fs.readFileSync('./public/home.html').toString()
  73.             let string
  74.             if (user) {
  75.                 string = homeHtml.replace('{{loginStatus}}', '已登录').replace('{{user.name}}', user.name)
  76.                 response.write(string)
  77.             }
  78.         } else {
  79.             // 读取源文件内容
  80.             const homeHtml = fs.readFileSync('./public/home.html').toString()
  81.             // 替换文字
  82.             const string = homeHtml.replace('{{loginStatus}}', '未登录').replace('{{user.name}}', '')
  83.             response.write(string)
  84.         }
  85.         response.end()
  86.     } else if (path === '/register' && method === 'POST') {
  87.         response.setHeader('Content-Type', 'text/html; charset=UTF-8')
  88.         // read database
  89.         let userArray = JSON.parse(fs.readFileSync('./database/users.json')) // read database
  90.         const array = []
  91.         request.on('data', (chunk) => {
  92.             array.push(chunk)
  93.         })
  94.         request.on('end', () => {
  95.             // convert string
  96.             const string = Buffer.concat(array).toString()
  97.             // convert obj
  98.             const obj = JSON.parse(string)
  99.             // last user id
  100.             const lastUser = userArray[userArray.length - 1]
  101.             // new user
  102.             const newUser = {
  103.                 id: lastUser ? lastUser.id + 1 : 1,
  104.                 name: obj.name,
  105.                 password: obj.password
  106.             }
  107.             userArray.push(newUser)
  108.             // write data
  109.             fs.writeFileSync('./database/users.json', JSON.stringify(userArray))
  110.         })
  111.         response.end()
  112.     } else {
  113.         response.statusCode = 200
  114.         let content
  115.         // setting index
  116.         const filePath = path === '/' ? '/index.html' : path
  117.         // judge type
  118.         const index = filePath.lastIndexOf('.')
  119.         const suffix = filePath.substring(index)
  120.         const fileType = {
  121.             '.html': 'text/html',
  122.             '.css': 'text/css',
  123.             '.js': 'text/javascript'
  124.         }
  125.         response.setHeader('Content-Type', `${fileType[suffix] || "text/html"};charset=utf-8`)
  126.         try {
  127.             content = fs.readFileSync(`./public${filePath}`)
  128.         } catch (error) {
  129.             content = '文件路径不存在'
  130.             response.statusCode = 404
  131.         }
  132.         response.write(content)
  133.         response.end()
  134.     }
  136.     /******** main end ************/
  137. })
  139. server.listen(port)
  140. console.log('监听 ' + port + ' 成功！请输入下列地址访问\nhttp://localhost:' + port)

三、主要思路

register.html

使用jQuery的ajax将数据发送请求 /register 给后端，成功则跳转到 sign_in.html

数据需要使用 JSON.stringify 转化为字符串在提交

/register

读取 users.json 的数据，创建一个空数组，将传递过来的参数 push 进去。将数组转换为字符串，在转换为对象。
获取数据库中最小的 id 值，将数据组成新的对象，添加进入 数据库 中。

sign_in.html

使用ajax将数据发送请求 /sign_in 给后端，成功则跳转 home.html

/sign_in

读取 users.json 的数据，创建一个空数组，将传递过来的参数 push 进去。将数组转换为字符串，在转换为对象。
在读取后的数据库中，查找有没有符合条件的 user，成功返回读取后的对象，失败返回 undefined。
如果成功，设置随机数，将 随机数的值 与 user的id 绑定。并添加到 session.json 中。然后 setHeader，将cookie发送到浏览器。

/home

获取登入成功后 cookie 的值。读取 session 中对应的随机数。如果随机数和session对应的随机数值存在，就显示已登录，否则显示未登录