Ajax请求

参考：Ajax

Promise

参考：Promise

Axios

参考：Axios

fetch

参考：fetch

Async

参考：async

图书管理重构

展示列表

列表展示即后台请求数据，然后放到vue对象列表中。

请求数据使用axios进行请求，为了方便后续操作，先对axios对象设置基于地址与拦截器（直接返回相应内容）。

1
2
3
4
5
6
axios.defaults.baseURL = 'http://localhost:3000/';
axios.interceptors.response.use(function(res){
    return res.data;
}, function(error){
    console.log(error)
});

接下来在全局对象中定义一个方法用于获取数据

1
2
3
4
5
methods: {
    queryData: async function(){
        this.books = await axios.get('books');
    }
},

接下来只需要调用这个方法即可将列表的数据替换为获取的数据。

1
2
3
mounted: function(){
    this.queryData();
}

添加图书

添加图书发送一个post请求即可，其携带需要添加的名称。因此修改handle方法的else分支。

1
2
3
4
5
6
7
8
// 添加图书
var ret = await axios.post('books', {
    name: this.name
})
if(ret.status == 200) {
    // 重新加载列表数据
    this.queryData();
}

验证图书是否存在

1
2
3
4
5
6
7
8
9
10
11
12
13
watch: {
    name: async function(val) {
        // 验证图书名称是否已经存在
        var ret = await axios.get('/books/book/' + this.name);
        if(ret.status == 1) {
            // 图书名称存在
            this.submitFlag = true;
        }else{
            // 图书名称不存在
            this.submitFlag = false;
        }
    }
},

编辑图书

当点击触发toEdit事件时，应首先查询最新数据并填充到表单。因此：

1
2
3
4
5
6
7
8
toEdit: async function(id){
    // flag状态位用于区分编辑和添加操作
    this.flag = true;
    // 根据id查询出对应的图书信息
    var ret = await axios.get('books/' + id);
    this.id = ret.id;
    this.name = ret.name;
},

修改完成后重新修改提交事件即handle方法

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
handle: async function(){
    if(this.flag) {
        // 编辑图书
        var ret = await axios.put('books/' + this.id, {
            name: this.name
        });
        if(ret.status == 200){
            // 重新加载列表数据
            this.queryData();
        }
        this.flag = false;
    }else{
        // 添加图书
        var ret = await axios.post('books', {
            name: this.name
        })
        if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
        }
    }
    // 清空表单
    this.id = '';
    this.name = '';
},

删除

1
2
3
4
5
6
7
8
deleteBook: async function(id){
    // 删除图书
    var ret = await axios.delete('books/' + id);
    if(ret.status == 200) {
        // 重新加载列表数据
        this.queryData();
    }
},