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 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
React组件生命周期详解
Jul 03 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
如何选择适合你的JavaScript框架
Nov 20 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue项目强制清除页面缓存的例子
Nov 06 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
VSCode 配置uni-app的方法
2020/07/11 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
EM算法的python实现的方法步骤
2018/01/02 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python斐波那契数列的计算方法
2018/09/27 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
节能减排倡议书
2014/04/15 职场文书
班长竞选演讲稿
2014/04/24 职场文书
人大调研汇报材料
2014/08/14 职场文书
作风建设剖析材料
2014/10/06 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers