大前端學習第六課：使用vue + layui + Koa 圖形驗證碼功能

時間 2019-11-09

標籤前端學習第六使用 vue layui koa 圖形驗證碼功能简体版

原文原文鏈接

前面的課程，搭建了一個初始化的koa工程。光說不練假把式，今天開始，使用koa+vue+layui開發一個登陸界面。主要內容以下:javascript

<div id="app">
    <form class="layui-form layui-form-pane" action>
      <div class="layui-form-item">
        <label class="layui-form-label">輸入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input" />
        </div>
      </div>
    </form>
  </div>
複製代碼

添加外層的container，並添加button按鈕

<div class="layui-container">
    <form>
        ...
        <button type="button" class="layui-btn">點擊登錄</button>
        <a class="imooc-link" href="http://www.layui.com">忘記密碼</a>
    </form>
</div>
複製代碼

驗證碼佔位

<div class="layui-form-item">
  <label class="layui-form-label">驗證碼</label>
  <div class="layui-input-inline">
    ...
  </div>
  <div class="layui-form-mid svg" v-html="svg"></div>
</div>
<script> export default { data () { return { svg: '11111' } } } </script>
複製代碼

效果以下:

圖形驗證碼生成

使用了插件svg-captcha

koa 後臺須要藉助第五課生成的工程進行開展。

具體使用方法以下：

npm i captcha

import svgCaptcha from 'svg-captcha';

class PublicController {
  constructor() { }
  async getCaptcha(ctx) {
    const newCaptcha = svgCaptcha.create({});
    ctx.body = {
      code: 200,
      msg: newCaptcha.data
    }
  }
}

export default new PublicController()
複製代碼

啓動服務，訪問localhost:3000/capycha.

結果以下：

前端調用

使用axios.

npm install axios

created () {
    this.getCaptcha()
  },
  methods: {
    getCaptcha () {
      axios.get('http://localhost:3000/captcha').then((res) => {
        if (res.status === 200) {
          let obj = res.data
          if (obj.code === 200) {
            this.svg = obj.data
          }
        }
      })
    }
  }
複製代碼

刷新頁面，圖形碼生成。

圖形驗證碼優化

若是須要配置一些驗證碼的參數，能夠以下配置:

const newCaptcha = svgCaptcha.create({
  size: 6,     // 6個字符
  noise: Math.floor(Math.random() * 5), // 干擾線數量
  ignoreChars: 'o0li1', // 容易混淆的數值去除
  color: true, // 添加顏色
  width: 150, // 設置svg的高寬
  height: 50
});
複製代碼

vuelidate

引入

npm install vuelidate -S

main.js Use

// main.js
import Vuelidate from 'vuelidate'

Vue.config.productionTip = false
Vue.use(Vuelidate)
複製代碼

組件內使用方法

<script> import { required,email } from 'vuelidate/lib/validators' methods: { ... setName (val) { this.username = val this.$v.username.$touch() } } validations: { name: { required, email }, age: { required } }, </script>

<div class="layui-form-item" :class="{ 'form-group--error': $v.username.$error }">
  <label class="layui-form-label">用戶名</label>
  <div class="layui-input-inline">
    <input ... v-model.trim="$v.username.$model" @inpput="setName($event.target.value)" />
  </div>
  <!-- 若是沒有填寫用戶名的時候顯示 -->
  <div v-if="!$v.username.required" class="error layui-form-mid">請輸入用戶名</div>
  <!-- 用戶名不符合規則的時候 -->
  <div v-if="!$v.username.email" class="error layui-form-mid">用戶名輸入格式錯誤</div>
</div>


<style> .error { display: none; } .form-group--error { .error { display: block; } } </style>
複製代碼

這裏有幾點我記錄一下:

:class="{ 'form-group--error': $v.username.$error }" 是配合 v-model.trim="$v.username.$model" 使用的，默認狀況下，錯誤提示是不顯示的，輸入文字的時候，纔去顯示。
methods 裏面須要在@input的時候，設置username的值，而且觸發this.$v.username.touch()告訴validate作一次校驗。

其餘見文檔

VeeValidate 的使用

安裝

npm i vee-validate

引入

// main.js
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
// 組件內使用
<div class="layui-form-item">
  <label class="layui-form-label">用戶名</label>
  <div class="layui-input-inline">
    <input type="text" name="username" v-model.trim="username" v-validate="'required|email'" placeholder="請輸入標題" autocomplete="off" class="layui-input" />
  </div>
  <div class="error layui-form-mid">{{errors.first('username')}}</div>
</div>
複製代碼

把提示變成中文

// 方法1： 

import VeeValidate, { Validator } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate)
Validator.localize('zh-CN', zh)


// 方法2： 能夠自定義錯誤信息
// src/local/index.js
import { Validator } from 'vee-validate'

import { Validator } from 'vee-validate'

const dictionary = {
  'zh-CN': {
    messages: {
      required: field => '請輸入' + field,
      email: () => '請輸入正確的郵箱格式',
      min: () => '密碼位數不正確',
      size: (field, params) => '驗證碼要求爲' + params
    },
    attributes: {
      email: '郵箱',
      password: '密碼',
      username: '帳號',
      code: '驗證碼'
    }
  }
}

Validator.localize(dictionary)
//main.js
import './local/index'
Vue.use(VeeValidate)
const validator = new Validator()
validator.localize('zh-CN')

複製代碼