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

【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’ …...

2025年渗透测试面试题总结-某快手-安全工程师(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 快手-安全工程师 一、Linux提权技术&#xff1a;Dirty Cow漏洞深度解析 1.1 漏洞技术原理 1.2 漏洞影…...

数据结构之栈

目录 1 简介 2 栈的基本概念 3 代码实现 4 代码解析&#xff08;部分&#xff09; 4.1 初始化栈 4.2 入栈 4.3 出栈 4.4 只读获取栈顶元素&#xff08;peek&#xff09; 4.5 判断是否为空 4.6 获取栈大小 4.7 十进制转换为二进制 5 核心操作分析 6 总结 1 简介 栈…...

【AndroidRTC-10】webrtc是如何确定双端的编解码类型?

Android-RTC系列软重启&#xff0c;改变以往细读源代码的方式 改为 带上实际问题分析代码。增加实用性&#xff0c;方便形成肌肉记忆。同时不分种类、不分难易程度&#xff0c;在线征集问题切入点。 问题&#xff1a;webrtc-android是如何确定编解码类型&#xff0c;如何调整视…...

深度求索(DeepSeek):以AI之力重塑医疗未来

目录 一、智能诊断&#xff1a;打破医疗认知的“分辨率极限” 二、药物研发&#xff1a;重构分子世界的“造物逻辑” 三、医疗资源重构&#xff1a;打造分级诊疗的“神经中枢” 四、健康管理&#xff1a;编织个体化医学的“防护网” 五、伦理与进化&#xff1a;构建医疗AI…...

【HTML 基础教程】HTML 属性

HTML 属性 属性是 HTML 元素提供的附加信息。 属性通常出现在 HTML 标签的开始标签中&#xff0c;用于定义元素的行为、样式、内容或其他特性。 属性总是以 name"value" 的形式写在标签内&#xff0c;name 是属性的名称&#xff0c;value 是属性的值。 HTML 属性 …...

macOS 制作dmg磁盘映像安装包

制作dmg磁盘影像安装包需要准备一下材料&#xff1a; 1. 导出的APP 2. 背景图片 3. 应用程序替身 前两种材料很容易得到。 下面介绍一下 应用程序替身制作过程&#xff1a; Finder —> 选中 应用程序 --> 找到顶部菜单栏中 的 前往 ----> 选择上层文件夹选中应用程…...

Appium中元素定位之一组元素定位API

应用场景 和定位一个元素相同&#xff0c;但如果想要批量的获取某个相同特征的元素&#xff0c;使用定位一组元素的方式更加方便 在 Appium 中定位一组元素的 API 与定位单个元素的 API 类似&#xff0c;但它们返回的是一个元素列表&#xff08;List<MobileElement>&am…...

webstorm中element-ui标签无法跳转源码

原本用的webstorm2019,之前的项目开发时切实体验过跳转element-ui源码&#xff0c;觉得很香。 更新了webstorm至2024&#xff0c;居然不行了&#xff0c;能弹出来提示&#xff0c;但就是找不到定义。 不知道是不是2024版本的问题&#xff0c;node_moudles不管我是否手动添加exc…...

【蓝桥杯】算法笔记1

1.暴力枚举 给定一个正整数n,请找出所有满足a + b = n的整数对(a, b),其中a和b都是正整数,且a ≤ b。 输入格式:一个正整数n (1 ≤ n ≤ 10⁶) 输出格式:所有符合条件的(a, b)对,每行一对,按a的升序排列。如果没有符合条件的对,输出"No solution"。 问题分…...

Pytorch学习笔记(十一)Learning PyTorch - What is torch.nn really

这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 What is torch.nn really? 部分。主要是教你如何一步一步将最原始的代码进行重构至pytorch标准的代码&#xff0c;如果你已经熟悉了如何使用原始代码以及pytorch标准形式构建模型&#xff0c;可以跳过这一篇。 …...

OpenGL ES 2.0与OpenGL ES 3.1的区别

如果硬件支持且需要更高质量的图形效果&#xff0c;推荐3.1&#xff1b;如果兼容性和开发简便更重要&#xff0c;且效果需求不高&#xff0c;2.0更合适。不过现代车载系统可能越来越多支持3.x版本&#xff0c;所以可能倾向于使用3.1&#xff0c;但具体情况还需调查目标平台的硬…...

【Unity3D脚本与系统设计6】鼠标触摸超时待机实现

实现步骤 在Unity中实现一个功能&#xff0c;当鼠标或触摸超过一定时间没有操作时&#xff0c;自动返回待机界面。 检测输入 首先&#xff0c;我需要检测用户的输入&#xff0c;无论是鼠标还是触摸。Unity的Input系统可以检测到鼠标和触摸事件&#xff0c;比如Input.GetAxis…...

SpringMVC 入门教程

一、SpringMVC 简介 SpringMVC 是基于 MVC 设计模式的轻量级 Web 框架&#xff0c;核心功能包括&#xff1a; 请求分发&#xff1a;通过 DispatcherServlet 统一处理请求。注解驱动&#xff1a;使用 Controller、RequestMapping 简化开发。视图解析&#xff1a;支持 JSP、Thy…...

矿山自动化监测解决方案

1.行业现状 为贯彻落实《中共中央国务院关于推进安全生产领域改革发展的意见》《“十四五”矿山安全生产规划》&#xff08;应急〔2022〕64号&#xff09;、《国务院安委会办公室关于加强矿山安全生产工作的紧急通知》&#xff08;安委办〔2021〕3号&#xff09;等有关工作部署…...

el-table + el-pagination 前端实现分页操作

el-table el-pagination 前端实现分页操作 后端返回全部列表数据&#xff0c;前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…...

NIO ByteBuffer 总结

目录 基本概念创建 ByteBuffer核心属性关键方法切换模式读写操作压缩数据 基本概念 java.nio.ByteBuffer 是 Java NIO 中一个核心类&#xff0c; 用于高效处理二进制数据的读写操作。应用于通道&#xff08;Channel&#xff09;的I/O操作。作用&#xff1a; 数据缓冲&#xf…...

华为hcia——Datacom实验指南——配置IPv4静态路由,默认路由和浮动静态路由

什么是IPv4 IPv4静态路由&#xff0c;是手动配置的&#xff0c;不会随着网络拓扑的变化而变化&#xff0c;所配置的路由信息也不会在网络中传播&#xff0c;所以它主要运用在小型网络或者作为动态路由的补充。 IPv4的配置 配置的命令很简单 IP route-static &#xff08;目…...

Git入门——常用指令汇总

以下是一份精心整理的 Git常用指令速查表&#xff0c;基本覆盖日常开发使用场景&#xff0c;建议收藏备用&#x1f447; &#x1f527; 环境配置 指令作用git config --global user.name "你的名字"设置全局用户名git config --global user.email "你的邮箱&qu…...

深入解析 MyBatis-Plus 批量操作:原理、实现与性能优化

引言 在高并发、大数据量场景下,批量数据库操作是提升系统性能的核心手段之一。本文以 MyBatis-Plus 为例,深入剖析 批量更新 和 自定义批量插入 的实现原理,并结合实战代码与性能测试,揭示其在高性能场景下的应用价值。 批量更新:动态 SQL 的极致运用 原理与 SQL 生成…...

2025年成都市双流区农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排

成都市双流区2025年农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排如下&#xff0c;需要申报的可指导&#xff01; 一、成都市双流区农业科技试验示范基地申报 &#xff08;一&#xff09;基地建设数量。2025年建设农业科技试验示范基地2个。 &#xff08;二…...

8路CXP相机采集系统介绍

8xCXP相机采集系统介绍 目录 1 系统概述 4 2 硬件架构 5 2.1 FPGA处理单元 5 2.2 CXP接口层 6 2.3 CXP相机说明与使用要求 7 2.4 SSI控制器板 8 3 FPGA方案 9 3.1 FPGA实现 9 3.2 Block Design说明 10 4 软件方案 14 4.1 嵌入式层 14 4.2 上位机软件&#xff08;C…...

vue2前端日志数据存储,推荐(IndexedDB)

前言&#xff1a;首先&#xff0c;我得回忆一下IndexedDB的基本概念和用法&#xff0c;确保自己理解正确。IndexedDB是一个浏览器内置的数据库&#xff0c;允许存储大量结构化数据&#xff0c;支持事务和索引查询&#xff0c;适合需要离线存储的应用场景。 接下来&#xff0c;用…...

onedav一为导航批量自动化导入网址(完整教程)

OneNav作为一个功能强大的导航工具,支持后台管理、加密链接、浏览器书签批量导入等功能,能够帮助用户轻松打造专属的导航页面。今天,我将为大家详细介绍如何实现OneNav导航站的批量自动化导入网址。 1、建立要批量导入的表格 格局需要创建表格,表格的要求是一定要有需要,…...

Ubuntu Linux安装PyQt5并配置Qt Designer

一 安装 PyQt5 借助 apt 包管理器来安装 PyQt5 及其相关的开发工具&#xff1a; sudo apt install python3-pyqt5 pyqt5-dev-tools 假如报错&#xff0c; You might want to run apt --fix-broken install to correct these. 直接执行&#xff1a; sudo apt --fix-…...

无人机螺旋桨平衡标准

螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音&#xff0c;并加速关键部件的磨损&#xff0c;从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架&#xff0c;定义了可接受的不平衡…...

基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究

一、引言 1.1 研究背景与意义 在全球人口老龄化趋势愈发明显的当下,诸如骨关节炎、类风湿性关节炎这类关节疾病的发病率不断攀升,进而使得人工关节置换手术的需求呈现出激增态势。人工关节置换手术作为治疗终末期关节疾病的有效手段,能够显著缓解患者疼痛,提升关节功能与生…...

ESLint报错:Could not find config file.

如果你的ESLint的版本大于 8&#xff0c;同时使用 .eslinrc.js 和 .eslintignore 作为配置文件&#xff0c;且目前用的是 VSCODE &#xff0c;就有可能遇到报错&#xff1a; Could not find config file. 这个是因为 VSCode 中 ESLint 插件的配置 eslint.useFlatConfig 的问题…...

npm install 卡在创建项目:sill idealTree buildDeps

参考&#xff1a; https://blog.csdn.net/PengXing_Huang/article/details/136460133 或者再执行 npm install -g cnpm --registryhttps://registry.npm.taobao.org 或者换梯子...

drizzleDumper:基于内存搜索的Android脱壳工具

一、工具介绍 drizzleDumper 是一款基于内存搜索的 Android 脱壳工具&#xff0c;主要用于从加固的 Android 应用程序中提取原始的 DEX 文件。它通过分析应用程序运行时的内存&#xff0c;定位并提取被加固的 DEX 文件&#xff0c;从而帮助开发者、安全研究人员进行逆向工程和…...

信号处理中的窗

窗函数&#xff08;Window Function&#xff09;是一种在信号处理中常用的工具&#xff0c;用于对信号进行截断和加权处理。它在频谱分析、滤波器设计以及信号处理的许多其他领域中都发挥着重要作用。 窗函数的基本概念 窗函数本质上是一个有限长度的序列&#xff0c;通常用于…...

FFmpeg学习:AVPacket结构体

1.AVPacket结构体 FFmpeg中用于封装一帧的编码数据的结构体&#xff08;比如H264视频帧或者AAC音频帧&#xff09;&#xff0c;主要用于编解码过程中数据的载体&#xff0c;使用av_read_frame()读取获得&#xff0c;或者使用avcodec_send_packet()进行解码&#xff0c;与AVFra…...

34.[前端开发-JavaScript基础]Day11-王者轮播图-书籍购物车-BOM对象-JSON

1 认识BOM操作 认识BOM 2 全局对象window window对象 window对象的作用 window常见的属性 window常见的方法 3 事件对象event window常见的事件 4 location、history location对象常见的属性 Location对象常见的方法 URLSearchParams history对象常见属性和方法 5 navigato…...

FLEXlm如何通过web调用

FLEXlm 是一种流行的软件许可管理工具&#xff0c;广泛用于各种软件产品的授权管理。它支持多种协议&#xff0c;包括传统的服务器-客户端模式和一些基于网络的解决方案。如果你想通过 Web 接口调用 FLEXlm 许可证服务器&#xff0c;你可以通过以下几种方式实现&#xff1a; 使…...

深度解析Spring Boot可执行JAR的构建与启动机制

一、Spring Boot应用打包架构演进 1.1 传统JAR包与Fat JAR对比 传统Java应用的JAR包在依赖管理上存在明显短板&#xff0c;依赖项需要单独配置classpath。Spring Boot创新的Fat JAR&#xff08;又称Uber JAR&#xff09;解决方案通过spring-boot-maven-plugin插件实现了"…...

Zookeeper运维指南:服务端与客户端常用命令详解

#作者&#xff1a;任少近 文章目录 1 Zookeeper服务端常用命令2 Zookeeper客户端常用命令2.1Ls命令2.2创建节点create2.3Get命令2.4删除命令2.5修改命令 1 Zookeeper服务端常用命令 启动ZK服务: bin/zkServer.sh start # ./zkServer.sh startZooKeeper JMX enabled by defau…...

K8S学习之基础五十一:k8s部署jenkins

k8s部署jenkins 创建nfs共享目录&#xff0c; mkdir -p /data/v2 echo /data/v2 *(rw,no_root_squash) > /etc/exports exportfs -arv创建pv、pvc vi pv.yaml apiVersion: v1 kind: PersistentVolume metadata:name: jenkins-k8s-pv spec:capacity:storage: 1GiaccessMod…...

界面控件DevExpress WinForms v25.1 - 人工智能(AI)方面全新升级

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…...

基于动态光影融合的缺陷实时检测和材质量化方法,并且整合EventPS、VMNer和EvDiG

要完成基于动态光影融合的缺陷实时检测和材质量化方法&#xff0c;并且整合EventPS、VMNer和EvDiG&#xff0c;是一个复杂且综合性的任务。以下是一个大致的实现步骤和代码示例&#xff0c;不过要完整完成论文和所有实验还需要大量的细化和调整。 整体思路 数据加载与预处理&…...

关于我对接了deepseek之后部署到本地将数据存储到mysql的过程

写在前面 今天写一下使用nodejs作为服务端&#xff0c;vue作为客户端&#xff0c;mysql的数据库&#xff0c;对接deepseek的全过程&#xff0c;要实现一个很简单的效果就是&#xff0c;可以自由的询问&#xff0c;然后可以将询问的过程存储到mysql的数据库中。 文档对接 deeps…...

Android 中两个 APK 之间切换的几中方法

在 Android 中&#xff0c;两个 APK&#xff08;应用程序&#xff09;之间的切换通常是通过 Intent 来实现的。以下是一些常见的方法和注意事项&#xff0c;帮助你实现两个 APK 之间的切换。 一、启动目标 APK 的主 Activity 1、setPackage 方法 使用 Intent 的 setPackage …...

【LeetCode 热题 100】解答汇总

一、哈希表 1. 两数之和 | python【简单】 49. 字母异位词分组 | python【中等】 128. 最长连续序列 | python【中等】 二、双指针 283. 移动零 | python【简单】 盛最多水的容器 三数之和 接雨水 三、滑动窗口 3. 无重复字符的最长子串 | python 【中等】 49. 字母异…...

【RAG综述系列】之 RAG 相关背景和基本原理

系列文章&#xff1a; 【RAG综述系列】之 RAG 相关背景和基本原理 【RAG综述系列】之 RAG 特点与挑战以及方法与评估 【RAG综述系列】之 RAG 先进方法与综合评估 【RAG综述系列】之 RAG 应用和未来方向 正文&#xff1a; 检索增强生成&#xff08;Retrieval-Augmented Gen…...

Unity 开发休闲手游:M_Studio 实战指南,源码课件全解析

Unity 开发休闲手游&#xff1a;M_Studio 实战指南&#xff0c;源码课件全解析 在手游开发领域&#xff0c;Unity 引擎凭借其强大的跨平台能力和丰富的资源&#xff0c;成为众多开发者的首选。今天&#xff0c;我们深入探讨如何利用 Unity 开发休闲手机游戏&#xff0c;以 M_S…...

HTML5 新的 Input 类型学习笔记

HTML5 引入了多种新的表单输入类型&#xff0c;这些新特性不仅增强了输入控制&#xff0c;还提供了更强大的验证功能&#xff0c;使表单设计更加灵活和便捷。以下是 HTML5 新的 Input 类型的详细学习笔记。 一、color 类型 功能&#xff1a;用于选取颜色。 使用场景&#xff…...

【第23节】windows网络编程模型(WSAEventSelect模型)

目录 引言 一、WSAEventSelect模型概述 二、 WSAEventSelect模型的实现流程 2.1 创建一个事件对象&#xff0c;注册网络事件 2.2 等待网络事件发生 2.3 获取网络事件 2.4 手动设置信号量和释放资源 三、 WSAEventSelect模型伪代码示例 四、完整实践示例代码 引言 在网…...

C# 中实现 跨线程写入

方案核心思路 写入请求队列&#xff1a;使用 ConcurrentQueue 接收来自任意线程的写入请求。 专用写入线程&#xff1a;由独立线程处理队列中的写入操作&#xff0c;确保顺序执行。 双信号机制&#xff1a;通过 ManualResetEventSlim 控制读取线程的暂停与恢复。 线程安全确…...

联合体(Union)的使用与应用场景

引言 在 C/C++ 编程中,联合体(Union)是一个非常独特的数据结构。与结构体(struct)不同,联合体允许不同的数据类型共享同一块内存空间,从而节省内存。在许多需要高效内存管理的场景下,联合体的使用能够显著提高程序的性能与资源利用率。本文将从联合体的基本概念入手,…...

Spark2 之 Expression/Functions

ExpressionConverter src/main/scala/org/apache/gluten/expression/ExpressionConverter.scala TopNTransformer src/main/scala/org/apache/gluten/execution/TopNTransformer.scala...

【Mysql】SQL 优化全解析

文章目录 一、理解执行计划​1.1 执行计划的作用​1.2 查看执行计划​ 二、查询优化​2.1 避免全表扫描​2.2 使用覆盖索引​2.3 合理使用 JOIN​ 三、索引优化​3.1 索引设计原则​3.2 索引维护​ 在数据驱动的当今时代&#xff0c;MySQL 作为应用广泛的开源关系型数据库&…...