接口总结--vue前后端接口对接，传递数值的不同形式（表单formData\json\拼接url等）_刚刚好ā_vue接口调用传值

未知 02-07 7658

后端一般要求的传递方式：get 和 post

1.传递的为普通参数-对象形式(使用get)

api的js文件中：

// 删除 export function delFormData(param) { return request({ url: "/xxx/xxxx/delFormData", method: "get", params: { ids: param.ids, tableName: param.tableName, userId: param.userId } }); }

后端的swagger中：

??vue文件中：

import { delFormData,} from "@/api/xxx/formApi";

在删除按钮的点击事件deleteFiles()处，可进行多个的删除。?

// 删除文件 deleteFiles() { if (this.multipleSelection.length > 0) { this.$confirm("确定删除？", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { let idArr = []; // 遍历勾选内容 this.multipleSelection.forEach(item => { idArr.push(item.序号); }); let param = { ids: idArr.join(","), tableName: this.$route.query.md5num, userId: 4 }; delFormData(param).then(res => { if (res) { this.$message.success("删除成功"); this.refreshData(); } else { this.$message.warning("请稍后再试"); } }); });

2.传递的为formData表单形式

api的js文件中：

export function rulesPage(param) { return request({ url: "/xxxx/xxx/selectPage", method: "post", data: param }); }

后端swagger中：

vue文件中：

import { rulesPage } from "@/api/xxx/rules";

?vue文件中获取表数据接口对接，将接口写在获取表数据的方法listRuleChange()下，将所传递参数拼接为表单形式。

// 获取规则数据 async listRuleChange() { this.rulesTableLoading = true; // 获取列数据-表单形式 let tablename = this.$route.query.md5num; let form = new FormData(); form.append("current", this.ruleCurrentPage); form.append("size", this.rulePageSize); form.append("tableName", tablename); let pageResult = await rulesPage(form); this.rulesTableLoading = false; this.ruleCurrentPage = 1; if (pageResult.data.data) { this.ruleCurrentPage = 1; this.ruleTotal = pageResult.data.count; this.rulesData = pageResult.data.data; } },

3.传递的为json形式

api的js文件中：

// 增加 export function rulesInsert(param) { return request({ url: "/xxxx/xxxx/insert", method: "post", headers: { "Content-Type": "application/json" // 如果写成contentType会报错 }, data: param }); }

后端的swagger中：

?vue文件中：

import { rulesInsert } from "@/api/xxx/rules";

?点击增加按钮，输入名称，在复选框中选择，将输入的名称和复选框中选择所对应的名称传递，传递方式为json形式。在确认按钮点击事件confirmDataInfo()处写接口，selArr为多选框的v-model，即被选择的多选框。此处采用join（‘’）方法可实现数组重组为字符串。

confirmDataInfo() { // 将数组重组为字符串，并以 , 进行分割 let notnulls = this.selArr.join(","); // 整理参数 let param = { name: this.nameValue, notNull: notnulls, tableName: this.tableName }; rulesInsert(param).then(res => { if (res.data.code == 200) { this.$message.success("规则增加成功"); this.dialogVisible = false; } else { this.$message.error("规则增加失败"); } }); // 刷新页面 this.$emit("refreshRulesData"); }

4.传递的为数组对象形式

api的js文件中：

// 授权 ==> 授权指定用户可以访问 export function specifyUser(param) { return request({ url: "/xxxxx/specifyUser", method: "post", headers: { "Content-Type": "application/json" // 如果写成contentType会报错 }, data: param }); }

后端的swagger中：（要求返回的参数为数组对象形式）

??vue文件中：

import specifyUser from "@/xxx/xxxx/xxxx";

页面中可多选多条数据，同时授权给多个用户。要求传递的是数据的id和用户的id，使用双重循环可实现。

在确定按钮的方法处拼接参数和调用接口，confirmBatchAuth为确定按钮的方法，isAuth,groupIds为该方法从别的文件传递过来的参数，isAuth=1时为指定用户授权，groupIds为选中的用户id。multipleSelection为页面存放被选中数据的数组，对用户数组和数据数组进行双层遍历，将其以对象的形式写入数组。

confirmBatchAuth(isAuth, groupIds) { let newArr = []; // 指定用户授权存放 this.multipleSelection.forEach((item) => { groupIds.forEach((ite) => { let obj = { cameraIndexCode: item.cameraIndexCode, userId: ite, }; newArr.push(obj); }); }); // 授权指定用户访问--指定用户为isAuth==1 if (isAuth == 1) { specifyUser(newArr).then((res) => { if (res.status == 200) { this.$message.success("授权成功"); } else { this.$message.warning("授权失败"); } }); } },

5.传递一个参数拼接在url中（一）

api的js文件中：

在js文件中url需拼接参数，一个的情况下可直接将参数写在接口名后的括号中

export function removeById(id) { return request({ url: `/xxxx/xxxxx/removeById/${id}`, method: "get" }); }

?后端的swagger：

?vue文件中：

删除按钮：

删除按钮在table那一列，该列的数据信息通过slot-scope使用row可获取

<el-table-column prop="operate" label="操作"> <template slot-scope="scope"> <el-popconfirm class="del-btn" title="确定删除吗？" @confirm="delData(scope.row)"> <el-button slot="reference" type="text" size="small">删除</el-button> </el-popconfirm> </template></el-table-column >

可直接将传递的参数写在接口名后的括号中

// 删除 delData(row) { removeById(row.id).then((res) => { if (res.data.code == 200) { this.$message.success('删除成功') this.xxxx() // 刷新页面的方法 } else { this.$message.warning('请稍后再试') } }) },

6.传递2个参数拼接在url中（二）：一般为分页查询

api的js文件中：

export function selectPage(param) { return request({ url: `/xxxxx/xxxxxs/selectPage/${param.current}/${param.size}`, method: "get" }); }

?后端的swagger：

vue文件中：

template中的分页按钮：

?data中：

currentPage: 1, pageSize: 20, total: 0,

mounted中：加载页面时即加载分页查询的数据

mounted() { this.getData() },

?methods中：

// 底部分页-当前页 handleCurrentChange(val) { this.currentPage = val this.getData() }, // 底部分页-数目切换 handleSizeChange(val) { this.pageSize = val this.currentPage = 1 this.getData() }, // 获取分页查询数据 getData() { let param = { current: this.currentPage, size: this.pageSize } selectPage(param).then((res) => { if (res.data.code == 200) { this.tableData = res.data.data this.total = res.data.count } }) },

7.传递多个参数拼接在url中（三）

api的js文件中：

在js文件中url需拼接参数，具体拼接方法根据swagger后端调试的F12中确定

// 分页查询 export function historySelectPage(param) { return request({ url: `/xxxxx/xxxx/selectPage/${param.current}/${param.size}/?tableName=${param.tableName}`, method: "get" }); }

本次接口后端swagger的F12中显示：

?后端的swagger：

???vue文件中：普通的传参为对象形式的接口对接

// 获取 beforeHistory() { let param = { current: this.currentPage, size: this.pageSize, tableName: this.tableName }; historySelectPage(param).then(res => { if (res.data.data) { this.tableData = res.data.data; this.total = res.data.count; } }); },