西安公司网站,晋城企业网站建设价格,字体设计网,网站推广工作如何做1.3.3 请求方法的别名
Axios还针对不同的请求#xff0c;提供了别名方式的api,具体如下#xff1a;
方法描述axios.get(url [, config])发送get请求axios.delete(url [, config])发送delete请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, con…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
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/tr
tr aligncenter td1/tdtdTom/tdtdimg src width70px height50px/tdtdspan男/span!-- span女/span--/tdtd班主任/tdtd2009-08-09/tdtd2009-08-09 12:00:00/td/tr/table/div
/body
scriptnew 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 empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td
/tr
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/tr
tr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew 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
