1.订单的数据表
1.1 数据表结构
1.2 数据表的创建
models.py
class Order(models.Model):
"""订单号"""
oid = models.CharField(max_length=64, verbose_name="订单号")
title = models.CharField(max_length=64, verbose_name="名称")
price = models.FloatField(verbose_name="价格")
status_choice = (
(1,"待支付"),
(2,"已支付"),
)
status = models.SmallIntegerField(verbose_name="状态",choices=status_choice,default=1)
admin = models.ForeignKey(verbose_name="管理员",to="Admin",on_delete=models.CASCADE)
2.订单案例的实现
2.1 订单案例功能概述
将订单的展示、订单的增加、订单的更新、订单的删除等功能集成到一个页面中。增加和删除页面使用模态框实现,增删改查均使用Ajax请求进行数据传输。
2.2 订单案例总页面和列表展示功能
oeder_list
def order_list(request):
queryset = models.Order.objects.all()
form = OrderModelForm()
page_object = Pagination(request, queryset)
context = {
'queryset': page_object.query_set,
'form': form,
'page_str': page_object.createHtml()
}
return render(request, "order_list.html", context)
order_list.html
{% extends 'layout.html' %}
{% block content %}
...
<!-- 新建 /编辑订单的对话框-->
...
...
...
<!--删除订单的对话框-->
...
...
...
<!-- 数据展示 -->
<div class="panel panel-default">
<div class="panel-heading">订单列表</div>
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr>
<td>{{ obj.id }}</td>
<td>{{ obj.oid }}</td>
<td>{{ obj.title }}</td>
<td>{{ obj.price }}</td>
<td>{{ obj.get_status_display }}</td>
<td>{{ obj.admin.username }}</td>
<td>
...
...
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<ul class="pagination">
{{ page_str }}
</ul>
</div>
{% endblock %}
{% block js %}
...
...
...
{% endblock %}
2.3 订单增加与订单更新功能
由于增加和更新都是用复选框,而且一般情况下增加页面和更新页面可以各使用一个复选框,但本文将增加页面和更新页面集成到一个复选框中。
增加和更新功能集成到一个复选框中,并且两个功能都需要创建数据输入的表单。不同的是,增加功能相对较简单,更新功能需要获取待更新数据的id,并且将待更新数据旧数据填充到表单中
因此增加和更新功能复选框的区分标准是是否定义了待删除数据id
2.3.1 复选框的生成
order_list.html
{% extends 'layout.html' %}
{% block content %}
<div style="margin-bottom: 10px">
<div>
<input type="button" class="btn btn-primary" value="新建订单1" data-toggle="modal" data-target="#Modal">
<input id="addShow" type="button" class="btn btn-primary" value="新建订单2">
</div>
</div>
<!-- 新建 /编辑订单的对话框-->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form id="formAdd">
<div class="clearfix">
{% for field in form %}
<div class="col-xs-6">
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label>{{ field.label }}</label>
{{ field }}
<span class="error-msg" style="color: red"></span>
</div>
</div>
{% endfor %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
<button id="btnSave" type="button" class="btn btn-primary">保 存</button>
</div>
</div>
</div>
</div>
<!--删除订单的对话框-->
...
...
<!-- 数据展示 -->
...
...
{% endblock %}
{% block js %}
...
...
{% endblock %}
2.3.2复选框的内容
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
正常的modelForm表单构造
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
<button id="btnSave" type="button" class="btn btn-primary">保 存</button>
</div>
</div>
</div>
</div>
2.3.3增加订单绑定复选框
<div>
<input type="button" class="btn btn-primary" value="新建订单1" data-toggle="modal" data-target="#Modal">
<input id="addShow" type="button" class="btn btn-primary" value="新建订单2">
</div>
- 新建订单1按钮,采用官方文档给的唤醒复选框的方法
data-target="#Modal"
直接写复选框的id即可 - 新建订单2按钮,采用jQuery+js进行唤醒复选框
<script type="text/javascript">
var UPDATE_ID;
$(function () {
//增加订单按钮
bindBtnaddShow();
})
function bindBtnaddShow() {
$('#addShow').click(function () {
//由于添加和更新使用同一个对话框,每次点击要清除表单
//成功后清除表单
// $("#formAdd")jQuery对象无重置功能 $("#formAdd")[0] Dom对象,有重置功能
$("#formAdd")[0].reset();
//根据对话框的id,更改对话框标题
$('#myModalLabel').text('新建订单');
// 点击新建按钮,显示对话框
$('#Modal').modal('show');
})
}
</script>
2.3.4 更新订单绑定复选框
<td>
<input uid="{{ obj.id }}" type="button" class="btn btn-warning btn-sm updateShow" value="编辑">
</td>
设置属性uid,表示待操作数据的id
<script type="text/javascript">
//全局变量存储待更新/删除的订单id
var DELETE_ID;
var UPDATE_ID;
$(function () {
bindBtnupdateShow();
})
function bindBtnupdateShow() {
$('.updateShow').click(function () {
//由于添加和更新使用同一个对话框,每次点击要清除表单
//成功后清除表单
// $("#formAdd")jQuery对象无重置功能 $("#formAdd")[0] Dom对象,有重置功能
$("#formAdd")[0].reset();
//获取待更新的数据id
UPDATE_ID = $(this).attr('uid')
//更新窗口需要展示待更新数据各字段,因此需要利用ajax请求获取相关信息
$.ajax({
url: '/order/details',
type: 'get',
data: {
uid: UPDATE_ID,
},
dataType: 'JSON',
success: function (res) {
// 数据存在,弹出编辑对话框
if (res.status) {
//将对应数据填充到input输入框中
$.each(res.data, function (name, value) {
console.log(name, value);
//找到id为id_name的下一个标签,对value赋值
$("#id_" + name).val(value);
})
//根据对话框的id,更改对话框标题
$('#myModalLabel').text('编辑订单');
// 点击新建按钮,显示对话框
$('#Modal').modal('show');
} else {
alert(res.error)
}
}
})
})
}
</script>
主要使用方式二
订单字段主要有名称、订单号、价格、状态和负责人,对于订单号让系统自动生成、负责人由当前登录用户确定(在order_updat
视图函数实现)
Ajax请求获取待修改数据的信息并打开复选框
2.3.5 增加与更新的保存实现
order_list
{% extends 'layout.html' %}
{% block content %}
...
...
<!-- 新建 /编辑订单的对话框-->
...
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
<button id="btnSave" type="button" class="btn btn-primary">保 存</button>
</div>
...
<!--删除订单的对话框-->
...
...
<!-- 数据展示 -->
...
...
{% endblock %}
{% block js %}
<script type="text/javascript">
//全局变量存储待删除的订单id
var DELETE_ID;
var UPDATE_ID;
$(function () {
...
bindBtnSaveEvent();
})
function bindBtnSaveEvent() {
$('#btnSave').click(function () {
console.log(UPDATE_ID)
if (UPDATE_ID) {
//更新操作
doUpdate();
} else {
//编辑操作
doAdd();
}
})
}
function doAdd() {
UPDATE_ID = 0;
$(".error-msg").empty();
$.ajax({
url: '/order/add',
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
if (res.status) {
//alert("添加成功");
//成功后清除表单
// $("#formAdd")jQuery对象无重置功能 $("#formAdd")[0] Dom对象,有重置功能
//$("#formAdd")[0].reset();
//关闭添加框
//$('#myModal').modal('hide');
//成功后刷新页面,更新展示列表
location.reload();
} else {
$.each(res.errors, function (name, data) {
// console.log(name,data);
//找到id为id_name的下一个标签,给赋予文本
$("#id_" + name).next().text(data[0]);
})
}
}
})
}
function doUpdate() {
$.ajax({
// 由于data传输的是整个表单,因此传输待修改的数据id时,利用url
url: '/order/update' + '?uid=' + UPDATE_ID,
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
if (res.status) {
location.reload();
} else {
$.each(res.errors, function (name, data) {
// console.log(name,data);
//找到id为id_name的下一个标签,给赋予文本
$("#id_" + name).next().text(data[0]);
})
}
}
})
}
</script>
{% endblock %}
2.3.5.1 增加
doAdd()
function doAdd() {
UPDATE_ID = 0;
$(".error-msg").empty();
$.ajax({
url: '/order/add',
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
if (res.status) {
location.reload();
} else {
$.each(res.errors, function (name, data) {
//找到id为id_name的下一个标签,给赋予文本
$("#id_" + name).next().text(data[0]);
})
}
}
})
}
order_add()
def order_add(request):
form = OrderModelForm(request.POST)
if form.is_valid():
# 由于post请求未传来oid的数据,因此oid的数据需手动添加
# print(form.cleaned_data) {'title': 'dadw', 'price': 123.0, 'status': 1, 'admin': <Admin: WYT>}
# 随机生成oid(当前日期+四位随机数)
oid = datetime.datetime.now().strftime('%Y%m%d%H%M') + str(random.randint(1000, 9999))
########### 手动对某个字段添加数据的方法
# form.instance.字段 = 数据
form.instance.oid = oid
# 对于管理员字段,自动填写为当前登录的用户,而不是用户输入
# form.instance.admin_id = 当前用户登录的id(利用session), admin为外键,默认生成admin_id
# request.session.get('info')['id']————当前用户登录的id
form.instance.admin_id = request.session.get('info')['id']
form.save()
data_dict = {'status': True}
return HttpResponse(json.dumps(data_dict))
data_dict = {'status': False, 'errors': form.errors}
return HttpResponse(json.dumps(data_dict, ensure_ascii=False))
2.3.5.2 更新
doUpdate()
function doUpdate() {
$.ajax({
url: '/order/update' + '?uid=' + UPDATE_ID,
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
if (res.status) {
location.reload();
} else {
$.each(res.errors, function (name, data) {
// console.log(name,data);
//找到id为id_name的下一个标签,给赋予文本
$("#id_" + name).next().text(data[0]);
})
}
}
})
}
url: '/order/update' + '?uid=' + UPDATE_ID,
由于data传输的是整个表单,因此传输待修改的数据id时,利用url
order_update()
@csrf_exempt
def order_update(request):
uid = request.GET.get('uid')
print(uid)
row_object = models.Order.objects.filter(id=uid).first()
# 此处row_object 无需判断是否存在 查找待删除id的信息时已校验(order_details)
form = OrderModelForm(data=request.POST, instance=row_object)
if form.is_valid():
form.save()
data_dict = {'status': True}
return HttpResponse(json.dumps(data_dict))
data_dict = {'status': False,'errors': form.errors}
return HttpResponse(json.dumps(data_dict))
2.4 订单的删除
2.4.1 删除确认复选框的显示
{% extends 'layout.html' %}
{% block content %}
...
...
<!--删除订单的对话框-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<h4>是否删除该数据!!!</h4>
<p style="text-align: right">
<button type="button" class="btn btn-danger btnDelete">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</p>
</div>
</div>
</div>
<!-- 数据展示 -->
....
....
<td>
{# 设置属性uid,表示待操作数据的id #}
<input uid="{{ obj.id }}" type="button" class="btn btn-warning btn-sm updateShow" value="编辑">
<input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-sm deleteShow" value="删除">
</td>
....
</div>
{% endblock %}
2.4.2 删除的实现
<!--删除订单的对话框-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<h4>是否删除该数据!!!</h4>
<p style="text-align: right">
<button type="button" class="btn btn-danger btnDelete">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</p>
</div>
</div>
</div>
function bindBtndeleteEvent() {
$('.btnDelete').click(function () {
$.ajax({
url: '/order/delete',
type: 'get',
data: {
uid: DELETE_ID
},
dataType: 'JSON',
success: function (res) {
if (res.status) {
//alert("删除成功")
//关闭删除框
$('#deleteModal').modal('hide');
//待删除的数据id置空
DELETE_ID = 0;
//更新展示数据,页面刷新
location.reload();
} else {
alert(res.error)
}
}
})
})
}
2.5 数据库获取数据方式对比
想要去数据库中获取数据时:对象/字典
- 对象,当前行的所有数据。
row_object = models.Order.objects.filter(id=uid).first()
row_object.id
row_object.title
- 字典,{“id”:1,“title”:“xx”}
row_dict = models.Order.objects.filter(id=uid).values("id","title").first()
- queryset = [obj,obj,obj,]
queryset = models.Order.objects.all()
- queryset = [ {‘id’:1,‘title’:“xx”},{‘id’:2,‘title’:“xx”}, ]
queryset = models.Order.objects.all().values("id","title")
- queryset = [ (1,“xx”),(2,“xxx”), ]
queryset = models.Order.objects.all().values_list("id","title")