node.js从零开发企业级后台管理

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

小伙伴们好，我是一个普通本科毕业计算机专业的大四在校生，我想给大家分享一下我学习node.js并用node开发一个后台管理系统，这是对自己学习成功的检验，同时我也是想把这一份学习的热情带给大家，希望初学者能从我的这几行菜鸟代码学到一点知识

废话不多说，我们直接开始吧

Express Cms 项目以及框架搭建

1.首先我们需要连接数据库，这里我使用mongodb，1.安装mongoose（cnpm i mongoose --save） 2.在model文件夹里面新建core.js 用于连接数据库

core.js

//这个模块实现的功能是连接数据库

//1.导入模块mongoose
const mongoose = require('mongoose'); //cnpm i mongoose --save  操作数据库

//2.调用mongoose连接数据库  第二个参数可以消除连接数据库的警告错误，不加都无所谓只是看着舒服一点   第三个参数可以监听数据库有没有连接成功
mongoose.connect('mongodb://127.0.0.1:27017/eggcms', { useNewUrlParser: true } ,function(err){
    if(err) {
        console.log(err);
        return
    }
    console.log("数据库连接成功");
});

module.exports=mongoose;

这里我们还是吧数据库连接地址写在外面用config.js配置

3.在项目里面新建config->config.js

var app={
    "dbUrl": "mongodb://127.0.0.1:27017/express_cms"
}
module.exports=app;//暴露

然后在core.js里面引入 const config = require("../config/config") ，把之前写的固定地址改成 config.dbUrl 像这样

//这个模块实现的功能是连接数据库

//1.导入模块mongoose
const mongoose = require('mongoose'); //cnpm i mongoose --save  操作数据库
const config = require("../config/config") //引入配置的地址文件

//2.调用mongoose连接数据库  第二个参数可以消除连接数据库的警告错误，不加都无所谓只是看着舒服一点   第三个参数可以监听数据库有没有连接成功
mongoose.connect(config.dbUrl, { useNewUrlParser: true } ,function(err){
    if(err) {
        console.log(err);
        return
    }
    console.log("数据库连接成功");
});

module.exports=mongoose;

4.在model文件夹里面创建managerModel.js,这里要说一下，不懂mongoose怎么操作的去看一下我第一篇入坑文章，里面有详细讲解mongoose操作,里面的配置如下

managerModel.js

const mongoose = require('./core.js')

let ManagerSchema = mongoose.Schema({
    username: { type: String },
    password: { type: String },
    email: { type: String },
    mobile: { type: String },
    status: { type: Number, default: 1 },
    login_time: {
        type: Number
    },
    add_time: {
        type: Number
    },
})

5.创建好后配置manager的路由，前端的路由和后端的路由是不同的，这里需要好好琢磨一下，由于manager是admin下的子页面，所有manager路由要配置在admin.js代码里面

//引入模块
const express = require('express'); //引入express框架 cnpm install express --save安装
const manager = require("./admin/manager")

//实例化
const router = express.Router()


//配置路由
router.get("/", (req, res)=> {
    res.send("后台管理中心")
})

//配置引入模块路由 挂载路由
router.use("/manager",manager)


module.exports = router

暴露出去后在app.js里面写配置admin路由和这里的方式是一样的

6.查询manager表

这里我们利用mongoose在表里面已经添加了数据，就不多解释了，查询数据可以用es7的async await

//引入模块
const express = require('express'); //引入express框架 cnpm install express --save安装
const ManagerModel = require("../../model/managerModel")
//实例化
const router = express.Router()

//配置路由
router.get("/", async (req, res)=> {
    let result = await ManagerModel.find({})
    console.log(result);
    res.send("管理员页面")
})
router.get("/add", (req, res)=> {
    var result = new ManagerModel({
        username:"张三",
        password:"123456"
    })
    result.save((err)=>{
        if(err){
            console.log(err);
            return
        }
        console.log("添加管理员成功");
    })
    res.send("添加管理员界面")
})

module.exports = router

7.在开发工具里面配置Eslint（其实没必要安装，完全没用全是报错影响心情）

是因为配置eslint可以严格规范你的代码书写

首先全局安装（cnpm install -g eslint） 然后在代码项目里面 eslint --init 之后根据选项选择安装的eslint的要求，然后yes安装 如果安装失败就 cnpm i eslint@latest --save-dev 安装一遍,但是如果是初学者写代码的话，我认为

开始制作！！

这里我讲的非常的乱，希望大家看到不要打我

安装图形验证码

1.安装 cnpm install --save svg-captcha 2.在login.js文件中写入

var svgCaptcha = require('svg-captcha') //引入图形验证码

router.get('/verify',(req, res)=>{
    var captcha = svgCaptcha.create();
    // req.session.captcha = captcha.text;

    res.type('svg');
    res.status(200).send(captcha.data)
})

3.在login.html文件中引入

局部刷新

你们会发现，当你在首页把导航页面折叠起来的时候，点击其他页面会全部重新刷新，这就需要用到局部刷新的方法

1.使用iframe

用户登录

1.配置session验证验证码 安装（cnpm install express-session）

2.在app.js中引入（const session = require("express-session"); ）

3.配置session中间件

//配置session中间件
app.use(session({ //配置session中间件
    secret: 'this is session',//服务器端生成 session 的签名
    name:"leilei", //修改session对应的cookies的名称
    resave: false,  //强制存储session 即使它并没有变化
    saveUninitialized: true,//强制将未初始化的 session 存储
    cookie: {
        maxAge:1000*60*60,
        secure: false, //true表示只有https协议才能访问cookie
    },
    rolling:true, //用户重新访问时续期 
}))

4.将session存储到session里边，

router.get('/verify',(req, res)=>{
    var captcha = svgCaptcha.create();
    req.session.captcha = captcha.text;//1.吧验证码保存到session里面

    res.type('svg');
    res.status(200).send(captcha.data)
})

5.获取表单传过来的数据

const bodyParser = require('body-parser'); //引入第三方中间件  （cnpm install body-parser安装） 用于接受表单post过来的数据

app.use(bodyParser.urlencoded({extended: false}))//配置第三方中间件 获取post传递的数据
app.use(bodyParser.json())

6.post请求

router.post("/dologin", (req, res)=> {
    let username = req.body.username;
    let password = req.body.password;
    let verify = req.body.verify;

    //1.判断验证码是否正确
    //2.判断用户输入的账号密码是否正确
    if(verify.toLocaleLowerCase() != req.session.captcha.toLocaleLowerCase()){
        res.send("验证码错误")
        return;
    }
    res.send("验证成功，执行登录")
})

7.验证码校验：

router.post("/dologin", (req, res)=> {
    let username = req.body.username;
    let password = req.body.password;
    let verify = req.body.verify;

    //1.判断验证码是否正确
    //2.判断用户输入的账号密码是否正确
    if(verify.toLocaleLowerCase() != req.session.captcha.toLocaleLowerCase()){
        res.render("admin/public/error.html",{
            "redirectUrl":"/admin/login",
            "message":"验证码验证失败"
        })
        return;
    }
    //验证成功
    res.render("admin/public/success.html",{
        "redirectUrl":"/admin",
        "message":"验证码验证成功"
    })
})

后台管理的登录功能，权限验证，md5加密

1.首先在login页面引入managerModel模块，然后根据之前mongoose的存储username,和password

const ManagerModel = require("../../model/managerModel") //引入managerModel模块

router.get("/", async(req, res)=> {
    let result = new ManagerModel({
        username:"admin",
        password:"123456"
    })
    await result.save();
    res.render("admin/login/login.html")
})

2.安装cmd5加密功能npm istall md5 --save，然后引入使用

const ManagerModel = require("../../model/managerModel") //引入managerModel模块

router.get("/", async(req, res)=> {
    let result = new ManagerModel({
        username:"admin",
        password:md5("123456")
    })
    await result.save();
    res.render("admin/login/login.html")
})

3.权限认证

router.post("/dologin", async (req, res) => {
    //获取表单传过来的数据
    let username = req.body.username;
    let password = req.body.password;
    let verify = req.body.verify;

    //1.判断验证码是否正确
    if (verify.toLocaleLowerCase() != req.session.captcha.toLocaleLowerCase()) {
        res.render("admin/public/error.html", {
            "redirectUrl": "/admin/login",
            "message": "验证码验证失败"
        })
        return;
    }
    //2.判断用户输入的账号密码是否正确
    let result = await ManagerModel.find({ "username": username, "password": md5(password) })
    if (result.length > 0) {
        //保存用户信息至session
        req.session.userinfo = result[0] //result是一个数组
        //验证成功
        res.render("admin/public/success.html", {
            "redirectUrl": "/admin",
            "message": "登录成功"
        })
    } else {
        //验证失败
        res.render("admin/public/error.html", {
            "redirectUrl": "/admin/login",
            "message": "用户名或密码错误失败"
        })
    }

})

好记得我们在登录的时候吧用户账号密码存入session里面了吗，在用户访问admin页面的时候，我们做一个判断，如果session存在，用户可以访问，如果不存在，则跳转到登录页面

const url = require('url')//对url进行解析

router.use((req, res, next) => {
    // console.log(req.url);
    var pathname = url.parse(req.url).pathname //用于防止死循环
    console.log(pathname);
    if (req.session.userinfo && req.session.userinfo.username) {
        //向下执行
        next();
    } else {
        //防止循环
        if (pathname == "/login" || pathname == "/login/doLogin" || pathname == "/login/verify") {
            next();
        } else {
            res.redirect("/admin/login")
        }

    }
})

管理员的增删改查

1.退出登录 在公共部分mian/index.html 里面

<li><a href="/admin/login/loginOut">安全退出</a>

然后

//退出登录
router.get('/loginOut', (req, res) => {
    req.session.userinfo = null; //消除session
    res.redirect("/admin/login")
})