标签归档：网站设计

网站设计

Python Django快速开发音乐高潮提取网(3)

2019年12月15日 Python实用宝典留下评论

上一次我们成功地完成了简单版的高潮音乐提取网站的开发，但是离上线还远远不够，今天我们将会把它完善到能上线的程度。全站已经上传到github上：

https://github.com/Ckend/yinyue30

你也可以在公众号后台回复： 音乐高潮提取网 下载。

1. 完善前端开发

在网上有这么多现成免费模板的情况下，单页面前端设计是非常简单的。我这里选用了 tooplate 的一套免费音乐模板，加上部分我需要的更改，并去掉了一些我所不需要的部分。

其实改动不大，不过大家要注意，在使用模板的时候，静态文件要保存到根目录下的static文件夹，然后将所有静态文件都放入里面：

除此之外，还需要再settings.py中设定以下参数：

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

在前端调用静态文件的时候，注意要这样调用：

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

前端部分就不细讲了，能讲的东西不多，套套模板改点东西而已，大家可以找自己喜欢的模板来做，效果如下：

2.完善后端错误处理

这是我们在前一篇文章中提到的第二个改进点，那就是出现错误的时候没有提示，非常不友好，而且处理的时候也缺少提示正在处理中，很容易让人以为没有提交成功。

现在就让我们来解决这个缺点，首先要修改response，当用户提交的文件格式不正确，或文件大小超过我们的限制时，在渲染页面的时候要返回一个错误信息：

return render(request, 'index.html', {'form': form, 'wrong': "请上传正确的文件：wav/mp3格式, 大小不超过10M"})

前端接收信息时做一个判断，检查是否有wrong变量的存在，如果有则输出信息：

{%  if wrong %}
    <div class="alert alert-danger" style="text-align: center;" role="alert">{{ wrong }}</div>
{% endif %}

效果如下：

另外一点，在处理提取音乐高潮部分的时候，用户会等待很长的时间，我们需要提示用户后端正在处理音乐，这个处理是纯前端代码就可以实现的，js部分：

   <script type="text/javascript">
    $(document).ready(function(){
      $('#file-upload').click(function(){
        $('#hidden').html('<div class="alert alert-info" role="alert">处理中, 完成后会自动下载，等待的时候要不...搜索关注一下 Python实用宝典 公众号</div>');
        $('#hidden').css('padding', '15px');
        $('#t_form').css('display', 'none');
      })
    });
  </script>

在你想要显示这条信息的地方编写如下代码：

<div id="hidden"></div>

即可实现该提示功能，效果如下：

3.网站上线

这一部分要注意，Django部署的时候需要uWSGI和Nginx一起使用，为什么不只用wsgi？因为它的性能不足以撑起大访问量，而且也不够安全。下面的教程需要你有一定的服务器经验，如果你不需要上线网站，那么下面的部分你并不需要阅读。

3.1 安装uwsgi

Ubuntu中输入以下命令安装uwsgi，centos将pip改成yum即可：

sudo pip install uwsgi –upgrade

安装时如果出现没有C编译器的情况请安装gcc编译器。然后输入以下命令运行项目：

uwsgi –http :8001 –chdir /path/to/project –module yinyue30.wsgi

–chdir是项目路径，yinyue30.wsgi是指项目里的wsgi文件。此外，可在命令前面加个nohup，让项目在后台运行：

nohup uwsgi –http :8001 –chdir /home/www/yinyue30 –module yinyue30.wsgi &

如果你希望以后能够自动化管理该进程，最好是安装supervisor，它能在进程挂掉的时候自动重拉进程，安装方法见：

https://code.ziqiangxuetang.com/django/django-nginx-deploy.html

3.2 配置Nginx

打开/etc/nginx/sites-available/default, 追加以下服务配置：

# mysite_nginx.conf

upstream django {
    server 127.0.0.1:8001; # for a web port socket (we'll use this first)
}

server {
    listen      8000;
    server_name example.com; # substitute your machine's IP address or FQDN
    charset     utf-8;

    client_max_body_size 75M;   # adjust to taste

    location /media  {
        alias /path/to/your/mysite/media;  # your Django project's media files - amend as required
    }

    location /static {
        alias /path/to/your/mysite/static; # your Django project's static files - amend as required
    }

    location / {
        uwsgi_pass  django;
        include     /path/to/your/mysite/uwsgi_params; # the uwsgi_params file you installed
    }
}

请根据需要修改成自己的配置。完成之后，输入service nginx reload，网站即可正常运行。

我们的文章到此就结束啦，如果你希望我们今天的Python 教程，请持续关注我们，如果对你有帮助，麻烦在下面点一个赞/在看哦有任何问题都可以在下方留言区留言，我们都会耐心解答的！

音乐相关教程：

Python 批量下载网易云音乐歌单

Python 制作音乐高潮副歌提取器

Python Django快速开发音乐高潮提取网(1)

Python Django快速开发音乐高潮提取网(2)

Python Django快速开发音乐高潮提取网(3)

Python 超方便超快速剪辑音乐

Python 提取音乐频谱并可视化

Python实用宝典 (pythondict.com)
不只是一个宝典
欢迎关注公众号：Python实用宝典

网站设计

Python Django快速开发音乐高潮提取网(2)

2019年12月13日 Python实用宝典留下评论

上次第一部分我们用Django搭建了一个简易的文件上传网站，今天让我们来完善这个网站，增加一些细节部分的调整，并加入音乐高潮提取的API.

如果你还没有阅读过第一部分，建议先从第一部分开始阅读哦：Python Django快速开发音乐高潮提取网(1)。

本文完整源代码，请在后台回复：音乐高潮提取网 获取

1.文件校验

首先，为了安全起见，同时也为了减小服务器的压力，我们必须确认用户上传的文件是正确的。因此需要在views.py接收用户请求时，对用户上传的文件判断格式和大小。

在上篇文章中，我们使用了 forms 类生成表单，后端使用 request.FILES[‘docfile’] 获得了文件，这个对象具备什么属性呢？能不能让我们获得文件的大小和格式呢？

在一番搜索后，我终于找到了它的属性，这是一个叫做UploadedFile的类文件对象，具备以下属性：

详细文档：https://docs.djangoproject.com/en/3.0/ref/files/uploads/

通过size属性能获得bytes单位的文件大小，通过content_type可以获得文件属性，太好了，接下来就可以编写我们的校验代码：

这里我们限定了文件大小为10M （从bytes到MB的计算方法：1024*1024*10 ），上传文件的格式限定为wav和mp3. 将这个函数用于校验，如图所示：

好了，现在你再试一下上传图片，会发现什么反应都没有，上传mp3格式的音乐会返回上传成功的提示。

2.提取音乐的高潮部分

这一部分其实很简单，不过如果你还没看过音乐的高潮部分提取的文章，建议阅读：Python 音乐高潮提取。

首先，引入我们所需要的包（安装方法在Python Django快速开发音乐高潮提取网(1)）：

from pychorus import find_and_output_chorus

然后要拿到音乐文件的路径，才能过进行音乐提取，还记得我们在上节的教程中，其实是用了一个模型来上传文件的吗：

现在这个模型派上用场了。我们仅需要在文件对象保存之后，通过“对象.file.path ” 的属性就能获得文件的绝对路径。

ilePath = newdoc.file.path

不过，我们还需要设定音乐高潮部分提取完成后的输出位置，我的设定方法是在同目录下保存一个后缀为_high的文件：

不过要注意的是，由于该模块用到了一个名为SoundFile的包，这个包在输出文件的时候仅支持以下格式，为了方便处理，我们默认输出格式为wav.

3.返回音乐高潮部分给用户

接下来要返回提取完成的音乐高潮部分的文件，我们希望将文件作为附件给用户下载，让用户自行选择软件播放音乐，而不是在网站上直接收听音乐。

Django能非常容易地实现这一点：

将文件以二进制的形式打开，然后作为HttpResponse返回，设定 content_type 和 Content_Disposition 即可。

好了，再次运行项目：python manage.py runserver 上传一个音乐试一下：

https://pythondict-1252734158.file.myqcloud.com/home/www/pythondict/wp-content/uploads/2019/12/2019121315094465.wav

这样，我们就能成功地完成用户上传——提取音乐高潮——返回用户下载的逻辑了。不过还有一些细节需要改进：

1.前端太丑了，能不能改进一下？
2.用户上传文件错误时没有提醒。
3.能不能多加点功能，比如其他用户的音乐分享？

下一次教程，我们就来完整地完成这个网站并上线！关注下方公众号，后台回复 音乐高潮提取网 获得本文全部源代码！

音乐相关教程：

Python 批量下载网易云音乐歌单

Python 制作音乐高潮副歌提取器

Python Django快速开发音乐高潮提取网(1)

Python Django快速开发音乐高潮提取网(2)

Python Django快速开发音乐高潮提取网(3)

Python 超方便超快速剪辑音乐

Python 提取音乐频谱并可视化

Python实用宝典 (pythondict.com)
不只是一个宝典
欢迎关注公众号：Python实用宝典

网站设计

Python Django快速开发音乐高潮提取网(1)

2019年12月10日 Python实用宝典留下评论

还记得我们上次做的一个高潮提取器吗：Python制作音乐高潮提取器。今天我们来把这个高潮提取器做成一个网站，让许多不懂技术的人也可以很方便地提取歌曲里的高潮/副歌部分。

其实这是一个非常简单的单页面网站，不需要数据库、不需要celery、不需要各种高深的后端技术。不过，如果适当地利用一些Python的Web开发框架，我们能更快地完成这个网站的开发，也能够顺便带大家入门一下Web开发框架。

因此我们将用Django来完成这个网站。不过由于我不想让文章篇幅变得冗长，我们将分为两部分来讲解，第一部分是建造一个简单的支持文件上传的网站，第二部分将基于第一部分完善文件上传功能，建造一个音乐高潮提取网。

1.准备

在开始之前，你需要先安装好Python，如果还没有安装Python，请看这篇文章：超详细安装Python指南。

打开CMD(windows)/Terminal(macos)，下文统一称这两者为终端，输入安装Django的命令：

pip install Django

看到终端结果显示类似如下则说明安装成功。

安装高潮提取器需要用到的项目：

pip install pychorus

2.新建Django项目

在你希望放置项目文件的目录下打开终端，输入以下命令：

django-admin startproject yinyue30

如果遇到未找到命令 Django-admin 这样的错误，则说明你需要配置Django的环境变量，详细可以看这篇文章的windows Django安装：

https://www.runoob.com/django/django-install.html

这个命令会新建一个Django项目，目录结构如下：

3.Django应用开发

新建了Django项目后，我们就可以开始应用开发了。使用终端在生成的yinyue30文件夹中，输入以下命令新建“extractor(提取器)”应用：

python manage.py startapp extractor

到这里，应用初始化就算正式完成了。让我们看一下现在的文件结构：

看起来有点复杂，但是不要紧，我们只需要管其中几个文件即可。在我们开始正式编写代码前，我想先解释一下Django的设计模式。

3.1 Django设计模式简析（你可以跳过这一部分）

传统的网站设计模型是MVC模型，即：

M 代表模型（Model）：负责对象和数据库的关系(ORM)。
V 代表视图 (View)：负责如何把页面展示给用户(html)。
C 代表控制器（Controller）：负责转发请求，处理请求等。

实质上Django也是类似的模型，不过有些许不同。Django更像是一个MVT模型，其中Controller的功能，被分担到了View和url转发器中。

在今天的教程中，我们重点关注的对象是View和Url转发器。

3.3 模型设计—编写models.py

尽管我们这个单页面应用可以不用到模型，但是使用模型能够帮助我们简化不少流程。而且代码非常简单：

文件将会被上传到“media/当前日期/ ” 的文件夹下，而且是和manage.py同级。如图所示：

之所以用Django自带的文件模型，不仅仅是因为这点方便，它还支持文件同名处理，当两个用户上传了相同文件名的文件时，第二个文件会被加一串md5作为区别。

除此之外，它还能限定文件上传的大小，具备用API作为代理访问基础文件等诸多方便的功能，如果你想了解更多的细节，可以阅读官方文档： https://docs.djangoproject.com/zh-hans/3.0/ref/models/fields/

3.4 视图设计—编写views.py

在views.py我们主要做以下几个事情：

1.渲染前端页面，允许用户提交文件。
2.获得用户请求时发送的文件。
3.对用户请求的文件进行音乐高潮提取。
4.提取完后返回音乐的高潮部分给用户。

其中，后端要校验文件大小（前端校验的话容易被绕过），然后提取音乐高潮的时候前端应该有“处理中 ” 的提示，等待提取完成返回结果后，前端直接显示下载按钮。

我们先来制作允许用户提交文件这一部分。

3.4.1 编写forms表单

Django有个我特别喜欢的特性：通过Form类能生成HTML代码，如果是做简单的页面开发，不需要用到前后端分离的情况下，这点实在非常方便：

在extractor文件夹下新建一个forms.py的文件，写入以下代码：

接下来，在在extractor文件夹下新建templates文件夹，并在里面新建一个index.html 编写前端代码，将表单引入进来：

可以注意到，我们直接将表单以 {{ form.docfile }} 的形式引入进来生成前端表单，与此同时， {{ form.docfile.label_tag }} 可以直接将我们在类中定义的属性引入进前端。还有一点需要注意的是 {% csrf_token %}，这是在Django表单中必带的，它会在请求中注入一段token，以防止跨站攻击。