注册流程（管理系统）

是合合呀

已于 2023-12-18 16:29:17 修改

阅读量51

点赞数

文章标签：前端 vue.js javascript

于 2023-11-13 18:40:51 首次发布

本文链接：https://blog.csdn.net/Dl3464/article/details/134291364

版权

注册流程

流程：样式布局和表单验证，注册接口，验证码接口，点击注册的功能验证

1. 样式布局和表单验证：
a. elementUi组件库，form表单样式布局。
b. 利用Ui已有方式结合正则进行验证，需要结合后端的验证信息进行验证。

2. 注册接口调用：getApi() 函数调用 register( this.ruleForm ) 接口，this.ruleForm 是验证数据（后端验证数据 看下面 “ 接口数据传输的注意 ” ），结合返回响应进行操作 if (res.success == true){ token获取，成功操作，跳转操作 }eles{ 失败操作 } 。

 getRegisterApi() {
      getRegister(this.ruleForm).then((res) => {
        if (res.success == true) {
          this.$cookies.get('token')       可以看下面的 cookie使用
          this.$message({
            message: '注册成功',
            type: 'success',
          })
          this.$router.replace('/login')   可以看下面的 路由跳转
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },

3. 验证码接口调用：
a. getCodeApi() 函数调用 getCode() 接口。
b. 标签上用 v-html（详情看下面 “ v-html (解析标签验证码) ” ）对数据进行处理。
c. 验证码的点击刷新：codeClick() 函数调用 getCodeApi() 函数，点击调用（即实现点击刷新操作）

 
<div @click="codeClick" v-html="codeUrl"></div>   可以看下面的 v-html
   
// 验证码
    getCodeApi() {
      getCode().then((res) => {
        if (res.code == 200) {
          this.ruleForm.uuid = res.data.uuid
          this.codeUrl = res.data.captchaImage
        }
      })
    },
    
// 验证码点击
    codeClick() {
      this.getCodeApi()
    },

4. 点击注册功能验证：注册按钮点击注册，验证成功调用注册接口，注册成功。

注意：后端

// 注册验证
    submitForm(ruleForm) {
      delete this.ruleForm.passcheck;  删除多余数据 可以看下面的‘接口 数据传输的注意’
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 验证成功 调用 注册接口
          this.getRegisterApi()
          console.log('验证成功!')
        } else {
          console.log('验证失败!!')
          return false
        }
      })
    },

路由 router 与 route

$ router 是用来操作路由的，$ route 是用来获取路由信息的

路由跳转

this.$router.replace()

this.$router.push()

push 这个方法会向 history栈添加一个记录，点击后退会返回到上一个页面。可以保留浏览记录，回退到上一次操作页面。
replace 这个方法不会向 history里面添加新的记录，而是替换（覆盖）掉当前路由，点击返回，会跳转到初始页面。

vue属性

1、created：在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成识图。也叫钩子函数。
2、data：一般用来存放vue中的变量，通过return将数据返回到created中。
3、methods：用来写相关模块的函数 以及功能的实现，格式为async+方法名，通常通过发送请求请求到后台数据。
4、computed：是界于created和mounted之间发生的，此时正是页面进行渲染的时候
5、mounted：在模板渲染成html后调用，通常初始化页面完成后，再对 html 的 dom节点进行操作。
6、watch：用于监听数据变化，一旦数据改变就会执行相对应的函数。

vue中使用Cookie

配置cookie

在 main.js 中配置

import VueCookies from ' vue-cookies '

Vue.use ( VueCookies, { expires: '7d' })

填的值 1d 为一天，1h 为一小时，1min 为一分钟，1s为1秒，如下表：

// y year（年）

// m month（月）

// d day（日）

// h hour（时）

// min minute（分）

// s second（秒

1、存储值：this.$cookies.set(key,value) --> this.$cookies.set( 'token'，'张三' )
在Cookie中储存token（如下）

2、获取值：this.$cookies.get(key)
3、删除cookie值：this.$cookies.remove(key)
4、获取所有cookies返回为数组的形式：this.$cookies.keys(key)
5、检查某个cookies的value是否存在：this.$cookies.isKey(key)
6、删除后如果没有重启浏览器，cookies的key还在的,不过value为空。

vue特殊符号

“ : ” 是指令“ v-bind ”的缩写，绑定数据
“ . ” 是修饰符
“ @ ” 是指令“ v-on ”的缩写，它用于监听DOM事件
“ # ” 是“ v-sot ”的缩写，插槽
" {{}} " 插值语法
" $ " vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$。

v-html（解析标签验证码）

<div v-html=" codeUrl " ></div> 验证码图片url

v-text 和 v-html 起了插值表达式 {{}} 作用，将msg中的信息显示在视图中。
v-html：能解析HTML代码。
v-text：不能解析，它将msg原样输出。

验证码不用 elementUi 中的验证器validator
passcheck: {required: true, validator: validatePass2, trigger: 'blur' },
验证码 code: { required: true, message: '请输入验证码', trigger: 'blur' },

css元素居中

1、flex大法，不论什么型号的元素，以下三句话解决问题。

display:flex;
justify-content:center;
align-items:center;

2、postion定位法

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

position: absolute 与 position: relative
relative 在 absolute 之前
如果用 position 来布局页面，父级元素的position属性必须为 relative

接口数据后端传输的注意

1、必需数据，必须要有
2、数据类型，必须一致（要 string 类型，就别给 number 类型）
3、数据个数，必须一致（要 5 个数据，就别给 6 个数据）
4、数据格式，必须按要求（后端密码要8位且包含字母和数字，就不能写五位数字）这一点坑死我了因为后端数据没有写明确，导致报错422，一直找不出原因灵机一动猜想密码是否要满足一些条件，试了一下终于成功了 >_<

我在开发中遇到的问题：要 5个数据，给了 6个数据，报错422，在 data 中删除没用，需进一步操作：delete this.ruleForm.passcheck;

 ruleForm: {
        userName: '',
        realName: '',
        password: '',
        uuid: '',
        code: '',
        点击注册报错422 数据传输错误，要5个数据，给了6个数据
        多了一个 passcheck 数据
        在ruleForm 中把 passcheck 删除也不行，必须得做进一步处理，或者一个一个传
        需在接口处操作： delete ruleForm.passcheck;
      },
 // 注册表单验证
    submitForm(ruleForm) {
      // 删除多余数据
      delete this.ruleForm.passcheck;  
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 验证成功 调用 注册接口
          this.getRegisterApi()
          console.log('验证成功!')
        } else {
          console.log('验证失败!!')
          return false
        }
      })
    },