序：动态服务器vs静态服务器
- 未请求数据库的服务器就是静态服务器
- 请求了数据库的就是动态服务器
注：以下将用一个json文件代表数据库
一、实现用户注册功能
——用户提交用户名和密码，数据库（users.json）就新增一行数据
<!-- register.html -->
<body>
<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>
<!-- 1.前端写form，让用户填写name和password-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const $form=$('#registerForm')
$form.on('submit',(e)=>{
// 2.前端监听submit事件
e.preventDefault()
const name=$form.find('input[name=name]').val()
const password=$form.find('input[name=password]').val()
console.log(name,password)
$.ajax({
method:'POST',
url:'/register',
contentType:'text/json;charset=UTF-8',
data:JSON.stringify({
name,password
})
}).then(()=>{
alert('注册成功')
location.href='/sign_in.html'
},()=>{})
// 3.前端发送post请求，数据位于请求体
})
</script>
</body>
<!-- server.js -->
if(path==='/register'&& method==='POST'){
// 4.后端接受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)
})
// 5.后端获取请求体中的name和password
request.on('end',()=>{
const string=Buffer.concat(array).toString()
const obj=JSON.parse(string)
const lastUser=userArray[userArray.length-1];
const newUser={
//id 为最后一个用户的id+1
id:lastUser?lastUser.id+1:1,
name:obj.name,
password:obj.password
}
userArray.push(newUser);
fs.writeFileSync("./db/users.json",JSON.stringify(userArray))
// 6.后端存储数据
})
response.end()
}
步骤图：
二、实现用户登录功能
输入的用户名和密码如果是匹配的，就自动跳转首页
代码：
<!-- sign_in.html -->
<body>
<form id="signInForm">
<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>
<!-- 1.写一个form，让用户填写name和password-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const $form=$('#signInForm')
$form.on('submit',(e)=>{
// 2.前端监听submit事件
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'
},()=>{})
})
// 3.前端发送post请求，数据位于请求体
</script>
</body>
<!-- server.js -->
if(path==='/sign_in'&& method==='POST'){
//4.后端接收post请求
const userArray=JSON.parse(fs.readFileSync("./db/users.json"))
const array=[]
request.on('data',(chunk)=>{
array.push(chunk)
})
// 5.后端获取请求中的name和password
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)
// 6.后端读取数据，看是否有匹配的name和password
if(user===undefined){
response.statusCode=400
response.setHeader('Content-Type','text/json;charset=utf-8')
response.end(`{"errorCode":531}`)
}else{
// 6.匹配，则跳转到首页
response.statusCode=200
response.end()
}
response.end()
})
}
步骤图：
