vue2.0+koa2+mongodb实现注册登录(8)

上面这些方法构成了项目中数据库操作的核心，我们来剖析一下。

首先定义了公用的三个基础方法：findUser、findAllUsers、delUser。其中findUser需要传入 username 参数，delUser需要传入 id 参数。

注册方法

拿到用户post提交的表单信息，new之前按数据库设计好的并编译成model的User，把获取到的用户名，密码（需要用sha1哈希加密），token（利用之前创建好的createToken方法，并把用户名作为jwt的payload参数），生成时间存入。

此时要先搜索数据库这个用户名是否存在，存在就返回失败，否则把user存入数据库并返回成功。

登录方法

拿到用户post的表单信息，用户名和密码（注册用了哈希加密，此时要解密）。从数据库搜索该用户名，判断用户名是否存在，不存在返回错误，存在的话判断数据库里存的密码和用户提交的密码是否一致，一致的话给这个用户生成一个新的token，并存入数据库，返回成功。

获得所有用户信息

就是把上面公用findAllUsers方法封装了一下并把信息放在result里面，让后面helloworld页面可以获取到这个数据并展示出来。

删除某个用户

注意要先拿到需要删除的用户id，作为参数传入。

写完这些方法，就可以把前面没有完善的注册登录功能完善了。

数据库可视化

当我们注册完，数据入库，此时我们想查看一下刚才注册入库的数据，要用到数据库可视化工具。我是用 MongoBooster ，操作简单。

由下图可以看到示例中注册的两条数据，包含了id、username、password、token、time。那串长长的密码是由于哈希加密编译而成。

整合完善注册组件

在register.vue的表单验证后加上下列代码

//register.vue
if (valid) {
 axios.userRegister(this.ruleForm)
  .then(({}) => {
   if (data.success) {
    this.$message({
     type: 'success',
     message: '注册成功'
    });
   } else {
    this.$message({
     type: 'info',
     message: '用户名已经存在'
    });
   }
  })
}

完善登录组件

登录组件我们之前没有任何数据提交，现在在验证成功后加入一系列方法完成登录操作：

引入axios

import axios from '../axios.js'

然后在login.vue的表单验证后加上下列代码

//login.vue
if (valid) {
 axios.userLogin(this.ruleForm)
  .then(({ data }) => {
   //账号不存在
   if (data.info === false) {
    this.$message({
     type: 'info',
     message: '账号不存在'
    });
    return;
   }
   //账号存在
   if (data.success) {
    this.$message({
     type: 'success',
     message: '登录成功'
    });
    //拿到返回的token和username，并存到store
    let token = data.token;
    let username = data.username;
    this.$store.dispatch('UserLogin', token);
    this.$store.dispatch('UserName', username);
    //跳到目标页
    this.$router.push('HelloWorld');
   }
  });
}