53.Python-web框架-Django开始第一个应用的多语言

        针对上一篇的功能,本次仅对页面做了多语言,大家可以看看效果。

51.Python-web框架-Django开始第一个应用的增删改查-CSDN博客

目录

部门列表

新增部门

编辑部门

部门列表

源码

<!DOCTYPE html>
{% load static %}
{% load i18n %}
<html lang="en">
<head><meta charset="UTF-8"><title>{% trans "i18n.depart.Title" %}</title><link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}"><script src="{% static 'bootstrap5/js/bootstrap.bundle.min.js' %}"></script><script src="{% static 'jquery-3.7.1.min.js' %}"></script>
</head>
<body>
<div class="container"><div style="margin: 10px 0"><a href="../depart/add/" class="btn btn-primary">{% trans "common.action.add" %}</a></div><table class="table table-striped  table-hover "><thead><tr><th scope="col">#</th><th scope="col">{% trans "i18n.depart.name" %}</th><th scope="col">{% trans "i18n.depart.description" %}</th><th scope="col">{% trans "i18n.depart.parent" %}</th><th scope="col">{% trans "common.is_active" %}</th><th scope="col">{% trans "common.is_locked" %}</th><th scope="col">{% trans "common.created_by" %}</th><th scope="col">{% trans "common.created_at" %}</th><th scope="col">{% trans "common.updated_by" %}</th><th scope="col">{% trans "common.updated_at" %}</th><th scope="col">{% trans "common.action" %}</th></tr></thead><tbody>{% for depart in departs %}<tr><td scope="row">{{ depart.id }}</td><td>{{ depart.name }}</td><td>{{ depart.description }}</td><td>{{ depart.parent }}</td><td>{{ depart.is_active }}</td><td>{{ depart.is_locked }}</td><td>{{ depart.created_by }}</td><td>{{ depart.created_at }}</td><td>{{ depart.updated_by }}</td><td>{{ depart.updated_at }}</td><td><a href="../depart/edit/?id={{depart.id}}" class="btn btn-primary btn-sm">{% trans "common.action.edit" %}</a><button id="deleteBtn" type="button"  class="btn btn-danger btn-sm  delete-btn"  data-id="{{ depart.id }}">{% trans "common.action.delete" %}</button ></td></tr>{% endfor %}</tbody></table><!-- 确认删除的模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">确认删除</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">确定要删除这条记录吗?</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><form id="deleteForm" method="post">{% csrf_token %}<input type="hidden" name="id" id="object_id"><button type="submit" class="btn btn-danger">确定删除</button></form></div></div></div>
</div><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" ><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>
</nav>
</div>
</body>
<script>document.querySelectorAll('.delete-btn').forEach(button => {button.addEventListener('click', function() {const objectId = this.getAttribute('data-id');// 设置隐藏输入框的值document.getElementById('object_id').value = objectId;// 显示模态框$('#deleteModal').modal('show');});});// 提交删除表单时,使用Ajax发送请求$('#deleteForm').on('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为const formData = $(this).serialize(); // 序列化表单数据$.ajax({type: 'POST',url: '/depart/delete/', // 替换为你的删除视图URLdata: formData,success: function(response) {if (response.success) {// alert('删除成功!');location.reload(); // 刷新页面} else {alert('删除失败,请重试!');}},error: function(xhr, status, error) {console.error(error);alert('发生错误,请检查控制台日志。');}});});
</script>
</html>

外观

中文

英文

新增部门

源码

<!DOCTYPE html>
{% load static %}
{% load i18n %}
<html lang="en">
<head><meta charset="UTF-8"><title>{% trans "i18n.depart.Title" %}</title><link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}">
</head>
<body><div class="container"><nav aria-label="breadcrumb" style="margin: 10px 0"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/depart/">{% trans "i18n.depart.Title" %}</a></li><li class="breadcrumb-item active" aria-current="page">{% trans "i18n.depart.add" %}</li></ol></nav><form method="post" action="/depart/add/">{% csrf_token %}<div class="mb-3 row"><label for="formGroupExampleInput" class="col-sm-2 col-form-label">{% trans "i18n.depart.name" %}</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="{% trans 'i18n.depart.name' %}" name="name"></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label">{% trans "i18n.depart.description" %}</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="{% trans 'i18n.depart.description' %}" name="description"></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label">{% trans "i18n.depart.parent" %}</label><div class="col-sm-10"><select  class="form-select" name="parent"><option value="0">{% trans "i18n.depart.select" %}</option>{% for depart in departs %}<option value="{{ depart.id }}">{{ depart.name }}</option>{% endfor %}</select></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label"></label><div class="form-check col-sm-2"><input class="form-check-input" type="checkbox" name="is_active" checked><label class="form-check-label" for="gridCheck">{% trans "common.is_active" %}</label></div><div class="form-check col-sm-2"><input class="form-check-input" type="checkbox" name="is_locked" ><label class="form-check-label" for="gridCheck">{% trans "common.is_locked" %}</label></div></div><button type="submit" class="btn btn-primary" >{% trans "common.action.save" %}</button></form></div>
</body>
</html>

外观

中文

英文

编辑部门

源码

<!DOCTYPE html>
{% load static %}
{% load i18n %}
<html lang="en">
<head><meta charset="UTF-8"><title>{% trans "i18n.depart.Title" %}</title><link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}">
</head>
<body><div class="container"><nav aria-label="breadcrumb" style="margin: 10px 0"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/depart/">{% trans "i18n.depart.Title" %}</a></li><li class="breadcrumb-item active" aria-current="page">{% trans "i18n.depart.edit" %}</li></ol></nav><form method="post" action="/depart/edit/">{% csrf_token %}<div class="mb-3 row"><label for="formGroupExampleInput" class="col-sm-2 col-form-label">#</label><div class="col-sm-10"><input type="text" class="form-control" readonly placeholder="" name="id" value="{{depart.id}}"></div></div><div class="mb-3 row"><label for="formGroupExampleInput" class="col-sm-2 col-form-label">{% trans "i18n.depart.name" %}</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="{% trans 'i18n.depart.name' %}" name="name" value="{{depart.name}}"></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label">{% trans "i18n.depart.description" %}</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="{% trans 'i18n.depart.description' %}" name="description"  value="{{depart.description}}"></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label">{% trans "i18n.depart.parent" %}</label><div class="col-sm-10"><select  class="form-select" name="parent"><option  value="-1">{% trans "i18n.depart.select" %}</option>{% for depart1 in departs %}{% if depart1.id == depart.parent %}<option selected value="{{ depart1.id }}">{{ depart1.name }}(id={{ depart1.id }})</option>{% else %}<option value="{{ depart1.id }}">{{ depart1.name }}(id={{ depart1.id }})</option>{% endif %}{% endfor %}</select></div></div><div class="mb-3 row"><label for="formGroupExampleInput2" class="col-sm-2 col-form-label"></label><div class="form-check col-sm-2"><input class="form-check-input" type="checkbox" name="is_active"{% if depart.is_active %}checked{% endif %}><label class="form-check-label" for="gridCheck">{% trans "common.is_active" %}</label></div><div class="form-check col-sm-2"><input class="form-check-input" type="checkbox" name="is_locked"{% if depart.is_locked %}checked{% endif %}><label class="form-check-label" for="gridCheck">{% trans "common.is_locked" %}</label></div></div><button type="submit" class="btn btn-primary" >{% trans "common.action.save" %}</button></form></div>
</body>
</html>

外观

中文

英文

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

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

相关文章

JAVA开发 使用Apache PDFBox库生成PDF文件,绘制表格

1. 表格位置定点 2.执行效果展示&#xff08;截取PDF文件图片&#xff09; 3.执行代码 当我们使用Apache PDFBox库在PDF文件中创建带有表格的内容&#xff0c;需要遵循几个步骤。PDFBox本身并没有直接的API来创建表格&#xff0c;但我们可以通过定位文本、绘制线条和单元格矩形…

shell编程基础(第16篇:命令是什么?有哪些注意事项)

前言 前面我们已经使用过各种各样的命令&#xff0c;那么命令到底是什么呢&#xff1f;我们又该怎么理解该术语&#xff1f; 什么是命令&#xff1f; 命令是command的中文翻译&#xff0c;能在命令行中执行的是命令。因为早期的计算机只有文字界面&#xff0c;命令是程序&#…

高速公路智能管理系统:构建安全畅通的数字大动脉

随着城市化进程的加速和交通需求的增长&#xff0c;高速公路系统作为城市交通的重要组成部分&#xff0c;正承担着越来越多的交通运输任务。为了提升高速公路的安全性、便捷性和智能化管理水平&#xff0c;高速公路智能管理系统应运而生。本文将深入探讨高速公路智能管理系统的…

Leetcode 剑指 Offer II 082.组合总和 II

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一个可能有重复数字的整数数组 candidates 和一个目标数 tar…

能耗监控与管理平台

在当今社会&#xff0c;随着工业化、城市化的快速发展&#xff0c;能源消耗问题日益凸显&#xff0c;节能减排已成为全社会共同关注的焦点。在这个背景下&#xff0c;一款高效、智能的能耗监控与管理平台显得尤为重要。 一、HiWoo Cloud平台的概念 HiWoo Cloud是一款集数据采…

六大维度全面焕新升级!麒麟信安服务器操作系统V3.6.1引领未来计算

昨日&#xff0c;openEuler 24.03 LTS 正式发布&#xff0c;麒麟信安作为openEuler社区重要贡献者和参与者&#xff0c;充分发挥自身在国产操作系统领域的技术优势&#xff0c;在打造安全可靠、极致体验的操作系统上与社区共同努力&#xff0c;同步推出服务器操作系统V3.6.1&am…

OpenGL3.3_C++_Windows(7)

演示 最终演示效果 ​​​​ 冯氏光照 光照原理&#xff1a;对于向量相乘默认为点乘&#xff0c;如果*lightColor(1.0f, 1.0f, 1.0f);白光&#xff0c;值不变物体的颜色显示原理&#xff1a;不被物体吸收的光反射&#xff0c;也就是由白光分解后的一部分&#xff0c;因此&…

Cask ‘oraclexxx‘ is unavailable: No Cask with this name exists.

brew search oracle-jdk或brew search --cask oracle-jdk 原因&#xff1a;Homebrew官方仓库不再维护多个旧版本的OracleJDK 不推荐使用Homebrew环境安装JDK //指定版本安装 brew install --cask temurin17 //设置 JAVA_HOME 环境变量 //找到安装的JDK 版本的路径 /usr/lib…

探索测试分享

1. “器” 项目中的实践——我们是怎么做的 本章将带你身历其境的感受到思想和方法是如何具体使用在项目里的 1.如何挖掘探索性测试的探索点&#xff0c;在任何阶段都可以利用探索测试策略找到可探索的点&#xff0c;发现产品中的bug&#xff0c;或明显或隐含。 “器”的应用…

利用74HC165实现8路并行输入口的扩展

代码&#xff1a; #include <mega16.h>// Declare your global variables here #define hc165_clk PORTB.0 #define hc165_lp PORTB.1 #define hc165_out PINB.2unsigned char read_hc165(void) {unsigned char data0,i,temp0x80;hc165_lp0;hc165_lp1; for(i0;i<7;i)…

汇编:内联汇编和混合编程

C/C内联汇编 C/C 内联汇编&#xff08;Inline Assembly&#xff09;是一种在C或C代码中嵌入汇编语言指令的方法&#xff0c;以便在不离开C/C环境的情况下利用汇编语言的优势进行性能优化或执行特定的硬件操作。以下是一些详细的说明和示例&#xff0c;展示如何在C和C代码中使用…

zookeeper介绍 和 编译踩坑

zookeeper 分布式协调服务 ZooKeeper原理及介绍 - 鹿泉 - 博客园 Zookeeper是在分布式环境中应用非常广泛&#xff0c;它的优秀功能很多&#xff0c;比如分布式环境中全局命名服务&#xff0c;服务注册中心&#xff0c;全局分布式锁等等。 本项目使用其分布式服务配置中心&am…

Minecraft模组开发(fabric)之准备工作

Minecraft模组开发&#xff08;fabric&#xff09;之准备工作 最近心血来潮想开发个Minecraft的模组&#xff0c;一边学习一边开发&#xff0c;顺带着将一些步骤、学习心得整理下来。之所以选择fabric&#xff0c;是因为自己的光影包使用的是iris-fabric&#xff0c;所以就想着…

Vue41-vc实例与vm实例

一、 vc实例与vm实例的区别 vc实例与vm实例&#xff0c;99%结构都是类似的&#xff0c;仅2点不同&#xff1a; el属性data的书写格式 1-1、 el属性 vc有的功能vm都有&#xff0c;但是vm能通过el决定为哪个容器服务&#xff0c;但是vc却不行&#xff01; 1-2、data的书写格式

unity38——MemoryProfiler性能分析器,截帧分析当前性能占用率的具体文件

定义&#xff1a;性能分析器 (Unity Profiler) 是一种可以用来获取应用程序性能信息的工具。可以将性能分析器连接到网络中的设备或连接到已连接到计算机的设备&#xff0c;从而测试应用程序在目标发布平台上的运行情况。还可以在 Editor 中运行性能分析器&#xff0c;从而在开…

高精度减法的实现

这是C算法基础-基础算法专栏的第八篇文章&#xff0c;专栏详情请见此处。 引入 上次我们学习了高精度加法的实现&#xff0c;这次我们要学习高精度减法的实现。 高精度减法与高精度加法的定义、前置过程都是大致相同的&#xff0c;如果想了解具体内容&#xff0c;可以移步至我的…

显著提高iOS应用中Web页面的加载速度 - 提前下载页面的关键资源(如JavaScript、CSS和图像)

手动下载并缓存资源是一种有效的方式&#xff0c;可以确保在需要时资源已经在本地存储&#xff0c;这样可以显著提高加载速度。 缓存整个 web 页面的所有资源文件 具体实现步骤 下载和缓存资源&#xff1a;包括 HTML 文件、CSS、JavaScript 和图像。在应用启动时预加载资源。…

实现搜索功能中搜索内容高亮效果,本文通过fuzzysort库方案实现

目录 一&#xff1a;fuzzysort1.fuzzysort 介绍&#xff1a;2.需求所用方法介绍:gohighlight 3.效果实现 一&#xff1a;fuzzysort 1.fuzzysort 介绍&#xff1a; fuzzysort 是一个 JavaScript 库&#xff0c;用于对字符串数组进行模糊搜索和排序。它特别适用于自动补全&#…

Docker安装Nginx(各种错误版)

Docker安装-CSDN博客 安装启动Docker之后 docker run -d -p 81:81 --name nginx nginx 这样没有指定版本 docker run&#xff1a;启动一个新的容器。-d&#xff1a;以分离模式运行容器&#xff08;后台运行&#xff09;。-p 81:81&#xff1a;将主机的 81 端口映射到容器的 …

【网络安全学习】使用Kali做渗透情报收集-01-<域名信息主机信息>

1.收集开源情报 开源情报(Open Source Intelligence&#xff0c;OSINT)是指从各种公开的渠道中寻找和获取有价值的信息 如&#xff1a;互联网、媒体、社交网络、公共数据库等开源情报具有以下特点&#xff1a; - 丰富性&#xff1a;开源情报涵盖了各种类型和领域的信息 - 可…