数据交互 页面组件读取数据

以表格数据为例

1. 在页面中使用“假数据”

在Element UI表格部分中有比较详细的例子说明如何在页面中使用固定数据测试的例子

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

2. 前端和后端的接口通信

后端封装好的API在前端调用，前端用GET、POST、DELETE、PUT等方法访问后端的数据

我们在页面中写死的数据并不能够真实投入使用，所以我们需要在页面中与后端交互，得到或者是发送数据，让我们的项目真正动态起来

我将用表格控件演示如何实现前后端通信

注意：我在这里使用的并不是真正的后端，而是使用插件模拟接口请求

1. 首先创建vue项目

2. 导入Element UI库

安装element ui

npm install element-ui

在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3. 导入axios库

安装axios

npm install axios

在main.js中引入

import axios from 'axios'
Vue.prototype.$http = axios

4. 创建测试组件并在App.vue中使用

<template>
  <div id="app">
    <list/>
  </div>
</template>

<script>
import list from "@/components/list";

export default {
  name: 'App',
  components: {
    list
  }
}
</script>

5. 安装jsonserver，设置数据

npm install json-server

在项目路径下新建一个文件夹data，用来存放测试数据

在data中新建一个文件data.json，粘贴入以下数据

{
   
  "user": [
    {
   
      "id": 1,
      "name": "user1",
      "age": "20"
    },
    {
   
      "id": 2,
      "name": "user2",
      "age": "21"
    },
    {
   
      "id": 3,
      "name": "user3",
      "age": "20"
    },
    {
   
      "id": 4,
      "name": "user4",
      "age": "21"
    },
    {
   
      "id": 5,
      "name": "user5",
      "age": "20"
    },
    {
   
      "id": 6,
      "name": "user6",
      "age": "21"
    },
    {
   
      "id": 7,
      "name": "user7",
      "age": "20"
    },
    {
   
      "id": 8,
      "name": "user8",
      "age": "21"
    }
  ]
}

在data目录下运行：

json-server data.json

这时会启动我们的测试服务器，请保持json-server为开启状态

6. 编写表格组件

插入一个表格组件，绑定数据tableData，tableData接受数组对象

完整的代码如下：

<template>
    <div>
        <el-container>
            <div>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            prop="id"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="age"
                            label="年龄">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="large">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "userlist",
    methods: {
        handleClick(row) {
            // eslint-disable-next-line no-unused-vars
            axios.delete('http://localhost:3000/user' + '/' + row.id).then((res) => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.getData();
            }).catch(error => {
                console.log(error)
                this.$message({
                    message: '删除失败',
                    type: 'error'
                })
            })
        },
        getData() {
            axios.get('http://localhost:3000/user')
                .then(response => {
                    this.tableData = response.data
                })
                .catch(error => {
                    console.log(error)
                })
        }
    },
    data() {
        return {
            tableData: null
        }
    },
    mounted() {
        this.getData();
    }
}
</script>

在上面的例子中使用了axios HTTP库，用来发送HTTP请求；使用了json-server模拟服务端数据

如何使用axios？

  1. 在组件中导入axios

import axios from ‘axios’;

  1. 使用axios.get等方法发送请求

这是一个典型的请求数据案例

getData() {
    axios.get('http://localhost:3000/user')
        .then(response => {
            this.tableData = response.data
        })
        .catch(error => {
            console.log(error)
        })
}
  1. 处理得到的数据

写在结尾

在开发中经常遇到“同源策略”问题，例如我想要获取某个公共天气API接口的数据，如果我直接在axios.get中输入api地址，那么很大概率产生报错，比较常见的做法是在项目中添加代理，可以消除一部分因为“跨域”带来的困扰。