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. now()与sysdate()的区别(1)

        now()与sysdate()两个函数都以'YYYY-MM-DD HH:MM:SS'的形式表示表示当前的时间.比如: root@rac1 21:13:10> select sysdate ...

  2. Uva 12657 双向链表

    题目链接:https://uva.onlinejudge.org/external/126/12657.pdf 题意: 给你一个从1~n的数,然后给你操作方案 • 1 X Y : move box X ...

  3. PHP 5.4 on CentOS/RHEL 7.0, 6.5 and 5.10 via Yum

    PHP 5.4.36 has been released on PHP.net on 18th December 2014, and is also available for CentOS/RHEL ...

  4. LIS的string用法

    题目链接 使用的是string里的find函数 stl大法好 #include<iostream> #include<cstdio> #include<cstring&g ...

  5. 第14章 启动文件详解—零死角玩转STM32-F429系列

    第14章     启动文件详解 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/firege ...

  6. 带有data-ng-bind表达式

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. C#语言概述

    C#语言概述 一..NET Framework .NET Framework是Windows的一个不可或缺的组件,它包括公共语言运行库(CLR)和类库两部分. CLR是Microsoft的公共语言基础 ...

  8. iclr2015

    http://www.iclr.cc/doku.php?id=iclr2015:main#accepted_papers iclr2015的accept papers,有些看过,有些没看明白,看来还是 ...

  9. NPM 学习笔记整理

    NPM 学习笔记整理 阅读 550,2017年06月04日 发布,来源:blog.ihoey.com 什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ru ...

  10. 时间复杂度 log n

    时间复杂度 O(log n) 意味着什么? 预先知道算法的复杂度是一回事,了解其后的原理是另一件事情. 不管你是计算机科班出身还是想有效解决最优化问题,如果想要用自己的知识解决实际问题,你都必须理解时 ...