Ajax实战:Cookie、Session

Ajax实战:Cookie、Session

文档：Node.js中文档、Set-Cookie响应头
内容：动态服务器

什么是动态服务器?

静态服务器(网页) VS 动态服务器(网页)
判断依据
是否请求了数据库。
没有请求数据库，就是静态服务器。请求了数据库，就是动态服务器。

今天直接用json文件当作数据库。
步骤 查看代码
1.新建目录db和文件users.json

[
    {
   "id":1,"name":"李白","password":"xxx","age":18},
    {
   "id":2,"name":"李宇春","password":"yyy","age":20}
]

2.读数据库
新建test.js用来测试数据
fs用来读文件的，要想获取文件数据，首先要引入fs。

const fs = require('fs') //引入fs
const usersString = fs.readFileSync('./db/users.json').toString()
console.log(usersString)

toString() 方法返回一个表示该对象的字符串。
运行:node test.js

把字符串变成数组

const usersArray = JSON.parse(usersString)
console.log(typeof usersString)
console.log(usersString)
console.log(typeof usersArray)
console.log(usersArray)
console.log(usersArray instanceof Array)

3.写数据库

const user3 = { id: 3, name: '李明', password: 'zzz', age: 25 }
usersArray.push(user3)

存到数据库。我们的数据库是文件，文件只能存字符串

console.log(typeof user3) //object
const string = JSON.stringify(usersArray)
fs.writeFileSync('./db/users.json', string)

每运行一次node test.js就会写一次user3
知识点：
1.JSON.stringify()序列化/字符串化
序列化就是将一个js对象或值转换为符合JSON语法字符串。
JSON.parse()反序列化/反字符串化
反序列化就是解析JSON字符串，构造由字符串描述的js值或对象。
2.json文件清空的话必须留个[]，不然会报错
3.UTF-8的编码怎么变成字符串？
用Buffer.concat(）

例子:const string=Buffer.concat(array).toString()

4.js数组使用JSON.stringify()和toString()的区别

toString()是将数组转化成字符串，因此不带[]
JSON.stringify()将一个js对象或值(一般是对象)转换为符合JSON语法字符串,是带[]的。
另外JSON.parse()是解析JSON字符串，构造由字符串描述的js值或对象(一般是对象)

经验
1.读数据时需要先将json数据文件toString()转化为字符串，符合JSON语法的字符串,toString也会反UTF-8编码。然后再解析JSON字符串JSON.parse()构造由字符串描述的js值或对象。

JSON.parse()//[object Object],[object Object]
2.写数据时，需要将数据JSON.stringify()将一个js对象或值转换为符合JSON语法字符串,是带[]的。因为我们的数据库是文件，文件只能存字符串。
总结
/db/users.json
结构：一个数组

[
  {
    id: 1, name: '李白', password: 'xxx', age: 18 },
  {
    id: 2, name: '李宇春', password: 'yyy', age: 20 }
]

读users数据
先fs.readFileSync(‘./db/users.json).toString()
然后JSON.parse一下(反序列化)，得到数组
写users数据
先JSON.stringify一下(序列化)，得到字符串
然后fs.writeFileSync(’./db/users.json’,data)

目标1.实现用户注册功能

用户提交用户名和密码
users.json里就新增了一行数据
思路
前端写一个form,让用户填写name和password
前端监听submit事件
前端发送post请求，数据位于请求体
后端接收post请求
后端获取请求体中的name和password
后端存储数据

步骤
首先，先质空users.json只留下[]
1.新建注册页面register.html
2.重置meta:vp能够在手机上运行
3.引入jQuery:我使用的是BootCDN，选择/jquery.min.js，点击复制<script>标签。当然你也可以使用一些更高级的写法(比如npm)
必须先引入jquery,然后才能使用。
4.监听表单的submit事件
表单有默认事件，第一步就是要阻止默认事件，不阻止的话会自动刷新页面
5.拿到name和password后要提交下，怎么提交呢？
发一个ajax请求

<form id="registerForm">
  <div>
    <label>用户名<input type="text" name="name"></label>
  </div>
  <div>
    <label>密码<input type="password" name="password"></label>
  </div>
  <div>
    <button type="submit">注册</button>
  </div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/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()
    console.log(name, password)
    $.ajax({
     
      url