今天，我們來做介面。

 　　首先我們可以找官方介紹，把程式碼貼到User.vue中。看看有沒有正常顯示出來

 1  
 2 
 3 <template>
 4     <div >
 5         <el-table
 6                 :data="tableData"
 7                 stripe
 8                 style="width: 100%">
 9             <el-table-column
10                     prop
 
="date"
11                     label="日期"
12                     width="180">
13             </el-table-column>
14             <el-table-column
15                     prop="name"
16                     label="姓名"
17                     width="180">
18             </el-table-column>
19
 
             <el-table-column
20                     prop="address"
21                     label="地址">
22             </el-table-column>
23         </el-table>
24     </div>
25 </template>
26 
27 <script>
28     export default {
29         name: "userManage",
30         data() {
 
31             return {
32                 tableData: [{
33                     date: '2016-05-02',
34                     name: '王小虎',
35                     address: '上海市普陀區金沙江路 1518 弄'
36                 }, {
37                     date: '2016-05-04',
38                     name: '王小虎',
39                     address: '上海市普陀區金沙江路 1517 弄'
40                 }, {
41                     date: '2016-05-01',
42                     name: '王小虎',
43                     address: '上海市普陀區金沙江路 1519 弄'
44                 }, {
45                     date: '2016-05-03',
46                     name: '王小虎',
47                     address: '上海市普陀區金沙江路 1516 弄'
48                 }]
49             }
50         }
51     }
52 </script>
53 
54 <style scoped>
55 
56 </style>
57 
58  

　　看到效果了，不錯。下一步從靜態記錄變成動態記錄。

　　找了一圈網上都說axios是官司方推薦那我們就使用這個吧。

　　要用這個需要新增外掛，三種方法，命令，vue ui，直接在package.json。

　　1. Vue ui 安裝依賴，輸入axios，選擇第一個，點選安裝。

　　2. Package.json直接安裝，開啟後，在dependencies看，直接輸入” "axios": "^0.18.0",“。之後右擊package.json，Run “npm install”。就可以了。

　　Vue生命週期可以總共分為8個階段：

　　beforeCreate（建立前）

　　created（建立後）

　　beforeMount(載入前)

　　mounted（載入後）

　　beforeUpdate（更新前）

　　updated（更新後）

　　beforeDestroy（銷燬前）

　　destroyed（銷燬後）

　　我們選擇在mountd里加載資料。

　　新增mounted事件

mounted() {}

在<script>開始的地方，引用axios

import axios from 'axios'

然後我們在mounted新增查詢程式碼。

var _this = this;
var queryUrl = "/api/user/query";
axios.get(queryUrl)
    .then(function (res) {
        _this.tableData = res.data
    })
    .catch(function (error) {
        console.log(error);
    });

 　　上章裡訪問地址是/user/query，為什麼到這裡就是/api/user/query呢？

　　解決跨域問題，我們使用前後端分離，就是兩個網站，ie裡的安全是不能訪問另一個網站的資料，所以就使用/api來訪問本地，然後訪問時轉換到我們實際的地方。為此我們需要修改vue.config.js的程式碼，之前我們已經寫了proxy，這就是幹這個用的。我們把相關的都配置上。配置完成

proxy: {
    '/api': {
        target: 'http://127.0.0.1:8080/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
            "^/api": ""
        }
    }
}

　　在這我們把後臺程式碼：

　　@PostMapping("query")

　　換成

　　@RequestMapping("query")

　　然後我們訪問 http://localhost:8085/api/user/query

　　就能看到我們上節課的成果

　　然後，我們訪問我們的介面，系統管理-使用者管理。

　　這是能看見畫了。後面有東西要優化。Mapper裡的對映關係，前端的axios需要封裝一套用於框架的內容，比如許可權驗證什麼的。

　　完整的user.vue程式碼

 1 <template>
 2     <div>
 3         <el-table
 4                 :data="tableData"
 5                 stripe
 6                 style="width: 100%">
 7             <el-table-column prop="username" label="使用者名稱" width="180" />
 8             <el-table-column prop="realname" label="姓名名" width="180" />
 9             <el-table-column prop="sex" label="性別" width="180" />
10             <el-table-column prop="mail" label="郵箱" width="180" />
11             <el-table-column prop="phone" label="電話" width="180" />
12             <el-table-column prop="remark" label="備註" width="180" />
13             <el-table-column prop="status" label="狀態" width="180" />
14             <el-table-column prop="editorName" label="修改人" width="180" />
15             <el-table-column prop="editTime" label="修改時間" width="180" />
16         </el-table>
17     </div>
18 </template>
19 
20 <script>
21     import axios from 'axios'
22 
23     export default {
24         name: "userManage",
25         data() {
26             return {
27                 tableData: []
28             }
29         },
30         mounted: function () {
31             var _this = this;
32             var queryUrl = "/api/user/query";
33             axios.get(queryUrl)
34                 .then(function (res) {
35                     console.log(res.data);
36                     _this.tableData = res.data
37                 })
38                 .catch(function (error) {
39                     console.log(error);
40                 });
41         }
42     }
43 </script>
44 
45 <style scoped>
46 
47 </style>