1.0.1 • Published 3 years ago
su-xinxizsgc v1.0.1
app.js
const express = require("express");
const app = express();
const fs = require("fs");
app.listen(8080, () => console.log("8080"));
app.use(express.static("public", { index: "login.html" }))
app.use(express.json())
app.post("/api/login", (req, res) => {
let { user, pwd } = req.body;
let data = JSON.parse(fs.readFileSync("mock/user.json"));
let isLogin = data.find(itme => itme.user === user && itme.pwd === pwd);
let isUser = data.find(item => item.user === user);
if (isLogin) {
res.send({
code: 1,
mess: "登录成功",
id: isLogin.id
})
} else if (isUser) {
res.send({
code: 0,
mess: "账户密码错误"
})
} else {
req.body.id = Math.random().toString().slice(2);
req.body.sex = "";
req.body.age = "";
req.body.address = "";
data.push(req.body)
fs.writeFileSync("mock/user.json", JSON.stringify(data))
res.send({
code: 2,
mess: "注册成功，跳转首页",
id: req.body.id,
})
}
})
app.post("/api/getUser", (req, res) => {
let { id } = req.body;
let data = JSON.parse(fs.readFileSync("mock/user.json"));
let result = data.find(itme => itme.id === id);
res.send({
code: 1,
user: result
})
})
app.post("/api/modify", (req, res) => {
let { id } = req.body;
let data = JSON.parse(fs.readFileSync("mock/user.json"));
let obj = data.find(itme => itme.id === id);
Object.assign(obj, req.body)
fs.writeFileSync("mock/user.json", JSON.stringify(data))
res.send({
code: 1,
})
})
login.html登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入用户" class="user">
<input type="text" placeholder="请输入密码" class="pwd">
<button class="btn">提交</button>
<script src="./js/axios.js"></script>
<script>
let user = document.querySelector(".user"),
pwd = document.querySelector(".pwd"),
btn = document.querySelector(".btn");
btn.onclick = () => {
if (!user.value || !pwd.value) {
alert("非空");
return;
}
axios.post("/api/login", {
user: user.value,
pwd: pwd.value
}).then(result => {
if (result.data.code > 0) {
alert(result.data.mess)
localStorage.setItem("id",result.data.id)
location.href = "home.html"
} else {
alert(result.data.mess)
}
})
}
</script>
</body>
</html>
home.html渲染信息页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<a href="modify.html"> <button>编辑</button></a>
<script src="./js/axios.js"></script>
<script>
let id = localStorage.getItem("id"),
p = document.querySelectorAll("p");
axios.post("/api/getUser", {
id,
}).then(result => {
console.log(result.data.user)
p[0].innerHTML = "昵称：" + result.data.user.user;
p[1].innerHTML = "年龄：" + result.data.user.age;
p[2].innerHTML = "性别：" + result.data.user.sex;
p[3].innerHTML = "地址：" + result.data.user.address;
})
</script>
</body>
</html>
modify.html修改信息页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
姓名：<input type="text">
</p>
<p>
年龄： <input type="text">
</p>
<p>性别 <input type="text"></p>
<p>地址 <input type="text"></p>
<button class="btn">修改</button>
<script src="./js/axios.js"></script>
<script>
let id = localStorage.getItem("id"),
ipts = document.querySelectorAll("input"),
btn = document.querySelector("button")
axios.post("/api/getUser", {
id,
}).then(result => {
console.log(result.data.user)
ipts[0].value = result.data.user.user;
ipts[1].value = result.data.user.age;
ipts[2].value = result.data.user.sex;
ipts[3].value = result.data.user.address;
})
btn.onclick = () => {
axios.post("/api/modify", {
"user": ipts[0].value,
"id": id,
"sex": ipts[2].value,
"age": ipts[1].value,
"address": ipts[3].value
}).then(reuslt => {
if (reuslt.data.code) {
alert("修改成功，展示修改的信息")
location.href = "home.html"
}
})
}
</script>
</body>
</html>
mock 数据
const Mock = require("mockjs");
const fs = require("fs");
let data = Mock.mock({
"user|5": [{
"user": "@cname",
"pwd": "@word(6)",
"sex": "男",
"age": "",
"address": "@city",
"id": "@id"
}] //姓名 密码 性别 年龄 城市 id
})
fs.writeFileSync("user.json", JSON.stringify(data.user))
``