express+mongodb+bootstrap搭建个人博客系统（十四）

登录页面

用户名

密 码

Example checkbox

登录

已有账号,立刻去 注册

2. 前端注册

• formData 实例form表单对象

• 对各字段进行本地验证

• 发送Ajax

//注册

$(‘.btn_reg’).on(‘click’,function(){

// 清空上次的错误提示

$(‘.tip’).hide();

//获取各个input value

var form_reg = document.getElementById(‘form_reg’);

// 实例化formData 讲form表单数据，进行序列化

var formData = new FormData(form_reg);

console.log(formData);

//get(‘key’) 获取key值

console.log(formData.get(‘user’));

console.log(formData.get(‘pass’));

console.log(formData.get(‘repass’));

//在 提交数据之前，要进行本地验证

//1.验证用户名是否合法 （不允许是汉字，长度5-12）

// var reg=/[\u4e00-\u9fa5]/;

var reg = /^[0-9a-zA-Z_$]5,12$/g;

// var str = ‘abc_好’;

// console.log(reg.test(str));

if(!reg.test(formData.get(‘user’))){

$(‘.tip_user’).show();

return;

}

//2.验证密码是否合法 纯数字，5-12

var pass_reg = /^\d{5,12}$/;

if(!pass_reg.test(formData.get(‘pass’))){

$(‘.tip_pass’).show();

return;

}

//3. 重复密码验证

if(formData.get(‘pass’)!=formData.get(‘repass’)){

$(‘.tip_repass’).show();

return;

}

$.ajax({

url:‘/api/reg’,

type:‘post’,

processData: false,//不对数据进行转换

contentType: false,

data:formData,

success:function(res){

console.log(res);

}

})

})

3. 注册的后台接口

var express = require(‘express’);

var router = express.Router();

var formidable = require(‘formidable’);

/* 注册 */

router.post(‘/reg’,function(req, res, next) {

// 创建formidable表单解析对象

var form = new formidable.IncomingForm();

// formidable对象对提交的数据进行解析

form.parse(req,function(err,filds,files){ //err错误对象，filds:普通表单提交的数据。files:提交的二进制文件

if(!err){

console.log(filds);

}

})

});

module.exports = router;

四、设计用户数据库

---

1. 创建 schema模型user.js

var mongoose = require(‘mongoose’);

module.exports=mongoose.Schema({

user:String,

pass:String,

isAdmin:{type:Boolean,default:false}

},{timestamps:true})

备注：isAdmin字段，用来区分用户的身份。在这里，我们用false来表示普通用户身份，用true来表示管理员身份。所以，给isAdmin设置了默认值：false。

2. 创建model模型 User.js

var mongoose = require(‘mongoose’);

var user=require(‘…/schema/user’);

module.exports=mongoose.model(‘User’,user)

3. 注册逻辑

/* 注册 */

router.post(‘/reg’,function(req, res, next) {

// 创建formidable表单解析对象

var form = new formidable.IncomingForm();

// formidable对象对提交的数据进行解析

form.parse(req,function(err,filds,files){ //err错误对象，filds:普通表单提交的数据。files:提交的二进制文件

if(!err){

console.log(filds); // {user:xxx,pass:xxx,repass:xxx}

//注册逻辑

/*

第一步：先查询数据库，是否存在该用户

第二步：如果没有该用户，直接向前端响应json ,注册失败

第三部：没有该用户，写入数据库，向前端响应json，注册成功

*/

//查询第一条数据，

User.findOne({user:filds.user},function(err,data){

// 如果用该用户：data—>{user:xxx,pass:xxx,isAdmin:false} true

// 如果没用该用户 data–>null false

if(!err){

console.log(data);

if(data){ // 有该用户

res.json({code:0,msg:‘该用户已存在’})

}else{ // 没有该用户

User.create({user:filds.user,pass:filds.pass},function(err){

if(!err){

res.json({code:1,msg:‘注册成功’})

}

})

}

}

})

}

})

});

4. 登陆前端

//登陆

$(‘.btn_login’).on(‘click’,function(){

$(‘.tip’).hide();

//原生dom

var form = document.querySelector(“#form_login”);

var formData = new FormData(form);

console.log(formData.get(‘user’));

console.log(formData.get(‘pass’));

//本地数据验证

var user_reg = /^[0-9a-zA-Z_$]5,12$/g;

if(!user_reg.test(formData.get(‘user’))){

$(‘.tip_login_user’).show();

return;

}

//密码验证

var pass_reg = /^\d{5,12}$/;

if(!pass_reg.test(formData.get(‘pass’))){

$(‘.tip_login_pass’).show();

return;

}

//请求接口

$.ajax({

url:‘/api/login’,

type:‘post’,

data:formData,

processData:false,

contentType:false,

success:function(res){

console.log(res);

}

})

})

5. 登陆后端

//登陆

router.post(‘/login’,function(req,res,next){

//接受数据 formData

// 创建formidable 解析表单数据对象

var form = new formidable.IncomingForm();

form.parse(req,function(err,filds,files){// err:错误参数， filds：普通form表单数据， files:文件数据。

if(!err){

console.log(filds);

//登陆逻辑

/*

第一步：查询数据库，看数据库是否存在该用户。

第二步：如果不存在该用户，向前进响应jons，登陆失败。

第三步：存在该用户。

第四部：进一步判断，该用户提交的密码，和数据中的密码是否一致：

如果不一致：向前端响应josn,登陆失败。

如果一致：向前端响应josn,登陆成功。

*/

User.findOne({user:filds.user},function(err,data){

if(!err){

if(data){

if(data.pass==filds.pass){ //密码页一致

res.json({code:1,msg:‘登陆成功’})

}else{

res.json({code:2,msg:‘密码错误’})

}

}else{

res.json({code:0,msg:‘该用户不存在’})

}

}

})

}

})

})

五、cookie

---

HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

HTTP是无状态的。每次发送的http请求，都是一次独立请求，跟上次没有任何关系。

用户登录—> 服务器验证登录----->登录成功----->给前端响应josn + 向前端响应cookie({user:xxx,isAdmin:false})------>请求首页(携带cookie)----->服务器端 劫持 cookie---->根据cookie的内容渲染不同页面。

1. 登录成功，向浏览器返回cookie

//先响应cookie(设置相应头) ，再josn

// cookie —> {userInfo:{user:xxx,isAdmin:false}}

// 参数一：属性名

//参数二：属性值

// 参数三：配置 path:‘/a’ 设置写入cookie的路径

//magAge:毫秒， 设置cookie的有效期。30天免登录 100060602430

res.cookie(‘userInfo’,{user:data.user,isAdmin:data.isAdmin},{path:‘/a/b’,maxAge:100060602430})

res.json({code:1,msg:‘登陆成功’})

2. 前端 收到 res响应

if(res.code==1){

//跳转到首页。？， cookie

location.href=‘/’; // 携带cookie

}

4. 根路由，劫持cookie，根据登录状态，和用户权限。渲染不同页面

router.get(‘/’, function(req, res, next) {

//劫持cookie

console.log(req.cookies)

if(req.cookies.userInfo){ //用户刚才登录成功了

if(req.cookies.userInfo.isAdmin){ //管理员

res.render(‘admin/home.ejs’)

}else{ //普通用户

res.render(‘main/home.ejs’)

}

}else{ // 用户没有登录

res.render(‘index’, { title: ‘Express’ });

}

});

六、管理员页面开发

---

1. admin/home.ejs

返回首页

• 用户列表 (current)

• 分类

  添加分类

  查看分类

• 内容

  添加内容

  查看内容

  退出

  <% if(tip==0){ %>

  <% include ./one.ejs %>

  <% }else if(tip==1){ %>

  <% include ./userList.ejs %>

  <% }else if(tip==2){ %>

  <% include ./userEdit.ejs %>

  <% } %>

  2. 退出

  //退出

  router.get(‘/out’,function(req,res,next){

  //清除 cookie

  res.clearCookie(‘userInfo’);

  res.redirect(‘/’);

  })

  3. 后端接口

  // 用户列表查询

  router.get(‘/findUser’,function(req,res,next){

  //查询用户信息

  User.find({},function(err,datas){

  if(!err){

  res.render(‘admin/home.ejs’,{tip:1,userList:datas})

  }

  })

  })

  //用户删除

  router.get(‘/del’,function(req,res,next){

  User.remove({_id:req.query._id},function(err){

  if(!err){

  //查询用户信息

  User.find({},function(err,datas){

  if(!err){

  res.render(‘admin/home.ejs’,{tip:1,userList:datas})

  }

  })

  }

  })

  })

  //用户修改

  router.get(‘/edit’,function(req,res,next){

  User.findOne({_id:req.query._id},function(err,data){

  res.render(‘admin/home.ejs’,{tip:2,userOne:data})

  })

  })

  //确认修改

  router.post(‘/update’,function(req,res,next){

  console.log(req.body)

  var aa=req.body.isAdmin==1?true:false;

  User.update({_id:req.body._id},{$set:{user:req.body.user,pass:req.body.pass,isAdmin:aa}},function(err){

  if(!err){

  //查询用户信息

  User.find({},function(err,datas){

  if(!err){

  res.render(‘admin/home.ejs’,{tip:1,userList:datas})

  }

  })

  }

  })

  })

  4. one.ejs

  欢迎您超级管理员！

  This is a modified jumbotron that occupies the entire horizontal space of its parent.

  5. userList.ejs
  编号 用户名 密码 是否是管理员 注册时间 操作

  <% for(var index in userList){ %>

  <%= index*1+1 %>

  <%= userList[index].user %>

  <%= userList[index].pass %>

  <%= userList[index].isAdmin?“是”:“否” %>

  <%= userList[index].createdAt?userList[index].createdAt.toLocaleString():‘2020-12-12 12:12:20’ %>

  删除

  修改

  <% } %>

  6. userEdit.ejs

  用户名

  密码

  设置身份

  管理员 普通用户

  确认修改

  7. 分类

  创建schema模型

  var mongoose = require(‘mongoose’);

  module.exports=new mongoose.Schema({

  fenlei:{type:String,required:true}

  })

  创建model模型

  var mongoose = require(‘mongoose’);

  var fenleiSchema = require(‘…/schema/fenlei’);

  module.exports=mongoose.model(‘Fenlei’,fenleiSchema);

  分类页面

  <% if(onOff){ %>

  操作成功！

  <% } %>

  分类名：

  确认添加

  后端接口文件

  // 展示 分类添加模块

  router.get(‘/showFenlei’,function(req,res,next){

  res.render(‘admin/home.ejs’,{tip:3,onOff:false})

  })

  // 添加分类

  router.post(‘/addFenlei’,function(req,res,next){

  //？接收数据。写入数据。

  前端面试题汇总

  

  JavaScript

  

  性能

  

  linux

  

  前端资料汇总