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

内容隐藏

上一次我们成功地完成了简单版的高潮音乐提取网站的开发，但是离上线还远远不够，今天我们将会把它完善到能上线的程度。全站已经上传到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 教程，请持续关注我们，如果对你有帮助，麻烦在下面点一个赞/在看哦有任何问题都可以在下方留言区留言，我们都会耐心解答的！