笔记整理来源 B站up主黑马程序员
B站黑马程序员 快速入门vue前端
适合初学者入门vue.js,
该文是进阶篇
基础篇包括课程中的Vue基础和本地应用环节
该文是进阶篇,包括网络应用和综合应用
基础篇链接
文章目录
Vue.js
网络应用
介绍
Vue结合网络数据开发应用
axios :网络请求库
axios+vue 结合vue一起
通过天气预报巩固
axios基本使用
axios导入
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
get请求
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
response函数会在请求成功后调用 err会在请求失败后调用
随机笑话接口
接口1 | 随机笑话 |
---|---|
请求地址 | http://autumnfish.cn/api/joke/list |
请求方法 | get |
请求参数 | num(笑话个数) |
相应内容 | 随机笑话 |
实战演示
<body>
<input type="button" value="get请求" class="get">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick=function(){
axios.get("http://autumnfish.cn/api/joke/list?num=5")
//axios.get("http://autumnfish.cn/api/joke/list123?num=5")
.then(function(response){
console.log(response);
}
,function(err){
conselo.log(err);
})
}
</script>
</body>
功能
正常执行,在控制台输出五条笑话
如果用注释的语句会执行err语句,在控制台输出错误代码。
post请求
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
response函数会在请求成功后调用 err会在请求失败后调用
用户注册接口
接口2 | 用户注册 |
---|---|
请求地址 | http://autumnfish.cn/api/user/reg |
请求方法 | post |
请求参数 | username(用户名) --字符串类型 |
响应内容 | 注册成功或失败 |
实战演示
<body>
<input type="button" value="post请求" class="post">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".post").onclick=function(){
axios.get("http://autumnfish.cn/api/user/reg,{username:"jack"}")
//axios.get("http://autumnfish.cn/api/user/reg123,{username:"jack"}")
.then(function(response){
console.log(response);
}
,function(err){
conselo.log(err);
})
}
</script>
</body>
功能
正常执行,在控制台输出***用户注册成功
如果用注释的语句会执行err语句,在控制台输出错误代码。
总结
先导入再使用
使用get或post方法可发送对应的请求
then方法中的回调函数会在请求成功或失败时候触发
通过回调函数的形参可以获取响应内容,或错误信息
官网:https://github.com/axios/axios
axios+vue
axios如何结合vue开发网络应用
一条随机笑话接口
接口1 | 随机笑话 |
---|---|
请求地址 | http://autumnfish.cn/api/joke |
请求方法 | get |
请求参数 | 无 |
相应内容 | 一条随机笑话 |
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>
{
{joke}}
</p>
</div>
<!--导入axios在线地址 -->
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<!--导入vue -->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script>
var app=new vue({
el:"#app",
data:{
joke:"好笑的笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("http://autumnfish.cn/api/joke")
.then(function(response){
console.log(response.data);
that.joke=response.data;
},function(err){ })
}
}
})
</script>
</body>
总结
*axios回调函数中的this已经改变,无法访问到data中的数据
*把this保存起来,用that。回调函数中直接使用保存的this即可
天知道-介绍
天知道–回车查询
1.按下回车(v-on.enter)
2.查询数据(axios 接口 v-model)
3.渲染数据(v-for 数组 that)
天气接口
接口1 | 随机笑话 |
---|---|
请求地址 | http://wthrcdn.etouch.cn/weather_mini |
请求方法 | get |
请求参数 | city(查询城市名) |
相应内容 | 天气信息 |
主体html框架代码
主页面部分重要代码
<input type="text" v-model="city" @keyup.enter="searchWeather"
class="input_txt placeholder="请输入查询的天气">
<ul class="weather_list">
<li v-for="item in weatherList">
<span> {
{item.type}}</span>
<b>{
{item.low}}</b>
<b>{
{item.high}}</b>
<span> {
{item.data}</span>
<!--列表这里省略css格式,只演示主要代码 -->
</li>
</ul>
创建js文件main.js 并在主页面中导入
<script>
var app=new Vue({
el:"#app",
data:{
city:"",
weatherList:[]
}, methods:{
searchWeather:function(){
var that=this;
axios.get('http://wthrcdn.etouch.cn/weather_mini'+this.city)
.then(function(response){
that.weatherList=response.data.data.forcast
})
.catch(function(err){ })
}
}
})
</script>
天知道–点击查询
1.点击城市(v-on 自定义参数)
2.查询数据(this方法)
3.渲染数据
新增方法
changeCity:function(city){
this.city=city;
this.searchWeather();
}
与超链接进行绑定
<a href="javascript:;" @click="changeCity("北京")"> 北京</a>
总结
*自定义参数可以让代码的复用性更高
*methods定义的方法内部,,可以通过this调用
综合应用-悦听-介绍
天知道-音乐查询
所需步骤
1.按下回车(v-on .ent)
2.查询数据(axios 接口 v-model)
3.渲染数据(v-for 数组 thar)
歌曲搜索接口
接口1 | 歌曲搜索 |
---|---|
请求地址 | http://autumnfish.cn/search |
请求方法 | get |
请求参数 | keywords(查询的关键字) |
相应内容 | 歌曲搜索结果 |
页面整体布局
创建js文件 在主页面中引入
<script>
var app=new Vue({
el:"#player",
data:{
query:"",
musicList:[]
},
methods:{
searchMusic:function(){
var thar =this;
axios.get("http://autumnfish.cn/search?keywords="+this.query)
.then(function(response){
that.musicList=response.data.result.songs;
},function(err){ })
}
}
})
</script>
主页面的
<!-- 搜索歌曲列表 -->
<input type="text" autocomplete="off" v-model="querry" @keyup.enter="searchMusic" >
<!-- 搜索歌曲列表 -->
<ul>
<li v-for="item in musicList">
<a href="javascript:;"></a>
<b>{
{item.name}}</b>
</li>
</ul>
总结
*服务器返回的数据比较复杂时,获取的时候需要注意层级结构
*通过审查元素快速定位到需要操纵的元素
音乐播放
1.点击播放(v-on 自定义参数)
2.歌曲地址获取(接口 歌曲id)
3.歌曲地址设置(v-bind)
歌曲url获取地址
接口1 | 歌曲获取URL |
---|---|
请求地址 | http://autumnfish.cn/song/url |
请求方法 | get |
请求参数 | id(歌曲id) |
相应内容 | 歌曲的url地址 |
新增属性
musicUrl:""
新增方法
playMusic:function(musicid){
var that=this;
axios.get("http://autumnfish.cn/song/url?id="+this.query)
.then(function(response){
that.musicUrl=response.data.result.songs;
},function(err){ })
}
主页面中
<li v-for="item in musicList">
<a href="javascript:; @click="playMusic(item.id)"></a>
</li>
<audio ref="audio" :src="musicUrl" controls autoplay loop class="myaudio">
</audio>
总结
*歌曲id依赖歌曲搜索的结果,对于不用的数据也需要关注
歌曲封面
1.点击播放(增加逻辑)
2.歌曲封面获取(接口 歌曲id)
3.歌曲封面设置(v-bind)
歌曲详情获取
接口1 | 歌曲详情获取 |
---|---|
请求地址 | http://autumnfish.cn/song/detail |
请求方法 | get |
请求参数 | ids(歌曲id) |
相应内容 | 歌曲的详细信息 包括封面信息 |
上半区playmusic中
playMusic:function(musicid){
var that=this;
axios.get("http://autumnfish.cn/song/url?id="+this.query)
.then(function(response){
that.musicUrl=response.data.result.songs;
},function(err){ })
}
新增加属性
musicCover:""
playmusic中新增加逻辑
axios.get("http://autumnfish.cn/song/detail?ids="+musicId)
.then(function(response){
that.musicCover=response.data.song[0].al.picUrl;
},function(err){ })
主页面中
<img :src="musicCover" class="cover autoRotate">
总结
*在vue中通过v-bind操纵属性
*本地无法获取的数据,基本都会有对应的接口
歌曲评论
1.点击播放(增加逻辑)
2.歌曲评论获取(接口 歌曲id)
3.歌曲评论渲染(v-for)
热门评论获取
接口1 | 热门评论获取 |
---|---|
请求地址 | http://autumnfish.cn/comment/hot?type=0 |
请求方法 | get |
请求参数 | id(歌曲id,type固定=0) |
相应内容 | 歌曲的热门评论 |
新加属性
hotComments:[]
playMusic中新增加逻辑
axios.get("http://autumnfish.cn/comment/hot?type=0&id="+musicId)
.then(function(response){
that.hotComments=response.data.hotComments;
},
funcstion(err){ })
主页面中
<div class="comment_list">
<dl v-for="item in hotComments">
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{
{item.nickname}}</dd>
<dd clas="detail">{
{item.content}}</dd>
</dl></div>
总结
*在vue中通过v-for生成列表
播放动画
1.监听音乐播放(v-on play)
2.监听音乐暂停(v-on pause)
3.操纵类名(v-bind 对象)
新增属性
isPlaying:false
新增方法
paly:function(){
this.isPlaying=true;
}
pause:function(){
this.isPlaying=false;
}
主页面中
<div class="player_con" :class"{playing:isPlayilng}">
***
</div>
总结
*audio标签的play事件会在音频播放的时候触发
*audio标签的pause事件会在音频暂停的时候触发
*通过对象的方式设置类名,类名生效与否取决于后面值的真假
播放MV
1.mv图标(v-id)
2.mv地址获取(接口 mvid)
3.遮罩层(v-show v-on)
4.mv地址设置(v-bind)
mv地址获取
接口1 | mv地址获取 |
---|---|
请求地址 | http://autumnfish.cn/mv/url |
请求方法 | get |
请求参数 | id(mvid 为0说明没有mv) |
相应内容 | mv的地址 |
mv图标是否显示
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>
新增属性
//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""
新增方法
palyMV:function(mvid){
var that=this;
axios.get("http://autumnfish.cn/mv/url?id="+mvid)
.then(function(response){
that.isShow=true;
that.mvUrl=response.data.data.url
},function(err){ })
}
hide:function(){
this.isShow=false;
}
主页面中
<div class="vedio_con" v-show="isShow" style="display:none;">
<vedio :src="mvUrl" controls="controls"></vedio>
<div class="mask" @click="hide"></div>
</div>
*不同的接口需要的数据是不同的,文档的阅读需要仔细
|
mv图标是否显示
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>
新增属性
//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""
新增方法
palyMV:function(mvid){
var that=this;
axios.get("http://autumnfish.cn/mv/url?id="+mvid)
.then(function(response){
that.isShow=true;
that.mvUrl=response.data.data.url
},function(err){ })
}
hide:function(){
this.isShow=false;
}
主页面中
<div class="vedio_con" v-show="isShow" style="display:none;">
<vedio :src="mvUrl" controls="controls"></vedio>
<div class="mask" @click="hide"></div>
</div>
*不同的接口需要的数据是不同的,文档的阅读需要仔细
*页面结构复杂后,通过审查元素的方式去快速定位相关元素