07-项目实战-订单列表

# 1. 依赖工具类: bootstrap.py
 

1. 创建订单表

# APP-->models.py
 
from django.db import models
 
class Order(models.Model):
    order_id = models.CharField(verbose_name="订单号", max_length=64)  # 字符串
    commodity_id = models.CharField(verbose_name="商品", max_length=32)
    num = models.IntegerField(verbose_name="数量")  # 整型
    account = models.DecimalField(verbose_name="价格", max_digits=10, decimal_places=2)  # 小数:最大10位,保留小数后两位
    create_time = models.DateTimeField(verbose_name="下单时间")  # 日期
    depart = models.ForeignKey(verbose_name="配送类型", to="Home", to_field="id", on_delete=models.CASCADE)
 
    attribute_choices = (
        (1, "自营"),
        (2, "联营")
    )
    attribute = models.SmallIntegerField(verbose_name="属性", choices=attribute_choices) #单选
 
# python manage.py makemigrations
# python manage.py migrate

2. 创建路由(项目-->url.py)

 
 # 订单列表
 
from bbc_list.views import login, home_page,order
 
urlpatterns = [
    path("order/list/", order.order_list),
    path("order/add/", order.order_add),
    path("order/model/add/", order.order_model_add),
    path("order/<int:nid>/update/", order.order_update),
    path("order/<int:nid>/delete/", order.order_delete),
]

3. 将form封装到其他文件

# APP->utils->form.py
 
########ModelForm实例#######
from django import forms
 
from bbc_list import models
from bbc_list.utils.bootstrap import BootStrapModelForm
 
 
class OrderModelForm(BootStrapModelForm):
    # 重新添加效验
    order_id = forms.CharField(min_length=3,
                               label="订单号",
                               widget=forms.TextInput(attrs={"class": "form-control"}))
 
    class Meta:
        model = models.Order  # 获取数据库Order类的校验规则
 
        fields = ["order_id", 'commodity_id', 'num', 'account', 'create_time', 'depart', 'attribute']  # 获取表头
 

4. 编写视图函数

# app-->views-->order.py
 
from django.shortcuts import render, redirect
 
from bbc_list import models
from bbc_list.utils.form import OrderModelForm
 
 
def order_list(request):
    """订单列表"""
 
    # 获取所有订单
    queryset = models.Order.objects.all()
 
    # 创建数据库时,设置了hoices(元祖套元祖),可以用以下方式获取原始值
    # i.get_gender_display()  # get_字段名称_display()
    # print(i.depart_id) # 获取数据库中存储右连接的那个字段值
    # print(i.depart.title)  # 根据id自动去关联的表中获取那一行数据depart对象
    # for i in queryset:
    #     print(i.depart_id)
    #     print(i.depart.title)
 
    from bbc_list.utils.pagemtion import Pagination
    page_object = Pagination(request, queryset, page_size=5)
    context = {
        "queryset": page_object.page_queryset,
        "page_string": page_object.html()
    }
 
    return render(request, "order_list.html", context)
 
 
def order_add(request):
    """添加订单"""
    if request.method == "GET":
        context = {
            'attribute_choices': models.Order.attribute_choices,  # 获取属性的元祖
            'depart_list': models.Home.objects.all()  # 获取首页标题
        }
        return render(request, "order_add.html", context)
 
    # 获取用户提交的数据
    order_id = request.POST.get("order_id")
    commodity_id = request.POST.get("commodity_id")
    num = request.POST.get("num")
    account = request.POST.get("account")
    create_time = request.POST.get("create_time")
    depart_id = request.POST.get("depart")
    attribute = request.POST.get("attribute")
 
    # 添加到数据库
    models.Order.objects.create(order_id=order_id, commodity_id=commodity_id, num=num,
                                account=account, create_time=create_time, depart_id=depart_id, attribute=attribute)
 
    # 返回到订单列表
    return redirect("/order/list/")
 
 
# 使用ModelForm进行添加列表
# 需要另写一个文件-util-->form.py  用来放置modelform
 
def order_model_add(request):
    """添加用户"""
    """modelForm初始"""
    if request.method == "GET":
        form = OrderModelForm()
 
        return render(request, "order_model_add.html", {"form": form})
 
    form = OrderModelForm(request.POST)
    if form.is_valid():  # 逐一判断,是否为空
        # 如果数据合法,需要保存到数据库
        # {'order_id': '通用模板', 'commodity_id': '666666', 'num': 1, 'account': Decimal('12'),}
        # print(form.cleaned_data)  # 打印数据
        form.save()  # 上面类里保存的那个类就存到那个类里    class Meta: model = models.Order
        return redirect("/order/list/")
    # 效验失败[在页面上显示错误信息]
    # print("form.errors=",form.errors) # 所有错误信息
    return render(request, "order_model_add.html", {"form": form})
 
 
def order_update(request, nid):
    """修改订单"""
    row_object = models.Order.objects.filter(id=nid).first()
 
    # UserModelForm(instance=row_object) 默认把值显示出来
    if request.method == "GET":
        form = OrderModelForm(instance=row_object)
        return render(request, "order_update.html", {"form": form})
 
    form = OrderModelForm(data=request.POST, instance=row_object)  # 获取数据
 
    if form.is_valid():
        form.save()
        return redirect("/order/list/")
    return render(request, "order_update.html", {"form": form})
 
 
def order_delete(request, nid):
    """删除订单"""
    models.Order.objects.filter(id=nid).delete()
    return redirect("/order/list/")

5. 编写html

# templates-->prder_list.html
 
{% extends 'one.html' %}
 
{% block content %}
<div class="container">
    <div style="margin-bottom:10px;">
        <a class="btn btn-success" href="/order/add/">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建用户</a>
 
        <a class="btn btn-success" href="/order/model/add/">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建用户ModelForm</a>
    </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>
                <th>属性</th>
                <th>操作</th>
 
            </tr>
            </thead>
            <tbody>
            {% for obj in queryset %}
            <tr>
                <th>{{ obj.id }}</th>
                <td>{{ obj.order_id }}</td>
                <td>{{ obj.commodity_id }}</td>
                <td>{{ obj.num }}</td>
                <td>{{ obj.account }}</td>
                <td>{{ obj.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>{{ obj.get_attribute_display }}</td>
                <td>{{ obj.depart.title }}</td>
                <td>
                    <a class="btn btn-primary btn-xs" href="/order/{{ obj.id }}/update">编辑</a>
                    <a class="btn btn-danger btn-xs" href="/order/{{ obj.id }}/delete">删除</a>
                </td>
            </tr>
            {% endfor %}
 
            </tbody>
        </table>
    </div>
 
     <ul class="pagination">
        {{ page_string }}
    </ul>
</div>
 
{% endblock %}
 

# order_add.html
 
{% extends 'one.html' %}
 
{% load static %}
 
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css '%}">
 
{% endblock %}
 
{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">新建用户</h3>
        </div>
        <div class="panel-body">
            <form method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label>订单号</label>
                    <input type="text" class="form-control" placeholder="订单号" name="order_id">
                </div>
                <div class="form-group">
                    <label>商品</label>
                    <input type="text" class="form-control" placeholder="商品" name="commodity_id">
                </div>
                <div class="form-group">
                    <label>数量</label>
                    <input type="text" class="form-control" placeholder="数量" name="num">
                </div>
                <div class="form-group">
                    <label>价格</label>
                    <input type="text" class="form-control" placeholder="价格" name="account">
                </div>
                <div class="form-group">
                    <label>下单时间</label>
                    <input id="dt" type="text" class="form-control" placeholder="下单时间" name="create_time">
                </div>
                <div class="form-group">
                    <label>属性</label>
                    <select class="form-control" name="attribute">
                        {% for item in attribute_choices %}
                        <option value="{{ item.0 }}">{{ item.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>配送类型</label>
                    <select class="form-control" name="depart">
                        {% for item in depart_list %}
                        <option value="{{ item.id }}">{{ item.title }}</option>
                        {% endfor %}
                    </select>
                </div>
 
 
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>
 
 
{% endblock %}
 
{% block js %}
<script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
   $(function(){
        $('#dt').datetimepicker({
            language:'zh-CN',
            format: 'yyyy-mm-dd', //设置日期格式
            minView: "month",//设置只显示到月份
            todayBtn:"true"
            });
    })
 
 
</script>
 
{% endblock %}
 

# order_modael_ad.html
 
{% extends 'one.html' %}
 
{% load static %}
 
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css'%}">
{% endblock %}
 
{% block content %}
 
<div class="content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                新建用户
            </h3>
        </div>
        <div class="panel-body">
            <!--            novalidate: 贵安必浏览器效验-->
            <form method="post" novalidate>
                {% csrf_token %}
 
                {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label }}</label>
                    <!--                    <input type="text" class="form-control" placeholder="姓名" name="user">-->
                    {{ field }}
                    <span style="color:red;">{{ field.errors.0 }}</span>
                </div>
                {% endfor %}
 
                <button type="submit" class="btn btn-primary">提 交</button>
            </form>
        </div>
    </div>
</div>
 
{% endblock %}
 
{% block js %}
<script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
    $(function(){
        $('#id_create_time').datetimepicker({
            language:'zh-CN',
            format: 'yyyy-mm-dd', //设置日期格式
            minView: "month",//设置只显示到月份
            todayBtn:"true"
            });
    })
 
</script>
 
{% endblock %}

# order_update.html
 
{% extends 'one.html' %}
 
{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">编辑订单</h3>
        </div>
        <div class="panel-body">
            <!--            novalidate: 关掉浏览器的校验-->
            <form method="post" novalidate>
                {% csrf_token %}
 
                {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label}}</label>
                    <!--                    <input type="text" class="form-control" placeholder="姓名" name="user">-->
                    {{ field }}
                    <span style="color:red;">{{ field.errors.0 }}</span>
                </div>
                {% endfor %}
 
                    <button type="submit" class="btn btn-primary">提 交</button>
            </form>
 
        </div>
    </div>
</div>
 
{% endblock %}