17-vue零基础到实战-注册和登录页面「渡一教育」( 六 )

上面这些方法构成了项目中数据库操作的核心，我们来剖析一下。
首先定义了公用的三个基础方法：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.vueif (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.vueif (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'); } });}将表单数据提交到后台，返回data状态，进行账号存在与否的判断操作。登录成功需要拿到返回的token和username存到store ，跳到目标HelloWorld页。
完善目标页组件
注册登录成功后，终于到了实际的展示页了——helloworld！
我们来完善这个组件，让它展示出目前所有的已注册用户名，并给出删除按钮。