Node+express,实现简单的静态登录注册功能。

文件目录

 

话不多说，上代码。

启动文件app.js代码块

const express = require("express");
const app = express();
const path = require("node:path");
const Umodel = require("./model/userModel.js");

app.use("/", express.static(path.join(__dirname, "public")));

//登录
app.use("/loginon",async (req,res)=>{
    let login = await Umodel.login(req.query);
    res.send(login);
});
//注册
app.use("/regiest",async (req,res)=>{
    let regiest = await Umodel.addUser(req.query);
    res.send(regiest);
});
//列表
app.use("/userlist",async (req,res)=>{
    let userlist = await Umodel.getUserlist(req.query);
    res.send(userlist);
});

app.listen(1111, () => {
    console.log('服务启动', 'localhost:1111')
});

业务层功能模块

const { dataTool } = require("echarts");
const fs=require("node:fs/promises");
const path=require("node:path");
class UserModel{
    constructor(){
        this.filePath=path.join(__dirname,"../","./json/user.json");
    }
    //读静态资源文件的方法
    async readFileByPath(fileName){
        return await fs.readFile(path.join(__dirname,"../public",fileName),"utf-8");
    }
    //读JSON文件
    async readJSONByFile(){
        return await fs.readFile(this.filePath,"utf-8");
    }
    //写JSON文件
    writeJSONToFile(data){
        fs.writeFile(this.filePath,JSON.stringify(data));
    }
    //获取用户列表数据
    async getUserlist(){
        return JSON.parse(await this.readJSONByFile());
    }
    //登录功能
    /**
     * user={username,pwd}
    */
    async login(user){
        let userlist=await this.getUserlist();
        if(userlist.find(item=>item.username===user.username&&item.pwd===user.pwd)){
            return {code:200,msg:"登录成功！"};
        }else{
            return {code:201,msg:"登录失败！用户名或密码错误"};
        }
    }
    //注册功能
    /**
     * user={username,pwd}
    */
    async addUser({username,pwd}){
        //校验有效性
        if(this.checkData(username)||this.checkData(pwd)){
            return {code:201,msg:"用户名或密码无效，请检查！"}
        }else{
            let userlist=await this.getUserlist();
            //校验重名
            if(userlist.find(item=>item.username===username)){
                return {code:201,msg:"用户名已存在，请检查！"};
            }else{
                let newUser={
                    userid:userlist.at(-1).userid*1+1,
                    username,
                    pwd,
                    isadmin:"0"
                }
                userlist.push(newUser);
                try{
                    this.writeJSONToFile(userlist);
                    return {code:200,msg:"注册成功！"};
                }catch(e){
                    console.log(`写文件出错:${e.message}`);
                    return {code:201,msg:"注册失败！"};
                }
            }
        }
    }

    //校验数据有效性方法
    checkData(param){
        let dataArr=["undefined",undefined,"","null",null];
        return dataArr.includes(param);
    }
}

module.exports=new UserModel;

index.js模块

import "/js/jquery.min.js";
$("#login_btn").on("click",async()=>{
    let user={
        "username":$("#username").val(),
        "pwd":$("#pwd").val(),
    }
    let {code,msg}=await $.get("/loginon",user);
    alert(msg);
    if(code===200){
        location.href="/html/userlist.html";
    }
});

$("#reg_btn").on("click",async()=>{
    let user={
        "username":$("#username").val(),
        "pwd":$("#pwd").val(),
    }
    let {code,msg}=await $.get("/regiest",user);
    alert(msg);
    if(code===200){
        location.reload();//刷新当前页
    }
});

userlist.js模块

import "/js/jquery.min.js";
{
    //Jquery的预加载
    let data = await $.get("/userlist");
    drawUserTable(data);
}
//渲染用户列表方法
function drawUserTable(userlist) {
    let tbText = "";
    for (let item of userlist) {
        tbText += `<tr>
            <td>${item.userid}</td>
            <td>${item.username}</td>
            <td>${item.pwd}</td>
            <td>${item.isadmin * 1 === 1 ? '管理员' : '普通用户'}</td>
            <td>
                <button class="update">修改</button>
                <button class="del">删除</button>
            </td>
        </tr>`
    }
    $("#userlist_text").html(tbText);
};