背景
Ant Design 是阿里巴巴的前端设计框架/语言/体系，很漂亮，很高端...
之前一直只支持 React，前几天 Antd For Vue 出来了，赶紧拿来试试
使用地址：https://www.ouorz.com/music
之后可能会大量用在各种项目里
也借此机会学习 Node.js、npm、webpack 环境搭建使用等
指南
https://segmentfault.com/a/1190000009466326
https://blog.csdn.net/u011240877/article/details/76582670
https://zhaoda.net/webpack-handbook/index.html
代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Netease Music Download Extension</title>
<script src="https://static.ouorz.com/moment.js"></script>
<script src="https://static.ouorz.com/vue.min.js"></script>
<link href="https://static.ouorz.com/antd.min.css" rel="stylesheet">
<script src="https://static.ouorz.com/antd.min.js"></script>
<script src="https://static.ouorz.com/axios.min.js"></script>
</head>
<body>
<div id="view" style="padding: 50px 60px;">
<h1 style="margin-top:100px;margin-bottom:0px">网易云音乐<em style="font-size: 1.5rem;font-style: normal;font-weight: 300;color: #999;margin-left: 5px;">音乐下载</em></h1>
<p style="font-size: 1.3rem;font-weight: 300;letter-spacing: .6px;color: #66;">Netease Music | Download Extension</p>
<div style="margin:0 auto;text-align:center">
<a-input-search placeholder="输入搜索曲名" @search="onSearch" enterButton="Search" size="large" />
</div>
<div v-if="s_search" style="margin-top:30px">
<a-spin :spinning="spinning">
<a-card title="匹配歌曲">
<a-card-grid style="width:25%;textAlign:'left'" v-for="(item,index) in items" @click="showModal(item.id)">
<a-card-meta :title="item.name" :description="item.artists[0].name"></a-card-meta>
</a-card-grid>
</a-card>
</a-spin>
</div>
<a-modal title="歌曲详情" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel">
<a-spin :spinning="song_visible">
<div style="text-align: center;" v-if="song_content">
<img :src="song.album.picture" style="box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.11);margin-bottom: 35px;border-radius: 10px;border: 1px solid #eee;width: 300px;height: 300px;">
<audio :src="song_src" controls="controls">
Your browser does not support the audio element.
</audio>
<h1 style="line-height: 1.3;font-weight: 600;color: #444;margin-bottom: 2px;margin-top: 10px;">{{ song.name }}</h1>
<p style="color: #999;font-weight: 300;margin: 0px;" v-for="art in song.artists">{{ art }}</p>
</div>
</a-spin>
</a-modal>
</div>
<script>
var index = new Vue({
el:'#view',
data(){
return {
items : null,
loading : true,
s_search : false,
spinning : false,
song : null,
visible : false,
confirmLoading : false,
song_visible : true,
song_content : false,
song_src : null
}
},
methods : {
onSearch : function(key){
if(key !== ''){
this.s_search = true;
this.spinning = true;
axios.get('https://v1.hitokoto.cn/nm/search/'+key.toString()+'?limit=32')
.then(response=>{
this.items = response.data.result.songs;
this.spinning = false;
})
}
},
showModal(id) {
this.visible = true;
axios.get('https://v1.hitokoto.cn/nm/summary/'+id)
.then(response=>{
this.song = response.data[id];
this.song_visible = false;
this.song_content = true;
this.song_src = 'https://v1.hitokoto.cn/nm/redirect/music/'+id;
});
},
handleOk(e) {
this.ModalText = '准备下载';
this.confirmLoading = true;
window.open(this.song_src,'_blank',"top=0,left=100,width=400,height=250").location;
this.visible = false;
this.confirmLoading = false;
},
handleCancel(e) {
this.visible = false;
this.song = null;
this.song_visible = true;
this.song_content = false;
}
}
})
</script>
</body>
</html>
批注
暂时还没整清楚 node 和 wp 环境的配置和使用
使用了 Antd 浏览器引入...