当前位置: 首页 > article >正文

【Django】教程-2-前端-目录结构介绍

【Django】教程-1-安装+创建项目+目录结构介绍

3. 前端文件配置

3.1 目录介绍

在app下创建static文件夹, 是根据setting中的配置来的 STATIC_URL = ‘static/’

templates目录,编写HTML模板(含有模板语法,继承,{% static ‘xx’ %})

一般会创建三个目录:css、img、js、plugins

|-- appTang
|	|-- migrations		【固定,不用动,数据库变更记录】
|		|-- __init__.py
|	|-- static			【静态资源配置】
|		|-- css
|		|-- img			【图片】
|		|-- js			【js插件,jQuery】
|		|-- plugins		【插件,bootstrap3.4.1等】
|	|-- templates		【前端页面文件夹】
|		|-- xxx.html
|	|-- __init__.py
|	|-- admin.py		【固定,django默认提供的admin后台管理】
|	|-- apps.py 		【固定,不用动,app启动类】
|	|-- models.py		【**重要**】,对数据库操作
|	|-- tests.py		【固定,不用动】单元测试
|	|-- view.py			【**重要**】函数,处理逻辑编写
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/></head>
<body><h1>用户列表</h1>{{ n1 }}
{#<input type="text" class="btn btn-primary" value="新建"/>#}
<script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script></body>
</html>

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

3.2 字典-对应关系

 	{% for k in n3.keys %}<tr><td>{{ k.name }}</td><td>{{ k.salary }}</td><td>{{ k.role }}</td></tr>{% endfor %}{% for v in n3.values %}<tr><td>{{ v }}</td></tr>{% endfor %}

在这里插入图片描述

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/></head>
<body><table border="1"><h1>用户列表</h1><input type="text" class="btn btn-primary" value="新建"/>{#<img src="{% static 'img/1.png' %}" alt=""/>#}{{ n1 }}<thead><th>姓名</th><th>电话</th><th>地址</th></thead><tbody>{% for foo in row_obj %}<tr><td>{{ foo.customer_name }}</td><td>{{ foo.customer_tel }}</td><td>{{ foo.customer_address }}</td></tr>{% endfor %}</tbody></table></tbody><script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script></body>
</html>

3.3 条件

在这里插入图片描述

3.4 流程图

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

在这里插入图片描述

在这里插入图片描述

render 读取html内容+渲染(替换)->字符串,返回给用户

redirect(“www.baidu.com”) 重定向

3.5 安全机制

表单提交:需要{% csrf_token %} 安全机制,要不然会报403,一定要添加到form表单里面

from django.shortcuts import render, HttpResponse, redirectdef login(request):if request.method == 'GET':return render(request, "login.html")print(request.POST)username = request.POST.get("user")pwd = request.POST.get("pwd")if username == 'root' and pwd == '123'# return HttpRequest("登录成功")return redirect("www.baidu.com")# return HttpRequest("登录失败")return render(request, "login.html",{"error_msg":"用户名或密码错误"})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><h1>用户登录</h1><form method="post" action="/login/">{% csrf_token %}<input type="text" name="user" placeholder="用户名"><input type="password" name="pwd" placeholder="密码"><input type="submit" value="提交"><span style="color:red;">{{error_msg}}</span>span></form></body>
</html>

7. 模板继承

7.1 定义模板

layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/>{% block css %}{% endblock %}
</head>
<body><div>{% block content %}{% endblock %}
</div><script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script>{% block js %}{% endblock %}
</body>
</html>

继承模板:

{% extends 'layout.html' %}{% block content %}<h1>首页</h1>{% endblock %}

相关文章:

【Django】教程-2-前端-目录结构介绍

【Django】教程-1-安装创建项目目录结构介绍 3. 前端文件配置 3.1 目录介绍 在app下创建static文件夹, 是根据setting中的配置来的 STATIC_URL ‘static/’ templates目录&#xff0c;编写HTML模板&#xff08;含有模板语法&#xff0c;继承&#xff0c;{% static ‘xx’ …...

JS判断对象是否为空的方法

在 JavaScript 中&#xff0c;判断一个对象是否为空对象&#xff08;即没有自身可枚举属性&#xff09;&#xff0c;可以通过以下方法实现&#xff1a; 方法 1&#xff1a;使用 Object.keys() javascript function isEmptyObject(obj) {// 确保是普通对象&#xff08;排除 n…...

详解list容器

1.list的介绍 list的底层结构是双向带头循环链表&#xff0c;允许随机的插入和删除&#xff0c;但其内存空间不是连续的。随机访问空间能力差&#xff0c;需要从头到尾遍历节点&#xff0c;不像vector一样高效支持 2.list的使用 构造函数 1.默认构造函数&#xff1a;创建一个…...

leetcode_977. 有序数组的平方_java

977. 有序数组的平方https://leetcode.cn/problems/squares-of-a-sorted-array/ 1.题目 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1…...

Spring Boot 3.4.3 基于 SpringDoc 2 和 Swagger 3 实现项目接口文档管理

在现代企业级应用开发中&#xff0c;前后端分离已成为主流模式&#xff0c;前端负责界面呈现&#xff0c;后端专注提供 RESTful API 接口。然而&#xff0c;接口文档的编写和维护往往是开发过程中的痛点。Spring Boot 3.4.3 结合 SpringDoc 2 和 Swagger 3&#xff0c;为开发者…...

前端面经分享(25/03/26)

北京一家做AI解决方案的公司&#xff0c;技术一面&#xff0c;15k-20k&#xff0c;要求3-5年 你们React项目里路由模式用的什么React里class组件和function组件都用过吗常用Hook&#xff0c;解释一下他们的作用useEffect第二个参数填空数组和不填有什么区别React组件通信的常用…...

Matlab基础知识与常见操作【无痛入门】

【1】Matlab基本概念 【2】Matlab程序设计 【3】Matlab图形绘制 以上三篇文章为Matlab主要的应用场景&#xff0c;我在学习的过程中做一下记录&#xff0c;方便以后回顾。 接下来介绍下Matlab的工作界面&#xff0c;以及如何高效率的应用Matlab的帮助手册。在我看来&#x…...

HTTP协议手写服务器

目录 一、请求的是Web根目录 二、GET方法通过URL传参 三、根据资源类型对应出Content-Type值 四、Http代码 项目完整源代码&#xff1a;Http 周不才/cpp_linux study - 码云 - 开源中国 一、请求的是Web根目录 如果URL中请求的资源是Web根目录&#xff0c;则自动跳转到主…...

网络探索之旅:网络原理(第二弹)

上篇文章&#xff0c;小编分享了应用层和传输层深入的一点的知识&#xff0c;那么接下来&#xff0c;这篇文章&#xff0c;继续分享网络层和数据链路层。 网络层 了解这个网络层&#xff0c;那么其实就是重点来了解下IP这个协议 对于这个协议呢&#xff0c;其实也是和前面的…...

深入剖析 JVM:从组成原理到调优实践

深入剖析 JVM&#xff1a;从组成原理到调优实践 深入剖析 JVM&#xff1a;从组成原理到调优实践一、JVM 组成架构&#xff1a;运行 Java 程序的 “幕后引擎”1.1 内存结构&#xff1a;数据存储的 “分区管理”1.2 执行引擎&#xff1a;字节码的 “翻译官”1.3 本地方法接口&…...

阿里云下一代可观测时序引擎-MetricStore 2.0

作者&#xff1a;徐昊&#xff08;博澍&#xff09; 背景 作为可观测场景使用频度最高的数据类型&#xff0c;Metrics 时序数据在可观测领域一直占有着重要地位&#xff0c;无论是从全局视角来观测系统整体状态&#xff0c;还是从大范围数据中定位某一个异常的位置&#xff0…...

从入门到精通【 MySQL】 数据库约束与设计

文章目录 &#x1f4d5;1. 数据库约束✏️1.1 NOT NULL 非空约束✏️1.2 DEFAULT 默认值约束✏️1.3 UNIQUE 唯一约束✏️1.4 PRIMARY KEY 主键约束✏️1.5 FOREIGN KEY 外键约束✏️1.6 CHECK 约束 &#x1f4d5;2. 数据库设计✏️2.1 第一范式✏️2.2 第二范式✏️2.3 第三范…...

使用LLaMAFactory微调Qwen大模型

一、环境配置与工具安装 1. 硬件要求 GPU:至少1块NVIDIA GPU(推荐RTX 4090/A100/H100,显存≥16GB)。内存:≥64GB系统内存。存储:≥100GB硬盘空间用于模型与数据集存储。2. 软件依赖 Python 3.8+:需安装CUDA支持的PyTorch版本(如torch==2.0.1+cu117)。 依赖库:通过以…...

Dubbo 通信流程 - 服务的调用

Dubbo 客户端的使用 在 Dubbo 应用中&#xff0c;往类成员注解 DubboReference&#xff0c;服务启动后便可以调用到远端&#xff1a; Component public class InvokeDemoFacade {AutowiredDubboReferenceprivate DemoFacade demoFacade;public String hello(String name){// …...

【数据结构】哈夫曼树

哈夫曼树 在学习哈夫曼树之前&#xff0c;先了解以下几个概念&#xff1a; 一&#xff1a;**路径长度&#xff1a;**在一棵树中&#xff0c;从一个节点到另一个节点所经过的“边”的数量&#xff0c;被我们称为两个节点之间的路径长度。 二&#xff1a;**树的路径长度&#xf…...

HCIP(TCP)(2)

1. TCP三次握手 SYN (同步序列编号) 报文: 客户端发送 SYN 报文&#xff0c;开始建立连接&#xff0c;并初始化序列号。 SYN-ACK (同步序列编号-确认) 报文: 服务器收到 SYN 报文后&#xff0c;回复 SYN-ACK 报文&#xff0c;确认连接请求&#xff0c;并初始化自己的序列号和确…...

VMware Ubuntu 网络配置全攻略:从断网到畅通无阻

一、网络连接模式选择&#xff08;先搞懂原理&#xff09; VMware提供三种网络模式&#xff0c;就像手机的不同网络套餐&#xff1a; 模式适用场景特点类比NAT个人上网/新手首选虚拟机共享主机IP&#xff0c;能上网但隐身家用WiFi桥接服务器/需要被局域网访问虚拟机会获得独立…...

基于Web的交互式智能成绩管理系统设计

目录 摘要 绪论 一、应用背景 二、行业发展现状 三、程序开发的重要意义 四、结语 1 代码 2 数据初始化模块 3 界面布局模块 4 核心功能模块 5 可视化子系统 6 扩展功能模块 7 架构设计亮点 功能总结 一、核心数据管理 二、智能分析体系 三、可视化系统 四、扩…...

第 12 章(番外)| Solidity 安全前沿趋势 × 审计生态 × 职业路径规划

&#x1f310; 第 12 章&#xff08;番外&#xff09;| Solidity 安全前沿趋势 审计生态 职业路径规划 ——做得了审计&#xff0c;也接得了项目&#xff0c;走进 Web3 安全工程师的职业实战地图 ✅ 本章导读 Solidity 安全&#xff0c;不只是代码安全、业务安全、审计安全…...

输出3行3列矩阵的鞍点

【问题描述】在矩阵中&#xff0c;一个数在所在行中是最大值&#xff0c;在所在列中是最小值&#xff0c;则被称为鞍点。任意输入一个3行3列矩阵&#xff0c;请设计程序输出其鞍点。 【输入形式】每行3个数&#xff0c;输入3列 【输出形式】输出所有鞍点&#xff1b;如果没有…...

k8s日志管理

k8s日志管理 k8s查看日志查看集群中不是完全运行状态的pod查看deployment日志查看service日志进入pod的容器内查看日志 管理k8s组件日志kubectl logs查看日志原理 管理k8s应用日志收集k8s日志思路收集标准输出收集容器中日志文件 k8s查看节点状态失败k8s部署prometheus监控 k8s…...

【数据结构】顺序表-元素去重

数据元素 结点定义&#xff0c;复杂数据类型&#xff0c;可用作整体性的管理系统。如果单独研究某些数据&#xff0c;比如只看学号或成绩&#xff0c;那么直接使用int之类的简单数据类型亦可。对应修改&#xff1a;typedef int Elemtype; typedef struct student{ //定义学生…...

物理安全——问答

目录 1、计算机的物理安全包含哪些内容 1. 设备保护 2. 访问控制 3. 电力与环境安全 4. 数据存储保护 5. 硬件防护 6. 监控与审计 7. 灾难恢复与应急响应 8. 拆卸与维修安全 2、物理安全有哪些需要关注的问题 1、计算机的物理安全包含哪些内容 1. 设备保护 防止盗窃&…...

element-plus中,Loading 加载组件的使用

一.基本使用 给一个组件&#xff0c;如&#xff1a;table表格&#xff0c;加上v-loading"true"即可。 举例&#xff1a;复制如下代码。 <template><el-table v-loading"loading" :data"tableData" style"width: 100%"><…...

Mybatis_Plus中的常用注解

目录 1、TableName TableId TableId的type属性 TableField 1、TableName 经过以上的测试&#xff0c;在使用MyBatis-Plus实现基本的CRUD时&#xff0c;我们并没有指定要操作的表&#xff0c;只是在 Mapper接口继承BaseMapper时&#xff0c;设置了泛型User&#xff0c;而操…...

云数据库概念

1.云数据库概念 云数据库是部署和虚拟化在云计算环境中的数据库。云数据库是在云计算的大背景下发展起来的一种新兴的共享基础架构的方法&#xff0c;它极大地增强了数据库的存储能力&#xff0c;消除了人员、硬件、软件的重复配置&#xff0c;让软、硬件升级变得更加容易。云…...

高并发金融系统,“可观测-可追溯-可回滚“的闭环审计体系

一句话总结 在高并发金融系统中&#xff0c;审计方案设计需平衡"观测粒度"与"系统损耗"&#xff0c;通过双AOP实现非侵入式采集&#xff0c;三表机制保障操作原子性&#xff0c;最终形成"可观测-可追溯-可回滚"的闭环体系。 业务痛点与需求 在…...

UDP视频传输中的丢包和播放花屏处理方法

在处理UDP视频传输中的丢包和花屏问题时,需要结合编码优化、网络传输策略和接收端纠错技术。以下是分步骤的解决方案: 1. 前向纠错(FEC,Forward Error Correction) 原理:在发送数据时附加冗余包,接收方通过冗余信息恢复丢失的数据包。 实现方法: 使用Reed-Solomon、XO…...

企业内训|DeepSeek技术革命、算力范式重构与场景落地洞察-某头部券商

3月19日北京&#xff0c;TsingtaoAI公司负责人汶生受邀为某证券公司管理层和投资者举办专题培训&#xff0c;围绕《DeepSeek技术革命、算力范式重构与场景落地洞察》主题&#xff0c;系统阐述了当前AI技术演进的核心趋势、算力需求的结构性变革&#xff0c;以及行业应用落地的关…...

K8S学习之基础五十二:k8s配置jenkins

k8s配置jenkins...