Vue(vue+node.js+mongodb)_登录注册（密码登录）

其他 2019-05-11 15:49:01 阅读次数: 0

一、前言                                                                       

 1、密码登录（分析）

2、验证码部分

3、提交表单

4、保存显示

5、完善功能，首页中如果登录成功之后显示的是图标，没有登录显示的是“注册登录”

6、处理bug(当我们一刷新之后当前登录的信息都没有了)

二、主要内容                                                                

1、密码登录（分析）

       

    （1）第一步用户输入先提交登录表单信息

    

        

2、验证码部分

这里显示的验证码，在通过异步调用获取到，并且在后端存进session中

（1）前端部分

<!--获取验证码：前端-->
 <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
 <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha"  @click="getCaptcha" ref="captcha">

（2）每次点击的时候获取一个新的图片验证码

 // 获取一个新的图片验证码
      getCaptcha () {
        // 每次指定的src要不一样
        this.$refs.captcha.src = 'http://localhost:4000/captcha?time='+Date.now()
      }

（3）发送http://localhost:4000/captcha请求的时候，后台接受到这个请求，并且将当前的这个保存到session中

/*
一次性图形验证码
 */
router.get('/captcha', function (req, res) {
  var captcha = svgCaptcha.create({
    ignoreChars: '0o1l',
    noise: 2,
    color: true
  });
  req.session.captcha = captcha.text.toLowerCase();//将创建的这个新的验证码保存到session中
  console.log(req.session.captcha)
  /*res.type('svg');
  res.status(200).send(captcha.data);*/
  res.type('svg');
  res.send(captcha.data)
});

3、提交表单

      （1）提交表单的时候触发login()方法，然后调用自己在api/index.js中封装的axios方法

 async login () {
        let result
     
        // 密码登陆
          const {name, pwd, captcha} = this
          if(!this.name) {
            // 用户名必须指定
            this.showAlert('用户名必须指定')
            return
          } else if(!this.pwd) {
            // 密码必须指定
            this.showAlert('密码必须指定')
            return
          } else if(!this.captcha) {
            // 验证码必须指定
            this.showAlert('验证码必须指定')
            return
          }
          // 发送ajax请求密码登陆
          result = await reqPwdLogin({name, pwd, captcha})
        
}

      （2）reqPwdLogin方法如下

               封装的ajax

import axios from 'axios'
export default function ajax(url = '', data = {}, type = 'GET') {
        return new Promise(function (resolve, reject) {
        let promise
        if (type === 'GET') {
        // 准备url query 参数数据
        let dataStr = '' //数据拼接字符串
        Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
        })
        if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
        }
        // 发送get 请求
        promise = axios.get(url)
        } else {
        // 发送post 请求
        promise = axios.post(url, data)
        }
        promise.then(response => {
        resolve(response.data)
        })
        .catch(error => {
        reject(error)
        })
        })
}
ajax.js

              

import ajax from './ajax'
const BASE_URL = '/api'
//5.根据用户名密码登录
export const reqPwdLogin = ({name, pwd, captcha}) => ajax('/api'+'/login_pwd', {name, pwd, captcha}, 'POST')

       （3）执行完第三步之后，会向服务器发送请求，服务器处理post请求

/*
密码登陆
 */
router.post('/login_pwd', function (req, res) {
  const name = req.body.name   //将表单提交的数据存下来
  const pwd = md5(req.body.pwd)
  const captcha = req.body.captcha.toLowerCase()
  console.log('/login_pwd', name, pwd, captcha, req.session)

  // 可以对用户名/密码格式进行检查, 如果非法, 返回提示信息
  if(captcha!==req.session.captcha) {
    return res.send({code: 1, msg: '验证码不正确'})
  }
  // 删除之前保存的验证码
  delete req.session.captcha

  UserModel.findOne({name}, function (err, user) {
    if (user) {
      console.log('findUser', user)
      if (user.pwd !== pwd) {
        res.send({code: 1, msg: '用户名或密码不正确!'})
      } else {
        req.session.userid = user._id 
        res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}})
      }
    } else {
      const userModel = new UserModel({name, pwd})
      userModel.save(function (err, user) {
        // 向浏览器端返回cookie(key=value)
        // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7})
        req.session.userid = user._id
        const data = {_id: user._id, name: user.name}
        // 3.2. 返回数据(新的user)
        res.send({code: 0, data})
      })
    }
  })
})

　　（4）后台验证成功后需要做两步操作

        第一步：将后台返回的user信息保存在vuex的state中去

        第二步：实现路由跳转

 async login () {
        let result
       // 密码登陆
          const {name, pwd, captcha} = this
          if(!this.name) {
            // 用户名必须指定
            this.showAlert('用户名必须指定')
            return
          } else if(!this.pwd) {
            // 密码必须指定
            this.showAlert('密码必须指定')
            return
          } else if(!this.captcha) {
            // 验证码必须指定
            this.showAlert('验证码必须指定')
            return
          }
          // 发送ajax请求密码登陆
          result = await reqPwdLogin({name, pwd, captcha})
        
        // 停止计时
        if(this.computeTime) {
          this.computeTime = 0
          clearInterval(this.intervalId)
          this.intervalId = undefined
        }

        // 根据结果数据处理
        if(result.code===0) {
          const user = result.data
          // 将user保存到vuex的state
          this.$store.dispatch('recordUser', user)
          // 去个人中心界面
          this.$router.replace('/profile')
        } else {
          // 显示新的图片验证码
          this.getCaptcha()
          // 显示警告提示
          const msg = result.msg
          this.showAlert(msg)
        }
      }

4、保存显示

  (1)用vuex来管理状态

    

    state.js中定义userinfo来存放提交成功的用户名和密码

export default{
    
    userInfo:{}//保存提交的用户信息
}

     mutation-types.js中定义

export const RECEIVE_USER_INFO = 'receive_user_info'//接受用户信息

     mutations.js

/*
vuex的mutations.js模块
*/
import {
      RECEIVE_USER_INFO,
} from './mutation-types'
export default{
    //这个是方法名,action 和mutation交互的时候传的是包含这个数据的对象
      [RECEIVE_USER_INFO] (state, {userInfo}){
            state.userInfo = userInfo
      }
}

     actions.js

/*
vuex的actions.js模块
*/
import {    
    RECEIVE_USER_INFO,    
} from './mutation-types'

//三个接口函数
import {    
    reqUserInfo,

} from '../api'

export default{
    //同步记录用户信息
    recordUser ({commit},userInfo){
        commit(RECEIVE_USER_INFO,{userInfo})       
    },
}

（2）在app.vue中用，模块actions中记录的保存用户信息事件，

// 根据结果数据处理
        if(result.code===0) {
          const user = result.data
          // 将user保存到vuex的state
          this.$store.dispatch('recordUser', user)
          // 去个人中心界面
          this.$router.replace('/profile')
        } else {
          // 显示新的图片验证码
          this.getCaptcha()
          // 显示警告提示
          const msg = result.msg
          this.showAlert(msg)
        }

（3）登录成功之后显示用户名，实现如下效果

     第一步：需要从state中取出保存的userInfo,然后显示在页面中

import {mapState} from 'vuex'
    export default{
       components:{
           HeaderTop
       },

       computed:{
           ...mapState(['userInfo'])
       }
      
    }
</script>

    第二步：显示

<!--如果有userInfo信息，这里就显示用户信息，否则就显示注册/登录-->
<p class="user-info-top">{{userInfo._id|| '注册|登录'}}</p>

5、完善功能，首页中如果登录成功之后显示的是图标，没有登录显示的是“注册登录”

     （1）已登录

     （2）未登录

<router-link class="header_login" slot='right' :to="userInfo._id? '/userInfo':'/login'">
                   <span class="header_login_text" v-if="!userInfo._id">登录注册</span>
                   <span class="header_login_text" v-else>
                         <i class="iconfont icon-geren"></i>
                   </span>
</router-link>

6、处理bug(当我们一刷新之后当前登录的信息都没有了)

        session是以赖与cookie的，

        一般有两种cookie，一种是会话级别的（当刷新浏览器，或者关闭浏览器之后，在cookie中保存的信息就没有了），一种是持久化的（可以在cookie中将信息保存一段时间）

（1）在后台中设置保存的时间

app.use(session({
  secret: '12345',
  cookie: {maxAge: 1000*60*60*24 },  //设置maxAge是80000ms，即80s后session和相应的cookie失效过期
  resave: false,
  saveUninitialized: true,
}));

（2）服务器中会根据session中的userid,查询对应的user

/*
根据sesion中的userid, 查询对应的user
 */
router.get('/userinfo', function (req, res) {
  // 取出userid
  const userid = req.session.userid
  // 查询
  UserModel.findOne({_id: userid}, _filter, function (err, user) {
    // 如果没有, 返回错误提示
    if (!user) {
      // 清除浏览器保存的userid的cookie
      delete req.session.userid

      res.send({code: 1, msg: '请先登陆'})
    } else {
      // 如果有, 返回user
      res.send({code: 0, data: user})
    }
  })
})

    (3)前台最开始肯定要向后台发送一个请求，如果查询到了，当前的用户信息是session中保存的信息，就免登陆

在actions.js模块中添加一个方法

//异步获取用户信息，让应用一开始就调用这个方法
    //获取商家列表
    async getUserInfo ({commit, state}){
        //1.发送异步ajax请求,调用上面那个方法,现在的数据是在state里面
        const result = await reqUserInfo()
        //2.提交一个mutation
        if(result.code == 0){
            const userInfo = result.data
            commit(RECEIVE_USER_INFO,{userInfo:result.data})
        }
    }

   （4）在前台调用这个方法

<script>
  import FooterGuide from './components/FooterGuide/FooterGuide.vue'
  import {mapActions} from 'vuex'
export default {
  name: 'App',
  components:{
    FooterGuide
  },  
  mounted(){ 
   this.getUserInfo()
  }
  ,
  methods:{
    ...mapActions(['getUserInfo'])
  }
}
</script>

    

     

三、总结                                                                       

猜你喜欢

转载自www.cnblogs.com/xxm980617/p/10848780.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022