node搭建后台实现账户登录
1.创建项目结构
data，public，views目录自己手动创建
从crud打开terminal创建package.json,package-lock.json
步骤如下
在terminal中依次输入以下命令
npm init -y
npm i express art-template express-art-template
完成后如图即可
2.创建前端登录页面
在views文件夹下创建login.html，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
//使用get容易造成信息泄露，这在实际中是不允许的
<label>
<input type="text" name="account">
</label>
<br>
<label>
<input type="password" name="password">
</label>
<br>
<label>
<input type="submit" value="登录">
</label>
</form>
</body>
</html>
到此，用户的操作页面已经完成
3.创建users.json文件模拟数据库
在data文件夹下创建users.json文件，具体代码如下
到此，我们的用户数据已经创建完成
[
{
"id": 1,
"name":"小明",
"age": 18,
"gender": 1,
"hobbies": ["吃饭","睡觉","打豆豆"],
"account": 123456,
"password": 123456
},
{
"id": 2,
"name":"小红",
"age":21,
"gender":0,
"hobbies": ["刷手机","学习"],
"account": 654321,
"password": 654321
}
]
4.创建后台接收，判断，反馈逻辑
在crud文件夹下创建app.js具体代码如下
const express=require('express')
const fs=require('fs')
const app=express()
//引入express-art-template，以解析HTML文件
app.engine('html',require('express-art-template'))
//配置body-parser，以解析前端post给后端的信息
app.use(express.urlencoded({extended: false}))
app.use(express.json())
//打开登录界面
app.get('/login',(req,res)=>{
res.render('login.html')
})
//解析登录界面
//从前端获取到信息，首先要对获取到的信息进行判断，该怎样判断呢？首先刚刚获取到的信息是以buffer的形式，那么我们通过JSON语言将信息预处理
//成为可执行的数组，（数据成为数组的形式后方便后续直接调用数组中的元素）,最后进行判断
app.post('/login',(req,res)=>{
console.log(req.body)//前端给后端的登录信息（账号和密码）
fs.readFile('data/users.json',(err,data)=>{
//读取users.json内的元素
if (err) throw err //有错误就抛出
const users=JSON.parse(data) //将数据JSON解析成数组,即可操作的形式
const user=users.find(value => value.account==req.body.account)
if (user&&user.password==req.body.password) res.send('登陆成功')
else res.send('登陆失败')
})
})
app.listen(3000,()=>console.log('app is running at port 3000...'))
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
