23. Vue 使用 vue-resource 发起get请求，获取列表数据

需求

上一节讲诉了「Vue 使用 vue-resource 发起get、post、jsonp请求」，那么本章节则使用发起「get请求后，获取数据渲染到列表中」。

下面使用Flask框架作为后台服务来展示这个示例。

设计API接口

URL地址：/get_list
作用描述：获取列表中的数据
请求方式：GET
传入api的参数：无
返回数据格式：json
返回数据格式样例：

{
  "messages": [
    {
      "Ctime": "2020-01-21 21:25:44",
      "Name": "奔驰",
      "id": 1
    },
    {
      "Ctime": "2020-01-20 21:25:44",
      "Name": "宝马",
      "id": 2
    },
    {
      "Ctime": "2020-01-19 11:25:44",
      "Name": "法拉利",
      "id": 3
    },
  ],
  "status": 0, # 0请求成功 1请求失败
}

Flask 后台服务

编写Flask后台服务返回相关json数据，提供前端渲染。

from flask import Flask, jsonify,request,make_response

# 实例化app
app = Flask(import_name=__name__)

@app.route('/get_list', methods=["GET"])
def get_list():

    data = {
        'status':0, # 0请求成功 1请求失败
        'messages' : [
            {'id': 1, 'Name': '奔驰', 'Ctime': '2020-01-21 21:25:44'},
            {'id': 2, 'Name': '宝马', 'Ctime': '2020-01-20 21:25:44'},
            {'id': 3, 'Name': '法拉利', 'Ctime': '2020-01-19 11:25:44'},
            {'id': 4, 'Name': '丰田', 'Ctime': '2020-01-18 13:25:44'},
            {'id': 5, 'Name': '特斯拉', 'Ctime': '2020-01-17 15:25:44'},
        ],
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
    return res


if __name__ == '__main__':
    app.run(debug=True)

使用postman测试get请求如下：

Vue前端发起get请求，渲染列表数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
    <!--  3.导入vue-resource，注意：需要先引入vue.js  -->
    <script src="lib/vue-resource-1.5.1.js"></script>

</head>
<body>

<div id="app">

    <div class="container">

        <!-- 搜素条件 start -->
        <div class="row mt-2">
            <!-- 输入添加数据的id -->
            <div class="form-group row">
                <label for="input_id" class="col-sm-2 col-form-label">ID</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="input_id" placeholder="ID" v-model="id">
                </div>
            </div>

            <!-- 输入添加数据的name -->
            <div class="form-group row ml-3">
                <label for="input_name" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="input_name" placeholder="Name" v-model="name">
                </div>
            </div>

            <!-- 添加按钮  -->
            <input type="button" value="添加" class="btn btn-primary ml-2 mb-3">

            <!-- 搜素关键字 -->
            <input type="text" class="form-control" id="input_keywords" placeholder="输入关键字" v-model="searchName">

        </div>
        <!-- 搜素条件 end -->

        <!-- table列表 start-->
        <div class="row">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Ctime</th>
                    <th scope="col">Operation</th>
                </tr>
                </thead>
                <tbody>

                <!-- 使用v-for遍历数据，并且设置key保证组件唯一性  -->
                <tr v-for="item in list" :key="item.id">
                    <th scope="row">{{ item.id }}</th>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Ctime }}</td>
                    <!-- 1.绑定click事件，并且使用prevent修饰符阻止默认事件，避免a跳转页面 -->
                    <!-- 2.绑定del()方法，将该行的item.id传入del()方法中 -->
                    <td><a href="#">删除</a></td>
                </tr>

                </tbody>
            </table>
        </div>
        <!-- table列表 end-->

    </div>

</div>

<script>

    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            searchName: '', // 关键字
            list: [], // 设置列表的数据 list
            fontSize: 32
        },
        methods: {},
        filters: {},
        // 生命周期函数
        created() { //  在 created 中，data 和 methods 都已经被初始化好了！
            //  当发起get请求之后， 通过 .then 来设置成功的回调函数
            this.$http.get('http://127.0.0.1:5000/get_list').then(function (result) {
                // 注意：通过 $http 获取到的数据，都在 result.body 中放着
                console.log(result.body.status); // 打印返回json中的status状态
                console.log(result.body.messages); // 打印返回json中的messages数组
                this.list = result.body.messages; // 将messages数组赋值给this.list，然后this.list会渲染到列表中
                console.log(this.list);
            })

        },
    })
</script>

</body>
</html>

打开浏览器查看渲染效果如下：

已经可以通过后端的get请求数据，渲染到列表中了。但是下面还可以优化一下，判断json请求是否正常。

当返回json数据中的status == 0，才能认为请求是正常的，否则请求失败，如下：

        // 生命周期函数
        created() { //  在 created 中，data 和 methods 都已经被初始化好了！
            //  当发起get请求之后， 通过 .then 来设置成功的回调函数
            this.$http.get('http://127.0.0.1:5000/get_list').then(function (result) {
                // 注意：通过 $http 获取到的数据，都在 result.body 中放着
                console.log(result.body.status); // 打印返回json中的status状态
                console.log(result.body.messages); // 打印返回json中的messages数组

                if (result.body.status === 0){
                    // 请求正常
                    this.list = result.body.messages; // 将messages数组赋值给this.list，然后this.list会渲染到列表中
                    console.log(this.list);
                } else{
                    // 请求异常
                    alert("请求失败！")
                }

            })