基於Django的文具管理系統的領用頁面中模仿商城展示寶貝

一、Models.py

class stationery(models.Model):
    name = models.CharField(max_length=40)
    spec = models.CharField(max_length=40, default='--')
    stock_num =  models.IntegerField()
    stat_type = models.ForeignKey('stat_type', to_field='id', related_name='stat_type_name', on_delete=False)
    units = models.CharField(max_length=6, default='個')
    alert_num = models.IntegerField(default=100)
    stat_img = models.ImageField(upload_to='image', default='1.jpg')

    def __str__(self):
        return self.name

二、views.py

@csrf_exempt
def stat_apply_index(request):
    user_list_id=request.session.get('user_list_id')
    print('stat_apply_index1: user_list_id is %s'%(user_list_id))
    full_name=request.session.get('full_name')
    print('stat_apply_index1: full_name is %s' % (full_name))
    orderid=request.session.get('orderid')
    print('stat_apply_index1: orderid is %s' % (orderid))
    stat_types=stat_type.objects.all()

    #print(orderid)
    if user_list_id==None:
        return HttpResponseRedirect('apply_login')
    cart = request.session.get("cart", None)
    carts = order_record_slave.objects.filter(order_record_master_id=orderid)
    if request.method == 'GET':

        if 'id' in request.GET:
            stat_type_id = request.GET.get('id')
            #print(stat_type_id)
            stationerys=stationery.objects.filter(stat_type_id=stat_type_id)
            ######以下是實現分頁
           # paginator = Paginator(stationerys, 20)
            #page = request.GET.get('page', 1)
            #currentPage = int(page)
            #try:
               # print(page)
                #stationerys = paginator.page(page)  # 獲取當前頁碼的記錄
            #except PageNotAnInteger:
                #stationerys = paginator.page(1)  # 如果用戶輸入的頁碼不是整數時,顯示第1頁的內容
            #except EmptyPage:
               # stationerys = paginator.page(paginator.num_pages)  # 如果用戶輸入的頁數不在系統的頁碼列表中時,顯示最後一頁的內容

            #return render(request, 'stationery/stat_apply_index.html', locals())

        else:
            stationerys=order_record_slave.objects.values('stationery__spec').annotate(number=Sum("order_num"),spec=F('stationery__spec'),id=F('stationery_id'), name=F('stationery__name'),stat_img=F('stationery__stat_img'),stock_num=F('stationery__stock_num')).order_by('-number')[:12]
            print(stationerys)
        #return render(request, 'stationery/stat_apply_index.html', {'stationerys': stationerys,'stat_types':stat_types})
        return render(request, 'stationery/stat_apply_index_test.html', {'carts': carts,'stationerys':stationerys,'stat_types':stat_types})
    if request.method=='POST':
        stationery_name=request.POST.get('stationery_name')
        stationerys=stationery.objects.filter(name__icontains=stationery_name)
        #return render(request, 'stationery/stat_apply_index.html', {'stationerys': stationerys,'stat_types':stat_types})
    return render(request,'stationery/stat_apply_index_test.html',{'carts':carts,'stationerys':stationerys,'stat_types':stat_types})

 

三、模板

{% extends 'stationery/stat_apply_base.html' %}
{% block content %}
{% load staticfiles %}

<div  class="row">
    <div class="col-sm-9">

        <ul class="list-inline">
            {% for stat_type in stat_types %}
            <li>
               <a href="stat_apply_index1?id={{ stat_type.id }}"   >{{ stat_type.name  }}</a>
            </li>
          {%  endfor %}
         </ul>

<!--

        {% for stat_type in stat_types %}
        --<a href="stat_apply_index1?id={{ stat_type.id }}"   >{{ stat_type.name  }}</a>
        {%  endfor %}
  -->


        <form method="post" action="stat_apply_index1">
            {% csrf_token %}
            文具搜索：<input type="text" id="stationery_name" name="stationery_name"> <button type="submit" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-question-sign"></span> 搜索
        </button> <a href="stat_apply_index1"   >常用文具</a>
        </form>
<table class="table table-striped table-bordered">

 <tbody>
           {% if stationerys %}
           <tr ">
             {% for stationery in stationerys %}
             <td nid="{{ stationery.id }}" align="center">
                 <img src="{% static '/media/' %}{{ stationery.stat_img}}" alt="picture" height="130" width="170">
                 <p></p>
           <ol class="list-unstyled">
               <li>

            </li>
            <li>
               <font color="blue"> {{ stationery.name }}</font>
            </li>
                <li>
               庫存:{{ stationery.stock_num }}
            </li>
            <li>
               <a onclick="testajax(this);" href="#" >放入購物車</a>
            </li>
           </ol>

           </td>
              {% if forloop.counter|divisibleby:"4"%}
               </tr>
           <tr>
               {% endif %}
            {% endfor %}
           </tr>
 {% endif %}
</tbody>
</table>


    </div>
    <div class="col-sm-3 cart">
<h4 >購物車<span class="glyphicon glyphicon-shopping-cart"></span> 訂單號：{{ request.session.orderid }} </h4>
<table class="table table-striped table-bordered" id="t2">
<thead>
           <tr>
            <th>No.</th>
             <th>文具名稱</th>
              <th>數量</th>


           </tr>
 </thead>
 <tbody >
           {% for cart in carts %}
           <tr>
                <td>{{ forloop.counter }}</td>
               <td>{{ cart.stationery }}</td>
               <td>{{ cart.order_num }}</td>


           </tr>
            {% endfor %}
</tbody>
</table>
      <div align="left" >
<ul>
          <a href="clean_cart" >
              <span class="glyphicon glyphicon-question-sign"></span> 清空</a>
--
           <a href="submit_cart">
          <span class="glyphicon glyphicon-question-sign"></span> 提交</a>
</ul>

</div>
        </div>
 </div>

<script language="JavaScript">

function add_cart(ths) {
       var id=$(ths).parent().parent().attr('nid');
       var orderid="{{ request.session.orderid  }}";
        $('table tbody#cart').html('');

        $.ajax({
            url:'ajax',
            type:'GET',
            data:{id:id, orderid:orderid},
            datatype:'json',
            success:function (ret) {

                // 回調函數 msg是服務器返回的字符串
                console.log(ret);


            }

        })

    }




function testajax(ths){

    //var id=$(ths).parent().parent().attr('nid');
    var id=$(ths).parent().parent().parent().attr('nid');
    var orderid="{{ request.session.orderid  }}";

    //給傳遞的data加一個時間變量，時間由下面的var times獲得，以解決在IE中工作不正常的問題
    var times=new Date().getTime();
    $.ajax({
    type: 'GET',
    url: 'ajax',
    dataType: 'json',
    data:{id:id,orderid:orderid,times:times},
    success: function(ret){
    //查詢成功之後填充表格
    var html = "";
    var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>";
    var tdFoot = "</span></div></td>";
    $("#t2 tr:gt(0)").remove();
    //第一行是table的表格頭不需清除。
    for(var i=0;i<ret.length;i++){
    var countInfo = ret[i];
    var totalCount = countInfo.stationery__name;

    var sucCount = countInfo.order_num;

    html += "<tr>" + tdHead + (i + 1) + tdFoot +
    tdHead + totalCount + tdFoot +
    tdHead + sucCount + tdFoot + "</tr>";
}
$("#t2").append(html);
//將新數據填充到table
}
});
}

</script>
{% endblock %}

四、效果

Caption