大前端学习第六课：使用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')

复制代码

今天学习的课程就到这里结束了。

我是海明月，前端小学生。