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