Django中的HTML页面放在项目的templates
目录下,这个目录的名字在建立工程时就设定好了,默认就是templates。而HTML文件所引用的静态资源,如CSS、JS和图片文件等,应单独设置一个项目的子目录来存放,习惯约定使用static
目录。
图中绿色部分就是项目的静态资源,橙色部分就是存放HTML页面的地方。
在Django项目的同名子目录/settings.py
配置文件最后面对静态资源的位置进行配置。一是要配置引用指针,类似于一个逻辑路径,用来给HTML页面引用;二是要配置对应的实际目录元组,这些目录指出了实际访问的资源位置。
将这个配置文件拉到最后,做如下配置:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/
# 引用指针,在HTML文件中需要和这里对应.(这个名字和实际目录名无关)
STATIC_URL = '/static/'
# 建立一个全局变量元组,保存要引用的路径位置
STATICFILES_DIRS = (
# 指出要引用的资源所在目录名字.(这个就是实际目录名,和引用指针名无关)
os.path.join(BASE_DIR, 'static'),
)
书写一个text.css如下,只提供一个类选择器做测试:
.lzhdiv{
height: 200px;
text-align: center;
background-color: antiquewhite;
}
在templates目录下书写一个index.html如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Djangotitle>
{#注意这里的static是在settings.py里配置的引用指针#}
{% load static %}
<link rel="stylesheet" href="{% static "/css/test.css" %}">
head>
<body>
<div class="lzhdiv">
这是一个HTML页面,放在templates目录下
div>
body>
html>
其中使用前面配置的引用指针访问了静态资源。
在创建的一个项目app目录下(这里是上篇的lzhapp目录),修改其中的views.py
,之前是返回一个字符串,现在要返回一个HTML静态页面:
from django.shortcuts import render
# 路由中指定要调用的函数,传入一个用户请求参数
def index(request):
# 返回HTML页面时,使用render来渲染和打包
return render(request, 'index.html')
因为没有改动同名子目录/urls.py
配置文件,所以url还是之前的那个,浏览器访问http://localhost:8000/index/
,应看到:
成功返回了引入了静态资源的静态页面。
网页一般会根据用户的操作,如表单提交数据,来返回一个与之相关的页面,即动态页面。
在同名子目录下的settings.py
中注释掉这一行:
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 关闭Django的跨站请求保护机制
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Django中使用Django模板语言做HTML转义,可以方便的实现动态页面。修改index.html如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Djangotitle>
{#注意这里的static是在settings.py里配置的引用指针#}
{% load static %}
<link rel="stylesheet" href="{% static "/css/test.css" %}">
head>
<body>
<div class="lzhdiv">
用户提交数据的表单
<form action="/gosub/" method="post">
<input type="text" name="username">
<br>
<input type="password" name="password">
<br>
<input type="submit" value="提交">
form>
div>
<br>
以lst为key获取inptDicLst并展示其内容至表格
<table border="1">
<tr>
<th>用户名th>
<th>密码th>
tr>
{#使用Django模板语言做HTML内容替换#}
{% for line in lst %}
<tr>
<td>{{ line.usr }}td>
<td>{{ line.pwd }}td>
tr>
{% endfor %}
table>
body>
html>
即想要将用户提交的用户名和密码给名为/gosub/
的路由处理,然后回到本页面,处理的结果是将用户的提交展示到下面的表格上。
修改同名子目录下的urls.py配置文件如下:
"""lzhDjango URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
# 导入要使用的app的view文件
from lzhapp import views
urlpatterns = [
# 注释掉admin后台的路由
# path('admin/', admin.site.urls),
# 使用指定app的路由,指定正则和调用的函数
path(r'index/', views.index),
# 配置表单提交的路由
path(r'gosub/', views.gosub),
]
在路由配置文件中已经指明了处理在views.gosub
处,而这个views正是前面从创建的app那里导入的。所以在相应的这个app的views.py文件中需要加上这个处理函数:
from django.shortcuts import render
# 路由中指定要调用的函数,传入一个用户请求参数
def index(request):
# 返回HTML页面时,使用render来渲染和打包
return render(request, 'index.html')
# 存放用户输入数据的字典列表
inptDicLst = [
# 存放一些原始数据
{'usr': '字典中原来就有的用户名', 'pwd': '对应密码'}
]
# 表单提交调用的函数
def gosub(request):
# 相当于Java的Servlet中的doPost情况
if request.method == 'POST':
# 获取表单提交来的数据
username = request.POST.get('username', None)
password = request.POST.get('password', None)
# 在控制台输出表单的提交看一下
print(username, password)
# 将这些数据打包成字典
tempDic = {'usr': username, 'pwd': password}
# 将这个字典加入到字典列表
inptDicLst.append(tempDic)
# 返回一个页面,如返回自己这个页面本身,第三个参数以字典方式提供数据对象
return render(request, 'index.html', {'lst': inptDicLst})
浏览器访问http://localhost:8000/index/
,应看到:
因为至此只调用了index这一函数,所以并没有为浏览器返回{'lst': inptDicLst}
,表格中是空的(只有表头)。