IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 2021-11-08 -> 正文阅读

[JavaScript知识库]2021-11-08

网络应用(vue结合网络数据开发应用)

axios官网
axios网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2).then(funtion(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(funtion(response){},function(err){})

1.获取笑话接口
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话

2.用户注册接口
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
document.querySelector(".get").onclick = function(){
	axios.get(https://autumnfish.cn/api/joke/list?num=3)
	.then(funtion(response){
		console.log(respose);
	},function(err){	
		console.log(err);
	})
	
}
document.querySelector(".post").onclick = function(){
	axios.get(https://autumnfish.cn/api/user/reg,{username:"jack"})
	.then(funtion(response){
		console.log(respose);
	},function(err){	
		console.log(err);
	})
	
}
<div id="app">
	<input type="button" value="获取笑话" @click="getJoke">	
	<p>{{joke}}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue(){
		el:"#app",
		data:{
			joke:"很好笑的笑话"	
		},
		methods:{
			getJoke:function(){
				//console.log(this.joke);
				var that = this;
				axios.get("https://autumnfish.cn/api/user/reg")
				.then(function(respose){	
					console.log(respose.data);	
					that.joke = respose.data;
				},function(err){})	
			}	
		},	
	}
</script>

案例练习-天知道(天气查询应用)
1.回车查询
按下回车v-on .enter
查询数据 axios接口 v-model
渲染数据 v-for数组 that
2.点击查询
点击城市 v-on自定义参数
查询数据 this.方法()
渲染数据

天气接口
请求地址:https://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city
响应内容:天气信息

<div id="app">
	<input v-model = "city" @keyup.enter = "searchWeather" placeolder="请输入查询的天气"><button>搜索</button>
</div>
<div class="hotkey">
	<a href="javascript:;" @click="changeCity('上海')">上海</a>
	<a href="javascript:;" @click="changeCity('广州')">广州</a>
	<a href="javascript:;" @click="changeCity('北京')">北京</a>
	<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
<ul class="weather_list">
	<li v-for="item in weatherList">
		<div><span>{{item.type}}</span></div>
		<div>
			<b>{{item.higt}}</b>
			~
			<b>{{item.low}}</b>
		</div>
		<div><span>{{item.date}}</span></div>
	</li>
</ul>
<div class="video_con" v-show=""isShow>
	<video :src="mvUrl"></video>
	<div class="mask" @click="hide"></div>
</div>

var app = new Vue({
	el:"#app",
	data:{
		city:'',	
		weatherList:[]
	}
	mwthods:{
		searchWeather:function(){
			//保存this
			var that = this;
			//调用接口
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
			.then(function(respose){	
				console.log(response.data.data.forecast)
				that.weatherList = response.data.data.forecast
			}).catch(function(err){})	
		},
		changeCitys:function(){
			this.city = city;
			this.searchWeather();
		}	
	}	
})

综合应用–小程序
1歌曲搜索
按下回车 v-on .enter
查询数据 axios 接口 v-model
渲染数据
2歌曲播放
点击播放(v-on自定义参数)
歌曲地址获取歌曲(接口 歌曲id)
歌曲地址设置(v-bind)
播放歌曲的本质是添加歌曲的src
3歌曲封面
点击播放
歌曲封面获取(接口 歌曲id)
歌曲封面设置
4歌曲评论
点击播放
歌曲评论获取(接口 歌曲id)
歌曲评论渲染(v-for)
5播放动画
监听音乐播放(v-on play)
监听音乐暂停(v-on pause)
操纵类名(v-bind 对象)
6mv播放
MV图标显示(v-if)
mv地址获取(v-on mvid)
遮罩层(v-show v-on)
mv地址设置(v-bind)

歌曲搜索接口
请求地址:https://autmnfish.cn/search
请求参数:keywords(查询的关键字)
响应内容:歌曲搜索结果

<div>
	<input v-model="query" @keyup.enter="searchMusic">
	<li v-for="item in musicList"><a href ="javascript:;" @click="playMusic(item.id)"></a><b>{{item.name}}</b></li>
</div>
<div class="center_con">
	<div class="player_con" :class="{playing:isPlaying}">
		<img :src="musicCover"/>
	</div>
	<span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span>
</d
<div class="comment_list">
	<dl v-for="item in hotComments">	
		<dt><img :src="item.user.avatarUrl"/></dt>
		<dd class="name">{{item.nickname}}</dd>
		<dd>{{item.content}}</dd>
		
	</dl>
</div>
<div calss = "audio_con" >
	<audio ref="audio":src="musicUrl"  @play="play" @pause="pause"></audio>
</div>

var APP= new Vue({
	el:"#player",
	data:{
		query:"",	
		musicList:[],
		musicUrl:"",
		musicCover:"",
		hotComments:[],
		//动画播放状态
		isPlaying:false,
		//遮罩曾的显示状态
		isShow:false,
		mvUrl:"",
	},
	methods:{
	//1.歌曲搜索
	searchMusic:function(){
	var that = this;
		axios.get("https://autmnfish.cn/search?keywords="+this.query)
		.then(function(response){	
				console.log(response.data.result.songs[0].al.picUrl);
				that.musicList = response.data.result.songs[0].al.picUrl;
				 
		},function(err){});
	},
	//2.歌曲播放
	playMusic:function(musicId){
		//console.log(musicId);	
		var that = this;
		//3.获取歌曲地址
		axios.get("https://autumnfinsh.cn/song/url?id="+musicId)
		.then(function(response){
			console.log(response.data.data[0].url);
			that.musicUrl = response.data.data[0].url;
		},funtion(err){})
		//4.歌曲详情获取
		axios.get("https://autumnfinsh.cn/song/detail?ids="+musicId)
		.then(function(response){
			console.log(response.data.songs[0].al.picUrl);
			that.musicDetail = response.data.songs[0].al.picUrl;
		},funtion(err){})
		//歌曲评论获取
		axios.get("https://autumnfinsh.cn/comment/hot?type=0&id=" +musicId)
		.then(function(response){
			console.log(response.data.hotComments);
			that.hotComments = response.data.hotComments;
		},funtion(err){})
		play:function(){
			//console.log("")
			this.isPlaying = true;
			
		},
		pause:function(){
			//console.log("")
			this.isPlaying = false;
			
		}
		//播放mv
		playMv:function(mvid){
		var that = this;
			axios.get("https://autumnfinsh.cn//mv/url?id=" +mvid).then(function(response){
			console.log(response.data.data.url)
			that.isShow = true;
			that.mvUrl = response.data.data.url
	
		},function(err){})
		},
		hide:function(){
			this.isShow = false;	
		}
	}
})

歌曲url获取
请求地址:https://autumnfinsh.cn/song/url
请求参数:id(歌曲id)
响应内容:歌曲的url地址

歌曲详情获取
请求地址:https://autumnfinsh.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
相应内容:歌曲详情,包含封面信息

歌曲评论获取
请求地址:https://autumnfinsh.cn/comment/hot?type=0
请求方法
请求参数:id
响应内容:歌曲热门评论

shi

mv地址获取
请求地址:https://autumnfinsh.cn//mv/url
请求方法:get
请求参数:id (mvid,为0则说明没有mv)
响应内容:mv的地址

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-15 15:45:41  更:2021-11-15 15:47:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/20 2:51:34-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码