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 著