Vue+Vant+Koa2+MongoDB實現用戶註冊

        今天咱們來實現一個用戶註冊的頁面，在上一篇入門教程的基礎上新增代碼(當前的項目目錄結構請參考上一篇教程)，咱們將原先Vue生成的默認頁面中 About 頁面替換爲 註冊頁面(效果圖以下)。咱們從零開始，從最初的新建前端表單，到數據的後端驗證存儲，檢測數據庫中是否已經存在註冊用戶，若存在則提示「該用戶已註冊」，若不存在則提示「註冊成功」。

     

1、前端部分

前端運用  Vue + Vant，首先咱們完成第一步，編寫Register表單

 

1.1 咱們在 mall\src\components 目錄下新建 Register.vue 文件，

 

 在 <template> </template>標籤內添加：

<div id="register">
    <van-cell-group>
      <van-field
        v-model="username"
        label="用戶名"
        placeholder="請輸入用戶名"
        :rules="[{required: true, message: '請填寫用戶名'}]"
      />
      <van-field
        v-model="password"
        type = "password"
        label="密碼"
        placeholder="請輸入密碼"
        :rules="[{required: true, message: '請輸入密碼'}]"
      />
      <van-field
        v-model="telnumber"
        label="手機號碼"
        placeholder="請輸入手機號碼"
        :rules="[{required: true, message: '請輸入手機號碼'}]"
      />

      <div style="margin: 16px;">
        <van-button square block type="info" native-type="submit" size="normal" @click="onSubmit">
          提交
        </van-button>
      </div>
    </van-cell-group>
  </div>

 

 注：由於咱們後面還要添加發送短信驗證碼按鈕，通常在存在一個以上按鈕的狀況下，不採用<form></form>表單，而用輸入框+按鈕就能夠。

在 <script> </script>標籤內添加：

import { Field } from 'vant';
import { Button } from 'vant';
import { Toast } from 'vant';
import { Cell, CellGroup } from 'vant';
  
export default {
  components:{
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      username: '',
      password: '',
      telnumber: ''
    }
  }
}

 

1.2 修改 router\index.js，

頂端添加：

import Register from '../components/Register.vue'

 

添加 routes 路由參數：

{
  path: '/register',
  name: 'Register',
  component: Register
},

 

1.3 修改 App.vue：

<router-link to="/about">About</router-link>

將上面的代碼修改成：

<router-link to="/register">註冊</router-link>

 

此時，從新運行Vue項目，能夠看到頁面：

 

 

2、 經過axios實現前端向後端傳遞數據

當用戶填寫完畢註冊信息，點擊提交按鈕後，前端會將註冊信息經過axios發送給後端服務器，並獲取到返回信息，具體實現以下：

 

2.1 在 Register.vue中 新增 提交按鈕事件：

import ajax from  '@/api';  //首先引入ajax類  

methods: {
  async onSubmit() {                      // async修飾符很是重要，表示該函數爲異步執行
    let { username, password, telnumber } = this.$data;     //獲取表單中的數據
    let res = await ajax.register(username, password, telnumber);       //await表示該語句等待 await後的語句有返回了以後，再接着執行 onSubmit的語句
    console.log(res)                     
  },
}

也許你會發現 ajax.register目前爲止仍是未定義的，不着急，接下來咱們就會編寫 ajax類。

 

2.2 編寫 ajax類，修改 mall\src\api\index.js,添加以下代碼：

// 註冊 | POST
  register(username, password, telnumber) {
    return axios.post('http://localhost:3000/users/registerUser',{username, password, telnumber})
  }

 

 OK，到這裏咱們的前端部分就基本完成了，下面咱們進行後端部分開發。

 

3、後端 Koa2 部分

 

後端部分的主要實現邏輯：

1> 新建 user數據集合存儲用戶信息，  

2> 編寫router.post 路由接收前端數據，

3> 後端驗證註冊信息並存儲返回

 

 3.1 新建mongDB數據集合

在mall-server文件夾下新建 models 文件夾，新建 user.js :

const mongoose = require('mongoose');

var Schema = mongoose.Schema;
var userSchema = new Schema({
 username: {type: String, unique: true},
 password: String,
 telnumber: String
});

module.exports = mongoose.model('User',userSchema)

 

進一步，咱們不能夠直接存儲明文密碼，這樣安全性得不到保障，所以在存儲前，須要對密碼進行加密，用的 bcryptjs，在user.js 裏繼續添加：

const bcrypt = require('bcryptjs'); // 用於密碼哈希的加密算法

/**
 * 對密碼進行加鹽
 * 使用 pre 中間件在用戶信息存儲前執行
 */
userSchema.pre('save', function(next) {
  // 進行加密 | 產生一個 salt
  bcrypt.genSalt(SALT_WORK_FACTOR, (err, salt) => {
    if (err) return next(err);
    // 結合 salt 產生新的hash
    bcrypt.hash(this.password, salt, (err, hash) => {
      if (err) return next(err);
      // 使用 hash 覆蓋明文密碼
      this.password = hash;
      next();
    });
  });
});

 

此時咱們的數據模型已經新建完畢，若對mongoDB不熟悉的小夥伴，能夠翻閱我以前的文章有介紹說明。

 

3.2 編寫router.post 路由接收前端數據

修改 routes\user.js, 添加代碼：

const userService = require('../service/user');                     //引入userService類 會在下一步編寫，主要用於向數據庫中存儲用戶註冊信息

router.post('/registerUser', async function (ctx) {
  let {username, password, telnumber} = ctx.request.body;           //koa-bodyparser 解析request.body
  if(!username || !password || !telnumber) return ctx.body = {code: 4020,msg: '請填寫完整的註冊信息'};    
  
  let args = {username, password, telnumber};
  const userData = await userService.accountHandle(args);           //userService類會在下一步編寫
  
  ctx.body = (userData.code === 200) 
     ? {code: 200, msg: '註冊成功'} 
     : userData
})

 

3.3  編寫userService類，用於後端驗證註冊信息並存儲返回

在mall-server文件夾下新建，user.js:

const UserModel = require('../models/user')            //引入 model

class userService {
  async accountHandle({username, password, telnumber}) {
    const user = await UserModel.findOne({username})
    if (user) return { code: 0, msg: '該用戶已經註冊' };     //若用戶已存在，中止向下執行，並返回錯誤提示信息

    let userEntity = new UserModel({ username, password, telnumber });
      // 保存到數據庫中
      let userInfo = await userEntity.save();
      return {
        code: 200,
        username: userInfo.username,
        password: userInfo.password,
        telnumber: userInfo.telnumber
      }
  }
}

module.exports = new userService();          // 導出這個類，注意與ES6導出類寫法的差異

 

OK到這裏，咱們就基本實現了用戶註冊的功能，固然還有不完善的地方，好比須要添加手機號正則驗證、短信驗證碼、axios添加響應攔截器、JWT認證，將會在下面的文章中一塊兒研究。固然，有不正確的地方，歡迎你們留意指正。