项目实训-正则表达式与Echarts图表Base64化

创新项目实训

任务

已经实现了邮箱服务的后端逻辑，为了规范邮箱以及完成图表数据的发送，需要对前端进行增加额外的业务流程。

1. 正则表达式

   RE是对字符串操作的一种逻辑公式，用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个规则字符串用来表达对字符串的一种过滤逻辑。常用来检索、替换那些符合某个模式（规则）的文本。
   

   • 构建正则表达式对邮箱的正确与否进行判断

   const emailReg = /^([a-zA-Z0-9]+[-_]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
   //判断密码长度
   const validatePassword = (rule, value, callback) => {
     if (value.length < 6) {
       callback(new Error('密码长度不能少于6位'))
     } else {
       callback()
     }
   }
   //判断验证码
   const validateCode = (rule, value, callback) => {
     if (value.length===0) {
       callback(new Error('验证码不能为空'))
     } else {
       callback()
     }
   }
   //判断邮箱是否合理
   const validateEmail = (rule, value, callback) => {
     if (emailReg.test(value)){
       callback()
     }else{
       callback(new Error('邮箱格式不正确'))
     }
   }
   

   • 利用Element-ui中的规则对表单中相应的数据进行验证

   <el-form ref="registerForm" :model="registerForm" :rules="registerRules"></el-from> 
   registerRules: {
       password: [{ required: true, trigger: 'blur', validator: validatePassword }],
       username: [
           { required: true, message: '请输入用户名称', trigger: 'blur' },
           { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
         ],
       email: [{ required: true, message: '请填写电子邮箱', trigger: 'change',validator: validateEmail }],
       verifyCode: [{required:true,trigger: 'blur', validator: validateCode }]
     },
   

   

2. 验证码判断流程：更改注册逻辑即可

Register() {
  this.$refs.registerForm.validate(valid => {
    if(valid){
      if(this.registerForm.verifyCode==this.isVerifyCode){
        register({data:{userAccount:this.registerForm.userAccount,password:this.registerForm.password,email:this.registerForm.email}}).then(response=>{
      this.$notify({
      title: '成功',
      message: '注册成功,自动登录',
      type: 'success'
    });
    this.$store.dispatch('user/login',this.registerForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
      })
      const { data } = response
      console.log(response)
    })
      }
      else{
        this.$message({
        message: '验证码错误！',
        type: 'error'
      });
      }
    }
    else {
      console.log('error submit!!')
      return false
    }
  })
},

• 表单验证：

  • 使用$refs.registerForm.validate方法来触发表单验证。这里的registerForm应该是通过ref属性关联的一个表单组件实例。
  • 如果验证通过（valid为true），则继续执行后续的注册逻辑；否则，打印错误信息并返回false。

• 验证码校验：

  • 检查用户输入的验证码（this.registerForm.verifyCode）是否与服务器返回或生成的正确验证码（this.isVerifyCode）相匹配。
  • 如果验证码匹配，继续执行注册逻辑；否则，向用户显示错误消息。

• 发起注册请求：

  • 使用register函数发送注册请求，参数包括用户的账号、密码和邮箱。假设register是一个异步函数，用于向后端API发送HTTP请求。
  • 请求成功后，显示成功通知，并调用$store.dispatch(‘user/login’)进行自动登录，然后重定向到首页或其他指定路径。
  • 请求响应的数据被存储在response对象中，并打印出来供调试使用。

• 错误处理：

  • 如果在表单验证阶段发现错误，控制台会输出’error submit!!'，并且方法立即返回false，阻止进一步的执行。

3. Echart图表发送到邮箱的逻辑
   • 前端将Echart图表转换为Base64格式，传回后端
   • 后端构建HTML，将图片插入其中，然后发送到邮箱中

realHandleSend(){
      if (this.chartInstances[this.curIndex]) {
      var imgData = this.chartInstances[this.curIndex].getDataURL({
      pixelRatio: 2, // 导出图片的像素密度，数值越高清晰度越高，但图片体积也会相应变大
      backgroundColor: '#fff', // 图片背景色
      excludeComponents: ['toolbox'] // 排除不需要导出的部分，比如toolbox工具栏
    });