常用接口场景

以学生（student）对象为例

# api.js

// 获取学生列表
export const listStudent = query => get(instance.baseURL+ '/students', query);

// 通过id获取学生信息
export const getStudentById = id => get(instance.baseURL+ '/students/'+id);

// 新增学生信息
export const saveStudent = data => post(instance.baseURL+ '/students',data);

// 更新学生信息
export const updateStudent = data => put(instance.baseURL+ '/students',data);

// 通过id删除学生信息
export const removeStudent = id => delete(instance.baseURL+ '/students/'+id);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# student/index.vue(列表|删除)


<template>
    <div>
        <div v-for="data in dataList" :key="data.id">
            <button @click="remove(data.id)">删除</button>
        </div>
    </div>
</template>
<script>

export default {
    onLoad() {
        this.getDataList();
    },
    data() {
        return {
            queryParam: {
                // 编号
                code: null,
                // 名称
                name: null
            },
            dataList: [],
        };
    },
    methods: {
        /**
         * 获取列表
         */
        getDataList() {
            listStudent(this.queryParam).then(res => {
                this.dataList = res.rows;
            });
        },
        remove(id){
            // 做一个确认删除提示
          removeStudent(id).then(res => {
                // 提示删除成功

                // 刷新列表
                this.getDataList();
            });

        }
    },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# student/add.vue(新增)

export default {
    onLoad() {

    },
    data() {
        return {
            data: {
                id: null,
                code: null,
                name: null
            }
        };
    },
    methods: {
        /**
         * 提交表单
         */
        submit() {
            saveStudent(this.data).then(res => {
                // 打印提示成功

                // 跳转/刷新 列表
            });
        },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# student/add.vue(编辑/详情)

基于新增页面做的编辑功能

详情就是不允许提交的编辑

export default {
    onLoad(options) {
        // 接受id参数  用于获取信息(用于编辑前回显)
        if (options.id) {
            getStudentById(options.id).then(res => {
                this.data = res.data;
            });
        }

    },
    data() {
        return {
            data: {
                id: null,
                code: null,
                name: null
            }
        };
    },
    methods: {
        /**
         * 提交表单
         */
        submit() {
            // 判断是否存在id，存在则编辑，不存在则新增
            if (this.data.id) {
                updateStudent(this.data).then(res => {
                    // 打印提示成功

                    // 跳转/刷新 列表
                });
            } else {
                saveStudent(this.data).then(res => {
                    // 打印提示成功

                    // 跳转/刷新 列表
                });
            }

        }
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

上次更新: 2024/08/14, 04:14:33

← 动态绑定 API接口统一管理→