Django学习笔记(二):使用Template让HTML、CSS参与网页建立

通过本文章实现:

  1. 了解Django中Template的使用
  2. 让HTML、CSS等参与网页建立
  3. 利用静态文件应用网页样式

一、Template的使用

Template是Django利用渲染器将模板文件与数据内容结合,完成网页整合的方式。

1、Template的建立

在项目文件夹(manage.py所在路径)内,建立templates文件夹。

在setting.py中配置TEMPLATES的DIR。将setting.py文件中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',
],
},
},
]

主要是在'DIRS': [os.path.join(BASE_DIR, 'templates')]中配置。

2、编写HTML模板文件

在templates文件夹中编写drugs_index.html文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>药品搜索</title>
</head>
<body>
<h1>{{html_time}}</h1>
</body>
</html>

文件与一般HTML一致,{{show_time}}部分表示show_time用于后续与Django进行数据通信。

点击查看HTML教程

3、Django与HTML之间的数据通信

在APP下的views.py中先引入get_template模块。

from django.shortcuts import render
from django.http import HttpResponse
import datetime
from django.template.loader import get_template # Create your views here.
def index(request):
# 确定引入的模板文件
template = get_template('drugs_index.html')
# 定义显示的内容
time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
views_time = '今天是:' + time
# 将views_time通信到HTML中的html_time
html = template.render({'html_time':views_time})
return HttpResponse(html)

cmd中运行python manage.py runserver 0.0.0.0:8000,打开网页可看到数据通信成功。

4、CSS静态文件引入改善页面显示效果

除了在HTML中使用传统的引入方式使用CSS文件外,在Django中,CSS、JS和图片文件可以看作是静态文件,有专门的配置方式。

本笔记使用bootstrap.min.css的本地文件的方式进行演示。点击查看CSS教程

在templates文件夹中建立static子文件夹,在static文件夹内再建立css子文件夹。将bootstrap.min.css文件复制到css子文件夹内。

在settings.py中找到STATIC_URL = '/static/',并增加内容如下:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/' STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'templates/static'),
]

应用CSS与普通情况一样,直接在HTML中编辑。将drugs_index.html文件修改如下:

<!DOCTYPE html>
<!-- 加载静态文件 -->
{% load staticfiles %}
<html lang="en">
<head>
<!-- 以链接方式引用static文件夹中的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
<meta charset="UTF-8">
<title>药品搜索</title>
</head>
<body>
<!-- 应用css文件中的样式 -->
<p class="text-center muted">{{html_time}}</p>
</body>
</html>

运行后查看网页,可看到使用了css中的样式,使文字可以居中显示,文字颜色变为灰色。

Django学习笔记(二):使用Template让HTML、CSS参与网页建立的更多相关文章

  1. Django学习笔记二

    Django学习笔记二 模型类,字段,选项,查询,关联,聚合函数,管理器, 一 字段属性和选项 1.1 模型类属性命名限制 1)不能是python的保留关键字. 2)不允许使用连续的下划线,这是由dj ...

  2. django学习笔记二:一个项目多个App项目搭建

    django充许在一个项目中存在多个app,如一个大门户网站中可以包含论坛,新闻等内容,其中每一个模块称之为一个App,也可以理解为一个个独立的小型项目最终集成在一个门户网站中最终呈现给用户 本次测试 ...

  3. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  4. Django 学习笔记(二)

    Django 第一个 Hello World 项目 经过上一篇的安装,我们已经拥有了Django 框架 1.选择项目默认存放的地址 默认地址是C:\Users\Lee,也就是进入cmd控制台的地址,创 ...

  5. Django学习笔记(9)—— 开发用户注册与登录系统

    一,项目题目: 开发用户注册与登录系统 该项目主要练习使用Django开发一个用户注册与登录的系统,通过这个项目然后巩固自己这段时间所学习的Django知识. 二,项目需求: 开发一个简单的用户登录与 ...

  6. Django学习笔记(4)——Django连接数据库

    前言 在MVC或者MTV设计模式中,模型(M)代表对数据库的操作.那么如何操作数据库呢?本小节就认真学习一下.首先复习一下Django的整个实现流程 ,然后再实现一下使用数据库的整个流程,最后学习一下 ...

  7. Django学习笔记(13)——Django的用户认证(Auth)组件,视图层和QuerySet API

    用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...

  8. Django学习笔记(16)——扩展Django自带User模型,实现用户注册与登录

    一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...

  9. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

随机推荐

  1. Linux高性能server编程——定时器

    版权声明:本文为博主原创文章.未经博主允许不得转载. https://blog.csdn.net/walkerkalr/article/details/36869913  定时器 服务器程序通常管 ...

  2. 【UOJ83】【UR #7】水题出题人(提交答案题)

    点此看题面 大致题意: 给你若干份排序的代码,共\(6\)个子任务,每个子任务让你构造数据使得一份代码用时在给定的\(T\)以内,另一份代码用时超过\(2000000\). 子任务\(1\):归并排序 ...

  3. 【转】Android BroadcastReceiver介绍

    本文主要介绍BroadcastReceiver的概念.使用.生命周期.安全性.分类.特殊的BroadcastReceiver(本地.粘性.有序.粘性有序广播).示例代码见BroadcastReceiv ...

  4. Matlab 绘图实例

    概要   每次用 Matlab 绘图都要搜一堆资料设置一些参数,本次将绘图中的一些参数设置实例展示在这里,以备不时之需.暂包括折线图,面积图.   折线图实例   下图是效果图: 图 1:折线图效果图 ...

  5. GNOME keyring [(null)] 的密码:

    在ubuntu下执行svn checkout命令时,总是报下面的错误: GNOME keyring [(null)] 的密码:svn: 方法 OPTIONS 失败于 “http://xxxxxxxx/ ...

  6. 旧文备份:windows下编译和使用IT++

    1.下载IT++最新版:<a href="http://sourceforge.net/projects/itpp/">http://sourceforge.net/p ...

  7. shell编程中的vim命令说明

    vim命令模式:  1.一般命令模式 2.编辑模式 3.底行命令行命令模式 一般命令模式 直接用字符操作编辑模式 可以写文档(跟txt有点像)底行命令模式 先按'ESC',在按下“:”,之后在输出命令 ...

  8. Map the Debris -freecodecamp算法题目

    Map the Debris 1.要求 返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: ...

  9. dicom和dicomdir

    转载http://blog.sina.com.cn/s/blog_4bce5f4b01019ix5.html DICOM 文件内容在 Part 3 DICOM IOD 里定义.CT, MR, CR, ...

  10. linux系统ext文件系统知识

    ext2文件系统细节 我们都知道,操作系统中的数据分为文件内容和文件属性两部分,其中文件内容就是文件的实体数据,而文件属性就是文件类型.权限.属主.修改时间等信息.操作系统会将上述文件的内容放入磁盘文 ...