Python-django 自定义模块开发
第四章 Django 自定义模块-年级模块年纪信息详情和删除
前言
本系列文章以一个简单的学校项目来做演示，项目中遇到的问题会一一记录下来，仅供学习参考使用
此处学习版本 python3.8 django 4.0.6 bootstrap3 开发工具 VSCODE
一、创建静态页面-年级修改页面
{% load i18n static %}
<!DOCTYPE html>
<html>
<head>
<title>年级管理-详情</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 静态地址引入方式-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap.min.css' %}" />
<!-- 程序引入方式 -->
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap-theme.min.css' %}" />
<script src="{% static 'js/jquery-3.2.1/jquery.min.js' %}"></script>
<script src="{% static 'js/popper-1.15.0/umd/popper.min.js' %}"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="{% static 'bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
<script src="/static/js/html5shiv-3.7.0/html5shiv.js"></script>
<script src="/static/js/respond-1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
</style>
</head>
<body>
<div class="container-fluid">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<!-- 导航栏固定在顶部-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 左侧 -->
<div class="navbar-header">
<!--图标 -->
<a class="navbar-brand" href="#" style="padding-top:5px;">
<img alt="Brand" src="{% static 'images/ico.png' %}" />
</a>
<a class="navbar-brand" href="#">陕西家里蹲大学师生信息管理系统</a>
</div>
<!-- 中间菜单 -->
<div>
<ul class="nav navbar-nav" id="ul_menu_top">
<li><a href="{% url 'school_web_grade:gradeIndex' pageIndex=1 %}">年级管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">老师管理</a></li>
<li><a href="#">班级管理</a></li>
<li><a href="#">学生管理</a></li>
</ul>
</div>
<!-- 右侧 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
<li>
<a href="javascript:void(0)" onclick="openModalWindow()"><span
class="glyphicon glyphicon-off"></span> 退出</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row" style="padding-top: 50px;padding-bottom: 50px;">
<!-- <ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">年级管理</a></li>
<li class="active">详情</li>
</ol> -->
<!-- 中间内容区域 -->
<div class="panel panel-info ">
<div class="panel-heading"><span class="glyphicon glyphicon-comment"></span>年级管理-详情</div>
<div class="panel-body">
{% block content %}
<form class="form-horizontal" id="gradeForm" name="gradeForm" action="#" method="post">
{% csrf_token %}
<div class="form-group">
<label for="grade_id" class="col-sm-2 control-label">编号:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="grade_id" disabled value="{
{ schoolGrade.grade_id }}">
</div>
</div>
<div class="form-group">
<label for="grade_name" class="col-sm-2 control-label">年级名称:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="grade_name" disabled value="{
{ schoolGrade.grade_name }}">
</div>
</div>
<div class="form-group">
<label for="grade_create_date" class="col-sm-2 control-label">创建日期:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="grade_create_date" disabled value="{
{ schoolGrade.grade_create_date|date:'Y-m-d H:i:s' }}">
</div>
</div>
<div class="form-group">
<label for="grade_update_date" class="col-sm-2 control-label">修改日期:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="grade_update_date" disabled value="{
{ schoolGrade.grade_update_date|date:'Y-m-d H:i:s' }}">
</div>
</div>
</form>
{% endblock %}
</div>
</div>
</div>
<div class="row navbar navbar-default navbar-fixed-bottom" style="text-align: center; height: 40px;">
<div class="bg-success" style="height: 100% ;padding-top: 15px;">
版权所有@copyRight 2013-2022 口袋里的小龙 开发框架 python3.8 bootstrap-3 Django4
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// 在这里写你的代码...
$('#showDetail').modal('hide')
//菜单点击事件
$("#ul_menu_top li").click(function () {
//清除样式
$("#ul_menu_top li").removeClass("active");
//设置选中颜色
$(this).addClass("active");
console.log($(this));
});
});
</script>
</body>
</html>在年级主页【修改】按钮中增加访问url
<button type="button" class="btn btn-info btn-xs" data-url="{% url 'school_web_grade:gradeDetail' grade.grade_id %}"
onclick="detailGrade(this)">
<span class="glyphicon glyphicon-zoom-in"></span>详情
</button>
<button type="button" class="btn btn-danger btn-xs" data-url="{% url 'school_web_grade:gradeDelete' grade.grade_id %}" onclick="deleteGrade(this)" >
<span class="glyphicon glyphicon-remove"></span>删除
</button>对应的方法
//详情
function detailGrade(_this) {
console.log($(_this).attr("data-url"));
var url = $(_this).attr("data-url");
window.open(url);
}
/**
* 表单提交
*/
function deleteGrade(_this) {
console.log($(_this).attr("data-url"));
var url = $(_this).attr("data-url");
$("#gradeForm").attr("action",url);
$("#gradeForm").submit();
// window.open(url);
}二、后端代码编写
views.py
## 删除
def gradeDelete(request,grade_id):
result = -1
result,object = SchoolGrade.objects.filter(grade_id=grade_id).delete()
## 存在数据 {'school_web_grade.SchoolGrade': 1} 不存在 {}
print(object)
## 存在数据 1 不存在数据 0
print(result)
## 请求转发
return redirect(to="school_web_grade:gradeIndex",pageIndex=1)
## 详情
def gradeDetail(request,grade_id):
## grade_id 列名
schoolGrade = SchoolGrade.objects.get(grade_id=grade_id)
context = {"schoolGrade":schoolGrade}
return render(request=request,template_name="grade/grade_detail.html",context=context)urls.py
## 获取详情
path(route="gradeDetail/<int:grade_id>/",view=views.gradeDetail,name="gradeDetail"),
## 删除
path(route="gradeDelete/<int:grade_id>/",view=views.gradeDelete,name="gradeDelete"),运行效果
