Ajax-03.Axios-案例

基于Vue以及Axios完成数据动态加载展示

    1.数据准备的url：https://yapi.pro/mock/401965/user/getById

    2.在页面加载完成后，自动发送异步哀求，加载数据，渲染展示页面（性别：1代表男，2代表女）

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Ajax-Axios-案例</title>
8.     <script src="js/axios.js"></script>
9.     <script src="js/vue.js"></script>
10.     <style>
11.         table {
12.             text-align: center;
13.             margin: 0 auto;
14.             border: 1px solid black;
15.         }
16.         th,td {
17.             border: 1px solid black;
18.         }
19.     </style>
20. </head>
21. <!--
22.     基于Vue以及Axios完成数据动态加载展示
23.     1.数据准备的url：https://yapi.pro/mock/401965/user/getById
24.     2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）
25. -->
26. <body>
27.     <div id="app">
28.         <table cellspacing="0" width="60%">
29.             <tr>
30.                 <th>编号</th>
31.                 <th>姓名</th>
32.                 <th>图像</th>
33.                 <th>性别</th>
34.                 <th>职位</th>
35.                 <th>入职日期</th>
36.                 <th>最后操作时间</th>
37.             </tr>
39.             <tr v-for="(emp,index) in emps">  <!-- 遍历展示数组emps中的数据 -->
40.                 <td >{{index + 1}}</td>
41.                 <td>{{emp.name}}</td>
42.                 <td>
43.                     <img  v-bind:src="emp.image" width="70px" height="50px">
44.                 </td>
45.                 <td>
46.                     <span v-if="emp.gender == 1">男</span>
47.                     <span v-if="emp.gender == 2">女</span>
48.                 </td>
49.                 <td>{{emp.job}}</td>
50.                 <td>{{emp.entrydate}}</td>
51.                 <td>{{emp.updatedate}}</td>
52.             </tr>
53.         </table>
54.     </div>
55. </body>
56. <script>
57.     new Vue({
58.         el:"#app",
59.         data:{
60.             emps:[] // 赋值给vue中的数据模型emps数组
61.         },
62.         mounted () {  // mounted:vue生命周期中的挂载完成状态，当挂载完成后，自动调用axios的get方法用来向服务器请求数据
63.             // 发送异步请求，加载数据
64.             axios.get("https://yapi.pro/mock/401965/user/getById").then(result => {  // 将请求到的数据交给一个result对象
65.                 /*  
66.                 调用result中的data属性拿到数据，然后我们只需要拿到服务器中的data这个属性名对应下的属性值即可，因此再次.data
67.                 然后把他交给this.emps，this代表的就是当前对象，emps就是vue对象下的一个数据模型（是一个数组）
68.                 */
69.                 this.emps = result.data.data;   
70.             });
71.         }
72.     })
73. </script>
74. </html>

复制代码