axios安裝指令及數據請求

axios安裝指令及數據請求

一、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.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實現。