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. 【CF660E】Different Subsets For All Tuples(组合数学)

    点此看题面 大致题意: 有一个长度为\(n\)的数列,每个位置上数字的值在\([1,m]\)范围内,则共有\(m^n\)种可能的数列.分别求出每个数列中本质不同的子序列个数,然后求和. 一些分析 首先 ...

  2. Edmonds-Karp算法,最大流POJ(1459)

    题目链接:http://poj.org/problem?id=1459 解题报告: 电力调度站不涉及流的产生和消耗,不用考虑,Edmonds-Karp算法,就是利用剩余网络和增广路来解决,网络中的最大 ...

  3. [pytorch] Pytorch入门

    Pytorch入门 简单容易上手,感觉比keras好理解多了,和mxnet很像(似乎mxnet有点借鉴pytorch),记一记. 直接从例子开始学,基础知识咱已经看了很多论文了... import t ...

  4. IE 8 下小心使用console.log()

    我们很多情况下会使用console.log() 对代码调试.在chrome下和Firefox下都不会有太大问题,但是在最近我在IE8 下调试时使用了console.log(),就出现一些问题.在IE8 ...

  5. mysql存储问题

    为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql中遇到的一些commen sense类 ...

  6. 1、React-Native的基础入门

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安 ...

  7. Tomcat的部署+第一个Servlet

    Tomcat部署 1.下载tomcat,添加到eclipse 2.配置环境变量(path) 3.win+r,输入Startup(如果没用,就管理员启动命令) 或者找到tomcat安装包,在bin目录找 ...

  8. MySQL主从复制读写分离如何提高从库性能-实战

    在做主从读写分离时候,需要注意主从的一些不同参数设置,来提高从库的性能,提高应用读取数据的速度,这样做很有必要的. 做读写分离复制主从参数不同设置如下(需要根据自己应用实际情况来设置): parmet ...

  9. 腾讯云负载均衡CLB

    负载均衡 使用场景: ①购买一个负载均衡LB实例 ②一级.二级域名都解析到VIP上 ③创建HTTP/HTTPS监听器 ④绑定云主机 在nginx中只需要配置好伪静态和相关设置就ok了

  10. js函数的默认参数

    function f(flag, start, end, msg){ flag = flag == false ? flag : true; start = start || null; start ...