【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 %}

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

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

相关文章

注意!ChatGPT 全新 AI 图像功能延迟对免费用户开放

2025 年 3 月 25 日&#xff0c;OpenAI 正式宣布在 ChatGPT 中推出基于 GPT-4o 模型的全新原生图像生成功能。 这一功能允许用户通过对话生成和编辑图像&#xff0c;支持从写实风格到插图风格的多种形式。OpenAI 首席执行官萨姆・奥特曼&#xff08;Sam Altman&#xff09;在社…

优化webpack打包体积思路

Webpack 打包过大的问题通常会导致页面加载变慢&#xff0c;影响用户体验。可以从代码优化、依赖优化、构建优化等多个角度入手来减少打包体积&#xff1a; 代码优化 &#xff08;1&#xff09;按需加载&#xff08;代码拆分&#xff09; ① 路由懒加载 如果你的项目使用 Vu…

HarmonyOS Next~鸿蒙元服务开发指南:核心功能与实践

HarmonyOS Next&#xff5e;鸿蒙元服务开发指南&#xff1a;核心功能与实践 一、元服务核心概念 原子化服务定义 元服务&#xff08;原子服务&#xff09;是鸿蒙系统的核心架构单元&#xff0c;具备独立业务能力的轻量化服务模块&#xff0c;支持免安装、跨设备调用和智能分发…

git错误:fatal: detected dubious ownership in repository at xxxxxx

1、报错说明 这个错误通常是由于Git仓库目录的拥有者或权限问题引起的。Git检测到仓库目录的所有权可能存在不一致或不安全的情况。 通常导致此报错的可能原因&#xff1a; &#xff08;1&#xff09;文件或目录的拥有者不一致&#xff1a; 仓库目录中的某些文件或子目录可能…

【计算机网络】OSI七层模型完全指南:从比特流到应用交互的逐层拆解

OSI模型 导读一、概念二、模型层次结构2.1 物理层&#xff08;Physical Layer&#xff09;2.2 数据链路层&#xff08;Data Link Layer&#xff09;​2.3 ​网络层&#xff08;Network Layer&#xff09;​2.4 ​传输层&#xff08;Transport Layer&#xff09;​2.5 ​会话层&…

零基础被迫参加CTF比赛?CTF高频解题技巧与经验分享

CTF&#xff08;Capture The Flag&#xff09;比赛中的高频解题技巧通常涵盖了以下几类技术&#xff0c;涉及从逆向工程、二进制漏洞利用到Web安全、密码学等多个领域。以下是一些高频解题技巧&#xff1a; 1. 逆向工程&#xff08;Reverse Engineering&#xff09; 静态分析&a…

markdown 文件转 word

将 Markdown 文件转换为 Word 文档&#xff0c;可以使用多种方法。以下是几种常见的方法&#xff1a; 方法1&#xff1a;使用在线转换工具 有许多在线服务可以将 Markdown 文件转换为 Word 文档。例如&#xff1a; Pandoc - 一个非常流行的命令行工具&#xff0c;也可以用来转…

【第十三届“泰迪杯”数据挖掘挑战赛】【2025泰迪杯】【思路篇】A题解题全流程(持续更新)

【第十三届“泰迪杯”数据挖掘挑战赛】【2025泰迪杯】A题解题全流程-思路&#xff08;持续更新&#xff09; 写在前面&#xff1a; 1、A题、C题将会持续更新&#xff0c;陆续更新发布文章 2、赛题交流咨询Q群&#xff1a;1037590285 3、全家桶依旧包含&#xff1a; 代码、…

T11 TensorFlow入门实战——优化器对比实验

&#x1f368; 本文為&#x1f517;365天深度學習訓練營 中的學習紀錄博客&#x1f356; 原作者&#xff1a;K同学啊 | 接輔導、項目定制 一、前期准备 1. 导入数据 # Import the required libraries import pathlib import matplotlib.pyplot as plt import tensorflow as t…

Docker部署sprintboot后端项目

创建Docker网络 docker network create icjs 部署Redis docker run -d \--network icjs \--name redis \-p 6379:6379 \redis:latest数据持久化 docker run --restartalways --network icjs -p 6379:6379 --name redis -v /opt/docker/redis/redis.conf:/etc/redis/redis.c…

01小游戏

问题描述 小明得到了一个长度为 nn 的字符串 ss &#xff0c;该字符串都是由数字 00 和 11 组成&#xff0c;并且下标从 11 开始&#xff0c;小明现在需要对这个字符串进行 qq 次操作&#xff0c;每次操作包含以下两种操作之一&#xff1a; 操作 11 &#xff1a;小明查询该字符…

Androidstudio开发,实现商品分类

文章目录 1. 功能需求2. 代码实现过程1. 编写布局文件2. 创建商品分类&#xff08;Adapter&#xff09;适配器3. 实现商品分类Activity4. 在res/values/ 下新建 array.xml &#xff0c;用于添加商品分类数据5. 效果演示 6. 关于作者其它项目视频教程介绍 1. 功能需求 显示商品分…

Linux快速安装docker和docker-componse步骤

在 CentOS 7 上安装 Docker 和 Docker Compose 的步骤如下&#xff1a; 1. 安装 Docker 1.1. 更新系统 首先&#xff0c;确保你的系统是最新版本&#xff1a; sudo yum update -y1.2. 安装必要的包 安装 yum-utils&#xff0c;这是管理 YUM 源的工具&#xff1a; sudo yu…

VBA代码解决方案第二十三讲 EXCEL中,如何删除工作表中的空白行

《VBA代码解决方案》(版权10028096)这套教程是我最早推出的教程&#xff0c;目前已经是第三版修订了。这套教程定位于入门后的提高&#xff0c;在学习这套教程过程中&#xff0c;侧重点是要理解及掌握我的“积木编程”思想。要灵活运用教程中的实例像搭积木一样把自己喜欢的代码…

Pytorch--tensor.view()

在 PyTorch 中&#xff0c;tensor.view() 是一个常用的方法&#xff0c;用于改变张量&#xff08;Tensor&#xff09;的形状&#xff08;shape&#xff09;&#xff0c;但不会改变其数据本身。它类似于 NumPy 的 reshape()&#xff0c;但有一些关键区别。 1. 基本用法 import …

【机器学习】——机器学习思考总结

摘要 这篇文章深入探讨了机器学习中的数据相关问题&#xff0c;重点分析了神经网络&#xff08;DNN&#xff09;的学习机制&#xff0c;包括层级特征提取、非线性激活函数、反向传播和梯度下降等关键机制。同时&#xff0c;文章还讨论了数据集大小的标准、机器学习训练数据量的…

CoAP Shell 笔记

CoAP Shell 笔记 1. 概述 CoAP (Constrained Application Protocol) 是一种专为物联网 (IoT) 中资源受限的节点和网络设计的 RESTful Web 传输协议。CoAP Shell 是一个基于命令行的交互式工具&#xff0c;用于与支持 CoAP 的服务器进行交互。 2. 主要功能 协议支持&#xff…

【最新】探索CFD的未来:从OpenFOAM到深度学习,全面解析计算流体力学的顶级资源与前沿技术

计算流体力学(CFD)作为现代工程与科学研究的核心工具,正以前所未有的速度迈向智能化与多物理场耦合的新时代。本文全面梳理了在线学习CFD的顶级资源,涵盖了从传统数值模拟到深度学习驱动的物理信息模型的广泛领域,旨在为研究者、工程师和学生提供一站式参考指南。内容分为…

[leetcode]2492. 两个城市间路径的最小分数(并查集 排序后建边)

题目链接 题意 给定一个 n n n个点 m m m条边的无向图 每条边有边权 求1-n的路径中最小的边权是多少 每条路可以重复走 思路 把边按边权降序排序 用并查集维护连通性 遍历每条边 每次合并边的起点和终点 如果1和n联通 并且这条边在1和n的这个连通块中 就对ans取min Code…

Windows中IDEA2024.1的安装和使用

如果你也喜欢&#xff0c;记得一键三连啊 一、卸载 二、安装 三、注册 1、打开Crack文件&#xff0c;直接双击 “安装.bat”&#xff0c;否则可能安装会出错&#xff01;&#xff01; 2、选择【Activation code】&#xff08;不要关闭该界面继续后面的步骤&#xff09;。 …