1.0.0 • Published 3 years ago
yk-login v1.0.0
//登录
//下载4个插件 init axios express mock
//mock里面有2个 文件数据 data.js list.json
//puolic文件下的有js文件夹 js里面有axios.js 和 axios.map
//4个 html 文件
//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">
<input type="text">
<button>登录</button>
<a href="./register">注册</a>
<a href="./modifyPwd">修改密码</a>
<script src="js/axios.js"></script>
<script>
let ipts = document.querySelectorAll("input");
let btn = document.querySelector("button");
btn.onclick = () => {
axios.post("/api/login", {
user: ipts[0].value,
pwd: ipts[1].value
}).then(result => {
if (result.data.code) {
location.href = "user.html";
// 存id 跳转详情页 展示数据 必须通过id
localStorage.setItem("id",result.data.id)
} else {
alert("no")
}
})
}
</script>
</body>
</html>//modifyPwd.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="用户"><br>
<input type="text" placeholder="旧密码"><br>
<input type="text" placeholder="新密码"><br>
<input type="text" placeholder="重复密码"><br>
<button>修改</button>
<script src="./js/axios.js"></script>
<script>
let ipts = document.querySelectorAll("input");
let btn = document.querySelector("button");
btn.onclick = () => {
if (ipts[2].value !== ipts[3].value) {
alert("新密码不一致")
return;
}
axios.post("/api/modify/pwd", {
user: ipts[0].value,
pwd: ipts[1].value,
newPwd: ipts[2].value,
}).then(result => {
if (result.data.code) {
location.href = "/"
} else {
alert("修改失败")
}
})
}
</script>
</body>
</html>//register.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="姓名"><br>
<input type="text" placeholder="密码"><br>
<input type="text" placeholder="重读密码"><br>
<input type="text" placeholder="手机号"><br>
<input type="text" placeholder="邮箱"><br>
<input type="text" placeholder="昵称"><br>
<input type="text" placeholder="生日"><br>
<button>注册</button>
<script src="js/axios.js"></script>
<script>
let ipts = document.querySelectorAll("input");
let btn = document.querySelector("button")
btn.onclick = () => {
// 验证
let regTel = /^1[3-9]\d{9}$/i
let regEmail = /^\w+@\w+\.(com|net|con)$/i
// if (!regTel.test(ipts[3].value)) {
// alert("手机不对")
// return;
// }
//
//
//
// if (!regEmail.test(ipts[4].value)) {
// alert("邮箱不对")
// return;
// }
if (ipts[1].value !== ipts[2].value) {
alert("两次密码你对")
return;
}
// 发送
axios.post("/api/register", {
"user": ipts[0].value,
"pwd": ipts[1].value,
"tel": ipts[3].value,
"email": ipts[4].value,
"nikename": ipts[5].value,
"birth": ipts[6].value,
"id": Math.random().toString().slice(2)
}).then(result => {
if (result.data.code) {
location.href = "/"
} else {
alert("注册失败")
}
})
}
</script>
</body>
</html>//user.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>
<p></p>
<a href="./modifyPwd.html">修改密码</a>
<script src="./js/axios.js"></script>
<script>
let id = localStorage.getItem("id");
let p =document.querySelectorAll("p");
axios.post("/api/user", {
id,
}).then(result => {
console.log(result.data)
p[0].innerHTML = result.data.user;
p[1].innerHTML = result.data.tel;
p[2].innerHTML = result.data.email;
p[3].innerHTML = result.data.birth;
p[4].innerHTML = result.data.nikename;
})
</script>
</body>
</html>//app.js文件代码
const express = require("express");
const app = express();
const fs = require("fs");
const loginRouter = require("./server/loginRouter")
const registerRouter = require("./server/registerRouter")
const modifyRouter = require("./server/modifyRouter")
app.listen(8080, () => console.log(8080))
app.get("/user", (req, res) => {
res.end(fs.readFileSync("public/user.html", "utf-8"))
})
app.get("/modifyPwd", (req, res) => {
res.end(fs.readFileSync("public/modifyPwd.html", "utf-8"))
})
app.get("/register", (req, res) => {
res.end(fs.readFileSync("public/register.html", "utf-8"))
})
app.use(express.static("public", { index: "login.html" }));
app.use(express.json())
app.use(modifyRouter)
app.use(registerRouter)
app.use(loginRouter) //data.js数据
const fs = require("fs")
const Mock = require("mockjs");
const data = Mock.mock({
"user|5": [{
"user": "@cname",
"pwd": "@word(6)",
"tel": /^1[3-9]\d{9}$/,
"email": /^\w+@\w+\.(com|net|con)$/,
"nikename": "@cname",
"birth": /19[2-9][0-9]-[1-9]-[1-9]/,
"id":"@id"
}]
})
fs.writeFileSync("user.json",JSON.stringify(data.user))//mock文件夹
//user.json文件数据代码
[{"user":"程伟","pwd":"icuwhc","tel":"15373557375","email":"b@p3P9k.net","nikename":"胡静","birth":"1985-5-2","id":"45000019870822844X"},{"user":"萧娜","pwd":"ollclj","tel":"16262848219","email":"y@Ts.com","nikename":"金杰","birth":"1951-4-6","id":"410000200307102515"},{"user":"汪娟","pwd":"klvjyq","tel":"16875373059","email":"unt@21G.con","nikename":"韩伟","birth":"1946-5-8","id":"650000200104201569"},{"user":"叶明","pwd":"qcaelr","tel":"18383653472","email":"ATDK@898hx.com","nikename":"谭刚","birth":"1956-8-5","id":"350000198611027760"},{"user":"吴平","pwd":"jlenec","tel":"17534722735","email":"dMQ7@GTPc.net","nikename":"谢刚","birth":"1973-5-7","id":"510000200601212444"},{"user":"123","pwd":"123","tel":"131111111","email":"123123@qq.com","nikename":"12312","birth":"123","id":"599168599934212"},{"user":"321","pwd":"123","tel":"13111111111","email":"123123@qq.com","nikename":"呵呵","birth":"99","id":"6568880182940922"}]//3个js文件都放在server文件夹里面
// loginRouter.js
//loginRouter.js文件代码
const express = require("express");
const router = express.Router();
const fs = require("fs");
module.exports = router;
// 登录
router.post("/api/login", (req, res) => {
// 获取用户 密码
let { user, pwd } = req.body;
// 异步读取数据
fs.readFile("mock/user.json", (err, data) => {
if (err) {
res.send({ code: 0 })
return;
}
// 转化JSON
data = JSON.parse(data);
// 判断是否存在
let obj = data.find(item => item.user === user && item.pwd === pwd)
// 返回
obj ? res.send({ code: 1, id: obj.id /**为了详情页跳转做准备 */ }) : res.send({ code: 0 })
})
})
// 获取用户数据
router.post("/api/user", (req, res) => {
// 获取id
let { id } = req.body;
// 异步读取文件
fs.readFile("mock/user.json", (err, data) => {
if (err) {
res.send({ code: 0 })
return;
}
// 转化JSON
data = JSON.parse(data);
// 通过ID 找用户
let obj = data.find(item => item.id === id)
// 返回
obj ? res.send(obj) : res.send({ code: 0 })
})
})//3个js文件都放在server文件夹里面
// modifyRouter.js
//modifyRouter.js文件代码
const { json } = require("express");
const express = require("express");
const router = express.Router();
const fs = require("fs");
module.exports = router;
router.post("/api/modify/pwd", (req, res) => {
// 获取 用户 密码 新密码
let { user, pwd, newPwd } = req.body;
// 度本地数据
let data = JSON.parse(fs.readFileSync("mock/user.json"))
// 判断账户面膜正确否
let obj = data.find(item => item.user === user && item.pwd === pwd);
if (obj) {
// 正确 修改密码
obj.pwd = newPwd;
// 更新本地数据
fs.writeFileSync("mock/user.json", JSON.stringify(data));
// 返回
res.send({ code:1 })
} else {
// 不正确 不能修改
res.send({ code: 0 })
}
})//3个js文件都放在server文件夹里面
// registerRouter.js
//registerRouter.js文件代码
const express = require("express");
const router = express.Router();
const fs = require("fs");
module.exports = router;
router.post("/api/register", (req, res) => {
let data = JSON.parse(fs.readFileSync("mock/user.json"))
data.push(req.body)
fs.writeFileSync("mock/user.json",JSON.stringify(data))
res.send({ code:1 })
})//3个js文件都放在server文件夹里面
// loginRouter.js1.0.0
3 years ago