用express搭建一个简单的后台管理系统1

记录一下我搭建过程中遇到的坑，方便大家总结学习，先看基本效果

1：先安装express
cnpm install express -D
2:启动项目
我安装了nodemon 方便启动不需要重启服务
cnpm install nodemon -D
3:安装了ejs模板引擎，方便渲染页面
cnpm install ejs -D
4:安装了body-parser 解析表单提交的数据
cnpm install body-parser -D
好 先启动项目再说吧
npm start

const  express =require('express');
const  app = express();
const  ejs = require('ejs');
//解析post提交的数据 
const  bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//静态文件服务  容易出错2  是express 
app.use(express.static('public'));

//注意这里是字符串   容易出错1 
app.set("view engine",'ejs');

app.all("/",(req,res)=>{
	res.send("index")
});

app.all("/login",(req,res)=>{
	res.render("login");  //用login.ejs这个模板渲染页面
	//res.send("login")
});

效果图

接下里写login登录页面的逻辑

打红色的地方是必须要注意的地方，（views，文件路径，methods为post，表单name不能少）
这里使用了内置的文件静态服务中间件，所以路径可以直接用，我这里暴露了public这个文件夹，代码如下

//静态文件服务  容易出错2  是express 
app.use(express.static('public'));

接下来实现doLogin里面的具体实现，代码如下
（大概思路是先获取前台提交的数据，然后连接数据库，查询数据匹配，查询到了就页面跳转，并且吧用户名提交传过去，方便其他页面展示，查询不到就直接返回到login页面,这里我安装的是mongoDb数据库，具体安装百度很简单）
上代码，先安装mongoDb，再在mongodb安装引入驱动包（推荐1个有用的官方地址，npm===>[https://www.npmjs.com/package/mongodb] ）

cnpm  install  mongodb -D 
const  mongodb = require('mongodb')
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017/dongdong';

ps:我的数据是dongdong，需要先连接数据库，建立连接后创建表才可以后续使用，具体如下：提供几个有用的mongoDb命令
添加系统环境变量 (把mongoDb的bin路径添加到最后)

//mongoDb 数据库安装 不要勾选compass 切记//
1：启动服务
2：进入命令行cmd====> mongo
先连接--mongodb://localhost
3：切换创建/进入 use  dongdong
show  dbs //查询所有数据库
进入数据库  创建一个表user  插入一条数据 
use dongdong  //切换进入数据库
db.user.insert({username:"admin",pwd:"123456",status:1})//插入一个数据
show collections //查询所有表 
查询user表的详细内容
db.user.find()；

插入数据成功后来做后续的验证

//表单提交的后台接口
app.all('/doLogin',(req,res)=>{
	let username = req.body.username;
	let password = req.body.pwd;
	console.log(`${username}---${password}`);
	//var body= { 'username': 'admin', 'pwd': '123456' };
	console.log(req.body);//{ username: 'admin', pwd: '123456' }
	
	//数据库操作 
	MongoClient.connect(url,(err,client)=>{
		if(err){
			console.log(err);
			return;
		}	
		//查询数据
		var db = client.db('dongdong');  //3.0 写法 链接数据库
		var result=db.collection('user').find(req.body);  //3.0 写法 查询所有数据
                ************ps:注意3.0的数据库查询 写法不一样了哦**********
		/*法1toArray  */
		 result.toArray((err,data)=>{
		 	//console.log(data);
		 	if(data.length>0){
		 		//console.log(data);
		 		console.log("登录成功");
		 		req.session.userinfo= data[0];//存储session方便传值后面显示
		 		console.log(data[0]);
		 		res.redirect("/productList");
		 	}else{
		 		console.log("登录失败");
		 		res.send("<script>alert('登录失败');location.href='/login'</script>")
		 	}
		 	
		 });

		/* 法2  循环
		let  list=[];
		result.each((err,doc)=>{
			if(err){
				console.log(err)
			}else{
				if(doc!=null){
					list.push(doc)
				}else{
					console.log(list)
					db.close()
				}
			}
		});
		*/
		
	})
	
});

这样就只有登录的用户admin/123456才可以进入到后续的页面

这个时候又出现一个问题？
没有登录后的用户，也可以访问我们的后台地址，[http://localhost:3333/productList]，这个肯定要判断的，不然随便都可以使用我们的后面界面了，所以这里再用session来做这个判断~~~这里用官方的express-session

const session = require("express-session");
//设置cookie参数
app.use(session({
  secret: 'keyboard cat',//加密方式 一个签名的字符串
  resave: false, /*强制保存他即使他没有变化 推荐false*/
  saveUninitialized: true, /*强制没有初时会的session存储，默认true，推荐true*/
  cookie: { maxAge: 30*60*1000 }, //不操作关闭页面，这个时间后也会过期
  rolling:true //最后一次操作页面后记录cookie，后续过期时间记录， 每次请求后强行设置cookie，重置cookie的过期时间（重要）
//store:new mongoStore({   //保存到数据库，暂时不需要
//  		url:'mongodb://127.0.0.1:3306/student',//数据库地址
//  		touchAfter:30*60*1000  //过期时间
//  });
}))

//必须放在上面 否则不生效 ,我在这里折腾了很久老是不生效，原来没有匹配到 
app.use((req,res,next)=>{   //请求之前的中间件
	console.log(req.url);
	let visUrl = req.url;
	//通过session来做  然后login页个访问接口不需要判断
	if(visUrl == "/login" || visUrl == "/doLogin"){
		next();  //不需要校验 
	}else{
		if(req.session.userinfo && req.session.userinfo.username !=''){
			console.log("======"+session.userinfo);
			next();
		}else{
			res.redirect('/login');
		}
	}
});

效果1

当用户登录进入后，我们发现所有页面都需要一个欢迎xxx，这个时候就用ejs的app.locals[‘userinfo’]来实现
具体如下

                         //ejs 全局设置数据，其他页面可以共用
			app.locals['userinfo']=data[0];
                      <p class="welcome">欢迎，<%=userinfo.username %></p>

效果如下

再创建一个用户dongdong/123456来测试；

//向user表出入一个数据
 db.user.insert({"username":"dongdong","pwd":"123456","status":0})
db.user.find();  //查询user表所有数据

效果图

现在来实现退出登录

app.get("/loginOut",(req,res)=>{
	req.session.destroy((err)=>{   //也可以设置过期时间为0也能实现退出
		if(err){
			console.log(err);
		}else{
			redirect('/login');
		}
	})
});

好了，基本功能完成了，但是密码我们是明文的，不安全，接下里我们用md5加密一下

cnpm install md5-node -D
//修改数据库用户密码
 db.user.update({"username":"dongdong"},{$set:{"pwd":"e10adc3949ba59abbe56e057f
0f883e"}})

再次登录测试

然后其他地方也需要修改

效果图

接下来渲染商品列表
先再数据库dongdong的shop表中创建 3条数据
db.shop.insert({"title":"xiaomi","pic":"","price":1999,"fee":10})

app.all("/productList",(req,res)=>{
		//数据库操作 
	MongoClient.connect(url,(err,client)=>{
		if(err){
			console.log(err);
			console.log("数据库连接失败");
			return;
		}	
		//查询数据
		var db = client.db('dongdong');  //3.0 写法 链接数据库
		//var result=db.collection('user').find();  //3.0 写法 查询所有数据
		var result=db.collection('shop').find();
		/*法1toArray  */
		 result.toArray((err,data)=>{
		 	console.log(data);
		 	if(data.length>0){
		 		res.render("productList",{shopList:data});
		 	}else{
		 		console.log("登录失败");
		 		//res.send("<script>alert('登录失败');location.href='/login'</script>")
		 	}
		 	// db.close()	
		 });
	})
});

效果图