Vue学习（三）网络应用
axios 网络请求库
文档：https://www.axios-http.cn/docs/intro
导包
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
GET & POST请求
<button onclick="getRe()">get</button>
<button onclick="postRe()">post</button>
<script>
function getRe() {
axios
.get('https://autumnfish.cn/api/joke/list', {
params: {
num: 5,
},
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
.then(function () {
// 总是会执行
})
}
function postRe() {
axios
.post('https://autumnfish.cn/api/user/reg', {
username: 'bigllxx',
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
</script>
结合vue
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<ul>
<li v-for='item in jokes'>{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
jokes: ''
},
methods: {
getJoke: function () {
let that = this; // axios回调函数中的this已经改变,无法访问到data中数据，需要先把this重新赋值
axios
.get('https://autumnfish.cn/api/joke/list', {
params: {
num: 5,
},
})
.then(function (response) {
let jokes = response.data.jokes
that.jokes = jokes
})
.catch(function (error) {
console.log(error)
})
.then(function () {
// 总是会执行
})
},
},
})
</script>
天气预报案例
<h1>天气</h1>
<div id="app">
<input type="text" placeholder="请输入城市" @keyup.enter='getWeather' v-mode='input_city'>
<input type="button" value="查询" @click="getWeather">
<br>
<a v-for='item in citys' href="" style="text-decoration: none">{{ item }} </a>
<ul>
<li v-for='item in weathers'>{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
citys: ['北京', '上海', '广州', '深圳'],
input_city: '上海',
weathers: []
},
methods: {
getWeather: function () {
let that = this; // axios回调函数中的this已经改变,无法访问到data中数据，需要先把this重新赋值
axios
.get('http://wthrcdn.etouch.cn/weather_mini', {
params: {
city: that.input_city,
},
})
.then(function (response) {
let weathers = response.data.data.forecast
that.weathers = weathers
console.log(response)
})
.catch(function (error) {
console.log(error)
})
.then(function () {
// 总是会执行
})
},
},
})
</script>
音乐播放器案例
music.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input
type="text"
v-model="query"
@keyup.enter="seachMusic"
placeholder="请输入歌曲名称/歌手名"
/>
<ul>
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)">选中</a>
<b>{{ item.name }}-{{ item.artists[0].name }}</b>
</li>
</ul>
<div style="position: absolute; top: 0px; left: 200px">
<audio :src="musicUrl" controls loop></audio>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./mian.js"></script>
</body>
</html>
main.js
var app = new Vue({
el: '#app',
data: {
query: '', // 获取搜索框value
musicList: [],
musicUrl:
'http://m7.music.126.net/20210929142049/90f293e7b94d8d196063949eafc0cd64/ymusic/da7a/b881/db7e/a082ee60c5f35ee279fc71d9112c09ea.mp3',
},
methods: {
seachMusic: function () {
let that = this
axios
.get('https://autumnfish.cn/search?keywords=' + that.query)
.then(function (response) {
that.musicList = response.data.result.songs
console.log(response.data)
})
.catch(function (error) {
console.log(error)
})
.then(function () {
// 总是会执行
console.log(that.query)
})
},
playMusic: function (musicId) {
console.log(musicId)
let that = this
axios
.get('https://autumnfish.cn/song/url?id=' + musicId)
.then(function (response) {
console.log(response.data.data[0].url)
that.musicUrl = response.data.data[0].url
})
.catch(function (error) {
console.log(error)
})
},
},
})
浙公网安备 33010602011771号