-
Django系列15-员工管理系统实战--订单管理
一. 订单管理:表结构设计
根据表结构的需求，在models.py中创建类（由类生成数据库中的表）。
class Order(models.Model): """ 订单 """ oid = models.CharField(verbose_name="订单号", max_length=64) title = models.CharField(verbose_name="名称", max_length=32) price = models.IntegerField(verbose_name="价格") status_choices = ( (1, "待支付"), (2, "已支付"), ) status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=1) # admin_id admin = models.ForeignKey(verbose_name="管理员", to="Admin", on_delete=models.CASCADE)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
Django命令生成库表
python manage.py makemigrations python manage.py migrate- 1
- 2
二. URL调整
新增对应的 增删改查对应的URL，如下:
# 订单管理 path('order/list/', order.order_list), path('order/add/', order.order_add), path('order/delete/', order.order_delete), path('order/detail/', order.order_detail), path('order/edit/', order.order_edit),- 1
- 2
- 3
- 4
- 5
- 6
三. 后端功能实现
3.1 公用模板
layout.html
3.2 增删改查逻辑实现
order_list.html
import json import random from datetime import datetime from django.shortcuts import render, HttpResponse from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from app01 import models from app01.utils.bootstrap import BootStrapModelForm from app01.utils.pagination import Pagination class OrderModelForm(BootStrapModelForm): class Meta: model = models.Order # fields = "__all__" # fields = [""] exclude = ["oid", 'admin'] def order_list(request): queryset = models.Order.objects.all().order_by('-id') page_object = Pagination(request, queryset) form = OrderModelForm() context = { 'form': form, "queryset": page_object.page_queryset, # 分完页的数据 "page_string": page_object.html() # 生成页码 } return render(request, 'order_list.html', context) @csrf_exempt def order_add(request): """ 新建订单（Ajax请求）""" form = OrderModelForm(data=request.POST) if form.is_valid(): # 订单号：额外增加一些不是用户输入的值（自己计算出来） form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999)) # 固定设置管理员ID，去哪里获取？ form.instance.admin_id = request.session["info"]["id"] # 保存到数据库中 form.save() return JsonResponse({"status": True}) return JsonResponse({"status": False, 'error': form.errors}) def order_delete(request): """ 删除订单 """ uid = request.GET.get('uid') exists = models.Order.objects.filter(id=uid).exists() if not exists: return JsonResponse({"status": False, 'error': "删除失败，数据不存在。"}) models.Order.objects.filter(id=uid).delete() return JsonResponse({"status": True}) def order_detail(request): """ 根据ID获取订单详细 """ # 方式1 """ uid = request.GET.get("uid") row_object = models.Order.objects.filter(id=uid).first() if not row_object: return JsonResponse({"status": False, 'error': "数据不存在。"}) # 从数据库中获取到一个对象 row_object result = { "status": True, "data": { "title": row_object.title, "price": row_object.price, "status": row_object.status, } } return JsonResponse(result) """ # 方式2 uid = request.GET.get("uid") row_dict = models.Order.objects.filter(id=uid).values("title", 'price', 'status').first() if not row_dict: return JsonResponse({"status": False, 'error': "数据不存在。"}) # 从数据库中获取到一个对象 row_object result = { "status": True, "data": row_dict } return JsonResponse(result) @csrf_exempt def order_edit(request): """ 编辑订单 """ uid = request.GET.get("uid") row_object = models.Order.objects.filter(id=uid).first() if not row_object: return JsonResponse({"status": False, 'tips': "数据不存在，请刷新重试。"}) form = OrderModelForm(data=request.POST, instance=row_object) if form.is_valid(): form.save() return JsonResponse({"status": True}) return JsonResponse({"status": False, 'error': form.errors})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
四. 前端页面
因为使用了ajax，是通过弹出子会话框的形式实现，所以都写在一个html页面里面
order_list.html
{% extends 'layout.html' %} {% block content %} <div class="container"> <div style="margin-bottom: 10px"> <input type="button" value="新建订单1" class="btn btn-success" data-toggle="modal" data-target="#myModal"> <input id="btnAdd" type="button" value="新建订单2" class="btn btn-success"> </div> <!-- 订单列表 --> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 订单列表 </div> <!-- Table --> <table class="table table-bordered"> <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 uid="{{ obj.id }}"> <th>{{ obj.id }}</th> <td>{{ obj.oid }}</td> <td>{{ obj.title }}</td> <td>{{ obj.price }}</td> <td>{{ obj.get_status_display }}</td> <td>{{ obj.admin.username }}</td> <td> <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑"> <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- 分页列表 --> <ul class="pagination"> {{ page_string }} </ul> </div> <!-- 新建/编辑 订单（对话框） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <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;position: absolute;"></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> <!-- 删除（对话框） --> <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="margin: 10px 0;"> 删除后，所有关联的相关数据都会被删除。</p> <p style="text-align: right;"> <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button> </p> </div> </div> </div> {% endblock %} {% block js %} <script type="text/javascript"> var DELETE_ID; var EDIT_ID; $(function () { bindBtnAddEvent(); bindBtnSaveEvent(); bindBtnDeleteEvent(); bindBtnConfirmDeleteEvent(); bindBtnEditEvent(); }) function bindBtnAddEvent() { $("#btnAdd").click(function () { // 将正在编辑的ID设置为空 EDIT_ID = undefined; // 清空对话框中的数据 $("#formAdd")[0].reset(); // 设置对话框的标题 $("#myModalLabel").text("新建"); // 点击新建按钮，显示对话框。 $('#myModal').modal('show'); }); } function bindBtnSaveEvent() { $("#btnSave").click(function () { // 清除错误信息 $(".error-msg").empty(); if (EDIT_ID) { // 编辑 doEdit(); } else { // 添加 doAdd(); } }); } function doEdit() { // 向后台发送请求（添加的Ajax请求） $.ajax({ url: "/order/edit/" + "?uid=" + EDIT_ID, // -> /order/edit/?uid=12 type: "post", data: $("#formAdd").serialize(), dataType: "JSON", success: function (res) { if (res.status) { // 清空表单 $("#formAdd")是jQuery对象 -> $("#formAdd")[0] DOM对象 $("#formAdd")[0].reset(); // 关闭对话框 $('#myModal').modal('hide'); // 刷新页面 location.reload(); } else { if (res.tips) { alert(res.tips); } else { // 把错误信息显示在对话框中。 $.each(res.error, function (name, errorList) { $("#id_" + name).next().text(errorList[0]); }) } } } }) } function doAdd() { // 向后台发送请求（添加的Ajax请求） $.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.error, function (name, errorList) { $("#id_" + name).next().text(errorList[0]); }) } } }) } function bindBtnDeleteEvent() { $(".btn-delete").click(function () { // alert("点击了删除"); // 显示删除对话框 $("#deleteModal").modal('show'); // 获取当前行的ID并赋值给全部变量。 DELETE_ID = $(this).attr("uid"); }); } function bindBtnConfirmDeleteEvent() { $("#btnConfirmDelete").click(function () { $.ajax({ url: "/order/delete/", // => /order/delete/?uid=123 type: "GET", data: { uid: DELETE_ID }, dataType: "JSON", success: function (res) { if (res.status) { // 隐藏删除框 // $("#deleteModal").modal('hide'); // 在页面上将当前一行数据删除（js） // $("tr[uid='" + DELETE_ID + "']").remove(); // 要删除的ID制空 // DELETE_ID = 0; // 简单的思路： location.reload(); } else { // 删除失败 alert(res.error); } } }) }); } function bindBtnEditEvent() { $(".btn-edit").click(function () { // 清空对话框中的数据 $("#formAdd")[0].reset(); var uid = $(this).attr("uid"); EDIT_ID = uid; // 发送Ajax去后端获取当前行的相关数据 /order/detail/?uid=123 $.ajax({ url: "/order/detail/", type: "get", data: { uid: uid }, dataType: "JSON", success: function (res) { if (res.status) { // 将数据赋值到对话框中的标签中。 $.each(res.data, function (name, value) { $("#id_" + name).val(value); }) // 修改对话框的标题 $("#myModalLabel").text("编辑"); // 点击编辑，显示对话框 $('#myModal').modal('show'); } else { alert(res.error); } } }) }); } </script> {% endblock %}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
五. 页面测试
订单页面管理
新建页面
编辑页面
删除页面
参考:
- https://www.bilibili.com/video/BV1NL41157ph
-
相关阅读:
Typora + PicGo + 腾讯云COS 配置图床
9.30~10.5新生赛C~J题
浅谈双指针技巧（二）---通过双指针判断链表成环问题
6.2 Restful
十七、【渐变工具组】
为什么有的人把代码写的如此复杂？
模块与组件、模块化与组件化的理解以及react组件的创建
阿里云无影云电脑角色AliyunServiceRoleForGws什么意思？
手把手教你用nodejs+SQL Server2012做增删改查
迭代器模式
- 原文地址：https://blog.csdn.net/u010520724/article/details/126928056