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

后端一般要求的传递方式：get 和 post1.传递的为普通参数(get)2.传递数组对象形式3.传递表单形式.......

刚刚好ā

12205人浏览 · 2022-02-23 12:00:37

刚刚好ā · 2022-02-23 12:00:37 发布

后端一般要求的传递方式：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中的分页按钮：

<div class="pagination">
			<el-pagination
				style="margin-bottom: 10px"
				background
				:current-page="currentPage"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:page-sizes="[20, 50, 100]"
				:page-size="pageSize"
				:total="total"
				layout="total, sizes, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>

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;
        }
      });
    },