版权声明：本文为博主原创文章，喜欢的话，可以通知我后进行转载哦！ https://blog.csdn.net/maidu_xbd/article/details/87607665
今天有空总结下之前学习的express实现的后台管理员登录功能。其中主要涉及到获取请求数据、读取cookie/session、consolidate模板引擎配置、router配置、模块、数据库连接等。
一、主要知识点使用介绍
1.获取请求数据
body-parser 解析post数据 application/x-www-form-urlencoded
multer 解析post文件 multipart/form-data
server.use(bodyParser.urlencoded());
var multerObj = multer({ dest: '/static/uoload' });
server.use(multerObj.any());2.cookie/session
cookie/session介绍见https://blog.csdn.net/maidu_xbd/article/details/86645359
server.use(cookieParser());
(function () {
var keys = [];
for (var i = 0; i < 10000; i++) {
keys[i] = 'keys_' + Math.random();
}
server.use(cookieSession({
name: 'buding',
keys: keys,
maxAge: 20 * 60 * 1000
}));
})();3.模板引擎consolidate、router配置
https://blog.csdn.net/maidu_xbd/article/details/86743156
//配置模板引擎
server.set('views', 'templates');
server.set('view engine', 'html');
server.engine('html', consolidate.ejs);
//route
server.use('/admin/', require('./route/admin/index.js')());
server.use('/', require('./route/web/web.js')());4..模块
require——引入其他模块
exports——输出
module——批量输出
https://blog.csdn.net/maidu_xbd/article/details/86623426
5.数据库连接
https://blog.csdn.net/maidu_xbd/article/details/86681817
const mysql = require('mysql');
//连接数据库
var db = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
database: '20190202_admin'
});二、登录功能实现
首先，搭好前台界面（web页面）和后台管理界面（admin页面）的框架，总的分为两条访问路径进行网页请求。
建立好相应的目录和文件如下：
思路：
（1）当请求url为“/admin”时，则先必须进行管理员登录，才能进入后台管理系统
（2）当请求url为“/”时,则进入前台界面
路由配置如下：
//route
server.use('/admin/', require('./route/admin/index.js')());
server.use('/', require('./route/web/web.js')());
在server.js中搭好基本的框架，完整代码如下：
const express = require('express');
const expressStatic = require('express-static');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');
const multer = require('multer');
const mysql = require('mysql');
const consolidate = require('consolidate');
const expressRoute = require('express-route');
var server = express();
server.listen(8080);
console.log('http://localhost:8080');
//获取请求数据
server.use(bodyParser.urlencoded());
var multerObj = multer({ dest: '/static/uoload' });
server.use(multerObj.any());
//cookie、session
server.use(cookieParser());
(function () {
var keys = [];
for (var i = 0; i < 10000; i++) {
keys[i] = 'keys_' + Math.random();
}
server.use(cookieSession({
name: 'buding',
keys: keys,
maxAge: 20 * 60 * 1000
}));
})();
//配置模板引擎
server.set('views', 'templates');
server.set('view engine', 'html');
server.engine('html', consolidate.ejs);
//route
server.use('/admin/', require('./route/admin/index.js')());
server.use('/', require('./route/web/web.js')());
//读取静态文件
server.use(expressStatic('/static/'));1.web页面
当请求url为“/”时,则引入'./route/web/web.js'模块
web.js代码如下：
const express = require('express');
const expressRoute = require('express-route');
module.exports = function () {
var router = express.Router();
router.get('/', (req, res) => {
res.render('./web/web.ejs', {});
})
return router;
}调用res.render，渲染./web/web.ejs，生成对应的html页面
web.ejs代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
web页面
</body>
</html>测试结果如下：
2.admin页面
当请求url为“/admin”时,则引入'./route/admin/index.js'模块
index.js代码如下：
const express = require('express');
const expressRoute = require('express-route');
module.exports = function () {
var router = express.Router();
//检查登录状态
router.use('/', (req, res, next) => {
if (!req.session['admin_id'] && req.url != '/login') {//没有登录
res.redirect('/admin/login');
} else {
next();
}
});
router.get('/', (req, res) => {
res.render('./admin/index.ejs', {});
})
router.use('/login', require('./login.js')());
return router;
}首先检查是否登录：
检查登录状态的条件是否存在'admin_id'的session和请求url是否为'/login'，
如果不存在'admin_id'的session，并且请求url不是'/login'，则为未登录状态,否则为已登录状态。
（1）已登录时：调用res.render渲染'./admin/index.ejs'，生成对应的html页面。
index.ejs代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
admin页面
</body>
</html>（2）未登录时：则强制重定向到登录界面，进入‘/admin/login’,则引入'./login.js'模块，处理登录的逻辑。首先渲染登录页面，再获取前台post数据，并将登录的数据和数据库中的数据进行校验。
login.js代码如下：
const express = require('express');
const expressRoute = require('express-route');
const mysql = require('mysql');
//连接数据库
var db = mysql.createPool({ host: 'localhost', user: 'root', password: '123456', database: '20190202_admin' });
module.exports = function () {
var router = express.Router();
//1.渲染页面
router.get('/', (req, res) => {
res.render('./admin/login.ejs', {});
})
//2.获得前台post数据
router.post('/', (req, res) => {
var username = req.body.username;
var password = req.body.password;
//3.登录信息与数据库信息校验
db.query(`select * from admin_table where username='${username}'`, (err, data) => {
if (err) {
console.error(err);
res.status(500).send('数据库错误').end();
} else {
if (data.length == 0) {
res.status(400).send('该用户不存在').end();
} else {
if (data[0].password == password) {
req.session['admin_id'] = data[0].id;
res.redirect('/admin');
} else {
res.status(400).send('您输入的密码错误').end();
}
}
}
});
});
return router;
}login.ejs代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>admin登录</title>
</head>
<body>
<div class="login">
<form action="/admin/login" method="POST">
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>测试结果如下:
