⽤express脚⼿架做后台管理系统（思路+代码展⽰）
所⽤技术：
1.采⽤前后端分离：
前后端分离和前后端不分离的区别：
前后端不分离：前端页⾯看到的效果都是由后端控制和渲染的，前后端耦合度⾼；
前后端分离：前端根据⾃⼰的需求渲染页⾯效果，前后端耦合度低。
2.ajax
通过ajax请求数据，处理后返回结果
3.jquery
主要是使⽤iquery中的$.ajax
4.数据库：
mongoose
5.bootstrap
主要是⽤于静态布局
思路：
⼀，登录注册：
1.在public⽂件夹新建index.html ⽂件，书写静态布局，利⽤模块化将html代码进⾏封装---->
<!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>
<link rel="stylesheet" href="./css/common/reset.css">
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/index/index.css">
</head>
<body>
<div class="login_container"></div>
</body>
</html>
<script src="cdn.bootcss/jquery/1.11.3/jquery.min.js"></script>
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="./js/js/common/register.js"></script>
<script src="./js/js/common/login.js"></script>
<script src="./js/js/common/page.js"></script>
2.在public⽂件夹下新建js⽂件夹，在js⽂件夹下新建common⽂件夹，存放index要封装的模块化JS⽂件---->
3.在common⽂件夹下新建page.js⽂件：创建⼀个Page对象（该Page对象就是index⽂件中的登录注册的静态布局）---->>给Page对象⼀个container实例属性，init以及createContent的原型⽅法---->
function Page() {
//实例属性：
this.flag = true;        //设置开关，在注册和登录之间实现跳转
this.init();
}
//原型⽅法：
Page.prototype = {
init:function(){
},
//渲染到页⾯的⽅法：需要在Register和Login之后调⽤：
createContent:function(params=this.flag){    //判断有参数则直接登录，没有参数则注册传参
if(params){
/
/new⼀个login对象（login.js）
this.login =  new ainer);
}else{
//new⼀个register对象（register.js）
}
}
}
new Page();
4.在common⽂件夹下新建login.js和register.js⽂件---->主要是创建登录，注册模板
//创建⼀个Register对象：
function Register(container){
this.init();
}
//Resgiter模板
<div class="login">
<div class="logo">
<img src="cas.1000phone/cas/images/login/logo.png">
</div>
<form class="form">
<div class="form-group">
<label for="register_username">⽤户名</label>
<input type="email"class="form-control" id="register_username" placeholder="Email">
</div>
<div class="form-group">
<label for="register_password">密码</label>
<input type="password"class="form-control" id="register_password" placeholder="Password">                </div>
<div class="form-group">
<div class="alert alert-danger" role="alert">忘记密码?</div>
<div class="alert alert-info" role="alert" id="js_login">去登陆</div>
</div>
<button type="button"class="btn btn-info login_btn" id="login_btn">注册</button>
</form>
</div>
`
Register.prototype = {
init:function(){
this.handlePush();
this.handleRegister();
},
//创建div，将Register.prototype追加到div中，再将div追加到页⾯中
createDom:function(){
this.el = $("<div class='content'></div>");
this.el.plate);
},
//点击去登录，切换到登录页⾯
handlePush(){
this.el.find("#js_login").on("click",$.proxy(this.handleLogin,this))
},
handleLogin(){
new Page().createContent(true);
},
//点击去注册，切换到注册页⾯
handleRegister(){
this.el.find("#login_btn").on("click",$.proxy(this.handleRegisterBtn,this))
},
//给注册按钮添加点击事件：通过$.ajax向服务器发送请求，并将服务器处理的结果返回给客户端
handleRegisterBtn(){
//获取客户信息（⽤户名和密码）
var username = this.el.find("#register_username").val();
var password = this.el.find("#register_password").val();
//var⼀个userInfo对象，存放⽤户名和密码：因为key和value⼀样，所以只写⼀个就可以了
/
/    var userInfo = {
//        username：username,
//        password:password
//    }
var userInfo = {
username,
password
}
//向服务端发送请求：将客户传递的参数传递给服务端，服务端进⾏处理，判断⽤户名是否存在
$.ajax({
type:"post",
url:"/api/register",    //接⼝是由后端提供的，通过路由建⽴前后端之间的连接
data:userInfo,
dataType:"json",
success:$.proxy(this.handleRegisterSuccess,this)    //获取数据成功返回handleRegisterSuccess⽅法        })
},
handleRegisterSuccess(data){
if(data.status){
alert("注册成功");
//注册成功跳转到登录页⾯
new Page().createContent(true);
}
}
}
//创建Login对象：
function Login(container){
//实例属性：
this.init();
}
//登录模板
<div class="login">
<div class="logo">
<img src="cas.1000phone/cas/images/login/logo.png">
</div>
<form class="form">
<div class="form-group">
<label for="login_username">⽤户名</label>
<input type="email" class="form-control" id="login_username" placeholder="Email">
</div>
<div class="form-group">
<label for="login_password">密码</label>
<input type="password" class="form-control" id="login_password" placeholder="Password">
</div>
<div class="form-group">
<div class="alert alert-danger" role="alert">忘记密码?</div>
<div class="alert alert-info" role="alert" id="js_register">去注册</div>
</div>
<button type="button" class="btn btn-info login_btn" id="login_btn">登陆</button>
</form>
</div>
`
//原型⽅法
Login.prototype = {
init(){
this.handlePush();
this.loginBtn();
},
createDom:function(){
this.el = $("<div class='content'></div>");
this.el.plate);
},
//点击去注册切换到注册页⾯
handlePush(){
this.el.find("#js_register").on("click",$.proxy(this.handleRegister,this))
},
handleRegister(){
new Page().createContent(false);
},
//给登录按钮添加点击事件：
loginBtn(){
this.el.find("#login_btn").on("click",$.proxy(this.handleLoginCallBack,this))
},
前端页面模板handleLoginCallBack(){
/
/var⼀个userInfo对象
var userInfo = {
username:this.el.find("#login_username").val(),
password:this.el.find("#login_password").val()
}
//通过ajax将客户端的请求发送给服务端：并接受服务端返回的数据：
$.ajax({
type:"post",
url:"/api/login",
data:userInfo,
success:$.proxy(this.handleLoginSucc,this)
})
},
//登录成功则跳转到详情页
handleLoginSucc(data){
if(data.status){
location.href="localhost:3000/html/detail.html"
}
}
}
以上前端代码书写完毕：从代码中不难看出：前端主要是做了静态布局，以及向后端发送请求，并将返回结果回馈给客户端，进⾏渲染页⾯
接下来理⼀下后端代码：
在客户端向服务端发送请求后，服务端接收到请求后，是要对请求数据做处理的，即对数据的增删改查，主要是放在model层的：
我们先来处理⼀下注册数据：处理数据之前我们先来连接⼀下数据库：
新建util⽂件夹，并新建database.js⽂件：
//引⼊mongoose模块：
var mongoose = require("mongoose");
//设置路径，连接数据库
let url = "mongodb://127.0.0.1:27017/bk1824"
//导出数据库模块
mongoose
}
有了数据库我们再来model⽂件夹下处理数据：
我们将注册登录的数据放在user.js⽂件中：
//连接数据库
const mongoose = require("../util/database").mongoose;
//在做数据的增删改查时需要先创建表：在数据库中，会默认在表明后加“s”，当表名结尾字母是y时，变y为i再加es
const User = del("user",{
//设置表的字段：（mongodb和mongoose的区别之⼀：mongoose可以设置字段）
username:String,
password:String
})
//查
//在处理注册登录数据时，都需要先在数据库中查出对应数据，再进⾏判断
const userFind = (userInfo,cb)=>{
User.findOne(userInfo).then((res)=>{
cb(res)
})
}
//增
//判断注册数据中⽤户名没被占⽤，则调⽤该⽅法将数据增加到数据库中：
const userAdd = (userInfo,cb)=>{
let user = new User(userInfo);
user.save().then((res)=>{
cb(res);
})
}
//导出查，增模块：在controller层引⼊跑业务逻辑
userFind,
userAdd
}
有了操作数据库的⽅法，接下来我们跑⼀下业务逻辑，业务逻辑主要在controller⽂件夹下，注册登录的业务逻辑主要放在user.js⽂件下：//引⼊model/user.js⽂件，使⽤增，查⽅法：
const userModel = require("../model/user");
//引⼊加密模块  1.    主要⽤来给密码加密，增加安全性，提⾼⽤户体验
const crypto = require('crypto');
//引⼊token：判断⽤户是否已经登录需要在前端中验证
const jwt = require("jsonwebtoken");
//注册的业务逻辑：先获取⽤户输⼊的数据，再从数据库中查对应的数据，判断⽤户输⼊的数据在数据库中能否查到，如果有，则⽤户名已存在，
//注册失败，查不到，添加到数据库中，注册成功
const register = (req,res)=>{
//解构赋值：因为是POST请求数据的，所以⽤req.body获取数据：此处获取的是⽤户传递的参数
let {username,password} = req.body;
//调⽤查的⽅法，从数据库查数据：
userModel.userFind({username},function(data){
//如果数据不存在，则添加进数据库：
if(!data){
//存
//创建sha256算法  2.    给数据加密：md5和sha256的区别：md5可以解密，sha256不能解密，所以相对安全
const hash = ateHash('sha256');
//需要加密的字符 3.
hash.update(password);
//对密码进⾏加密 4.
//将加密的数据添加到数据库中：
userModel.userAdd({
username:username,
password:hash.digest('hex')  //加盐
},function(){
//处理完数据返回结果：
res.json({
status:true,
Info:"注册成功"
})
})
}else{
res.json({
status:false,
Info:"⽤户名已存在"
})
}
})
}
const login = (req,res)=>{
//获取⽤户名和密码
let {username,password} = req.body;
//查看当前⽤户名是否存在如果不存在告诉⽤户⽤户名不存在如果存在则进⾏密码判断    userModel.userFind({username},function(data){
if(data){
//创建sha256算法
const hash = ateHash('sha256');
//进⾏加密
hash.update(password);
//因为数据库中的密码是加密的所以我们进⾏对⽐的时候也需要进⾏加密在对⽐
if(data.password == hash.digest('hex')){
//设置token
let token = jwt.sign({username},"bk1824",{'expiresIn':'1h'})
//种cookie
//成功
res.json({
status:true,
info:"登陆成功",
})
}else{
//失败
res.json({
status:false,
info:"密码错误"
})
}
}else{
//⽤户名不存在
res.json({
status:false,
info:"⽤户名不存在"
})
}
})
}
//导出模块：
register,
login
}
/*
md5加密解密
sha256加密
123456 + bk1824 + 秘钥 = 随机字符串
token
1、安装
cnpm install jsonwebtoken -S
2、引⼊
const jwt = require("jsonwebtoken");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。