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

注册实现流程

1.看接口文档

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

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)

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！