Django入门项目实践（下）

5.设置应用程序的样式

安装django-bootstrap3。

# untitled/untitled/settings.py
# ···

INSTALLED_APPS = [
    \'django.contrib.admin\',
    \'django.contrib.auth\',
    \'django.contrib.contenttypes\',
    \'django.contrib.sessions\',
    \'django.contrib.messages\',
    \'django.contrib.staticfiles\',

    # 第三方应用程序
    \'bootstrap3\',

    # 我的应用程序
    \'learning_logs\',
    \'users\'
]

# ···

BOOTSTRAP3 = {
    \'include_jquery\' : True
}

<!-- untitled/templates/learning_logs/base.html -->
{% load bootstrap3 %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learning Log</title>

    {% bootstrap_css %}
    {% bootstrap_javascript %}

  </head>

  <body>

    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#navbar"
              aria-expanded="false" aria-controls="navbar">
          </button>
          <a class="navbar-brand" href="{% url \'learning_logs:index\' %}">
              Learning Log</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url \'learning_logs:topics\' %}">Topics</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            {% if user.is_authenticated %}
              <li><a>Hello, {{ user.username }}.</a></li>
              <li><a href="{% url \'users:logout\' %}">log out</a></li>
            {% else %}
              <li><a href="{% url \'users:register\' %}">register</a></li>
              <li><a href="{% url \'users:login\' %}">log in</a></li>
            {% endif %}
          </ul>
        </div><!--/.nav-collapse -->

      </div>
    </nav>

    <div class="container">

      <div class="page-header">
        {% block header %}{% endblock %}
      </div>
      <div>
        {% block content %}{% endblock %}
      </div>

    </div> <!-- /container -->

  </body>
</html>

使用jumbotron设置主页的样式。

<!-- untitled/templates/learning_logs/index.html -->
{% extends "learning_logs/base.html" %}

{% block header %}
  <div class=\'jumbotron\'>
      <h1>Track your learning.</h1>
  </div>
{% endblock %}

{% block content %}
  <h2>
    <a href="{% url \'users:register\' %}">Register an account</a> to make
     your own Learning Log, and list the topics you\'re learning about.
  </h2>
  <h2>
    Whenever you learn something new about a topic, make an entry
    summarizing what you\'ve learned.
  </h2>
{% endblock %}

6.部署应用程序到Heroku

我们将项目部署到Heroku的服务器并对其进行管理。

首先需要到官网https://dashboard.heroku.com注册账号。
接着安装Heroku客户端，请访问https://devcenter.heroku.com/articles/heroku-cli。

注意：访问Heroku官网需要VPN，注册账号需要用国外的邮箱，我试过outlook邮箱可以注册。

6.1 安装必要的包

在PyCharm的Terminal窗口逐个执行以下几个命令：

pip install dj-database-url
pip install dj-static
pip install static3
pip install gunicorn

6.2 创建requirements.txt

执行pip freeze > requirements.txt命令，将项目当前安装的所有包的名称都写入到文件requirements.txt中。

dj-database-url==0.5.0
dj-static==0.0.6
Django==2.1.7
django-bootstrap3==11.0.0
gunicorn==19.9.0
pytz==2018.9
static3==0.7.0
psycopg2>=2.6.1

我们在包列表中添加psycopg2，它帮助Heroku管理活动数据库。

6.3 指定Python版本

runtime.txt

python-3.6.3

6.4 修改settings.py

# untitled/untitled/settings.py

# ···

STATIC_ROOT = os.path.join(BASE_DIR, \'static\')

# Heroku settings
if os.getcwd() == \'/app\':
    import dj_database_url

    DATABASES = {
        \'default\': dj_database_url.config(default=\'postgres://localhost\')
    }

    # Honor the \'X-Forwarded-Proto\' header for request.is_secure().
    SECURE_PROXY_SSL_HEADER = (\'HTTP_X_FORWARDED_PROTO\', \'https\')

    # Only allow heroku to host the project.
    ALLOWED_HOSTS = [\'learning-log-final.herokuapp.com\']
    DEBUG = True

    # Static asset configuration
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
    # STATIC_ROOT = \'staticfiles\'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, \'static\'),
    )

注意STATIC_ROOT = os.path.join(BASE_DIR, \'static\')这行代码，它写在if测试外面。

6.5 创建启动进程的Procfile

Procfile

web: gunicorn learning_log.wsgi --log-file -

6.6 修改wsgi.py

# untitled/untitled/wsgi.py
import os

from dj_static import Cling
from django.core.wsgi import get_wsgi_application

os.environ.setdefault(\'DJANGO_SETTINGS_MODULE\', \'untitled.settings\')

application = Cling(get_wsgi_application())

6.7 创建用于存储静态文件的目录

untitled/untitled/static/placeholder.txt

This file ensures that learning_log/static/ will be added to the project. 
Django will collect static files and place them in learning_log/static/.

6.8 使用Git跟踪项目文件

我们无需让Git跟踪项目中的每个文件，因此将让Git忽略一些文件。
.gitignore

venv/
__pycache__/
*.sqlite3

提交项目

推送到Heroku

项目源码地址：https://github.com/gorgeous-h/learning_log.git
注意：这个项目是在Windows环境下做的。

参考资料：《Python编程从入门到实践》—【美】Eric Matthes 著