Django 3.1.7 入门笔记(四) : 学会运用Template动态渲染网页内容

截至发稿, 目前Django正式版为 3.1.7, 本篇以该版本作为工具, 下个月六号估计django3.2会出来最终版本, 还是挺期待的.

上一篇学习笔记中,我们没有使用建立app的时候views.py的render进行操作, 而是简单的使用HttpResponse和JsonResponse来对网页请求进行返回.

对于程序员来说无论是pc端应用还是移动端应用, 利用响应信息获取传输数据够用,  但如果对于我们的客户来说, 清晰可见的内容展示尤为重要.

注: 本节不会涉及到css美化网页显示和按键超链接跳转.

 

一. 首先我们来认识一下setting的一些参数

• BASE_DIR : 默认它指向我们的dj_bootcamp的项目根目录位置
• ROOT_URLCONF: 为什么我们的urls那么神奇可以定位地址, 配置的变量在这里指定我们的urls.py的位置,默认在项目文件夹里面的urls.py
• TEMPLATES: 模板的作用可以让我们在不同类型的数据显示有了预设好的显示网页框架, 包括模板资源路径,是否检索app内的模板等等.
•                        里面我们可以看到一下默认的模板, 我们前面登录后台的auth这里使用.

 

二.创建模板文件夹, 建立一个简单的网页

在项目目录下, 创建一个名为templates的模板文件夹, 并且建立一个名为index的html, 内容是简单的h1显示.

这里会有个疑问, Django是如何知道我们的模板存放在这里呢? 没错, 跟我们前面说的setting.py有关系, 这里我们设置一下   DIRS  参数

因为templates文件夹位于项目根目录, 所以我们使用BASE_DIR可以快速定位到该位置, 然后指定templates文件夹为我们项目的模板资源文件夹

 

三, 尝试在views.py使用render函数对网页进行渲染, 并运行实例

我们回到products的views.py, 改一下我们的home_view函数的返回方式, 这次我们使用的render来渲染我们的模板网页

render函数需要三个参数, 第一个的request请求, 第二个是使用的模板, 第三个是可传参数[这里不传参数]

修改完成后, 我们在项目内启动终端, 输入以下指令来启动django服务器运行.

python ./manage.py runserver

透过访问 http://127.0.0.1:8000/search/ 链接,我们来看看会有什么样的效果, 正常情况下, 我们的index.html正常显示了出来. 是不是非常轻松呢!

 

四. 如何传递参数使得我们的网页动态显示呢?

Well, 如果只是单调显示一个静态模板网页, 那么render不就显示不出优势, 上面我们也介绍了render函数第三个参数是可传递的参数块, 意味着我们可以利用它传递参数

首先我们需要改造一下我们的网页内容和views.py内对应的render函数. 注意的是html中引用参数变量需要使用两对大括号

 

接下来我们运行一下效果, 可以看到传过去的参数正常显示在网页中, 类似用户登录了这个网页, 你就修改name的值, 然后透过context打包参数传递给HTML:

 

五.尝试使用新知识使用render动态展示产品信息

这里我们猜想, 我们可以把前面商品的信息, 查询数据库后返回, 然后输出到HTML设计好对应的变量区域进行显示, 这样数据会更加的直观.

我们在模板新建一个item.html, 这里我们不按标准html来写, 结构不固定, 可以根据自己的需求设计你的网页展示区域, 这里仅为了测试数据

这里我们修改product_http_content函数的返回, 一样建立我们的context打包参数, 透过render指定模板和可传参数[这里也可以直接把product传过去]

我们访问product/[id], 看看效果如何, 相对于前面单纯的HttpResponse来说, 信息可阅读性会更加灵活很多[可以根据自己的Web设计来展示数据].

 

六. 利用父模板继承让展示页面更加统一

Django官方文档的解释: https://docs.djangoproject.com/en/3.2/ref/templates/language/#template-inheritance

我们浏览各类网站还是博客网站可以发现, title也好, footer也好, head也好, 都是风格统一的形式,

接下来看看Django如何让他们风格统一的, 这里我们在templates中新增一个base.html的文件, 如下代码:

这里可以看到文档相对来说是规范的HTML结构, 有head, 有body, 有footer, 画红圈的三个地方分别是我们重点要讲的四个区域

• title里面我们建立了一个title的block标签, 希望浏览不同子域的时候显示对应子域的名称
• body里面我们建立两个区域, 一个sidebar导航栏标签, 内部填充了四个我们可跳转的链接.
• 一个是content产品信息区域的block标签,用于显示产品信息
• footer标签里面可以用来显示开发者是谁或者备案号之类的信息[ 暂时不管这个区域 ]

 

回到我们的index.html和item.html, 首先我们使用extends引用我们的父模板base.html ,接着修改一下title和content的block需要显示的数据, 保存网页

 

接下来我们来运行看看是什么效果, 可以看到title跟着我们的内容显示对应的block title, 每个网页都有共同的block sidebar, 导航栏的功能都是通用的跳转

导航栏的超链接跳转依旧显示同一个父模板内共同内容的网页, 只是根据不同的子域显示对应的block content内容,

有点格式化字符串的味道, 类似score = 60     print("Your score is %d" %(score) )

 

七. 模板block的更多技巧

接下来我们再做一个查看产品列表的动态网页吧, 会有一个疑问, 我难道需要一个个商品去打包数据么?

这里的话就涉及到高级的语法调用, 其实我们的block可以使用for-in来协助我们完成这些工作. 如下代码:

同样继承父模板base.html, block title换成产品列表, 然后下面我们使用table表格来显示我们的产品信息

可以看到, 这里的话我们是需要对products_list进行提前处理, 显然我们需要在views.py进行操作

其实也很简单, 我们使用objects的all方法可以对所有product进行查询, 然后将查询结果打包context,  透过render传输给products_list.html进行处理

现在我们还差一步, 在urls.py注册我们的product/ 关联这个products_list_display函数

我们也可以把product链接加入base.html的sidebar中作为跳转

现在我们来试试最终的显示效果吧, 可以看到title, sidebar以及表格都正常显示出数据, 相对之前的HttpResponse和JsonResponse的反馈更加直观呢!

 

以上便是本次笔记的全过程，如果不准确的地方还请多多指点