考务管理系统（一）

一、验证码的生成代码

<template>
  <div>
   <canvas id="canvas" width="100" height="40" @click="reclick()" ref= 'canvas' style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
  </div>
</template>

<script>
export default {
  name: 'JudgeCode',
  data () {
    return {
      ShowNum: []
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    reclick () {
      // 点击更新
      this.draw()
    },
    draw () {
      const CanvasWidth = this.$refs.canvas.clientWidth
      const CanvasHeigth = this.$refs.canvas.clientHeight
      const canvas = this.$refs.canvas// 获取到canvas的对象，演员
      const context = canvas.getContext('2d')// 获取到canvas画图的环境，演员表演的舞台
      canvas.width = CanvasWidth
      canvas.height = CanvasHeigth
      var sCode = 'A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m'
      const aCode = sCode.split(',')
      const aLength = aCode.length// 获取到数组的长度
      for (let i = 0; i <= 3; i++) {
        const j = Math.floor(Math.random() * aLength)// 获取到随机的索引值
        const deg = Math.random() * 30 * Math.PI / 180// 产生0~30之间的随机弧度
        const txt = aCode[j]// 得到随机的一个内容
        this.ShowNum[i] = txt
        const x = 10 + i * 20// 文字在canvas上的x坐标
        const y = 20 + Math.random() * 8// 文字在canvas上的y坐标
        context.font = 'bold 23px 微软雅黑'

        context.translate(x, y)
        context.rotate(deg)

        context.fillStyle = this.randomColor()
        context.fillText(txt, 0, 0)

        context.rotate(-deg)
        context.translate(-x, -y)
      }
      for (let i = 0; i <= 5; i++) { // 验证码上显示线条
        context.strokeStyle = this.randomColor()
        context.beginPath()
        context.moveTo(Math.random() * CanvasWidth, Math.random() * CanvasHeigth)
        context.lineTo(Math.random() * CanvasWidth, Math.random() * CanvasHeigth)
        context.stroke()
      }
      for (let i = 0; i <= 30; i++) { // 验证码上显示小点
        context.strokeStyle = this.randomColor()
        context.beginPath()
        const x = Math.random() * CanvasWidth
        const y = Math.random() * CanvasHeigth
        context.moveTo(x, y)
        context.lineTo(x + 1, y + 1)
        context.stroke()
      }
      this.sendcode()
    },
    randomColor () { // 得到随机的颜色值
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    sendcode () {
      // console.log(this.ShowNum)
      // 把验证码发送到 loginUI 进行验证
      this.$emit('getCode', this.ShowNum)
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

---

$emit 传递多个参数注意点

---

三、vueRouter Error: Avoided redundant navigation to current location: “/XX“.

错显示路由重复，对功能没有影响,可是强迫症看着不爽。

解决方案：

 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push (location) {
      return originalPush.call(this, location).catch(err => err)
    }

router 文件下 index.js 中添加上面代码即可。

四、router-view 组件间传值

情况一：router-view 子组件发生变化导致父组件发生改变

父组件：

<router-view @getMessage="showMsg"></router-view>
showMsg (val) {   // methods方法  val即为子组件传过来的值
  console.log(val)
}

子组件：

this.$emit('getMessage', “传给父组件的值”);

情况二：router-view 父组件发生变化导致子组件发生改变

父组件：

<router-view  :search-val="searchVal"></router-view>
searchVal: '需要传给子组件的值',  // data里面申明

子组件：

props: ['searchVal'],

小贴士： props 注意书写规范，建议接收用 短横线命名， props读取用 驼峰式

---

五、vue 格式化文档 " " -> ’ ’ , 自动去分号

在根目录新建 .prettierrc 文件 ， 写入如下代码即可

{
  "semi": false,
  "singleQuote": true
}