axios安装指令及数据请求
1、axios安装指令：cnpm axios --save
在核心文件(main.js)中引入
import axios from 'axios'
Vue.prototype.$axios = sxios
v-for="(item,index) in goods"
:key="index"
style="border:1px solid #999;margin:10px"
@click="gotoDetails(item.id)" // 点击图片进入详情页
>
// 商品主图链接
{{item.title}}
{{item.actualPrice}}
{{item.originalPrice}}
销量：{{item.monthSales}}
export default {
data() {
return {
goods: []
};
},
mounted() {
this.$axios
.get("http://api.kudesoft.cn/tdk/goods", {
params: {
pageId: 1, // 商品第几页
cids: 6 // 商品种类，6代表零食 如其他：衣服、化妆品
}
})
.then(res => {
console.log(res.data.data.data.list); // list是访问接口中的固定写法
let list = res.data.data.data.list;
this.goods = list;
})
.catch(err => {
console.log(err);
});
},
methods: {
gotoDetails(id) {
this.$router.push({
path: "/details",
query: {
id
}
});
2、点击图片进入详情页
2.1 指令：cnpm i vant --save (用vant轮播图片更方便)
在核心文件(main.js)中引入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
领券
商品详情：
:src="url"
width="600px">
export default {
data() {
return {
goodItem:{} // 给一个空的对象
};
},
mounted(){
let id = this.$route.query.id;
this.$axios.get(' http://api.kudesoft.cn/tdk/details',{
params:{
id
}
}).then(res=>{
this.goodItem = res.data.data.data;
this.goodItem.imgs = this.goodItem.imgs.split(',');
this.goodItem.detailPics = this.goodItem.detailPics.split(',')
}).catch(err=>{
console.log(err)
})
},
methods:{
back(){
window.history.back()
}
}
};
axios和ajax的区别
定义
Axios 在NPM上的描述是：Promise based HTTP client for the browser and node.js，是一种基于Promise封装的HTTP客户端。
AJAX完整是 Asynchronous Javascript And XML . 异步js和xml，是一种异步请求的技术。
区别
Axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端。就像$.ajax是通过callback+XHR实现一样，你也可以造个轮子叫XXX的，都是AJAX技术的一种具体实现。
简单来说： AJAX技术是实现网页的局部数据刷新，你可以通过XHR、Fetch、WebSocket等API实现。
)
