django项目网易云音乐

深碍√TFBOYSˉ_ 2022-12-06 05:45 267阅读 0赞

## 项目说明 ##

##### 网易云项目 #####

##  ##

*  语言：python
 *  前端: bootstarp
 *  后端: django
 *  数据库:sqlite3

#### 项目说明 ####

1.  python爬虫爬取网易云的歌曲名称和链接，并保存到数据库中
2.  使用bootstarp编写前端界面
3.  使用django前后端交互

## 第一部分爬取网易云音乐歌曲名称和链接并且存到数据库 ##

from asyncio.windows_events import NULL
    
    import requests
    import re
    from multiprocessing import Pool
    import urllib
    import sqlite3
    
    headers = { 
        'Referer': 'https://music.163.com/',
        "User-Agent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 "
                      "Safari/537.36"
    }
    
    def get_page(url):
        res = requests.get(url, headers=headers)
        data = re.findall('<a title="(.*?)" href="/playlist\?id=(\d+)" class="msk"></a>', res.text)
        #print(data)
    
        pool = Pool(processes=4)
        pool.map(get_songs, data[:len(data) - 1])
        #print("下载完毕！")
    
    
    def get_songs(data):
        #print(data[1])
        playlist_url = "https://music.163.com/playlist?id=%s" % data[1]
        res = requests.get(playlist_url, headers=headers)
    
        for i in re.findall(r'<a href="/song\?id=(\d+)">(.*?)</a>', res.text):
    
            try:
                #print("Downing--" + i[1])
                ID = i[0]
                url = 'https://music.163.com/song/media/outer/url?id='
                req = requests.get(url + ID, headers=headers, allow_redirects=False)
                musicLink = req.headers['Location']
    
                if(len(musicLink)>30):
                     savesql(i[1],musicLink)
                     #print(i[1])#这个是歌曲名字
    
                     #print(musicLink)#这个是歌曲链接
                #urllib.request.urlretrieve(musicLink, 'C:\\网易云\\' + i[1] + '.mp3')
                #print("Dend Downing + " + i[1])
    
            except FileNotFoundError:
                pass
            except OSError:
                pass
    def savesql(name, link, null=None):#null的设置是为了自增
        conn = sqlite3.connect('db.sqlite3')
        c=conn.cursor()
    
        c.execute('''CREATE TABLE IF NOT EXISTS common_music (musicname text,link text)''')
        c.execute("INSERT INTO common_music VALUES (?,?,?)", (null,name,link))
        conn.commit()  # 提交事务
        conn.close()
        print(name,link)
    
    if __name__ == '__main__':
        # hot_url = "https://music.163.com/discover/playlist/?order=hot"
        #for i in range(0, 1, 35):
        for i in range(0, 1):
            hot_url = 'https://music.163.com/discover/playlist/?order=hot&cat=全部&limit=35&offset=' + str(i)
            get_page(hot_url)

> 这里中的savesql函数里面包含了创建数据库，创建表，以及添加数据等操作

## bootstarp前端内容 ##

第一部分：登陆界面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
          <style> * { margin: 0; padding: 0; text-decoration: none; font-family: montserrat; } body { min-height: 100vh; background-image: linear-gradient(120deg, #3498db, #8344ad); } .login-form { width: 360px; background: #f1f1f1; height: 580px; padding: 80px 40px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .login-form h1 { text-align: center; margin-bottom: 60px; } .txtb { border-bottom: 2px solid #adadad; position: relative; margin: 30px 0; } .txtb input { font-size: 15px; color: #333; border: none; width: 100%; outline: none; background: none; padding: 0 5px; height: 40px; } .txtb span::before { content: attr(data-placeholder); position: absolute; top: 50%; left: 5px; color: #adadad; transform: translateY(-50%); z-index: -1; transition: .5s; } .txtb span::after { content: ''; position: absolute; width: 0%; height: 0%; background: linear-gradient(120deg, #3498db, #8e44ad); transition: .5s; } .focus+span::before { top: -5px; } .focus+span::after { width: 100%; } .logbtn { display: block; width: 100%; height: 50px; border: none; background: linear-gradient(120deg, #3498db, #8e44ad, #3498db); background-size: 200%; color: #fff; outline: none; cursor: pointer; transition: .5s; } .logbtn:hover { background-position: right; } .bottom-text { margin-top: 60px; text-align: center; font-size: 13px; } </style>
    </head>
    <body>
      
         <form action="/datail/" method="post" class="login-form">
            <h1>欢迎来到音乐</h1>
            <div class="txtb">
                <input type="text" name="username">
                <span data-placeholder="Username"></span>
            </div>
    
            <div class="txtb">
                <input type="password" name="password">
                <span data-placeholder="Password"></span>
            </div>
    
            <input type="submit" class="logbtn" value="登录">
    		<input type="reset" class="logbtn" value="重置" style=" margin-top: 10px;">
            <div class=" bottom-text">
                没有账户? <a href="admin_add_user.html">点我注册</a>
            </div>
        </form>
        <script type="text/javascript"> $(".txtb input").on("focus", function () { $(this).addClass("focus") }); $(".txtb input").on("blur", function () { if ($(this).val() == "") $(this).removeClass("focus"); }); </script>
    
    </body>
    </html>

第二部分:注册界面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Title</title>
    
    </head>
    <body>
    
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Music</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">我的音乐 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">主界面</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    
    
    <div class="container">
        <div class="row justify-content-center">
             <div class="row" style="align-items: baseline">
              <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
                       <div class="card-body">
                             <h5 class="card-title">ID</h5>
                              <p class="card-text">在这个框内输入一个整数数字</p>
                              <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
             </div>
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
                      <div class="card-body">
                             <h5 class="card-title">music</h5>
                             <p class="card-text">数据源于爬虫爬取网易云数据</p>
                             <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
        </div>
              <div class="card" style="width: 18rem; align-items: baseline">
                  <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
                      <div class="card-body">
                            <h5 class="card-title">前后端交互</h5>
                            <p class="card-text">本界面仅仅是添加用户</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
             </div>
    
        </div>
        </div>
            
       <div class="row justify-content-center" >
           <form action="/admin_add_user/" method="post">
           
            <div class="form-row align-items-center">
                <div class="col-auto">
                  <label class="sr-only" for="inlineFormInput">ID</label>
                  <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="ID" name="id">
                </div>
                <div class="col-auto">
                  <label class="sr-only" for="inlineFormInputGroup">Username</label>
                  <div class="input-group mb-2">
                    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username" name="username">
                  </div>
                </div>
                <div class="col-auto">
                   <label class="sr-only" for="inlineFormInput">Name</label>
                  <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Password" name="password">
                </div>
                <div class="col-auto">
                  <button type="submit" class="btn btn-primary mb-2" value="submit">Submit</button>
                </div>
            </div>
         </form>
       </div>
         
    
    
    </div>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

第三部分:登录成功的界面

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    table { 
        border-collapse: collapse;
    }
    th, td { 
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    </style>
    </head>
        <body>
        
        <nav class="navbar navbar-inverse" role="navigation" style="margin: 0px;padding: 0px">
    	    <div class="container-fluid">
                 <div class="navbar-header">
                      <a class="navbar-brand" href="#">白熊音乐</a>
                </div>
            <div>
            <div class="navbar-header" style="padding-left: 60px">
                <a class="navbar-brand" href="#">发现音乐</a>
            </div>
            <div class="navbar-header" style="padding-left: 60px">
                <a class="navbar-brand" href="#">我的音乐</a>
            </div>
    
            
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        music <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">注册</a></li>
                        <li><a href="#">登录</a></li>
                        <li><a href="#">网易云</a></li>
                        <li class="divider"></li>
                        <li><a href="#">退出登录</a></li>
                        <li class="divider"></li>
                        <li><a href="#">酷狗</a></li>
                    </ul>
                </li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
                 
            <form class="navbar-form navbar-nav navbar-right" role="search">
                 <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">查找音乐</button>
            </form>
    
        </div>
    	</div>
        </nav>
        
    
    
         <div id="myCarousel" class="carousel slide" style="margin-top: 0">
        
        <div class="carousel-inner"  >
            <div class="item active">
                <img src="https://tvax1.sinaimg.cn/mw1024/006yt1Omgy1gig64nuyi3j317r17rnpd.jpg" alt="First slide" style="width: 100%;height: 400px">
            </div>
            <div class="item">
                <img src="https://tva4.sinaimg.cn/mw1024/006yt1Omgy1gig65kwln3j32o7220kjo.jpg" alt="Second slide" style="width: 100%;height: 400px">
            </div>
            <div class="item">
                <img src="https://tva3.sinaimg.cn/mw1024/006yt1Omgy1gig653msc2j312n12hb29.jpg" alt="Third slide" style="width: 100%;height: 400px">
            </div>
        </div>
        
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
        
    
             <table class="table table-hover">
                 <thead>
                    <tr class="success">
                        <th>id</th>
                        <th>音乐名称</th>
                        <th>音乐链接</th>
                    </tr>
                 </thead>
                 <tbody>
                        { % for item in li %}
                            <tr class="danger">
                                <td>{ {  item.id }}</td>
                                <td>{ {  item.name }}</td>
                                <td><a href="{ { item.link }}">{ { item.link}}</a></td>
                            </tr>
                        { % endfor %}
                 </tbody>
            </table>
    
        <div class="jumbotron text-center" style="margin-bottom:0">
            <p>站点音乐来自网易云</p>
        </div>
    
        </body>
    </html>

这下面的部分是前后端交互的部分

{ % for item in li %}
                            <tr class="danger">
                                <td>{ {  item.id }}</td>
                                <td>{ {  item.name }}</td>
                                <td><a href="{ { item.link }}">{ { item.link}}</a></td>
                            </tr>
                        { % endfor %}

> 最后放上我的项目链接，如果你安装了python并且使用了pycharm或者vs code 安装了django框架，直接拿去用吧  
> 链接：https://pan.baidu.com/s/1ReoQD5HZKORMl6JDBWyyNQ  
> 提取码：1234