1.0.4 • Published 3 years ago
su-simima v1.0.4
//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>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: url(./1.png);
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
input {
width: 250px;
height: 50px;
margin: 10px 0;
background: rgba(0, 0, 0, .7);
border: none;
}
</style>
</head>
<body>
<div>
<input type="text" class="username" placeholder="账号">
<input type="password" class="password" placeholder="密码">
<button class="btn">登录</button>
<button class="zc">注册</button>
</div>
<script src="./js/axios.js"></script>
<script>
const username = document.querySelector(".username");
const password = document.querySelector(".password");
const btn = document.querySelector(".btn")
const zc = document.querySelector(".zc")
btn.onclick = () => {
axios.post("/api/login", {
username: username.value,
password: password.value
}).then(result => {
if (result.data.code) {
location.href = "index.html"
} else {
alert("登录失败")
}
})
}
zc.onclick = () => {
location.href = "http://localhost:8880/resg.html"
}
</script>
</body>
</html>
resg.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" class="username" placeholder="账号">
<input type="password" placeholder="密码" class="password">
<input type="password" placeholder="密码" class="conpassword">
<button class="sub">提交</button>
<button class="can">取消</button>
<script src="./js/axios.js"></script>
<script>
let username = document.querySelector(".username");
let password = document.querySelector(".password")
let conpassword = document.querySelector(".conpassword");
let sub = document.querySelector(".sub");
let can = document.querySelector(".can");
sub.onclick = () => {
if (password.value === conpassword.value) {
axios.post("/api/resg", {
username: username.value,
password: password.value
}).then(result => {
if (result.data) {
//返回到登录界面
location.href = "http://localhost:8880/login.html"
} else {
alert("其账号已被注册")
}
})
} else {
alert("您俩边密码不一样")
}
}
can.onclick = () => {
location.href = "http://localhost:8880/login.html"
}
</script>
</body>
</html>
app
const express = require("express");
const app = express();
const Listrouter = require("./server/list")
const Listss = require("./server/login")
const resg = require("./server/resg")
app.listen(8880, () => {
console.log("启动")
})
app.use(express.json())
app.use(express.static("public", { index: "login.html" }))
app.use(Listrouter)
app.use(Listss)
app.use(resg)
login.js
const express = require("express");
const router = express.Router();
const fs = require("fs")
router.post("/api/login", (req, res) => {
let data = JSON.parse(fs.readFileSync("mock/data.json"));
let { username, password } = req.body;
let flag = data.some(item => {
return item.username === username && item.password === password
})
if (flag) {
res.send({ code: 1 })
} else {
res.send({ code: 0 })
}
})
module.exports = router
resg.js
const { response } = require("express");
const express = require("express");
const router = express.Router();
const fs = require("fs")
router.post("/api/resg", (req, res) => {
let { username, password } = req.body;
let date = require("../mock/data.json");
//判断是否重合
let flag = date.some(item => item.username === username);
if (flag) {
res.end("0");
} else {
//传入数据
let datearr = JSON.parse(fs.readFileSync("./mock/data.json"));
datearr.push(req.body);
fs.writeFileSync("./mock/data.json", JSON.stringify(datearr))
res.end("1")
}
})
module.exports = router
list.js
const express = require("express");
const router = express.Router()
router.use("/api/list", (req, res) => {
res.send("沈洪帅必末班")
})
module.exports = router