Vue3 | 前端调用多选列表格式的后端接口时配置

后端接口

• GET:/XXX/XXX
  • form1: Array[string]
  • form2: Array[string]
  • form3: Array[string]
  • form4: Array[string]
  • form1、form2、form3、form4可输入0个或多个
• 无输入：
  • Requst URl：https://.../xxx/xxx
  • 显示所有list数据
• 在form1处输入xxx：
  • Requst URl：https://.../xxx/xxx?form1=xxx
  • 显示form1为xxx的所有list数据
• 在form1处输入xxx,yyy：
  • Requst URl：https://.../xxx/form1=xxx1%2Cyyy
  • 显示form1为xxx和yyy的所有list数据
• 在form1和form2处分别输入xxx和yyy：
  • Requst URl：https://.../xxx/form1=xxx&form2=yyy
  • 显示form1为xxx和form2为yyy的所有list数据

页面

• 配置接口：src/api/page.js

export function listPage(params) {
    if(params) {
        const query = Object.keys(params)
        .filter(key => params[key] !== undefined && params !== null)
        .map(key => `${key}=${params[key]}`)
        .join("&");
        
        return request({
            url: `/XXX/XXX?${query}`,
            method: "get",
        });
    } else {
        return request({
            url: `/xxx/xxx`,
            method: "get",
        });
    }
}

• 显示界面：src/views/page/index.vue

<script>
import listPage from "@api/page.js";

export default {
    data() {
        return {
            Selected: {},
            tableData: {},
            tableLoading: false,
        }
    },
    methods: {
        try {
            this.tableLoading = true;
            this.filterForm = {
                form1: this.Selected.form1,  //form1为数组
                form2: this.Selected.form2,
                form3: this.Selected.form3,
                form4: this.Selected.form4,
            };
            const res = await listPage(this.filterForm);
            if(res.code === 20000) {
                this.tableData = res.data.xxxList;
            }
        } catch (error) {
            console.log("error fetching list:", error);
        } finally {
            this.tableLoading = false;
        }
    }
}
    
</script>