django项目 网易云音乐

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

项目说明

网易云项目

#

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

项目说明

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

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

  1. from asyncio.windows_events import NULL
  3. import requests
  4. import re
  5. from multiprocessing import Pool
  6. import urllib
  7. import sqlite3
  9. headers = { 
  10.     'Referer': 'https://music.163.com/',
  11.     "User-Agent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 "
  12.                   "Safari/537.36"
  13. }
  15. def get_page(url):
  16.     res = requests.get(url, headers=headers)
  17.     data = re.findall('<a title="(.*?)" href="/playlist\?id=(\d+)" class="msk"></a>', res.text)
  18.     #print(data)
  20.     pool = Pool(processes=4)
  21.     pool.map(get_songs, data[:len(data) - 1])
  22.     #print("下载完毕！")
  25. def get_songs(data):
  26.     #print(data[1])
  27.     playlist_url = "https://music.163.com/playlist?id=%s" % data[1]
  28.     res = requests.get(playlist_url, headers=headers)
  30.     for i in re.findall(r'<a href="/song\?id=(\d+)">(.*?)</a>', res.text):
  32.         try:
  33.             #print("Downing--" + i[1])
  34.             ID = i[0]
  35.             url = 'https://music.163.com/song/media/outer/url?id='
  36.             req = requests.get(url + ID, headers=headers, allow_redirects=False)
  37.             musicLink = req.headers['Location']
  39.             if(len(musicLink)>30):
  40.                  savesql(i[1],musicLink)
  41.                  #print(i[1])#这个是歌曲名字
  43.                  #print(musicLink)#这个是歌曲链接
  44.             #urllib.request.urlretrieve(musicLink, 'C:\\网易云\\' + i[1] + '.mp3')
  45.             #print("Dend Downing + " + i[1])
  47.         except FileNotFoundError:
  48.             pass
  49.         except OSError:
  50.             pass
  51. def savesql(name, link, null=None):#null的设置是为了自增
  52.     conn = sqlite3.connect('db.sqlite3')
  53.     c=conn.cursor()
  55.     c.execute('''CREATE TABLE IF NOT EXISTS common_music (musicname text,link text)''')
  56.     c.execute("INSERT INTO common_music VALUES (?,?,?)", (null,name,link))
  57.     conn.commit()  # 提交事务
  58.     conn.close()
  59.     print(name,link)
  61. if __name__ == '__main__':
  62.     # hot_url = "https://music.163.com/discover/playlist/?order=hot"
  63.     #for i in range(0, 1, 35):
  64.     for i in range(0, 1):
  65.         hot_url = 'https://music.163.com/discover/playlist/?order=hot&cat=全部&limit=35&offset=' + str(i)
  66.         get_page(hot_url)

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

bootstarp前端内容

第一部分：登陆界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.       <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>
  7. </head>
  8. <body>
  9.   <!-- <form action="/datail/" method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="登录"> <a href="admin_add_user.html"><input type="button" value="注册"></a> </form> -->
  10.      <form action="/datail/" method="post" class="login-form">
  11.         <h1>欢迎来到音乐</h1>
  12.         <div class="txtb">
  13.             <input type="text" name="username">
  14.             <span data-placeholder="Username"></span>
  15.         </div>
  17.         <div class="txtb">
  18.             <input type="password" name="password">
  19.             <span data-placeholder="Password"></span>
  20.         </div>
  22.         <input type="submit" class="logbtn" value="登录">
  23.         <input type="reset" class="logbtn" value="重置" style=" margin-top: 10px;">
  24.         <div class=" bottom-text">
  25.             没有账户? <a href="admin_add_user.html">点我注册</a>
  26.         </div>
  27.     </form>
  28.     <script type="text/javascript"> $(".txtb input").on("focus", function () { $(this).addClass("focus") }); $(".txtb input").on("blur", function () { if ($(this).val() == "") $(this).removeClass("focus"); }); </script>
  30. </body>
  31. </html>

第二部分:注册界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <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">
  7.     <title>Title</title>
  9. </head>
  10. <body>
  13. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  14.   <a class="navbar-brand" href="#">Music</a>
  15.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  16.     <span class="navbar-toggler-icon"></span>
  17.   </button>
  19.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  20.     <ul class="navbar-nav mr-auto">
  21.       <li class="nav-item active">
  22.         <a class="nav-link" href="#">我的音乐 <span class="sr-only">(current)</span></a>
  23.       </li>
  24.       <li class="nav-item">
  25.         <a class="nav-link" href="#">主界面</a>
  26.       </li>
  27.       <li class="nav-item dropdown">
  28.         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  29.           Dropdown
  30.         </a>
  31.         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  32.           <a class="dropdown-item" href="#">Action</a>
  33.           <a class="dropdown-item" href="#">Another action</a>
  34.           <div class="dropdown-divider"></div>
  35.           <a class="dropdown-item" href="#">Something else here</a>
  36.         </div>
  37.       </li>
  38.       <li class="nav-item">
  39.         <a class="nav-link disabled" href="#">Disabled</a>
  40.       </li>
  41.     </ul>
  42.     <form class="form-inline my-2 my-lg-0">
  43.       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  44.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  45.     </form>
  46.   </div>
  47. </nav>
  50. <div class="container">
  51.     <div class="row justify-content-center">
  52.          <div class="row" style="align-items: baseline">
  53.           <div class="card" style="width: 18rem;">
  54.                 <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
  55.                    <div class="card-body">
  56.                          <h5 class="card-title">ID</h5>
  57.                           <p class="card-text">在这个框内输入一个整数数字</p>
  58.                           <a href="#" class="btn btn-primary">Go somewhere</a>
  59.                     </div>
  60.          </div>
  61.           <div class="card" style="width: 18rem;">
  62.               <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
  63.                   <div class="card-body">
  64.                          <h5 class="card-title">music</h5>
  65.                          <p class="card-text">数据源于爬虫爬取网易云数据</p>
  66.                          <a href="#" class="btn btn-primary">Go somewhere</a>
  67.                   </div>
  68.     </div>
  69.           <div class="card" style="width: 18rem; align-items: baseline">
  70.               <img class="card-img-top" src="https://tva1.sinaimg.cn/mw1024/006yt1Omgy1ghu6dr0paxj31b41wkkjn.jpg" alt="Card image cap">
  71.                   <div class="card-body">
  72.                         <h5 class="card-title">前后端交互</h5>
  73.                         <p class="card-text">本界面仅仅是添加用户</p>
  74.                         <a href="#" class="btn btn-primary">Go somewhere</a>
  75.                   </div>
  76.          </div>
  78.     </div>
  79.     </div>
  80.         <!--card-->
  81.    <div class="row justify-content-center" >
  82.        <form action="/admin_add_user/" method="post">
  83.        <!--<p><input name="id" /></p> <p><input name="username" /></p> <p><input name="password" /></p> <p><input type="submit" value="submit" /></p> <p><a href="index.html">返回</a></p> -->
  84.         <div class="form-row align-items-center">
  85.             <div class="col-auto">
  86.               <label class="sr-only" for="inlineFormInput">ID</label>
  87.               <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="ID" name="id">
  88.             </div>
  89.             <div class="col-auto">
  90.               <label class="sr-only" for="inlineFormInputGroup">Username</label>
  91.               <div class="input-group mb-2">
  92.                 <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username" name="username">
  93.               </div>
  94.             </div>
  95.             <div class="col-auto">
  96.                <label class="sr-only" for="inlineFormInput">Name</label>
  97.               <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Password" name="password">
  98.             </div>
  99.             <div class="col-auto">
  100.               <button type="submit" class="btn btn-primary mb-2" value="submit">Submit</button>
  101.             </div>
  102.         </div>
  103.      </form>
  104.    </div>
  105.      <!--表单-->
  108. </div>
  109.         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  110.         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  111.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  112. </body>
  113. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  7.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  8.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. <style>
  10. table { 
  11.     border-collapse: collapse;
  12. }
  13. th, td { 
  14.     padding: 8px;
  15.     text-align: left;
  16.     border-bottom: 1px solid #ddd;
  17. }
  18. </style>
  19. </head>
  20.     <body>
  21.     <!--导航栏-->
  22.     <nav class="navbar navbar-inverse" role="navigation" style="margin: 0px;padding: 0px">
  23.         <div class="container-fluid">
  24.              <div class="navbar-header">
  25.                   <a class="navbar-brand" href="#">白熊音乐</a>
  26.             </div>
  27.         <div>
  28.         <div class="navbar-header" style="padding-left: 60px">
  29.             <a class="navbar-brand" href="#">发现音乐</a>
  30.         </div>
  31.         <div class="navbar-header" style="padding-left: 60px">
  32.             <a class="navbar-brand" href="#">我的音乐</a>
  33.         </div>
  35.         <!--下拉列表-->
  36.         <ul class="nav navbar-nav navbar-right">
  37.             <li class="dropdown">
  38.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  39.                     music <b class="caret"></b>
  40.                 </a>
  41.                 <ul class="dropdown-menu">
  42.                     <li><a href="#">注册</a></li>
  43.                     <li><a href="#">登录</a></li>
  44.                     <li><a href="#">网易云</a></li>
  45.                     <li class="divider"></li>
  46.                     <li><a href="#">退出登录</a></li>
  47.                     <li class="divider"></li>
  48.                     <li><a href="#">酷狗</a></li>
  49.                 </ul>
  50.             </li>
  51.         </ul>
  52.         <!--登录注册-->
  53.         <ul class="nav navbar-nav navbar-right">
  54.             <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
  55.             <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
  56.         </ul>
  57.              <!--搜索按钮-->
  58.         <form class="navbar-form navbar-nav navbar-right" role="search">
  59.              <div class="form-group">
  60.                   <input type="text" class="form-control" placeholder="Search">
  61.             </div>
  62.             <button type="submit" class="btn btn-default">查找音乐</button>
  63.         </form>
  65.     </div>
  66.     </div>
  67.     </nav>
  68.     <!--轮播图-->
  71.      <div id="myCarousel" class="carousel slide" style="margin-top: 0">
  72.     <!-- 轮播（Carousel）指标
  73.     <ol class="carousel-indicators">
  74.         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  75.         <li data-target="#myCarousel" data-slide-to="1"></li>
  76.         <li data-target="#myCarousel" data-slide-to="2"></li>
  77.     </ol>
  78.      轮播（Carousel）项目 -->
  79.     <div class="carousel-inner"  >
  80.         <div class="item active">
  81.             <img src="https://tvax1.sinaimg.cn/mw1024/006yt1Omgy1gig64nuyi3j317r17rnpd.jpg" alt="First slide" style="width: 100%;height: 400px">
  82.         </div>
  83.         <div class="item">
  84.             <img src="https://tva4.sinaimg.cn/mw1024/006yt1Omgy1gig65kwln3j32o7220kjo.jpg" alt="Second slide" style="width: 100%;height: 400px">
  85.         </div>
  86.         <div class="item">
  87.             <img src="https://tva3.sinaimg.cn/mw1024/006yt1Omgy1gig653msc2j312n12hb29.jpg" alt="Third slide" style="width: 100%;height: 400px">
  88.         </div>
  89.     </div>
  90.     <!-- 轮播（Carousel）导航 -->
  91.     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  92.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  93.         <span class="sr-only">Previous</span>
  94.     </a>
  95.     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  96.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  97.         <span class="sr-only">Next</span>
  98.     </a>
  99. </div>
  100.     <!--内容-->
  102.          <table class="table table-hover">
  103.              <thead>
  104.                 <tr class="success">
  105.                     <th>id</th>
  106.                     <th>音乐名称</th>
  107.                     <th>音乐链接</th>
  108.                 </tr>
  109.              </thead>
  110.              <tbody>
  111.                     { % for item in li %}
  112.                         <tr class="danger">
  113.                             <td>{ {  item.id }}</td>
  114.                             <td>{ {  item.name }}</td>
  115.                             <td><a href="{ { item.link }}">{ { item.link}}</a></td>
  116.                         </tr>
  117.                     { % endfor %}
  118.              </tbody>
  119.         </table>
  121.     <div class="jumbotron text-center" style="margin-bottom:0">
  122.         <p>站点音乐来自网易云</p>
  123.     </div>
  125.     </body>
  126. </html>

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

  1. { % for item in li %}
  2.                         <tr class="danger">
  3.                             <td>{ {  item.id }}</td>
  4.                             <td>{ {  item.name }}</td>
  5.                             <td><a href="{ { item.link }}">{ { item.link}}</a></td>
  6.                         </tr>
  7.                     { % endfor %}

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

发表评论

表情：
评论列表 （有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读