1.0.1 • Published 3 years ago
ex-demo v1.0.1
//app.js代码
const { randomBytes } = require("crypto");
const express = require("express");
const app = express();
const fs = require("fs");
const loginRouter = require("./server/loginRouter");
global.code = null;
app.listen(8080, (() => console.log(8080)));
app.use(express.static("public", { index: "login.html" }));
app.use(express.json());
app.use(loginRouter)
app.post("/api/getCode", (req, res) => {
global.code = Math.random().toString().slice(2, 6);
res.send(global.code)
})
app.get("/api/list", (req, res) => {
res.send(fs.readFileSync("mock/list.json"))
})
app.post("/api/add", (req, res) => {
let data = JSON.parse(fs.readFileSync("mock/list.json"));
data.push(req.body);
fs.writeFileSync("mock/list.json", JSON.stringify(data))
res.send({ code: 1 })
})//loginRouter.js代码
const express = require("express");
const router = express.Router();
const fs = require("fs");
module.exports = router;
router.post("/api/login", (req, res) => {
let { tel, telCode } = req.body;
let data = JSON.parse(fs.readFileSync("mock/user.json"));
if (telCode === global.code) {
let isExit = data.some(item => item.tel === tel);
if (isExit) {
res.send({ code: 1 })
} else {
data.push({
id: Math.random().toString().slice(2),
tel,
})
fs.writeFileSync("mock/user.json", JSON.stringify(data))
res.send({ code: 1 })
}
} else {
res.send({
code: 0
})
}
})//add.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="标题" id="title">
<input type="date" id="time">
<button id="add">新增</button>
<script src="./js/axios.js"></script>
<script>
add.onclick = () => {
axios.post("/api/add", {
url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
title: title.value,
time: time.value,
id: Math.random().toString().slice(2)
}).then(result => {
if (result.data.code) location.href = "/list.html"
})
}
</script>
</body>
</html>//list.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>
<style>
dl {
display: flex;
}
img{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="" id="app">
<div class="content">
<dl>
<dd>
<p>
标题
</p>
<p>事件</p>
</dd>
<dt>
<img src="" alt="">
</dt>
</dl>
</div>
<a href="add.html">添加文章</a>
</div>
<script src="./js/axios.js"></script>
<script src="./js/list.js"></script>
</body>
</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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<h2>登录</h2>
<p> <input type="text" placeholder="手机号" class="tel"></p>
<p> <input type="text" placeholder="手机验证码" class="telCode"><button class="getTelCode">获取验证码</button></p>
<p> <input type="text" placeholder="随机验证码" class="symCode"><b class="getSymCode">1234</b></p>
<p> <button class="btn">登录</button></p>
</div>
<script src="./js/axios.js"></script>
<script src="./js/login.js"></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>
<input type="text">
<button>修改</button>
<script src="./js/axios.js"></script>
<script>
let ipt = document.querySelector("input"),
btn = document.querySelector("button");
ipt.value = localStorage.getItem("title")
btn.onclick = () => {
axios.post("/api/modify", {
title: ipt.value,
id:localStorage.getItem("id")
}).then(result => {
if (result.data.code) location.href = "/list"
})
}
</script>
</body>
</html>//mock 里面的数据
//data.js
const Mock = require("mockjs");
const fs = require("fs");
const data = Mock.mock({
"user|5": [{
tel: /^1[3-9]\d{9}$/,
"id": "@id"
}],
"list": [{
url: "@image(200x100,@color)",
title: "@ctitle",
time: "@datetime",
id: "@id"
}]
})
fs.writeFileSync("user.json", JSON.stringify(data.user))
fs.writeFileSync("list.json", JSON.stringify(data.list))//mock 里面的数据
//list.json
[{"url":"http://dummyimage.com/200x100/f2a179","title":"青天半大果","time":"2017-08-07 22:35:02","id":"350000200202081934"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"2020-11-05","id":"36076448144793116"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"12929755956115252"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"7170993757185511"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"15695783432669042"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"8300816171063525"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"18186722049903037"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"张三","time":"2020-11-25","id":"9330177857532798"},{"url":"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png","title":"123","time":"","id":"013775729176790819"}]//mock 里面的数据
//user.json数据
[{"tel":"14786646425","id":"130000200807308360"},{"tel":"19453217707","id":"440000200512103280"},{"tel":"17962922164","id":"140000197908024487"},{"tel":"14525833893","id":"710000198411030348"},{"tel":"14235342239","id":"990000197101172866"},{"id":"3035720656692815","tel":"13171996138"}]