vue调用后端接口

在点js文件中写入以下代码 配置全局 axios

// 统一请求路径前缀在libs/axios.js中修改

import {

    getRequest,

    putRequest,

    postRequest,

    deleteRequest,

} from "@/libs/axios";

 

//  获取列表

export const selectTaskReason = (params) => {

    return postRequest("/TaskReason/selectTaskReason", params);

};

//  添加列表

export const saveTaskReason = (params, header) => {

    return postRequest("/TaskReason/saveTaskReason", params, header);

};

//  编辑列表

export const updateTaskReason = (params, header) => {

    return postRequest("/TaskReason/updateTaskReason", params, header);

};

//  删除列表

export const deleteTaskReason = (params) => {

    return postRequest("/TaskReason/deleteTaskReason", params);

};

---

在.vue中间调用

 // 添加用户
        add() {
            this.$refs.form.resetFields();
            this.form = { // 表单
                id: params.row.id,
                taskName: this.taskName,
                taskSubType: this.taskSubType,
                taskStatus: this.taskStatus,
                taskAmountType: this.taskAmountType,
                taskMoney: this.taskMoney,
                createBy: this.createBy,
                updateTime: this.updateTime,
                updateBy: this.updateBy,
                beginTime: this.beginTime,
                endTime: this.endTime,
                flag1: this.flag1,
                taskUnionId: this.taskUnionId,
                isUpload: this.isUpload,
                commissionRate: this.commissionRate,
                fissionMission: this.fissionMission,
                begitaskRecommendationnTime: this.taskRecommendation,
            },
                this.modalTitle = "添加用户"
            this.userModalVisible = true;//弹框
        },
        submitUser() {
            API_Demo.AddDemo(this.form, { 'Content-Type': 'application/json' }).then((res) => {
                if (res.code == 200) {
                    this.getDemoData();
                    this.$Message.success('添加成功');
                    this.userModalVisible = false;
                }
            })
        },
        update() {
            this.updateMemberSubmit();
        },

        //编辑列表
        updateMemberSubmit() {
            API_TaskReason.updateTaskReason(this.updateForm, { 'Content-Type': 'application/json' }).then((res) => {
                if (res.code == 200) {
                    this.getTaskReasonData();
                    this.$Message.success('编辑成功');
                    this.updateModalVisible = false;
                }

            })
        },

        //刪除列表
        deleteMember() {
            API_TaskReason.deleteTaskReason({ id: this.id }).then((res) => {

                if (res.code == 200) {
                    this.remove = false;
                    console.log(111111);
                    this.$Message.success('删除成功');
                    this.getTaskReasonData();

                }

            })
        },

      // 分页 修改页码

        changePage(v) {

            this.searchForm.pageNumber = v;

            // this.getUserList();

            this.getTaskReasonData();

        },

        // 分页 修改页数

        changePageSize(v) {

            this.searchForm.pageSize = v;

            this.searchForm.pageNumber = 1;

            // this.getUserList();

            this.getTaskReasonData();

        },

       //查询列表

        getTaskReasonData() {

            API_TaskReason.selectTaskReason(this.searchForm).then((res) => {

                console.log(24234324, res.result)

                console.log(2323232323, res.result.records);

                if (res.result.records) {

                    //把你的数据存入到data

                    this.data = res.result.records

                    this.total = res.result.total

                }

            });

        },

vue中需要声明的   

form表单中的就是你前端获取到的后端传过来的值

 form: { // 表单

                id: "",        

                taskName: "",

                taskType: "",

                taskSubType: ""

            }

searchForm表单就是分页数据

         searchForm: {

                // 请求参数

                pageNumber: 1,

                pageSize: 10,

                order: "desc",

                disabled: "OPEN",

                createTimeStart: "",

                createTimeEnd: ""

            },

这些都是调用接口想在前端页面实现 你需要弄一个点击事件 点击调用

例如删除 弄个确定和取消

        //删除

        ok() {

            this.deleteMember();

        },

        cancel() {

        },

查询数据的话不需要弄点击事件 不过你需要在你data里面去定义一个空数组

表格中设置一个  :data去等于它

 

 由于查询不需要点击事件我们需要设置一个mounted方法

这样去调用查询接口 

 mounted() {

        this.getTaskReasonData();

    }