Django开发员工管理系统：订单管理（初学，第五天）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_65788436/article/details/145883830

本篇最终实现

1.创建表

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)

终端依次运行命令来创建表

python manage.py makemigrations
python manage.py migrate

在mysql中查看，创建成功

2.编写url和视图函数

3.HTML

在模板文件中的导航条中，增加订单管理

效果

order_list.html(初步编写，后续再添加代码)

效果

4.添加模态框

在手册中找一个样式，把代码复制过来

实现点击按钮，弹出模态框，有两种方式，具体如下（注意id要对应）

一种是添加：data-bs-toggle="modal" data-bs-target="#myModal"

另一种是指定id然后用JavaScript

效果

点击弹出模态框

5.编写from表单（显示到模态框中）

在视图函数中导入并使用

在html中放入表单代码

效果

对于新建订单，我们不希望输入订单号，这是可以修改form表单

效果

6.编写模态框中的“保存”按钮

第一步：先把错误信息展示出来

<script type="text/javascript">

    $(function () {
            bindBtnAddEvent();
            bindBtnSaveEvent();
        })

    function bindBtnAddEvent() {
            $("#btnAdd").click(function () {

                // 点击新建按钮，显示对话框。
                $('#myModal').modal('show');
            });
        }

    function bindBtnSaveEvent() {
            $("#btnSave").click(function () {
                // 清除错误信息
                $(".error-msg").empty();

                $.ajax({
                    url: '/order/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("创建成功");
                        } else {
                            $.each(res.error, function (name, errorList) {
                                $("#id_" + name).next().text(errorList[0]);
                            })
                        }
                    }
                })
            })
        }

</script>

添加url

编写视图函数