ToB企服应用市场:ToB评测及商务社交产业平台

标题: Javaweb之Axios的具体剖析 [打印本页]

作者: 数据人与超自然意识 时间: 2024-8-5 04:11
标题: Javaweb之Axios的具体剖析
1.3.3 哀求方法的别名

Axios还针对差别的哀求，提供了别名方式的api,具体如下：
方法形貌axios.get(url [, config])发送get哀求axios.delete(url [, config])发送delete哀求axios.post(url [, data[, config]])发送post哀求axios.put(url [, data[, config]])发送put哀求我们目前只关注get和post哀求，所以在上述的入门案例中，我们可以将get哀求代码改写成如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})

复制代码

post哀求改写成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})

复制代码

1.3.4 案例

需求：基于Vue及Axios完成数据的动态加载展示，如下图所示
其中数据是来自于配景程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
分析：
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们必要利用Ajax哀求获取配景的数据。但是Ajax哀求什么时候发送呢？页面的数据应该是页面加载完成，主动发送哀求，展示数据，所以我们必要借助vue的mounted钩子函数。那么拿到数据了，我们该怎么将数据表现表格中呢？这里就得借助v-for指令来遍历数据，展示数据。
步调：
- 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
- 我们必要在vue的mounted钩子函数中发送ajax哀求，获取数据
- 拿到数据，数据必要绑定给vue的data属性
- 在<tr>标签上通过v-for指令遍历数据，展示数据
代码实现：
- 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
- 提供初始代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Ajax-Axios-案例</title>
  8. <script src="js/axios-0.18.0.js"></script>
  9. <script src="js/vue.js"></script>
  10. </head>
  11. <body>
  12. <div id="app">
  13. <table border="1" cellspacing="0" width="60%">
  14. <tr>
  15. <th>编号</th>
  16. <th>姓名</th>
  17. <th>图像</th>
  18. <th>性别</th>
  19. <th>职位</th>
  20. <th>入职日期</th>
  21. <th>最后操作时间</th>
  22. </tr>
  24. <tr align="center" >
  25. <td>1</td>
  26. <td>Tom</td>
  27. <td>
  28. <img src="" width="70px" height="50px">
  29. </td>
  30. <td>
  31. <span>男</span>
  32. 
  33. </td>
  34. <td>班主任</td>
  35. <td>2009-08-09</td>
  36. <td>2009-08-09 12:00:00</td>
  37. </tr>
  38. </table>
  39. </div>
  40. </body>
  41. <script>
  42. new Vue({
  43. el: "#app",
  44. data: {
  46. }
  47. });
  48. </script>
  49. </html>
  复制代码
- 在vue的mounted钩子函数，编写Ajax哀求，哀求数据，代码如下：
  1. mounted () {
  2. //发送异步请求,加载数据
  3. axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
  5. })
  6. }
  复制代码
- ajax哀求的数据我们应该绑定给vue的data属性，之后才能举行数据绑定到视图；而且浏览器打开配景地址，数据返回格式如下图所示：
- 因为服务器相应的json中的data属性才是我们必要展示的信息，所以我们应该将员工列表信息赋值给vue的data属性，代码如下：
  1. //发送异步请求,加载数据
  2. axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
  3. this.emps = result.data.data;
  4. })
  复制代码
  其中，data中生命emps变量，代码如下：
  1. data: {
  2. emps:[]
  3. },
  复制代码
- 在<tr>标签上通过v-for指令遍历数据，展示数据，其中必要注意的是图片的值，必要利用vue的属性绑定，男女的展示必要利用条件判断，其代码如下：
  1. <tr align="center" v-for="(emp,index) in emps">
  2. <td>{{index + 1}}</td>
  3. <td>{{emp.name}}</td>
  4. <td>
  5. <img :src="emp.image" width="70px" height="50px">
  6. </td>
  7. <td>
  8. <span v-if="emp.gender == 1">男</span>
  9. <span v-if="emp.gender == 2">女</span>
  10. </td>
  11. <td>{{emp.job}}</td>
  12. <td>{{emp.entrydate}}</td>
  13. <td>{{emp.updatetime}}</td>
  14. </tr>
  复制代码

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-案例</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
this.emps = result.data.data;
})
}
});
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)