【Django学习笔记】2:返回静态页面,Django模板语言生成动态页面

返回静态页面

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如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Django</title>
    {#注意这里的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/,应看到:
这里写图片描述
成功返回了引入了静态资源的静态页面。

Django动态页面

网页一般会根据用户的操作,如表单提交数据,来返回一个与之相关的页面,即动态页面。

关闭跨站请求保护机制

在同名子目录下的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如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Django</title>
    {#注意这里的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},表格中是空的(只有表头)。

连续提交一些数据:
这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值