🚀 ==继续上节Ajax案例进行==

  • 在任务提交页面下方显示提交的任务列表

    image-20231207092223275

  • 提交成功后，弹出“添加成功”的弹窗，点击弹窗中的确定，会刷新页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //该功能实现可以使用js语法
    success:function(res){
        if(res.status){
            // alert弹窗
            alert("添加成功！");
            // 使用js实现页面刷新
            location.reload();
        }else{
            $.each(res.error, function (name,data){
                {#console.log(name,data)#}
                    $("#id_" + name).next().text(data[0]);
                })

​ image-20231207092608056

1、订单管理

1.1 表结构

image-20231207094307430

  • 表结构设计

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class Order(models.Model):
        """工单表"""
        oid = models.CharField(verbose_name="订单号", max_length=64)
        title = models.CharField(verbose_name="名称", max_length=32)
        price = models.DecimalField(verbose_name='价格', max_digits=10, decimal_places=2, default=0)
        status_choices = (
            (1,"待支付"),
            (2,"已支付"),
        )
        status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=1)
        user_admin = models.ForeignKey(verbose_name="负责人", to="Admin", on_delete=models.CASCADE)

1.2 Ajax显示对话框

  • 从Bootstrap手册中导入 弹出模态框的模板

  • 可以使用Ajax激活，当点击新建按钮时，弹出对话框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {% block js %}
        <script type="text/javascript">
            $(function () {
                bindBtnAddEvent();
            })
            
            function bindBtnAddEvent() {
                $("#btnAdd").click(function () {
                    // 点击新建按钮，显示对话框,myModal是对话框id
                    $('#myModal').modal('show')
                });
            }
        </script>
    {% endblock %}

1.3 新建订单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@csrf_exempt
def order_add(request):
    """新建订单"""
    form = OrderModelForm(data=request.POST)
    if form.is_valid():
        # 订单号：由于在表单中，oid是没有自己写入的，需要动态生成
        form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))
        # 获取当前登录的管理员id
        form.instance.user_admin_id = request.session["info"]["id"]
        # 保存到数据库
        form.save()

        return JsonResponse({"status": True, "data": [1, 2, 3]})
        # 2. 如果出错，则后端返回错误信息
    return JsonResponse({"status": False, "error": form.errors})

  • HTML部分的关于弹出框的一些设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    success:function(res){
            if(res.status){
                // alert弹窗
                alert("添加成功！");
                // 使用js实现页面刷新
                //location.reload();
                // 如果保持弹出输入框不关闭，且清空输入框内容
                {#$("#addForm")[0].reset();#}
                // 关闭弹出框
                $('#myModal').modal('hide')
            }else{
                $.each(res.error, function (name,data){
                    {#console.log(name,data)#}
                    $("#id_" + name).next().text(data[0]);
                })
    	}
    }

1.4 删除订单

  • 点击删除，弹出警告框，确认是否删除

​ image-20231208163722575

  • 点击确定，可以删除对应的订单号

    • 实现方式：在js中添加全局变量，并且在删除按钮上添加uid变量，这样点击不同订单的删除，就可以获取对应的id值

      1
      <input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-sm btn-delete" value="删除">

      image-20231208164703525

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      function bindBtnConfirmDeleteEvent() {
          $("#btnConfirmDelete").click(function () {
              console.log("点击了")
              //点击确认删除按钮，将全局变量中设置的那个要删除ID发送到后台
              $.ajax({
                  url:"/order/delete/",
                  type:"GET",
                  data: {
                      uid:DELETE_ID,
                  },
                  success: function (res){
                      if(res.status){
                          // alert弹窗
                          alert("删除成功！");
                          // 使用js实现页面刷新
                          location.reload();
                      }else{
                          //删除失败
                          alert(res.error)
                      }
                  }
              })
          });
      }

    • 获取id后，在数据库中找到对应的数据并删除

      1
      2
      3
      4
      5
      6
      7
      8
      9
      def order_delete(request):
          """删除订单"""
          uid = request.GET.get('uid')
          print(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})

1.5 编辑订单

1
2
# row_dict返回的是字典,因为在filter后面加上values是返回字典类型
  row_dict = models.Order.objects.filter(id=uid).values("title","price","status").first()

  • 根据id获取订单详情

    1
    2
    3
    4
    5
    6
    7
    8
    def order_detail(request):
        """根据id获取订单详细"""
        uid = request.GET.get('uid')
        # row_dict返回的是字典
        row_dict = models.Order.objects.filter(id=uid).values("title", "price", "status").first()
        if not row_dict:
            return JsonResponse({"status": False, "error": "数据不存在"})
        return JsonResponse({"status": True, "data": row_dict})
image-20231211104334037