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

news2024/12/28 20:12:50

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

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/', // 替换为你的删除视图URL
            data: 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.coloradmin.cn/o/1821447.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RAG 实践-Ollama+AnythingLLM 搭建本地知识库

RAG 实践-Ollama+AnythingLLM 搭建本地知识库

什么是 RAG RAG&#xff0c;即检索增强生成&#xff08;Retrieval-Augmented Generation&#xff09;&#xff0c;是一种先进的自然语言处理技术架构&#xff0c;它旨在克服传统大型语言模型&#xff08;LLMs&#xff09;在处理开放域问题时的信息容量限制和时效性不足。RAG的…
阅读更多...
wmv转换mp4怎么操作？3个格式转换方法分享

wmv转换mp4怎么操作？3个格式转换方法分享

wmv转换mp4怎么操作&#xff1f;将WMV转换为MP4格式&#xff0c;可以方便我们在多种设备和平台上流畅播放视频。MP4格式具有广泛的兼容性和优化过的编码&#xff0c;使其在各种媒体播放器、智能手机、平板电脑以及电视上都能得到良好的支持。此外&#xff0c;MP4格式的视频文件…
阅读更多...
12.1 Go 测试的概念

12.1 Go 测试的概念

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
C语言——自定义类型：结构体

C语言——自定义类型：结构体

前言 本篇博客位大家介绍C语言中一块儿重要的内容&#xff0c;那就是结构体&#xff0c;关于结构体的内容&#xff0c;大家需要深入掌握&#xff0c;在后面的学习中依然会用到&#xff0c;如果你对本文感兴趣&#xff0c;麻烦点进来的老铁一键三连。多多支持&#xff0c;下面我…
阅读更多...
WPS JS宏获取自动筛选后的行数

WPS JS宏获取自动筛选后的行数

//WPS JS宏获取自动筛选后的行数 function getFilterRowCnt(shtRng)//shtRng表示筛选目标工作表范围 {let lngRowCnt 0;for(let rngCell of shtRng.SpecialCells(xlCellTypeVisible).Areas)//获取自动筛选后的单元格行数{lngRowCnt lngRowCnt rngCell.Rows.Count;}return ln…
阅读更多...
Metes and Bounds Pro for Mac——开启智能地产测量新时代

Metes and Bounds Pro for Mac——开启智能地产测量新时代

在数字化时代&#xff0c;Metes and Bounds Pro for Mac以其智能化和高效性引领了地产测量领域的新潮流。这款软件采用了先进的人工智能技术&#xff0c;能够自动识别和提取地块信息&#xff0c;极大地提高了测量工作的速度和准确性。此外&#xff0c;Metes and Bounds Pro还支…
阅读更多...
【GreenHills】如何使用GHS对于不同的文件进行文档内容对比

【GreenHills】如何使用GHS对于不同的文件进行文档内容对比

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 利用GHS对于不同的文件进行对比。 2、 问题场景 在项目开发过程中&#xff0c;会对于工程进行版本管理&#xff0c;对于没有项目管理工具的客户&#xff0c;想要对于当前版本的源文件和上一版或其他版本的源文件进行…
阅读更多...
Anzo Capital昂首资本总结斐波纳契指标7个特点

Anzo Capital昂首资本总结斐波纳契指标7个特点

斐波纳契指标是一种强大的技术分析工具&#xff0c;被誉为交易者的“神秘武器”&#xff0c;用于预测金融市场中的价格走势和潜在反转点。下面是Anzo Capital昂首资本总结的斐波纳契指标的7个特点&#xff1a; 1. 识别趋势&#xff1a;首先&#xff0c;斐波纳契指标可以快速确…
阅读更多...
旅游行业电商平台：数字化转型的引擎与未来发展趋势

旅游行业电商平台：数字化转型的引擎与未来发展趋势

引言 旅游行业数字化转型的背景和重要性 随着信息技术的飞速发展&#xff0c;数字化转型成为各行业发展的必然趋势。旅游行业&#xff0c;作为一个高度依赖信息和服务的领域&#xff0c;数字化转型尤为重要。通过数字化手段&#xff0c;旅游行业能够实现资源的高效配置、服务的…
阅读更多...
tvm实战踩坑

tvm实战踩坑

今天玩了一下tvm的安装 我要安装v0.14.0的版本 所以按照官网的方法 https://tvm.apache.org/docs/install/from_source.html#python-package-installation git clone --recursive https://github.com/apache/tvm tvmgit checkout v0.14.0recursive是很重要的 这一步可以替换成…
阅读更多...
蓝桥杯软件测试第十五届蓝桥杯模拟赛1期题目解析

蓝桥杯软件测试第十五届蓝桥杯模拟赛1期题目解析

PS 需要第十五界蓝桥杯模拟赛1期功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试模拟赛1期 题目1 功能测试用例1&#xff08;测试用例&#xff09;&#xff08;15分&#xff09; 【前期准备】 按步…
阅读更多...
优化查询性能：DolphinDB 时间类型数据比较规则详解

优化查询性能：DolphinDB 时间类型数据比较规则详解

在数据库中&#xff0c;时间是一种常见的数据类型。在处理时间数据时&#xff0c;比较操作是非常常见的需求。然而&#xff0c;在不同的场景下&#xff0c;对时间类型数据进行比较时应用的规则不同。本文将从 DolphinDB 支持的时间类型开始&#xff0c;由浅入深分别介绍时间类型…
阅读更多...
鸿蒙轻内核A核源码分析系列六 MMU协处理器（2）

鸿蒙轻内核A核源码分析系列六 MMU协处理器（2）

3、MMU汇编代码 在arch\arm\arm\include\arm.h文件中&#xff0c;封装了CP15协处理器相关的寄存器操作汇编函数。我们主要看下MMU相关的部分。 3.1 CP15 C2 TTBR转换表基地址寄存器 代码比较简单&#xff0c;结合下图&#xff0c;自行查看即可。该图来自《ARM Cortex-A9 Tec…
阅读更多...
minIo ubuntu单节点部署

minIo ubuntu单节点部署

资源准备 minio二进制包 下载地址:https://dl.min.io/server/minio/release/linux-amd64/minio ubuntu-单节点部署 选择一台ubuntu18.04机器10.253.9.41、intel 或者 amd 64位处理器 上传minio到~目录 sudo cp minio /usr/local/bin/ sudo chmod x /usr/local/bin/minio 设…
阅读更多...
python pip下载镜像

python pip下载镜像

官网&#xff1a;python https://pypi.python.org/simple 阿里&#xff1a; pip install -i https://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com packagename 腾讯&#xff1a; pip install -i https://mirrors.cloud.tencent.com/pypi/simple --tr…
阅读更多...
CC攻击的有效应对方案

CC攻击的有效应对方案

随着互联网的发展&#xff0c;网络安全问题愈发突出。CC攻击&#xff08;Challenge Collapsar Attack&#xff09;&#xff0c;一种针对Web应用程序的分布式拒绝服务&#xff08;DDoS&#xff09;攻击方式&#xff0c;已经成为许多网络管理员和网站拥有者不得不面对的重大挑战。…
阅读更多...
reGeorg隐秘隧道搭建

reGeorg隐秘隧道搭建

reGeorg隐秘隧道搭建 【实验目的】 通过学习reGeorg与Proxifier工具使用&#xff0c;实现外网攻击端连接内网主机远程桌面。 【知识点】 python、reGeorg、proxifier。 【实验原理】 在内网渗透中&#xff0c;由于防火墙的存在&#xff0c;导致无法对内网直接发起连接&#xff…
阅读更多...
Java中List流式转换为Map的终极指南

Java中List流式转换为Map的终极指南

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 在Java编程中&#xff0c;经常需要将一个List对象转换为另一个Map对象。这可能是因为需要根据List中的元素的某些属性来创建一个新的键值对集合。在本文中&#xff0c;我将向您展示如何使用Java 中的流式API轻松地实…
阅读更多...
机器学习：数据分布的漂移问题及应对方案

机器学习：数据分布的漂移问题及应对方案

首先&#xff0c;让我们从一位高管告诉我的一个故事开始&#xff0c;很多读者可能对此感同身受。 大约两年前&#xff0c;他的公司聘请了一家咨询公司开发一个机器学习模型&#xff0c;帮助他们预测下周每种食品杂货需要多少&#xff0c;以便他们可以相应地补货。这家咨询公司…
阅读更多...
【SQL边干边学系列】08高级问题-4

【SQL边干边学系列】08高级问题-4

文章目录 前言回顾高级问题48.客户分组49.客户分组-修复null50.使用百分比的客户分组51.灵活的客户分组 答案48.客户分组49.客户分组-修复null50.使用百分比的客户分组51.灵活的客户分组 未完待续 前言 该系列教程&#xff0c;将会从实际问题出发&#xff0c;边干边学&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023