技师学院18网络研修课程-AXIOS基础课程

设置VUE代理

  devServer: {
    proxy: {
      "/api": {
        target: "http://js.manong.cloud",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
        },
      }
    },
  },

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

<template>
  <div>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(i,k) in banner" :key="k">
        <img :src="i" alt="" style="width: 100%;height:100%">
      </van-swipe-item>
    </van-swipe>

    <van-grid>
      <van-grid-item icon="photo-o" :text="i.name" v-for="(i, k) in grid" :key="k" />
    </van-grid>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
    </van-grid>

    <van-card num="2" v-for="(i, k) in 10" :key="k" price="2.00" desc="描述信息" title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      banner:[],
      grid: [
        { name: '彩妆' },
        { name: '面膜' },
        { name: '电器' },
        { name: '护理' },
        { name: '彩妆' },
        { name: '面膜' },
        { name: '电器' },
        { name: '护理' },
      ],
      ima1: require("@/img/banner.jpeg")
    }
  },
  /**
   * 页面加载时
   * @return {[type]} [description]
   */
  mounted() {
    console.log("页面加载完成")
    let that = this;
    axios.get('/api/home/banner')
      .then(function (response) {
        console.log(response);
        if(response.data.code===0){
          that.banner = response.data.data
        }
      })
      .catch(function (error) {
        console.log(error);
      })

  },
  /**
   * 页面调用函数
   * @type {Object}
   */
  methods: {}
}
</script>