基于D…

我先给个大致效果基本融合了Django、Bootstrap、css、html等等。

BootStrap

团队开发的开源前端框架专注于帮助开发者快速构建响应式和现代化的网页。

它基于

HTML、CSS

JavaScript提供了一系列强大的组件和工具包括栅格系统、按钮、导航栏、表单、模态框、卡片、警告框等使网页开发变得更加高效和规范化。

Bootstrap

的核心特点是响应式设计通过其强大的栅格系统和内置的媒体查询开发者可以轻松创建在不同设备如手机、平板、PC上都能正常显示的页面。

它还具有良好的跨浏览器兼容性能够确保网页在主流浏览器中的一致性。

此外Bootstrap

来调整样式。

同时它拥有大量社区支持和第三方资源如模板、插件和扩展大幅减少开发时间。

Bootstrap

Web

需要大家自己去BootStrap官网上下载源码然后引入即可这里我已经给大家提供了大家拷贝即可

load

plugins/bootstrap-3.4.1/css/bootstrap.min.css

BootStrap使用

如果您学过vue那一定知道element-uiBootStrap和element-ui一样作用都是使用组件

Demo

像上面那个因为代码太长官网没有直接给出源码的可以点开F12工具或者右键检查定位到这个表格元素右键table复制outerHTML代码即可。

基本配置

基本配置包括数据库创建和连接可以直接用之前创建的app01_department表有不知道的可以看看这篇

mysql-CSDN博客

像之前也写了一个用户管理案例但页面不是很美观基本的逻辑都是通的本篇博客着手BootStrap组件库带你使用BootStrap快速制作一个美观的页面。

源码展示

[path(,views.depart_list),path(depart/list/,

views.depart_list),path(depart/add/,

views.depart_add),path(depart/delete/,

views.depart_delete),path(depart/int:nid/edit/,

views.depart_edit),

depart_list(request):部门列表queryset

Department.objects.all()print(queryset)#

sys.stdout.flush()

depart_list.html,{queryset:queryset})def

request.method

1234:Department.objects.create(titletitle)return

request.GET.get(nid)print(nid)Department.objects.filter(idnid).delete()return

Department.objects.filter(idnid).first()if

request.method

depart_edit.html,{obj:obj})else:title

pwd

1234:Department.objects.filter(idnid).update(titletitle)return

render(request,

obj})settings文件中的数据库配置和models文件中的操作和之前博客的都一样不用做修改。

没学过前端并且不想学的直接复制就行前提是前面的BoosStrap已成功导入

depart_list.html:

charsetUTF-8titleTitle/titlelink

relstylesheet

plugins/bootstrap-3.4.1/css/bootstrap.min.css

0;}.my-div{height:

plugins/bootstrap-3.4.1/js/bootstrap.min.js

%}/script#}nav

data-target#bs-example-navbar-collapse-1

classsr-onlyToggle

idbs-example-navbar-collapse-1ul

classnav

classsr-only(current)/span/a/lilia

href#时间/a/lili

placeholderSearch/label/divbutton

typesubmit

aria-hiddentrue/span新建部门/a/divdivdiv

classglyphicon

aria-hiddentrue/span部门列表/divdiv

classbs-example

data-example-idcontextual-tabletable

classtabletheadtrthID/thth部门名称/thth操作/th/tr/theadtbody{%

for

plugins/bootstrap-3.4.1/css/bootstrap.min.css

0;}.my-div{height:

plugins/bootstrap-3.4.1/js/bootstrap.min.js

%}/scriptnav

data-target#bs-example-navbar-collapse-1

classsr-onlyToggle

idbs-example-navbar-collapse-1ul

classnav

classsr-only(current)/span/a/lilia

href#时间/a/lili

placeholderSearch/label/divbutton

typesubmit

plugins/bootstrap-3.4.1/js/bootstrap.min.js

%}/script

plugins/bootstrap-3.4.1/css/bootstrap.min.css

0;}.my-div{height:

plugins/bootstrap-3.4.1/js/bootstrap.min.js

%}/scriptnav

data-target#bs-example-navbar-collapse-1

classsr-onlyToggle

idbs-example-navbar-collapse-1ul

classnav

classsr-only(current)/span/a/lilia

href#时间/a/lili

placeholderSearch/label/divbutton

typesubmit

plugins/bootstrap-3.4.1/js/bootstrap.min.js

%}/script

这里的int:nid是动态传值之前都是学的静态url使用正则表达式可以使url变得动态起来。

这里可以理解为用户点击编辑按钮会获得该行的id并通过id构造一个专属url从而跳转到编辑页面。

classbtn

将获取到的nid传给视图函数视图函数根据id获取改行数据传给depart_edit.html以将原数据显示到编辑页面用户在编辑页面修改信息后点击提交视图函数获取新数据再到数据库更新然后重定向至depart_list.html页面进行更新显示。

注意此处表单没加action即提交地址则默认提交到已经渲染了的视图函数。

def

Department.objects.filter(idnid).first()if

request.method

depart_edit.html,{obj:obj})else:title

pwd

1234:Department.objects.filter(idnid).update(titletitle)return

render(request,

在depart_list.html中点击删除获取该行的id值并构造动态url执行对应的删除函数

classbtn

的查询参数传参视图函数中直接GET就能拿到然后在数据库中删除并重定向回depart_list页面。

用户编辑中的nid和删除数据中的nid后者实际上是专门通过url传递参数的查询参数Query

Parameters它会将

的一部分发送到服务器。

前面的是直接构造了动态url直接通过视图函数参数列表传参ID

URL

适用场景通常用于过滤、分页、排序等场景或者传递附加的非核心数据适用于

RESTful

views.depart_delete)path(depart/delete/int:nid/,

views.depart_delete)

常见用途用于查询、搜索、筛选、分页等用于操作特定资源的唯一标识如删除特定部门

SEO

友好性查询参数不会显示在浏览器历史记录中可能对搜索引擎不太友好路径参数通常更直观有时对

SEO