Django框架（十一）--子應用管理，電商項目

一、子應用管理

（一）靜態系統

在各自的app當中，創建一個static目錄，並在static下面創建各自app命名的目錄。

子static：

將各自的靜態文件放在各自的子static目錄下的相應位置，在主目錄下面創建主static目錄。

主static：

子static目錄：爲了將各自的靜態文件進行區分，管理。

主static目錄：項目在運行期間，需要的文件。

（二）靜態文件的收集

1. 配置文件修改
2. 執行收集命令
   

選擇確認重寫

收集完成後將配置文件改回來

（三）子模板系統

在各自的app下面創建

settings.py配置

模板文件的使用方式

子路由系統

在各自app當中創建了一個urls.py文件，在主路由文件中使用include導入

目的：方便管理路由

二、電商項目

電商項目（買家/賣家）

1.Buyer頁面修改（模型直接使用Saller中的模型）

2.模型修改

from django.db import models

# Create your models here.
class LoginUser(models.Model):
    email = models.EmailField()
    password = models.CharField(max_length=32)
    username = models.CharField(max_length=32,null=True,blank=True)

    # null針對數據庫，True表示可以爲空，即在數據庫的存儲中可以爲空
    # blank 針對表單，表示在表單中該字段可以不填，但對數據庫沒有影響
    phone_number = models.CharField(max_length=11,null=True,blank=True)
    photo = models.ImageField(upload_to='img',null=True,blank=True)
    age = models.IntegerField(null=True,blank=True)
    gender = models.CharField(max_length=4,null=True,blank=True)
    address = models.TextField(null=True,blank=True)
    # 0賣家 1買家 2管理員
    user_type=models.IntegerField(default=1)

class GoodsType(models.Model):
    type_label=models.CharField(max_length=32)
    type_description=models.TextField()

class Goods(models.Model):
    goods_number = models.CharField(max_length=11,verbose_name='商品編號')
    goods_name = models.CharField(max_length=32,verbose_name='商品名稱')
    goods_price = models.FloatField(verbose_name='價格')
    goods_count = models.IntegerField(verbose_name='數量')
    goods_location = models.CharField(max_length=254,verbose_name='產地')
    goods_safe_date = models.IntegerField(verbose_name='保質期')
    # 0下架 1在售
    goods_status = models.IntegerField(default=1,verbose_name='狀態')
    goods_pro_time = models.DateField(verbose_name='生產日期',auto_now=True)
    picture=models.ImageField(upload_to='img')

    # 類型 一對多
    goods_type=models.ForeignKey(to=GoodsType,on_delete=models.CASCADE,default=1)
    # 店鋪 一對多
    goods_store=models.ForeignKey(to=LoginUser,on_delete=models.CASCADE,default=1)

數據遷移

添加商品類別

3.Saller增加商品頁

視圖

@loginVaild
def goods_add(request):
    goods_type=GoodsType.objects.all()
    if request.method=='POST':
        data=request.POST
        goods=Goods()
        goods.goods_number = data.get('goods_number')
        goods.goods_name = data.get('goods_name')
        goods.goods_price = data.get('goods_price')
        goods.goods_count = data.get('goods_count')
        goods.goods_location = data.get('goods_location')
        goods.goods_safe_date = data.get('goods_safe_date')
        goods.goods_status = 1
        goods.picture = request.FILES.get('picture')
        goods.save()
        # select標籤的value類型是string
        goods_type=request.POST.get('goods_type')
        # 自動強轉
        goods.goods_type=GoodsType.objects.get(id=goods_type)
        user_id = request.COOKIES.get("userid")
        goods.goods_store = LoginUser.objects.get(id=user_id)
        goods.save()
    return render(request,'saller/goods_add.html',locals())

路由

模板

{% extends 'saller/base.html' %}

{% block title %}
  增加商品
{% endblock %}

{% block content %}
  <form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_number" class="form-control form-control-user" placeholder="商品編號">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_name" class="form-control form-control-user" placeholder="商品名稱">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_price" class="form-control form-control-user" placeholder="商品價格">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_count" class="form-control form-control-user" placeholder="數量">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_location" class="form-control form-control-user" placeholder="產地">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_safe_date" class="form-control form-control-user" placeholder="保質期">
  </div>
    商品圖片：
  <div class="form-group" style="height: 50px">
    <input type="file" name="picture" >
  </div>
  <div class="form-group">
     <select name="goods_type" class="btn btn-default dropdown-toggle btn-user btn-block">
         <option value="0" >--請選擇類型--</option>
         {% for one in goods_type %}
              <option value="{{ one.id }}" >{{ one.type_label }}</option>
         {% endfor %}
     </select>
  </div>
  <div style="height: 50px">
    <input type="submit" value="添加" class="btn btn-primary btn-user btn-block">
  </div>
  </form>
{% endblock %}

4.製作Buyer父模板

base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>{% block title %}{% endblock %}</title>
	<link rel="stylesheet" type="text/css" href="/static/buyer/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/buyer/css/main.css">
	<script type="text/javascript" src="/static/buyer/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/buyer/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/buyer/js/slide.js"></script>
  {% block style %}

  {% endblock %}
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">歡迎來到天天生鮮!</div>
			<div class="fr">
				<div class="login_info fl">
					歡迎您：<em>張 山</em>
				</div>
				<div class="login_btn fl">
          <a href="/Buyer/logout/">登出</a>
					<span>|</span>
					<a href="/Buyer/login/">登錄</a>
					<span>|</span>
					<a href="/Buyer/register/">註冊</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="#">用戶中心</a>
					<span>|</span>
					<a href="#">我的購物車</a>
					<span>|</span>
					<a href="#">我的訂單</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="/static/buyer/images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的購物車</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	{% block content %}
  {% endblock %}

	<div class="footer">
		<div class="foot_link">
			<a href="#">關於我們</a>
			<span>|</span>
			<a href="#">聯繫我們</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情鏈接</a>
		</div>
		<p>CopyRight © 2016 北京天天生鮮信息技術有限公司 All Rights Reserved</p>
		<p>電話：010-****888    京ICP備*******8號</p>
	</div>
  {% block script %}
  {% endblock %}
	<script type="text/javascript" src="/static/buyer/js/slideshow.js"></script>
	<script type="text/javascript">
		BCSlideshow('focuspic');
		var oFruit = document.getElementById('fruit_more');
		var oShownum = document.getElementById('show_count');

		var hasorder = localStorage.getItem('order_finish');

		if(hasorder)
		{
			oShownum.innerHTML = '2';
		}

		oFruit.onclick = function(){
			window.location.href = 'list.html';
		}
	</script>
</body>
</html>

index.html繼承

5.修改index頁面路徑

作爲一個web前端頁面，不需要登錄也能訪問，使用域名直接訪問首頁

修改主urls.py文件

修改頭部導航條

• 沒有登錄時，顯示登錄和註冊按鈕
• 登錄後，顯示歡迎語、登出和註冊按鈕
  

6.商品首頁顯示數據

目的：首頁顯示商品，包括類型和類型下的商品

視圖

返回了類型

模板

首先遍歷類型

通過反向查詢，找到該類型下的所有商品

7.增加類型圖片

1. 修改類型表模型
2. 增加類型圖片
3. 修改模板

8.優化index.html

類型下的商品每一行顯示4條

如果商品數量大於等於4條，顯示4條，按照goods_price倒序

如果不足4條，不顯示該類型

可以使用切片

• 如果大於4條，使用切片
• 小於4條，顯示所有

視圖

模板

9.商品類別的顯示更多

給index模板中的顯示更多設置路徑

路由

視圖

import math
def goods_list(request):
    keywords=request.GET.get('keywords')
    goods_type=GoodsType.objects.get(id=keywords)
    goods = goods_type.goods_set.all()
    comment=goods_type.goods_set.order_by('-goods_price')[:math.ceil(len(goods)/5)]
    return render(request,'buyer/goods_list.html',locals())

goods_list模板

{% extends 'buyer/base.html' %}
{% block title %}
  查看更多
{% endblock %}
{% block content %}
  <div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分類</h1>
				<span></span>
				<ul class="subnav">
					<li><a href="#" class="fruit">新鮮水果</a></li>
					<li><a href="#" class="seafood">海鮮水產</a></li>
					<li><a href="#" class="meet">豬牛羊肉</a></li>
					<li><a href="#" class="egg">禽類蛋品</a></li>
					<li><a href="#" class="vegetables">新鮮蔬菜</a></li>
					<li><a href="#" class="ice">速凍食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首頁</a></li>
				<li class="interval">|</li>
				<li><a href="">手機生鮮</a></li>
				<li class="interval">|</li>
				<li><a href="">抽獎</a></li>
			</ul>
		</div>
	</div>
  <div class="breadcrumb">
		<a href="#">全部分類</a>
		<span>></span>
		<a href="#">新鮮水果</a>
	</div>
	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推薦</h3>
				<ul>
          {% for one in comment %}
					<li>
						<a href="#"><img src="/static/{{ one.picture }}"></a>
						<h4><a href="#">{{ one.goods_name }}</a></h4>
						<div class="prize">{{ one.goods_price }}</div>
					</li>
          {% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<div class="sort_bar">
				<a href="#" class="active">默認</a>
				<a href="#">價格</a>
				<a href="#">人氣</a>
			</div>

			<ul class="goods_type_list clearfix">
        {% for good in goods %}
				<li>
					<a href="#"><img src="/static/{{ good.picture }}"></a>
					<h4><a href="#">{{ good.goods_name }}</a></h4>
					<div class="operate">
						<span class="prize">{{ good.goods_price }}</span>
						<a href="#" class="add_goods" title="加入購物車"></a>
					</div>
				</li>
        {% endfor %}
			</ul>

			<div class="pagenation">
				<a href="#">上一頁</a>
				<a href="#" class="active">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="#">下一頁></a>
			</div>
		</div>
	</div>
{% endblock %}