项目说明
网易云项目
- 语言：python
- 前端: bootstarp
- 后端: django
- 数据库:sqlite3
项目说明
- python爬虫爬取网易云的歌曲名称和链接，并保存到数据库中
- 使用bootstarp编写前端界面
- 使用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">
<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>
-->
<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>
<!--card-->
<div class="row justify-content-center" >
<form action="/admin_add_user/" method="post">
<!--<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>
-->
<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">
<!-- 轮播（Carousel）指标
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
轮播（Carousel）项目 -->
<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>
<!-- 轮播（Carousel）导航 -->
<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