Vue+Node实现的商城用户管理功能示例


Posted in Javascript onDecember 23, 2019

本文实例讲述了Vue+Node实现的商城用户管理功能。分享给大家供大家参考,具体如下:

1、用户登陆

前端将用户输入的用户名密码post发送到后端,如果返回status=0,代表登陆成功,将hasLogin置为true,控制页面登陆按钮不显示,并显示返回的用户名nickname

login(){
     if(!this.username||!this.password){
      this.errMsg="请输入用户名与密码!";
      this.errShow=true;
     }else{
      axios.post('/users/login',{
       username:this.username,
       password:this.password
      }).then((response,err)=>{
       let res=response.data;
       if(res.status===0){
        this.hasLogin=true;
        this.nickname=res.result;
        this.closeLogin();
       }else{
        this.errShow=true;
        this.errMsg=res.msg;
       }
      })
     }
    },

后端根据前端传来的用户名、密码在数据库中查找指定条目,查询成功返回status=0,并设置res的cookie保存用户名与Id

router.post('/login', function(req, res, next) {
 let username=req.body.username;
 let password=req.body.password;
 let params={
  userName:username,
  userPwd:password
 };
 user.findOne(params,(err,userDoc)=>{
  "use strict";
  if(err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   if(userDoc){
    //登陆成功后设置res.cookie与req.session
    res.cookie('userId',userDoc.userId,{
     maxAge:1000*60*60
    });
    res.cookie('userName',userDoc.userName,{
     maxAge:1000*60*60
    });
    res.json({
     status:0,
     msg:'登陆成功',
     result:userDoc.userName
    });
   }else{
    res.json({
     status:1,
     msg:'用户名或密码错误!'
    });
   }
  }
 })
});

2、服务器Express全局拦截

一些内容在用户未登录是无法访问的,需要服务器对非法请求进行拦截。在nodejs中请求先到达app.js文件,然后再转发到指定路由。在转发之前,可以先对用户登陆状态进行判断,如果cookies中有设置userId,表明已登陆,执行下一步next()。如果未登录,只可以访问指定的路由路径,由req.originalUrl判断是否等于或包含允许的访问路径,用户在未登录时可以访问登陆页面与商品列表页面。如果访问其他路径则返回错误信息“用户未登录”:

//全局拦截
app.use(function (req,res,next) {
 if(req.cookies.userId) next();    //已登陆
 //未登录,只能访问登录与商品页面
 else if(req.originalUrl==='/users/login'||req.originalUrl.indexOf('/goods')>-1) next();
 else{
  res.json({
   status:3,
   msg:'用户未登录'
  })
 }
});
//路由跳转
app.use('/', index);
app.use('/users', users);
app.use('/goods', goods);

3、校验登陆

在页面加载完成后,需要判断用户是否已经登陆过了,前端向后端发出checkLogin的请求,后端根据cookie中的userId是否设置,返回判断信息,如果登陆则不需要用户再次手动登陆了

router.get('/checkLogin',(req,res)=>{
 "use strict";
 if(req.cookies.userId){      //设置了cookie,用户已登陆
  res.json({
   status:0,
   msg:"登录成功",
   username:req.cookies.userName
  })
 }else {
  res.json({
   status:3,
   msg: "未登录"
  })
 }
});

4、登出

用户的登出操作就是将cookie信息去除,即在后台将用户cookie的有效期置为0

router.get('/logout',(req,res)=>{
 "use strict";
 res.cookie('userId','',{maxAge:0});
 res.cookie('userName','',{maxAge:0});
 res.json({
  status:0,
  msg:'登出成功!'
 })
});

希望本文所述对大家node.js程序设计有所帮助。

Javascript 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
js中for in的用法示例解析
Dec 25 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
Dec 22 #Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 #Javascript
node.js事件轮询机制原理知识点
Dec 22 #Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 #Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 #Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 #Javascript
javascript中的相等操作符(==与===区别)
Dec 21 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
vue实现简单图片上传
2020/06/30 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python实现音乐下载器
2018/04/15 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
环保建议书200字
2014/05/14 职场文书
本科毕业生自荐信
2014/06/02 职场文书
师范生求职自荐信
2014/06/14 职场文书
入党政审材料范文
2014/12/24 职场文书
2015年教师国培感言
2015/08/01 职场文书
法院执行局工作总结
2015/08/11 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
高一英语教学反思
2016/03/03 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL