提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Ant Design Vue 上手 | 结合 Vue.js 写一个音乐下载工具

VueJS 一个 结合 音乐 ant Design 下载工具
2023-06-13 09:15:15 时间

背景

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 浏览器引入...

相关文章