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