axios的使用以及Vue动画

axios 的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装方法

使用 npm:

npm install axios

引入

import axios from "axios";

javascript 复制代码

<script>
import {defineComponent} from 'vue'
import axios from "axios";

export default defineComponent({
    name: "axiosView",
    data() {
        return {
            imgSrc: '',
            imgList: [],
            courseList: [],
            boutiqueList: []
        }
    },
    methods: {
        getList(type) {
            return axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
                type,
                pageNum: 1,
                pageSize: 5
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
        }
    },
    created() {
        // console.dir(axios)
        console.log(this.$axios)
        // get
        axios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=5').then(res => {
            // console.log(res)
            this.imgSrc = res.data.data[0].imgUrlPc
            this.imgList = res.data.data
            // console.log(this.imgList)
        })
        //     post
        let url = new URLSearchParams()   // application/x-www-form-urlencoded
        // let url =new FormData()    formData
        url.append('type', 'free')
        url.append('pageNum', 1)
        url.append('pageSize', 5)

        axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', url).then(() => {
            // console.log(res)
        })
        // url地址  请求的参数  设置请求头
        // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
        //     type: 'free',
        //     pageNum: 1,
        //     pageSize: 5
        // }, {
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded'
        //     }
        // }).then(res => {
        //     this.courseList = res.data.rows
        // })

        // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
        //     type: 'boutique',
        //     pageNum: 1,
        //     pageSize: 5
        // }, {
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded'
        //     }
        // }).then(res => {
        //     this.courseList = res.data.rows
        // })

        this.getList('free').then(res => {
            // console.log(res)
            this.courseList = res.data.rows
        })
        this.getList('boutique').then(res => {
            // console.log(res)
            this.boutiqueList = res.data.rows
        })
    }
})
</script>

<template>
    <div>
        <img :src="imgSrc" alt="">
        <!--        <img v-for="item in imgList" :key="item.id" :src="item.imgUrlPc" alt="">-->

        <!--        <div class="box" v-for="item in imgList" :key="item.id"-->
        <!--             :style="`background-image: url(${item.imgUrlPc})`"></div>-->

        <div class="container">
            <div class="box" v-for="(item) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl"
                     alt="">
                <div>{{ item.courseTitle }}</div>
                <div>共有{{ item.learningNum }}人学习</div>
                <div>免费</div>
            </div>
        </div>


        <div class="container">
            <div class="box" v-for="(item) in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl"
                     alt="">
                <div>{{ item.courseTitle }}</div>
                <div>共有{{ item.learningNum }}人学习</div>
                <div v-if="item.isFree === '1'">免费</div>
                <div v-else-if="item.isDiscount === '1'"> {{item.discountPrice}} <del>{{item.coursePrice}}</del></div>
                <div v-else>{{item.coursePrice}}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
  width: 1000px;
  height: 300px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;

  .box {
    width: 19%;

    img {
      width: 100%;
    }
  }
}
</style>

axios封裝

javascript 复制代码

// 对http请求进行封装
import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
  }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  instance// 对响应数据做点什么
  if(response.status === 200){
    return response.data;
  }else{
    console.error("请求错误")
    console.error(response)
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance

Vue动画

使用 transition 将需要过渡的元素包裹起来
v-enter

v-enter-active

v-enter-to

v-leave

v-leave-active

v-leave-to