10.2、Django入门--前台管理

news2024/11/20 3:33:57

文章目录

  • 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.coloradmin.cn/o/112255.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

什么是Mavne Maven 是一个项目管理工具&#xff0c;它包含了一个项目对象模型 (POM&#xff1a;Project Object Model)&#xff0c;一组标准集合。由于 Maven 使用标准目录布局和默认构建生命周期&#xff0c;开发团队几乎可以立即自动化项目的构建基础设施。在多个开发团队环…
阅读更多...
代码随想录训练营第60天|LeetCode 84.柱状图中最大的矩形

代码随想录训练营第60天|LeetCode 84.柱状图中最大的矩形

LeetCode 84.柱状图中最大的矩形 双指针 注意&#xff0c;双指针解法可行&#xff0c;但是在力扣上提交会超时。 以heights[i]为中心&#xff0c;用两个指针向两边扩散&#xff0c;直到heights[left]和heights[right]小于heights[i]为止&#xff0c;这样就构成了以left和rig…
阅读更多...
第11章_数据库的设计规范（理论了解）

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

第11章_数据库的设计规范 范式 2.3键和相关属性的概念 范式的定义会使用到主键和候选键&#xff0c;数据库中的键(Key)由一个或者多个属性组成。数据表中常用的几种键和属性的定义: 超键︰能唯─标识元组的属性集叫做超键。候选键︰如果超键不包括多余的属性&#xff0c;那…
阅读更多...
基于HOG+LBP完成特征工程，基于机器学习模型同时完成人脸识别+表情识别

基于HOG+LBP完成特征工程，基于机器学习模型同时完成人脸识别+表情识别

这周前两天有时间我写了一篇博文&#xff0c;基于LBP和HOG实现人脸好表情特征的提取计算&#xff0c;之后分别训练了人脸识别模型和表情识别模型&#xff0c;在推理阶段实现了单张图像一次性人脸识别和表情识别的计算分析&#xff0c;但这个我前面就说了这个还是间接的实现方式…
阅读更多...
关于GC原理和性能调优实践，看这一篇就够了

关于GC原理和性能调优实践，看这一篇就够了

前言 本文介绍 GC 基础原理和理论&#xff0c;GC 调优方法思路和方法&#xff0c;基于 Hotspot jdk1.8&#xff0c;学习之后你将了解如何对生产系统出现的 GC 问题进行排查解决。 正文 本文的内容主要如下&#xff1a; GC 基础原理&#xff0c;涉及调优目标&#xff0c;GC 事…
阅读更多...
Redis原理篇—数据结构

Redis原理篇—数据结构

Redis原理篇—数据结构 笔记整理自 b站_黑马程序员Redis入门到实战教程 底层数据结构 动态字符串SDS 我们都知道 Redis 中保存的 Key 是字符串&#xff0c;value 往往是字符串或者字符串的集合。可见字符串是 Redis 中最常用的一种数据结构。 不过 Redis 没有直接使用C语言中…
阅读更多...
Python圣诞树

Python圣诞树

目录 一、前言 二、创意名 三、效果展示 四、实现步骤 五、编码实现 一、前言 一年一度的圣诞节又要来喽~在这么浪漫的节日里怎么能少的了一个浪漫的程序员呢~让我们一起画个圣诞树&#xff0c;送给你喜欢的那个人吧~ 二、创意名 Python浪漫圣诞树&#xff0c;具体源码见&…
阅读更多...
嘿ChatGPT，来帮我写代码

嘿ChatGPT，来帮我写代码

最近 ChatGPT 发行了&#xff0c;这是由 OpenAI 开发的AI聊天机器人&#xff0c;专门研究对话。它的目标是使AI系统更自然地与之互动&#xff0c;但是在编写代码时也可以为您提供帮助。您可以让 ChatGPT 做你的编程助理&#xff0c;甚至更多&#xff01;在过去的几天里&#xf…
阅读更多...
腾讯云轻量应用服务器使用 SRS 应用镜像搭建个人直播间、视频转播、本地录制！

腾讯云轻量应用服务器使用 SRS 应用镜像搭建个人直播间、视频转播、本地录制！

SRS 是一个开源的流媒体集群&#xff0c;主要应用在直播和 WebRTC&#xff0c;支持 RTMP、WebRTC、HLS、HTTP-FLV 和 SRT 等常用协议。 轻量应用服务器提供了 SRS 应用镜像&#xff0c;使您无需再关注繁杂的部署操作&#xff0c;即可通过该镜像在轻量应用服务器上一键搭建个人…
阅读更多...
安卓/华为手机恢复出厂设置后如何恢复照片

安卓/华为手机恢复出厂设置后如何恢复照片

绝大多数安卓用户都会经历过手机恢复出厂设置&#xff0c;部分用户可能没有意识到手机恢复出厂设置可能会导致数据丢失。但是&#xff0c;当您在 云盘上进行备份或在设备上进行本地备份时&#xff0c;情况就会有所不同&#xff0c;并且当您将 安卓手机恢复出厂设置时&#xff0…
阅读更多...
LeetCode HOT 100 —— 581. 最短无序连续子数组

LeetCode HOT 100 —— 581. 最短无序连续子数组

题目 给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。 请你找出符合题意的 最短 子数组&#xff0c;并输出它的长度。 思路 方法一&#xff1a;双指针 排序 最终目的是让…
阅读更多...
大气湍流自适应光学校正算法matlab仿真,包括涡旋光束,大气湍流影响,不同轨道角动量OAM态之间的串扰,校正等

大气湍流自适应光学校正算法matlab仿真,包括涡旋光束,大气湍流影响,不同轨道角动量OAM态之间的串扰,校正等

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 涡旋光束是一种具有螺旋波前的光束&#xff0c;在涡旋光束中&#xff0c;决定涡旋光束特性的角量子数可以是任意一个自然数&#xff0c;其不同设置所产生的涡旋光束之间存在正交关系。目前&#…
阅读更多...
Android NDK 中堆栈日志 add2line 的分析实践

Android NDK 中堆栈日志 add2line 的分析实践

文章目录目的常用的辅助工具分析步骤参考目的 Android NDK 中出现的 crash 日志分析定位&#xff0c;使用 addr2line 对库中定位so 动态库崩溃位置&#xff0c;定位到某个函数的具体的代码行。 常用的辅助工具 add2line&#xff0c;objdump&#xff0c;ndkstack 等等。本文主要…
阅读更多...
一文深度揭开Redis的磁盘持久化机制

一文深度揭开Redis的磁盘持久化机制

前言 Redis 是内存数据库&#xff0c;数据都是存储在内存中&#xff0c;为了避免进程退出导致数据的永久丢失&#xff0c;需要定期将 Redis 中的数据以数据或命令的形式从内存保存到本地磁盘。当下次 Redis 重启时&#xff0c;利用持久化文件进行数据恢复。Redis 提供了 RDB 和…
阅读更多...
在linux上安装并初始化配置MariaDB支持远程登录

在linux上安装并初始化配置MariaDB支持远程登录

在linux上安装并初始化配置MariaDB支持远程登录一、环境准备二、启动MariaDB三、初始化MariaDB四、配置远程访问五、补充一些额外的MySql用户赋权限的语句一、环境准备 本文环境是Redhat7上自带的MariaDB, 在安装redhat系统时已经自动安装好了&#xff0c;如果需要自行安装的话…
阅读更多...
Selenium 常用函数总结

Selenium 常用函数总结

Seleninum作为自动化测试的工具&#xff0c;自然是提供了很多自动化操作的函数&#xff0c; 下面列举下个人觉得比较常用的函数&#xff0c;更多可见官方文档&#xff1a; 官方API文档&#xff1a; http://seleniumhq.github.io/selenium/docs/api/py/api.html 1) 定位元素 f…
阅读更多...
【源码共读】axios的46个工具函数

【源码共读】axios的46个工具函数

所有工具函数 还是老样子&#xff0c;先看看axios的工具函数有哪些&#xff0c;先心里有个印象&#xff0c;然后再逐个分析。 直接拉到最下面&#xff0c;可以看到axios的工具函数都是统一导出的&#xff1a; export default {isArray, // 判断是否是数组isArrayBuffer, // …
阅读更多...
[机缘参悟-95] ：不同人生和社会问题的本质

[机缘参悟-95] ：不同人生和社会问题的本质

事情的本质是物极必反&#xff08;轮回、周期&#xff09; 社会的本质是优胜劣汰&#xff08;迭代、发展&#xff09; 道德的本质是伦理秩序&#xff08;未定、秩序&#xff09; 战争的本质是资源占用&#xff08;弱肉、强食&#xff09; 商业的本质是价值交换 金钱的本质…
阅读更多...
同事这样用Redis，把我害惨了

同事这样用Redis，把我害惨了

首先说下问题现象&#xff1a;内网sandbox环境API持续1周出现应用卡死&#xff0c;所有api无响应现象 刚开始当测试抱怨环境响应慢的时候 &#xff0c;我们重启一下应用&#xff0c;应用恢复正常&#xff0c;于是没做处理。但是后来问题出现频率越来越频繁&#xff0c;越来越多…
阅读更多...
MySQL实现主从复制(Windows)的明细操作步骤

MySQL实现主从复制(Windows)的明细操作步骤

文章目录一、教学视频地址二、设计思路三、具体步骤一、教学视频地址 视频地址&#xff1a;视频链接 二、设计思路 准备两个5.7版本的MySQL&#xff0c;一个用作主数据库&#xff0c;另一个用作从数据库。 把主数据库做为写入数据库&#xff0c;从数据库作为读数据库。 三…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023