【无标题】

第四单元

1.接口设计

功能	生成图形验证码
地址	user/imgcode/str:uuid/
请求方式	get
成功响应	{返回图形验证码}
失败响应	{‘code’:400, ‘msg’:‘生产图形验证码失败’}

功能	校验图形验证码
地址	user/imgcode/str:uuid/
请求方式	post
POST参数	{‘imgcode’:图片验证}
成功响应	{‘code’:200, ‘msg’:‘生产图形验证码校验成功’}
失败响应	{‘code’:400, ‘msg’:‘生产图形验证码失败’}

功能	用户注册
地址	user/register/
请求方式	post
POST参数	{‘username’:用户名，‘mobile’:‘手机’, ‘pwd’:‘密码’,‘pwd2’:‘确认密码’,‘agree’:‘同意用户协议’}
成功响应	{‘code’:200, ‘msg’:‘注册成功’}
失败响应	{‘code’:400, ‘msg’:‘注册失败’}

2.uuid前端总结：

import {v4 as uuid4} from 'uuid'

  mounted(){
    // DOM节点刚刚完成挂载，生成默认的图形验证码
    this.genImageCode()
  },
    
    genImageCode(){
      // 生成一个uuid
      this.imageCodeID = uuid4()
      // 生成一个图片验证码地址
      this.iamgeCodeUrl = "/user/imgcode/" + this.imageCodeID + "/"
    },
      
  使用:  冒号动态绑定  src源  @click="genImageCode"点击图片进行刷新
  <img :src="iamgeCodeUrl" alt="图形验证码" @click="genImageCode">