案例1:用户管理
1. 展示用户列表
- url
- 函数
- 获取所有用户信息
- HTML渲染
将数据库获取的对象当做参数传递给前端HTML:
注意字典的键是双引号。
补充:时间在模板中如何使用字符串
2.添加用户
- url
- 函数
- 通过GET方式,看到页面,输入内容。
- 通过POST方式,提交 -> 写入到数据库。
可以在列表的html中添加一个a标签链接到add 中,因为是在同一个网址下,即得到前端页面:部门列表显示界面和部门添加页面

通过 {% block content %} 特殊占位符将页面中模板填充到block 里面,其它页面需要这个模板只需要通过{% extends ‘layout.html’(继承的页面文件) %}继承,
然后编写*{% block content %}与{% endblock %}中间的部分就可以。
这样重复的部分就不需要进行编写
这样如果之后导航需要修改,只需要改模板中的,其它页面继承的也会随之自动修改。
如果有的页面需要不同的js、css,同样也可以通过
{% block js %} (加上该页面独特的js){% endblock %}
{% block css %}(加上该页面独特的css){{% endblock %}
右边为继承页面
#用户列表
注意:
1:python中datatime转字符串的方式
time=obj.create_time (datatime类型)
t=time.strftime(“%Y-%m-%d”)(字符串类型)
注意:在如果在模板语法,即html页面中使用以上的python语言是通过obj.create_time | date:“Y-m-d (H:i:s)”
2.在通过元组中套用选择,并使用到choices的时候,因为数据库储存的是1,2等,想要找到1、2对应的字符串,可以直接通过xxxx.get_xxx.display直接显示
例如如图中,可以通过
注意,如果在模板语法,即html页面中使用以上的python语言不需要加()
3:在做外键与别的表关联的时候,主键的表中往往是存储的是外键表中的id,如果想要获得对应id的行中每列的数据,可以通过id去查询外键的表。
还可以直接通过
可以通过对象.(外键对象)dapart.title(外键表中对应字段)直接获取需要的外键表数据。
案例3 订单表
同样设计model(数据库对应表)、url 、views.py、继承的父html 对应的标签、再设计oredel_list.html
再去https://v3.bootcss.com/javascript/#modals获得Bootstrap对话框的模板
为button绑定下面对话框
方法一:为上面按钮添加两个属性 data-toggle与 data-target
效果如下:方法二:通过JS绑定事件,
官方文档上显示通过JS调用
设置对话框的内容(内容应该是通过modelform表示)
在对应的py文件中,通过modelform将数据传输到前端form表单
效果展示:
如果想上下排布,可以修改div class="col-xs-6"为div class=“col-xs-12”
效果展示:
订单号应该是后台自动生成,所以在modelform中将订单号进行排除。
效果展示:
点击保存,将数据都放到数据库,即绑定按钮事件,然后发送Ajax请求
来先判断是否数据存在,
成功后进行页面刷新,方法有直接删除对应标签,或者简单的方法location.reload();
完成删除按钮功能!
修改编辑按钮的功能
这里由于编辑的弹窗与新建弹窗内容差不多,所以共用一个form
此处form的id为myModalLabel
然后将对应编辑的原内容显示在form中
发送AJAX去后端获取当前行的相关数据
如果数据不存在
就不会再弹出编辑框。
所以为显示对话框设置条件
如果从数据库获取的数据,应该是一个对象,
也可以直接从数据库获取的数据,获取的数据为一个字典
获取字典的格式: row_dict=models.Order.objects.filter(id=uid).values(“xxx”,“xxx”,“xxx”).first()
类似之前的
queryset,
queryset = models.Order.objects.all(), 里面表示的是queryset = [obj,obj,obj,] 里面内容为对象;
queryset = models.Order.objects.all().values("id","title"),里面表示的是queryset = [ {'id':1,'title':"xx"},{'id':2,'title':"xx"}, ] 里面内容为字典;
queryset = models.Order.objects.all().values_list("id","title")里面表示的元组# queryset = [ (1,"xx"),(2,"xxx"), ];
这里的JSON序列化只支持字典,所以一般用.values
现在将数据放在对话框中,获取到对应的标签id,然后将对应值放在对应标签中
因为这里与新建订单用的是同一个对话框,所以需要在使用时都需要将之前内容清空
编辑显示的内容解决,现在完成编辑中保存的按钮功能
因为编辑与新建使用的同时一个对话框,而编辑的时候保存按钮是对原有数据库的内容进行修改,而不是跟新建一样在数据库中添加内容。
设置一个全局变量 (如:Edit_ID),并将编辑中uid赋值给这个全局变量
为了防止在点击编辑后,再点击新建,Edit_ID还是上次那个, 所以在新建事件中需要将Edit_ID置空
这里将Edit_ID设置为flase,即表示undefined
所以之后就可以在保存按钮中根据判断,如果Edit_ID为flase即undefined时,就表示为新建的保存,否则就为编辑的保存。
这里方便代码整体性,将编辑函数与添加函数单独拿出来写,将之前添加绑定事件中函数放在doAdd中,同时编写doEdit函数
这里的url应该带上相应的uid
这里还可以做一层验证,也可以不做
通过instance与save 实现modelform的对原数据的修改,同时通过error在前端显示输入的错误信息
主要是通过Edit_ID为ture与flase来决定是新建还是编辑。