ty-demo1-ty v1.0.0

router login && register

 !!app.js
//引入模块
const express = require("express");
const app = express();
//引入路由
const LoginRouter = require("./server/login");
const RegisterRouter = require("./server/register");
const IndexRouter = require("./server/index");
//开启服务器
app.listen(8080, () => console.log("服务器在8080端口启动ing"));
//设置静态目录
app.use(express.static("public", {
    //设置默认页面
    index: "login.html"
}));
//处理json数据
app.use(express.json());
//调用路由
app.use(LoginRouter);
app.use(RegisterRouter);
app.use(IndexRouter);

!!server index.js
//引入模块
const fs = require("fs");
const express = require("express");
const router = express.Router();

//接受请求发送数据库的数据
router.get("/api/render", (req, res) => {
    res.send(JSON.parse(fs.readFileSync("mock/user.json")));
});
//抛出
module.exports = router;

!!server login.js
//引入模块
const fs = require("fs");
const express = require("express");
const router = express.Router();
//封装Promise异步读取方法
const FileRead = dirname => {
    return new Promise((resolve, rejects) => {
        fs.readFile(dirname, "utf-8", (err, data) => {
            if (err) {
                rejects(err);
                return;
            }
            resolve(JSON.parse(data));
        });
    });
}
//处理接口
router.post("/api/login", (req, res) => {
    let { username, password } = req.body;
    FileRead("mock/user.json").then(data => {
        //判断前端数据和数据库是否一致
        let flag = data.some(item => item.username === username && item.password === password);
        if (flag) {
            res.send({
                code: 1,
                mess: "登录成功"
            });
        } else {
            res.send({
                code: 0,
                mess: "用户名密码错误，请重新输入"
            });
        }
    });
});
//抛出
module.exports = router;

!!server register
//引入模块
const fs = require("fs");
const express = require("express");
const router = express.Router();
//封装Promise异步读取方法
const FileRead = dirname => {
    return new Promise((resolve, rejects) => {
        fs.readFile(dirname, "utf-8", (err, data) => {
            if (err) {
                rejects(err);
                return;
            }
            resolve(JSON.parse(data));
        });
    });
}
//处理接口
router.post("/api/register", (req, res) => {
    let { username, password } = req.body;
    FileRead("mock/user.json").then(data => {
        let flag = data.some(item => item.username === username);
        if (flag) {
            res.send({
                code: 0,
                mess: "用户名已存在，请重新输入"
            });
        } else {
            data.push(req.body);
            fs.writeFileSync("mock/user.json", JSON.stringify(data));
            res.send({
                code: 1,
                mess: "用户注册成功，请登录"
            });
        }
    });
});
//抛出
module.exports = router;

!!index.html
    <div class="homePage">
        <h2 class="title">欢迎xxx来到用户表单</h2>
        <ul class="list">
            <li>xxxxxx</li>
            <li>xxxxxx</li>
            <li>xxxxxx</li>
            <li>xxxxxx</li>
            <li>xxxxxx</li>
            <li>xxxxxx</li>
            <li>xxxxxx</li>
        </ul>
    </div>
    <script src="./js/axios.js"></script>
    <script>
        const $ = selector => typeof selector === "string" ? document.querySelector(selector) : selector;
        //获取本地存储的数据
        let user = localStorage.getItem("token");
        //渲染到标题里
        $(".title").innerHTML = `欢迎${user}来到用户表单`;
        //发送请求获取数据渲染到列表里
        axios.get("/api/render").then(result => {
            $(".list").innerHTML = result.data.map(item => {
                return ` <li>${item.username}</li>`;
            }).join("");
        });
    </script>

!!login.html
<div class="loginWrapper">
        <h2>欢迎来到网站博客</h2>
        <input type="text" placeholder="用户名" class="username">
        <input type="password" placeholder="密码" class="password">
        <button class="login">登录</button>
        <a href="./register.html">还没账号？去注册</a>
    </div>
    <script src="./js/axios.js"></script>
    <script>
        const $ = selector => typeof selector === "string" ? document.querySelector(selector) : selector;
        //给登录按钮添加点击事件
        $(".login").addEventListener("click", () => {
            //判断输入框里是否输入内容
            if ($(".username").value === "" && $(".password").value === "") {
                alert("请输入用户名密码");
                return;
            } else {
                //发送post请求
                axios.post("/api/login", {
                    username: $(".username").value,
                    password: $(".password").value
                }).then(result => {
                    let {
                        code,
                        mess
                    } = result.data;
                    if (code) {
                        alert(mess);
                        localStorage.setItem("token", $(".username").value);
                        location.href = "index.html";
                    } else {
                        alert(mess);
                    }
                });
            }
        });
    </script>

!!register.html
 <div class="registerWrapper">
        <h2>欢迎来到网站博客</h2>
        <input type="text" placeholder="用户名" class="username">
        <input type="password" placeholder="密码" class="password">
        <input type="text" placeholder="昵称" class="name">
        <button class="register">注册</button>
        <a href="./login.html">已有账号？去登录</a>
    </div>
    <script src="./js/axios.js"></script>
    <script>
        const $ = selector => typeof selector === "string" ? document.querySelector(selector) : selector;
        //给注册按钮添加点击事件
        $(".register").addEventListener("click", () => {
            //判断输入框里是否输入内容
            if ($(".username").value === "" && $(".password").value === "") {
                alert("请输入用户名密码");
                return;
            } else {
                //发送post请求
                axios.post("/api/register", {
                    username: $(".username").value,
                    password: $(".password").value
                }).then(result => {
                    let {code,mess } = result.data;
                    if (code) {
                        alert(mess);
                    } else {
                        alert(mess);
                    }
                });
            }
        });
    </script>