Django模板语法,带你快速入门

目录

案例一:登录页面

 案例二:for案例 + if案例——单个字符串的传递,列表的传递,字典的传递


         模板语法其本质:本质上,Django的模板语法就是在html中,写一些占位符,由数据对这些占位符进行替换和处理

这里,做一个登陆页面,供大家更好的理解~

案例一:登录页面

后端比较简单,我们先来看后端实现:

         细心的同学会发现我把用户名和密码写死了,不符合实际啊~确实哈,所以我们这里只是举例子哈,因为还没有连接数据库~

现在来看前端实现:

效果展示;

登录成功:

 登陆失败:

 案例二:for案例 + if案例---单个字符串的传递,列表的传递,字典的传递

        该案例中,不仅包括了for和if的案例,更重要的是向大家展示了,单个字符串的传递,列表的传递,字典的传递

前端:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<><h1>模板语法的学习  list:</h1><div><h2>n1---</h2>{{ n1 }}</div><div><h2>n2---</h2>{{ n2 }}</div>n2:</br><div>{{ n2.0 }}</div><div>{{ n2.1 }}</div><div>{{ n2.2 }}</div><div><h2>for循环输出n2:</h2></br>{% for item in n2 %}<span>{{ item }}</span>{% endfor %}</div><hr/><h2>n3---</h2></br>{{ n3 }}{{ n3.name }}{{ n3.salary }}{{ n3.role }}<ul><h2>for循环输出n3:</h2></br>{% for k,v in n3.items %}<li>{{ k }} = {{ v }} </li>{% endfor %}</ul><hr/><h2>n4---</h2></br>{{ n4.1 }}{{ n4.1.name }}{{ n4.1.role }}<h2>for循环输出n4:</h2></br>{% for item in n4 %}<div>{{ item.name }} {{ item.salary }}</div>{% endfor %}<hr/><h2>if、else 、elif:</h2>
</br>{% if n1 == "lyj" %}<h1>eeeee</h1>{% else %}<h1>ddddd</h1>{% endif %}{% if n1 == "lyj" %}<h1>hhhh</h1><h1>ddddd</h1>{% elif n1 == "xxx" %}<h1>bbb</h1>{% else %}<h1>aaaa</h1>{% endif %}</body>
</html>

 后端:

def test(request):name = "lyj"roles = ["管理员", "TC", "BO"]user_info = {"name": "cyk", "salary": 100, 'role': "TC"}data_list = [{"name": "张三", "salary": 100, 'role': "TC"},{"name": "李四", "salary": 1000, 'role': "TC"},{"name": "王五", "salary": 10000, 'role': "TC"},]return render(request, 'test.html', {"n1": name, "n2": roles, 'n3': user_info, "n4": data_list})

url:

效果:

 

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

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

相关文章

二叉树的遍历

二叉树的遍历 关于二叉树的遍历方式&#xff0c;要知道二叉树遍历的基本方式都有哪些。二叉树主要有两种遍历方式&#xff1a; 深度优先遍历&#xff1a;先往深走&#xff0c;遇到叶子节点再往回走。 前序遍历&#xff08;递归法&#xff0c;迭代法&#xff09;中序遍历&#…

【LeetCode-中等题】11. 盛最多水的容器

题目 题解一:双指针法 思路&#xff1a; 题目中的示例为&#xff1a; 在初始时&#xff0c;左右指针分别指向数组的左右两端&#xff0c;它们可以容纳的水量为 min⁡(1,7)∗88 此时我们需要移动一个指针。移动哪一个呢&#xff1f;应该移动对应数字较小的那个指针&#xff0…

【机器学习 | 分类指标大全】全面解析分类评估指标:从准确率到AUC,多分类问题也不在话下, 确定不来看看?

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

多维时序 | MATLAB实现SCNGO-BiLSTM-Attention多变量时间序列预测

多维时序 | MATLAB实现SCNGO-BiLSTM-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SCNGO-BiLSTM-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现SCNGO-BiLSTM-Attention多变量时间序列预测。 模型描…

工作流引擎之Flowable教程(整合SpringBoot)

简介 Flowable是什么&#xff0c;下面是官方文档介绍&#xff1a; Flowable是一个使用Java编写的轻量级业务流程引擎。Flowable流程引擎可用于部署BPMN 2.0流程定义&#xff08;用于定义流程的行业XML标准&#xff09;&#xff0c; 创建这些流程定义的流程实例&#xff0c;进行…

最优化方法Python计算:牛顿算法

设函数 f ( x ) f(\boldsymbol{x}) f(x)&#xff0c; x ∈ R n \boldsymbol{x}\in\text{ℝ}^n x∈Rn二阶连续可微&#xff0c;记 g ( x ) ∇ f ( x ) \boldsymbol{g}(\boldsymbol{x})\nabla f(\boldsymbol{x}) g(x)∇f(x)&#xff0c; H ( x ) ∇ 2 f ( x ) \boldsymbol{H}(\…

Java后端开发面试题——框架篇

Spring框架中的bean是单例的吗&#xff1f;Spring框架中的单例bean是线程安全的吗&#xff1f; singleton : bean在每个Spring IOC容器中只有一个实例。 prototype&#xff1a;一个bean的定义可以有多个实例。 Spring bean并没有可变的状态(比如Service类和DAO类)&#xff0c…

时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测

时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 目录 时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 程序设计 完整…

(成功踩坑)electron-builder打包过程中报错

目录 注意&#xff1a;文中的解决方法2&#xff0c;一定全部看完&#xff0c;再进行操作&#xff0c;有坑 背景 报错1&#xff1a; 报错2&#xff1a; 1.原因&#xff1a;网络连接失败 2.解决方法1&#xff1a; 3.解决方法2&#xff1a; 3.1查看缺少什么资源文件 3.2去淘…

css学习4(背景)

1、CSS中&#xff0c;颜色值通常以以下方式定义: 十六进制 - 如&#xff1a;"#ff0000"RGB - 如&#xff1a;"rgb(255,0,0)"颜色名称 - 如&#xff1a;"red" 2、background-image 属性描述了元素的背景图像. 默认情况下&#xff0c;背景图像进…

JVM的元空间了解吗?

笔者近期在面试的时候被问到了这个问题&#xff0c;元空间也是Java8当时的一大重大革新&#xff0c;之前暑期实习求职的时候有专门看过&#xff0c;但是近期秋招的时候JVM相关的内容确实有点生疏了&#xff0c;故在此进行回顾。 结构 首先&#xff0c;我们应了解JVM的堆结构&a…

Dockerfile制作Web应用系统nginx镜像

目录 1.所需实现的具体内容 2.编写Dockerfile Dockerfile文件内容&#xff1a; 默认网页内容&#xff1a; 3.构建镜像 4.现在我们运行一个容器&#xff0c;查看我们的网页是否可访问 5.现在再将我们的镜像打包并上传到镜像仓库 1.所需实现的具体内容 基于centos基础镜像…

sql in mac学习记录

鉴于有一段时间没有访问mysql了&#xff0c;最近打算在mac 系统上下载mysql 练习一下sql的使用&#xff0c;于是 First, the mysql download https://dev.mysql.com/downloads/mysql/ Second, Mysql install steps Install the software by normally install one software …

时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图)

时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图) 目录 时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图)效果一览基本介绍程序设计学习总结参考资料效果一览 基本介绍 时序预测 | MATLAB实现ELM极

前端-初始化Vue3+TypeScript

如果使用如下命令初始化项目&#xff0c;项目很干净&#xff0c;很适合了解项目的各个结构。 npm init vitelatest如果使用如下命令初始化项目&#xff0c;是可以选择你需要的组件 npm init vuelatest

vue根据template结构自动生成css/scss/less样式嵌套

vscode搜索安装插件&#xff1a;AutoScssStruct4Vue

十、接口(3)

本章概要 接口适配接口字段 初始化接口中的字段 接口嵌套接口和工厂方法模式 接口适配 接口最吸引人的原因之一是相同的接口可以有多个实现。在简单情况下体现在一个方法接受接口作为参数&#xff0c;该接口的实现和传递对象则取决于方法的使用者。 因此&#xff0c;接口的…

Linux 系统的如何优化(面试题)

Linux 系统的如何优化&#xff08;面试题&#xff09; (1) 禁用不需要的服务 ntsysv 命令最为方便&#xff0c;执行后&#xff0c;把不需要的勾选去掉就行 &#xff08;2&#xff09;避免直接使用root用户&#xff0c;普遍用户通过sudo授权操作 &#xff08;3&#xff09;通过…

wustojc日期格式变化

#include <stdio.h> int main() {char a[10];for(int i0;i<10;i){//用一个耍聪明的方法&#xff0c;全部用数组存储&#xff1b;面向结果编程a[0]getchar();}printf("%c%c%c%c%c%c%c%c%c%c",a[6],a[7],a[8],a[9],a[2],a[0],a[1],a[5],a[3],a[4]);return 0;}…

数据结构:栈和队列

文章目录 一、栈1.栈的概念及结构1.栈的概念及结构2.栈的实现 2.栈的顺序表实现1.栈的结构体和实现的功能函数2.栈的初始化&#xff0c;入栈和出栈操作3.栈的其他操作 3.栈的链表实现1.栈的结构体和实现的功能函数2.栈功能函数的实现 二、队列1.队列的概念及结构1.队列的概念及…