10.2、Django入门--前台管理

news/2024/4/26 6:54:27/文章来源:https://blog.csdn.net/qq_43604376/article/details/128427485

文章目录

  • 1、URLconf 路由管理
    • 展示首页
  • 2、视图函数处理业务逻辑
    • 展示书籍的详细页
  • 3、模板管理实现好看的HTML页面
  • 3.1 模板引擎配置
    • 3.2 模板语法:变量
    • 3.3 模板语法: 常用标签
    • 3.4 主页与详情页前端HTML设计
      • 常用的HTML编写基础
        • 标题标签
        • 列表标签
        • 图片标签
        • 链接标签
        • 表格标签
        • 表单标签
      • 点击书籍跳转至详情页
  • Django请求的生命周期(重要)

1、URLconf 路由管理

  • 在 Django 中,定义 URLconf 包括正则表达式、视图两部分 。
  • Django 使用正则表达式匹配请求的URL,一旦匹配成功,则调用应用的视图 。
  • 注意:只匹配路径部分,即除去域名、参数后的字符串 。
  • 在主配置文件中添加子配置文件,使主 urlconf 配置连接到子模块的 urlconf 配置文件 。

展示首页

编辑主配置文件djangoProject/urls.py
在这里插入图片描述编写子配置文件bookapp/urls.py
实现当book路径后面什么也不加的时候,执行指定的视图函数 views.index

在这里插入图片描述bookapp/views.py文件中的index函数:
租用 book/index.html 并返回给用户

先从数据库中查询所有的book信息,查到之后租用html代码,这个html代码根据从数据库中查询的数据不同,显示的数据也不同。之后还传了上下文books。就是将变量books填充到 html 代码的过程。这个过程就是渲染。

渲染就是将上下文{ 'books':books }填充到book/index.html代码的过程。
在这里插入图片描述
在templates下创建HTML文件:
在这里插入图片描述此时浏览器内直接访问
在这里插入图片描述HTML文件中 < ul >是一个无序列表
< li > 就是小圆点
编写 templates/book/index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: blue">图书管理系统</h1><ul><li>1</li><li>2</li></ul>
</body>
</html>

在这里插入图片描述
如何将render传递的books显示出来呢?
模板引擎中变量是使用两个花括号引起来的

编写 templates/book/index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: blue">图书管理系统</h1><ul>{%  for book in books %}<li>{{ book.name }}</li>{% endfor %}</ul>
</body>
</html>

刷新页面,能显示图书信息
在这里插入图片描述

2、视图函数处理业务逻辑

展示书籍的详细页

编写项目的主配置文件:
djangoProject/urls.py
在这里插入图片描述编写子配置文件 bookapp/urls.py :
当访问book开头,后面有一个数字的时候,访问views.detail视图函数

在这里插入图片描述
编写 views.detail 视图函数:
bookapp/views.py

在这里插入图片描述
创建templates/book/detail.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>{{ book.name }}</h1><h1>{{ book.pub_date }}</h1><h1>{{ heros }}</h1>
</body>
</html>

在这里插入图片描述

但是一般不会手动在浏览器内输入数字,一般是在界面点击。这该如何实现呢?

3、模板管理实现好看的HTML页面

作为Web 框架, Django 需要一种很便利的方法以动态地生成HTML。最常见的做法是使用模板。
模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。

3.1 模板引擎配置

配置文件 djangoProject/settings.py 中设定了从哪找模板文件
在这里插入图片描述

3.2 模板语法:变量

模板就是将变量信息动态插入到HTML文件中

  • 变量输出语法: { { var } }
    当模版引擎遇到一个变量,将计算这个变量,然后将结果输出。
  • 变量名必须由字母、数字、下划线(不能以下划线开头)和点组成
  • 当模版引擎遇到点(“.”),会按照下列顺序查询:
    字典查询,例如: foo[“bar”]
    属性或方法查询,例如: foo.bar
    数字索引查询,例如: foo[bar]
  • 如果变量不存在, 模版系统将插入’ ’ (空字符串)。

3.3 模板语法: 常用标签

语法 : { % tag % }
用于在输出中创建文本; 控制循环或逻辑; 加载外部信息到模板中。

for标签:
{% for ... in ... %}循环逻辑
{% endfor %}if标签:
{% if ... %}逻辑1
{% elif ... %}逻辑2
{% else %}逻辑3
{% endif %}comment标签:
{% comment %}多行注释
{% endcomment %}include标签: 加载模板并以标签内的参数渲染
{% include "base/left.html" %}url反向解析:
{% url 'name' p1 p2 %}csrf_token标签:用于跨站请求伪造保护
{% csrf_token %}

3.4 主页与详情页前端HTML设计

常用的HTML编写基础

标题标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5>
</body>
</html>

在这里插入图片描述

列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
/* 无序列表*/<ul><li>book1</li><li>book2</li><li>book3</li></ul>
/* 有序列表*/<ol><li>hero1</li><li>hero2</li><li>hero3</li></ol>
</body>
</html>

在这里插入图片描述

图片标签

在这里插入图片描述
在这里插入图片描述

链接标签

实现:点击文字、或者图片都能链接到网址 https://www.baidu.com

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="https://www.baidu.com">百度一下</a><a href="https://www.baidu.com"><img src="cat.jpg"></a>
</body>
</html>

在这里插入图片描述

表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="2"><tr><td>主机名</td><td>IP</td></tr><tr><td>localhost</td><td>127.0.0.1</td></tr><tr><td>hosta</td><td>192.168.0.11</td></tr></table>
</body>
</html>

在这里插入图片描述

表单标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form>用户名: <input type="text" placeholder="username"><br/>密码: <input type="password" placeholder="password"><br/><input type="submit" value="登录"></form>
</body>
</html>

在这里插入图片描述

点击书籍跳转至详情页

编写模板文件templates/book/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: blue">图书管理系统</h1><ul>{%  for book in books %}<li><a href="/book/{{ book.id }}">{{ book.name }}</a></li>{% endfor %}</ul>
</body>
</html>

在这里插入图片描述点击“倚天屠龙记” ,如下:

在这里插入图片描述

Django请求的生命周期(重要)

1、wsgi : 封装请求后交给后端的web框架(如 Flask、Django框架 )。
2、请求中间件: 对请求进行校验或在请求对象中添加其他相关数据,例如: csrf、
request.session 。
3、路由匹配: 根据浏览器发送的不同 url 路径去匹配不同的视图函数。
4、视图函数: 在视图函数中进行业务逻辑的处理。如果涉及数据库,就需要使用 ORM对数据库增删改查、查到数据之后,如果需要返回好看的HTML页面,就需要使用Templates 。
5、响应中间件: 对响应的数据进行处理。
6、wsgi : 将响应的内容发送给浏览器。

在这里插入图片描述
整个核心过程就如上图所示(蓝色和绿色框)。
但是在实际开发中是有一些特殊需求的,这些需求可以通过中间件(上图中的橙色框)来完成。比如:客户端在请求之前想做一些操作就添加一个请求中间件,在视图执行之前做一些操作就有视图中间件。发生异常的时候,做一些操作就设置异常中间件。。。。。

上述项目中的一些中间件,分别作用于不同的阶段。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_239679.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ 第一天 基础 6 SpringBoot 整合RabbitMQ

RabbitMQ 【黑马程序员RabbitMQ全套教程&#xff0c;rabbitmq消息中间件到实战】 文章目录RabbitMQ第一天 基础6 SpringBoot 整合RabbitMQ6.1 SpringBoot 整合 RabbitMQ【生产者】6.1.1 生产者6.2 SpringBoot 整合 RabbitMQ【消费者】6.2.1 消费者6.3 小结第一天 基础 6 Spri…

day3-javascript

HTML的注释 CSS的注释 Javascript的注释是不一样的 JQuery JQuery是一个JavaScript的第三方模块 基于JQuery&#xff0c;自己开发一个功能。 现成的工具 依赖jQuery&#xff0c;例如BootStrap动态效果

Vue事件处理的基本使用

前言 事件处理在vue中也是非常重要的一项技术&#xff0c;它类似于js的事件处理&#xff0c;但是也有不同&#xff0c;下面就简单介绍一下在vue中如何进行事件使用以及一些要点 1 事件基本使用 在这里我们使用单击事件为例&#xff0c;简单讲讲在vue中单击事件的编写以及细节…

Spring Bean作用域

目录 什么是作用域呢 ? 那什么又是Spring Bean的作用域呢 ? Spring框架默认Bean作用域是什么呢 ? Spring Bean的作用域都有哪些呢 ? 如何设置Bean作用域 什么是作用域呢 ? 在JavaSE中,作用域就是指一个变量可生效的范围. 就比如一个变量的作用域是方法的代码块的范围…

将单向链表按照目标值value 划分成左边小,中间等,右边大的形式,给定一个单链表,判断单链表的值是否是回文结构【图文解释包你看懂】

将单向链表按照目标值value 划分成左边小&#xff0c;中间等&#xff0c;右边大的形式 例如 1 -> 3 -> 5-> 3 -> 7 按照value 3划分 1-> 3-> 3 -> 5 -> 7 解题思路&#xff1a;给定值为 value 用6个变量&#xff0c;分别表示 小于value 的Head sH &…

第11章_数据库的设计规范(理论了解)

第11章_数据库的设计规范 范式 2.3键和相关属性的概念 范式的定义会使用到主键和候选键&#xff0c;数据库中的键(Key)由一个或者多个属性组成。数据表中常用的几种键和属性的定义: 超键︰能唯─标识元组的属性集叫做超键。候选键︰如果超键不包括多余的属性&#xff0c;那…

WEB1.0起源:全球首个网站info.cern.ch

伯纳斯李&#xff08;图&#xff09;1990年创立第一个网站。 info.cern.ch是世上第一个网站&#xff0c;提供有关万维网的资料。 info.cern.ch这个网站依然运作如常。 英国科学家蒂姆伯纳斯-李 (Tim Berners-Lee) 于 1989 年在 CERN 工作期间发明了万维网 (WWW)。Web 最初的构思…

mqtt的使用与二次封装

前提&#xff1a;先安装Mosquitto并启动服务&#xff0c;可使用mqttx进行接收发送的测试。 Mosquitto以配置启动命令 mosquitto -c mosquitto.conf -v原文链接&#xff1a;mqtt的使用 本文为测试使用固无账号密码&#xff0c;可在原文查看 封装后实现效果&#xff0c;加入一个…

耗时二周,万字总结Maven简明教程,与君共勉!

什么是Mavne Maven 是一个项目管理工具&#xff0c;它包含了一个项目对象模型 (POM&#xff1a;Project Object Model)&#xff0c;一组标准集合。由于 Maven 使用标准目录布局和默认构建生命周期&#xff0c;开发团队几乎可以立即自动化项目的构建基础设施。在多个开发团队环…

消息队列RabbitMQ学习笔记(四)死信队列和延迟队列

1. 死信的概念 先从概念解释上搞清楚这个定义&#xff0c;死信&#xff0c;顾名思义就是无法被消费的消息&#xff0c;字面意思可以这样理 解&#xff0c;一般来说&#xff0c;producer 将消息投递到 broker 或者直接到queue 里了&#xff0c;consumer 从 queue 取出消息 进行…

Linux 下 使用点阵在LCD上显示汉字,字符

文章目录前言一、显示字符1.获取点阵&#xff1a;2.描点&#xff08;显示字符函数&#xff09;&#xff1a;3. 要打开LCD设备&#xff1a;4. 通过ioctl 获取Framebuffer参数:5. 通过mmap映射出Framebuffer的地址&#xff1a;6.清屏并显示字符&#xff1a;二、显示汉字1.区位码&…

多线程基础入门

文章目录前言一、认识线程&#xff08;一&#xff09;概念1.线程是什么2.为啥要有线程&#xff08;轻量级进程&#xff09;为什么线程比进程更轻量经典面试题&#xff1a;谈谈进程和线程的区别和联系3.线程的结构&#xff08;二&#xff09;第一个多线程程序&#xff08;三&…

我国用电信息采集系统行业应用需求及市场容量分析 现6省上线运行

用户用电信息采集系统是通过对配电变压器和终端用户的用电数据的采集和分析&#xff0c;实现用电监控、推行阶梯定价、负荷管理、线损分析&#xff0c;最终达到自动抄表、错峰用电、用电检查&#xff08;防窃电&#xff09;、负荷预测和节约用电成本等目的。建立全面的用户用电…

RabbitMQ 第一天 基础 4 RabbitMQ 的工作模式 4.4 Topic 通配符模式 4.5 工作模式总结

RabbitMQ 【黑马程序员RabbitMQ全套教程&#xff0c;rabbitmq消息中间件到实战】 文章目录RabbitMQ第一天 基础4 RabbitMQ 的工作模式4.4 Topic 通配符模式4.4.1 模式说明4.4.2 代码编写4.4.3 小结4.5 工作模式总结第一天 基础 4 RabbitMQ 的工作模式 4.4 Topic 通配符模式 …

32天高效突击:开源框架+性能优化+微服务架构+分布式,面阿里获P7(脑图、笔记、面试考点全都有)

今年的大环境不佳&#xff0c;所以大部分的人在今年的招聘旺季都没有收获到好的结果。 但不要着急&#xff0c;今天分享的内容则是由 一位阿里P7的面试心得&#xff0c;通过32天的高效突击训练&#xff0c;成功拿下offer的学习方法。 篇章分为三大章节&#xff0c;可以根据自…

day 10 模拟和高精度

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 #include<bits/stdc.h> using namespace std; int n, na, nb, fa, fb;//f:得分 int a[205], b[205];void fun(int ta, int tb){if(ta 0 && tb 1) fb;if(ta 1 && tb 0) fa;if(ta 0 && tb …

【nowcoder】笔试强训Day2

目录 一、选择题 二、编程题 2.1排序子序列 2.2倒置字符串 一、选择题 1.A 派生出子类 B &#xff0c; B 派生出子类 C &#xff0c;并且在 java 源代码有如下声明&#xff1a; 1. A a0new A(); 2. A a1new B(); 3. A a2new C(); 问以下哪个说法是正确的&#xff08;&…

机器学习 | 线性回归

一.基本原理 利用回归方程&#xff08;函数&#xff09;对一个或多个自变量&#xff08;特征值&#xff09;和因变量&#xff08;目标值&#xff09;之间关系进行建模的一种分析方式 根据线性代数&#xff0c;我们可以定义方程 xwy&#xff0c;在线性回归问题中&#xff0c;x…

前端小知识:赋予变量默认值(逻辑与运算符、空值合并运算符、逻辑空运算符)

8. 逻辑与运算符、空值合并运算符、逻辑空运算符&#xff08;可用赋予默认值&#xff09; &#xff08;空值合并运算符&#xff09;官方文档&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing   &#xff08;逻辑…

【推荐收藏】这份图解算法数据结构的材料太良心

5年前发生的一件事&#xff0c;成为了我职业生涯的重要转折点。当时的我在交大读研&#xff0c;对互联网求职一无所知&#xff0c;但仍然硬着头皮申请了 Microsoft 实习生。面试官让我在白板上写出“快速排序”代码&#xff0c;我畏畏缩缩地写了一个“冒泡排序”&#xff0c;并…