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 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
js实现选项卡效果
Mar 07 Javascript
Node.js 深度调试方法解析
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 disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
PHP数据过滤的方法
2013/10/30 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python实现网站的模拟登录
2016/01/04 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
pandas object格式转float64格式的方法
2018/04/10 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
如何安装ruby on rails
2014/02/09 面试题
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL