axios 的使用

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

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

安装方法
使用 npm:
npm install axios
引入
import axios from “axios”;

<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)// getaxios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=5').then(res => {// console.log(res)this.imgSrc = res.data.data[0].imgUrlPcthis.imgList = res.data.data// console.log(this.imgList)})// postlet url = new URLSearchParams() // application/x-www-form-urlencoded// let url =new FormData()formDataurl.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封裝

// 对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