Django快速开发可定制的办公系统实战(5)：前端模板的使用

参考资料：https://docs.djangoproject.com/en/1.11/

1 Django基础模板语言：

作为Web 框架，Django 提供了便利的方法以动态地生成HTML。最常见的做法是使用模板。模板包含所需HTML 输出的静态部分，以及一些特殊的语法，描述如何将动态内容插入。

模板：

模板是纯文本文件。模板中通常会包含可以被数值替换的变量，和控制模板逻辑的标签

例如下面一个简单模板示例，其中包含了模板继承，变量使用，逻辑循环等

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

变量：
变量包含在{{}}内，上面例子中，{{ section.title }}就是一个变量，它最终会被后台传递过来的数值替换，需要注意的是变量的名称可以包含任意字母数字和下划线，点"."在变量中是由特殊含义的。

过滤器：
我们可以通过过滤器来改变变量的显示，例如：如果一个变量是false或者为空，我们可以通过过滤器给定一个默认值：

{{ value|default:"nothing" }}

标签：

一些标签需要指定开始和结束标签，例如：{% if %} ....{% endif %}

常用的还有 block和extends，这两个标签主要用于模板继承，需要注意的是：{% extends %} 标签用于模板继承，它必须是模版中的第一个标签。更多标签功能的使用我将会在项目中学习。

2 项目实现

注意： 当前使用的项目源码是从 tag v1.0生成的dev分支（参考3节克隆项目和目录结构介绍）

接下来介绍项目使用的模板结构

2.1 使用pycharm运行我们的项目

打开pycharm 选择 File→Open 在弹窗中找得到sandboxOA项目，点OK，打开项目
依次选择File→Settings→Project:sandboxOA→Project Interpreter设置项目运行环境，指向前面章节创建的虚拟环境

image

2.2 项目中的模板介绍

模板目录结构：
项目模板存放在根目录下的 templates目录下，tag v1.0包含的模板页如下

    |-- templates/                # 用来存放模板文件（html）
        |-- base-layer.html       # 项目中弹窗页面需要继承基础模板页
        |-- base-left.html        # 左侧导航
        |-- base-static.html      # 静态文件页面，包含全局的css和javascripts
        |-- head-footer.html      # 头部导航和底部版权信息
        |-- index.html            # 初始页面，后面项目会多次基于这个页面进行功能布局
        |-- page404.html          # 404页面

模板继承关系：

base-static.html → head-footer.html → base-left.html → index.html

2.3 模板和静态文件配置

模板：

我们创建了templates用来存放模板页面，要想让Django能够顺利找到模板，还需要再settings.py配置TEMPLATES，加入：'DIRS': [os.path.join(BASE_DIR, 'templates')] 来指定一个查找模板的目录列表。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

静态文件：

网站中用到的图片、JavaScript和CSS这些统称为静态文件，Django提供了django.contrib.staticfile来帮助我们管理它们。

我们在项目根目录下创建了一个static目录用来存放静态文件，要想使用它还需要做如下配置：

确认settings.py中 INSTALLED_APPS下包含：django.contrib.staticfiles（默认已经添加）
在settings.py中添加 STATIC_URL = '/static/'
在settings.py中指定静态文件目录 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

完成以上配置，就可以在模板中引入静态文件了，模板引入静态文件配置：

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

  ..............................

2.4 让项目跑起来

完成了模板和静态文件的配置，Django是否可以正常使用模板和静态文件呢？我们来测试一下，打开根目录下sandboxOA/urls.py，加入如下配置：

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^test/', TemplateView.as_view(template_name='index.html')),
]

通过pycharm运行项目后，在浏览器中访问：http://127.0.0.1:8000/test/

image

可以看到项目的模板和样式文件都可以成功使用了。

开源项目：
- 轻量级办公管理系统（乙方流程版）
  - https://github.com/RobbieHan/gistandard
- 轻量级办公管理系统（甲方定制版，本记录同步项目)
  - https://github.com/RobbieHan/sandboxOA

安装部署交流：83792608（QQ群）
更多欢迎关注：sandbox.im