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)
// 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封裝
// 对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 将需要过渡的元素包裹起来文章来源:https://www.toymoban.com/news/detail-805801.html
v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to文章来源地址https://www.toymoban.com/news/detail-805801.html
到了这里,关于axios的使用以及Vue动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!