注册功能实现流程

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

注册实现流程

1.看接口文档

需要带两个参数 还是post请求
请求URL：/api/reguser
请求方式：POST
请求体：

参数名	必选	类型	说明
username	是	string	用户名
password	是	string	密码

2.书写接口

api接口同一文件书写接口

	src
	├── api
	     ├── index.js 	（api接口同一管理）

index.js

//api接口同一管理
import requests from "./request";

//注册接口
//   /reguser    请求方式：POST
export const reqRegister = (data) =>requests({ url: "/api/reguser", method: "POST", data});

接口要求带两个参数，我这里形参只写了data，data是一个对象，实参是data:data触发了ES6的简写只写data就可以，传参数传对象就可以了。

3.挂载API

第一种方法
要让任意组件可以使用API相关的接口，所以要在mian.js文件挂载在Vue的原型（组件实例的原型的原型指向的是Vue.prototype）

main.js

//引入相关API请求接口
import * as API from "./api/index";
//组件实例的原型的原型指向的是Vue.prototype
//任意组件可以使用API相关的接口
Vue.prototype.$API = API;

第二种方法
哪个组件想调用接口，就引入哪个接口函数
例如：
demo.vue

//引入接口函数
import { reqRegister  } from "@/api";
//然后就可以调用使用了

我这里演示第一种第一种（方便一点）

4.收集表单数据

通过v-model收集数据，可以通过vue官方的带工具检查是否收集到数据。
这里就不演示怎么收集数据了

data() {
	return {
		ruleForm: {
        	username: "",
       		pass: "",
       },
	}
}

5.发请求

数据我们已经收集好了，现在就是带着数据发请求。
一般这种都是注册按钮点击完发起请求，所以要在注册按钮绑定事件函数。

1.绑定事件函数

<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>

2.书写事件函数

 methods: {

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        //都验证通过进行发请求
        if (valid) {
          //  解构收集的表单数据
          const { username, pass } = this.ruleForm
          //后端需要application/x-www-form-urlencoded 格式的表单数据 通过URLSearchParams 解析参数 
          const params = new URLSearchParams();
          //append 插入一个指定的键/值对作为新的搜索参数
          params.append('username', username);
          params.append('password', pass);
          //解析好参数发请求
          let result = await this.$API.reqRegister(params)
          console.log(result);
          if (result.data.status == 0) {
            // 请求成功跳转登录页面并且弹出成功信息
            this.$message({type:'success',message:"注册成功"})
            this.$router.push("./login")
          } else {
            //element ui 弹窗提示
            this.$message.error(result.data.messages)
          }
        } else {
          this.$message.error("按提示输入")
          return false;
        }
      });
    },

特别注意，一开始写这里，后端接收不到我的数据，接口是请求成功的，浏览器也能接收到我传的数据，后端就是接收不到，这块卡了我一天，通过我的一步一步排查，发现后端需要application/x-www-form-urlencoded 格式的表单数据 ，因为这个接口是POST请求，如果是get请求是正常的。这问题原因和解决方案可以参考这里 链接: 原因和方案 不是每个人和我一样的，看你的后端需要什么样的表单数据

我这里采取就是：把参数通过URLSearchParams 解析参数 再来进行发请求

 //  解构收集的表单数据
          const { username, pass } = this.ruleForm
          //后端需要application/x-www-form-urlencoded 格式的表单数据 通过URLSearchParams 解析参数 
          const params = new URLSearchParams();
          //append 插入一个指定的键/值对作为新的搜索参数
          params.append('username', username);
          params.append('password', pass);
          //解析好参数发请求
          let result = await this.$API.reqRegister(params)

这样的大致注册流程就是这样啦！
小伙伴需要有一定的项目基础才能看得懂
看登录功能点这里 链接: 登录功能