axios安装指令及数据请求

axios安装指令及数据请求

1、axios安装指令：cnpm axios --save 

　　在核心文件（main.js）中引入

　　import axios from 'axios'

　　Vue.prototype.$axios = sxios

　　

<template>
  <div>
    <div
      v-for="(item,index) in  goods"
      :key="index"
      style="border:1px solid #999;margin:10px"
      @click="gotoDetails(item.id)"  // 点击图片进入详情页
    >
      <img :src="item.mainPic" width="260px" /> // 商品主图链接
      <p>{{item.title}}</p>
      <p>
        <!-- 领券后的价格 -->
        <span>{{item.actualPrice}}</span>  
        <!-- 商品原价 -->
        <s>{{item.originalPrice}}</s>
      </p>
      <!-- 销量 -->
      <p>销量：{{item.monthSales}}</p>
    </div>
  </div>
</template>

<script>
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轮播图片更方便）

　　　　https://youzan.github.io/vant/#/zh-CN/home

　　　　在核心文件（main.js）中引入
　　　　import Vant from 'vant';
　　　　import 'vant/lib/index.css';
　　　　Vue.use(Vant);

　　

<template>
  <div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(img,index) in goodItem.imgs" :key="index">
          <img :src="img" width="300px">
      </van-swipe-item>
    </van-swipe>
    <div>{{goodItem.title}}</div>
    <div>
        <!-- 领券 -->
        <a :href="goodItem.couponLink">领券</a>
    </div>
    <h3>商品详情：</h3>
    <div>
        <img v-for="(url,index) in goodItem.detailPics" :key="index"
            :src="url"
            width="600px">
    </div>
  </div>
</template>

<script>
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()
      }
  }
};
</script>

<style>
</style>

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实现。