台州做网站app的公司,百度搜索引擎首页,五莲县财源建设网站,和网站设计人员谈价要注意什么目录
1.概述
2.创建应用
创建app01
在settings.py里引用app01
3.定义模型 在app01\models.py里创建模型
数据库迁移
4.创建视图
引用头
部门列表视图
部门添加视图
部门编辑视图
部门删除视图
5.创建Template
在app01下创建目录templates
部门列表模板depart.ht…目录
1.概述
2.创建应用
创建app01
在settings.py里引用app01
3.定义模型 在app01\models.py里创建模型
数据库迁移
4.创建视图
引用头
部门列表视图
部门添加视图
部门编辑视图
部门删除视图
5.创建Template
在app01下创建目录templates
部门列表模板depart.html 源代码
{% for depart in departs %}
确认删除的代码
删除按钮
确认框Modal
删除按钮的js代码
分页
外观
部门新增模板depart_add.html 源代码 外观
部门编辑模板depart_edit.html 源代码
外观
6.URL配置 1.概述 在Django中创建一个简单的应用app01以部门管理为例演示了部门的增删改查CRUD功能可以按照以下步骤进行
创建应用定义模型数据库迁移创建视图创建TemplateURL配置
2.创建应用
创建app01
python manage.py startapp app01
创建成功后有下面的目录templates是手动创建。 在settings.py里引用app01 3.定义模型 在app01\models.py里创建模型
这里可以创建任意多个模型。
from django.db import models# Create your models here.class Department(models.Model):name models.CharField(verbose_name部门名称, max_length200,)description models.TextField(verbose_name部门描述, blankTrue, nullTrue)parent models.IntegerField(verbose_name父部门, blankTrue, nullTrue, default0)is_active models.BooleanField(verbose_name是否启用, defaultTrue)is_locked models.BooleanField(verbose_name是否锁定, defaultFalse)is_deleted models.BooleanField(verbose_name是否删除, defaultFalse)created_by models.CharField(verbose_name创建人, max_length200, blankTrue, nullTrue)updated_by models.CharField(verbose_name更新人, max_length200, blankTrue, nullTrue)created_at models.DateTimeField(verbose_name创建时间,auto_nowTrue)updated_at models.DateTimeField(verbose_name更新时间,auto_nowTrue)models.CharField是字段类型大家基本上能看懂。verbose_name 是Django模型字段和模型类的一个属性用于提供一个人类可读的字段或模型名称。这在Django的管理界面和表单中尤其有用可以使得字段或模型的显示更加友好和直观。max_length是CharField字段类型必须指定长度。 其它的属性查看django文档基本都能找到说明。
数据库迁移
还是那两个命令
python manage.py makemigrationspython manage.py migrate 4.创建视图 这里写了部门增删改查的方法并没有做项目上那种严谨的逻辑判断例如新增部门时都没有判断部门名称是否为空等这些常规的操作自己去做吧。
引用头
from django.shortcuts import render, redirect
from app01 import models
from django.utils import timezone
from django.http import JsonResponse
# Create your views here.
部门列表视图 models.Department.objects.all()下面有很多方法可以使用用起来还挺方便。具体项目上可能有更复杂的需求未必能否满足。 queryset[obj,obj,obj] models.Department.objects.all().order_by(id) queryset[obj,obj,obj] models.Department.objects.all().filter(id0) object models.Department.objects.all().filter(id0) .first() 注意查询方法的返回结果的类型这很重要。前台在template里会用到。 django还支持自己写sql去查询具体请看教程
43.django里写自定义的sql进行查询-CSDN博客
def depart(request):departs models.Department.objects.all().order_by(id)# print(departs)# return HttpResponse(部门管理)return render(request, depart.html , {departs : departs })
部门添加视图
def depart_add(request):if request.method GET:departs models.Department.objects.all().filter(parent0)return render(request, depart_add.html, {departs : departs })elif request.method POST:name request.POST.get(name)desc request.POST.get(description)parent request.POST.get(parent)user request.useris_active request.POST.get(is_active)if is_active on:is_active Trueelse:is_active Falseis_locked request.POST.get(is_locked)if is_locked is not None and is_locked on:is_locked Trueelse:is_locked Falsemodels.Department.objects.create(namename, descriptiondesc, parentparent, is_activeis_active, is_lockedis_locked,created_byuser.username, updated_byuser.username)return redirect(/depart/)
部门编辑视图
def depart_edit(request):if request.method GET:id request.GET.get(id)depart models.Department.objects.all().filter(idid).first()print(depart.parent)if depart.parent 0:departs Noneelse:departs models.Department.objects.all().filter(parent0)return render(request, depart_edit.html, {depart : depart ,departs : departs })elif request.method POST:id request.POST.get(id)name request.POST.get(name)desc request.POST.get(description)parent request.POST.get(parent)is_active request.POST.get(is_active)if is_active on:is_active Trueelse:is_active Falseis_locked request.POST.get(is_locked)if is_locked is not None and is_locked on:is_locked Trueelse:is_locked Falseuser request.usernow timezone.now()models.Department.objects.filter(idid).update(namename, descriptiondesc, parentparent, is_activeis_active, is_lockedis_locked, created_byuser.username, updated_byuser.username, updated_atnow)return redirect(/depart/)
部门删除视图
def depart_del(request):if request.method POST:id request.POST.get(id)try:models.Department.objects.filter(idid).delete() #物理删除也可以自己做逻辑删除return JsonResponse({success: True})except:return JsonResponse({success: False, error: Object not found}) 5.创建Template
在app01下创建目录templates
部门列表模板depart.html 源代码
!DOCTYPE html
{% load static %}
html langen
headmeta charsetUTF-8title部门管理/titlelink relstylesheet href{% static bootstrap5/css/bootstrap.min.css %}script src{% static bootstrap5/js/bootstrap.bundle.min.js %}/scriptscript src{% static jquery-3.7.1.min.js %}/script
/head
body
div classcontainerdiv stylemargin: 10px 0a href../depart/add/ classbtn btn-primary添加部门/a/divtable classtable table-striped table-hover theadtrth scopecol#/thth scopecol部门名称/thth scopecol部门描述/thth scopecol父部门/thth scopecol是否启用/thth scopecol是否锁定/thth scopecol创建人/thth scopecol创建时间/thth scopecol更新人/thth scopecol更新时间/thth scopecol操作/th/tr/theadtbody{% for depart in departs %}trtd scoperow{{ depart.id }}/tdtd{{ depart.name }}/tdtd{{ depart.description }}/tdtd{{ depart.parent }}/tdtd{{ depart.is_active }}/tdtd{{ depart.is_locked }}/tdtd{{ depart.created_by }}/tdtd{{ depart.created_at }}/tdtd{{ depart.updated_by }}/tdtd{{ depart.updated_at }}/tdtda href../depart/edit/?id{{depart.id}} classbtn btn-primary btn-sm编辑/abutton iddeleteBtn typebutton classbtn btn-danger btn-sm delete-btn data-id{{ depart.id }}删除/button /td/tr{% endfor %}/tbody/table!-- 确认删除的模态框 --
div classmodal fade iddeleteModal tabindex-1 roledialog aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalLabel确认删除/h5button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/button/divdiv classmodal-body确定要删除这条记录吗/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-dismissmodal取消/buttonform iddeleteForm methodpost{% csrf_token %}input typehidden nameid idobject_idbutton typesubmit classbtn btn-danger确定删除/button/form/div/div/div
/divnav aria-labelPage navigation exampleul classpaginationli classpage-itema classpage-link href# aria-labelPreviousspan aria-hiddentruelaquo;/span/a/lili classpage-itema classpage-link href#1/a/lili classpage-item active a classpage-link href#2/a/lili classpage-itema classpage-link href#3/a/lili classpage-itema classpage-link href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li/ul
/nav
/div
/body
scriptdocument.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
{% for depart in departs %} 在Django模板语言中{% for ... in ... %} 是一个循环标签用于迭代一个集合如列表、元组或字典等。你提供的代码片段 {% for depart in departs %} 意味着将对名为 departs 的集合进行遍历其中每个元素临时赋值给 depart 变量在循环体内可以访问这个变量来进行操作或展示数据。
确认删除的代码 确认删除使用了Bootstrap Modal模态框是一种覆盖在当前页面上的对话框用于显示信息、警告、确认对话或复杂的交互形式而不需要离开当前页面或重新加载页面。
删除按钮
button iddeleteBtn typebutton classbtn btn-danger btn-sm delete-btn data-id{{ depart.id }}删除/button /td
确认框Modal !-- 确认删除的模态框 --
div classmodal fade iddeleteModal tabindex-1 roledialog aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalLabel确认删除/h5button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/button/divdiv classmodal-body确定要删除这条记录吗/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-dismissmodal取消/buttonform iddeleteForm methodpost{% csrf_token %}input typehidden nameid idobject_idbutton typesubmit classbtn btn-danger确定删除/button/form/div/div/div
/div
删除按钮的js代码
scriptdocument.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
分页 这里只写了前台的分页控件放在这里后台并没有写相应的逻辑。
外观 部门新增模板depart_add.html 源代码
!DOCTYPE html
{% load static %}
html langen
headmeta charsetUTF-8title部门管理/titlelink relstylesheet href{% static bootstrap5/css/bootstrap.min.css %}
/head
bodydiv classcontainernav aria-labelbreadcrumb stylemargin: 10px 0ol classbreadcrumbli classbreadcrumb-itema href/depart/部门管理/a/lili classbreadcrumb-item active aria-currentpage添加部门/li/ol/navform methodpost action/depart/add/{% csrf_token %}div classmb-3 rowlabel forformGroupExampleInput classcol-sm-2 col-form-label部门名称/labeldiv classcol-sm-10input typetext classform-control placeholder部门名称 namename/div/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label部门描述/labeldiv classcol-sm-10input typetext classform-control placeholder部门描述 namedescription/div/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label父部门/labeldiv classcol-sm-10select classform-select nameparentoption value0请选择部门/option{% for depart in departs %}option value{{ depart.id }}{{ depart.name }}/option{% endfor %}/select/div/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label属性设定/labeldiv classform-check col-sm-2input classform-check-input typecheckbox nameis_active checkedlabel classform-check-label forgridCheck是否启用/label/divdiv classform-check col-sm-2input classform-check-input typecheckbox nameis_locked label classform-check-label forgridCheck是否锁定/label/div/divbutton typesubmit classbtn btn-primary 保存并返回/button/form/div
/body
/html 外观 部门编辑模板depart_edit.html 源代码
!DOCTYPE html
{% load static %}
html langen
headmeta charsetUTF-8title部门管理/titlelink relstylesheet href{% static bootstrap5/css/bootstrap.min.css %}
/head
bodydiv classcontainernav aria-labelbreadcrumb stylemargin: 10px 0ol classbreadcrumbli classbreadcrumb-itema href/depart/部门管理/a/lili classbreadcrumb-item active aria-currentpage编辑部门/li/ol/navform methodpost action/depart/edit/{% csrf_token %}div classmb-3 rowlabel forformGroupExampleInput classcol-sm-2 col-form-label部门ID/labeldiv classcol-sm-10input typetext classform-control readonly placeholder nameid value{{depart.id}}/div/divdiv classmb-3 rowlabel forformGroupExampleInput classcol-sm-2 col-form-label部门名称/labeldiv classcol-sm-10input typetext classform-control placeholder部门名称 namename value{{depart.name}}/div/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label部门描述/labeldiv classcol-sm-10input typetext classform-control placeholder部门描述 namedescription value{{depart.description}}/div/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label父部门/labeldiv classcol-sm-10select classform-select nameparentoption value-1请选择部门/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/divdiv classmb-3 rowlabel forformGroupExampleInput2 classcol-sm-2 col-form-label属性设定/labeldiv classform-check col-sm-2input classform-check-input typecheckbox nameis_active{% if depart.is_active %}checked{% endif %}label classform-check-label forgridCheck是否启用/label/divdiv classform-check col-sm-2input classform-check-input typecheckbox nameis_locked{% if depart.is_locked %}checked{% endif %}label classform-check-label forgridCheck是否锁定/label/div/divbutton typesubmit classbtn btn-primary 保存并返回/button/form/div
/body
/html
外观 6.URL配置
from django.contrib import admin
from django.urls import path,include
from django.conf.urls.i18n import i18n_patterns
from django.utils.translation import gettext_lazy as _
from app01 import viewsurlpatterns [# path(admin/, admin.site.urls),# path(depart/, views.depart),# path(depart/add/, views.depart_add),# path(depart/edit/, views.depart_edit),# path(depart/delete/, views.depart_del),
]
urlpatterns i18n_patterns(path(admin/, admin.site.urls),path(depart/, views.depart),path(depart/add/, views.depart_add),path(depart/edit/, views.depart_edit),path(depart/delete/, views.depart_del),
)
