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,id1).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文件的引入提供初始代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAjax-Axios-案例/title script srcjs/axios-0.18.0.js/script script srcjs/vue.js/script /head body div idapp table border1 cellspacing0 width60% tr th编号/th th姓名/th th图像/th th性别/th th职位/th th入职日期/th th最后操作时间/th /tr tr aligncenter td1/td tdTom/td td img src width70px height50px /td td span男/span !-- span女/span-- /td td班主任/td td2009-08-09/td td2009-08-09 12:00:00/td /tr /table /div /body script new Vue({ el: #app, data: { } }); /script /html在vue的mounted钩子函数编写Ajax请求请求数据代码如下mounted () { //发送异步请求,加载数据 axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result { }) }ajax请求的数据我们应该绑定给vue的data属性之后才能进行数据绑定到视图并且浏览器打开后台地址数据返回格式如下图所示因为服务器响应的json中的data属性才是我们需要展示的信息所以我们应该将员工列表信息赋值给vue的data属性代码如下//发送异步请求,加载数据 axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result { this.emps result.data.data; })其中data中生命emps变量代码如下data: { emps:[] },在tr标签上通过v-for指令遍历数据展示数据其中需要注意的是图片的值需要使用vue的属性绑定男女的展示需要使用条件判断其代码如下tr aligncenter v-for(emp,index) in emps td{{index 1}}/td td{{emp.name}}/td td img :srcemp.image width70px height50px /td td span v-ifemp.gender 1男/span span v-ifemp.gender 2女/span /td td{{emp.job}}/td td{{emp.entrydate}}/td td{{emp.updatetime}}/td /tr完整代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAjax-Axios-案例/title script srcjs/axios-0.18.0.js/script script srcjs/vue.js/script /head body div idapp table border1 cellspacing0 width60% tr th编号/th th姓名/th th图像/th th性别/th th职位/th th入职日期/th th最后操作时间/th /tr tr aligncenter v-for(emp,index) in emps td{{index 1}}/td td{{emp.name}}/td td img :srcemp.image width70px height50px /td td span v-ifemp.gender 1男/span span v-ifemp.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
)
