Django項目之Web端電商網站的實戰開發（一）

說明：該篇博客是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝你們！

目錄

一丶項目介紹

二丶電商項目開發流程

三丶項目需求

四丶項目架構概覽

五丶項目數據庫設計

六丶項目框架搭建

---

一丶項目介紹

• 產品：關於Web端的電商網站
• 商業模式：B2C模式 企業對我的
• 設計模式：使用先後端不分離進行項目開發(後端控制前端的效果展現)

前端效果展現

二丶電商項目開發流程

1.流程圖

2.1 前奏
    項目立項：公司BOSS決定作項目
    需求分析：分析客戶的需求
    原型設計：產品經理畫出產品原型圖

2.2 前端
    UI設計：使用PS等工具對產品進行界面設計
    前端設計：根據UI人員設計的圖片，寫成對應的前端頁面

2.3 後端
    架構設計：①模塊劃分，功能架構 ② 開發環境選擇 ③其餘技術 ④部署架構
    數據庫設計：①分析數據表和表字段 ②表關係
    模塊代碼實現和單元測試：①後端開發人員進行分工開發 ②開發完成後給測試人員進行單元測試

2.4 尾聲
    代碼整合：將後端代碼與前端代碼進行耦合合併
    集成測試：將整合後的代碼再次進行測試
    網站發佈：在生產環境進行上線

三丶項目需求

用戶模塊

1. 註冊頁
    1.1 註冊時校驗用戶名是否已被註冊
    1.2 完成用戶信息的註冊
    1.3 給用戶的註冊郵箱發送郵件，用戶點擊郵件中的激活連接完成用戶帳戶的激活
    1.4 城區的區域信息需動態加載

2. 登陸頁
    2.1 實現用戶的登陸功能

3. 用戶中心
    3.1 用戶中心信息頁：顯示登陸用戶的信息，包括用戶名、電話和地址，同時頁面下方顯示出用戶最近瀏覽的商品信息
    3.2 用戶中心地址頁：顯示登陸用戶的默認收件地址，頁面下方的表單能夠新增用戶的收貨地址
    3.3 用戶中心訂單頁：顯示登陸用戶的訂單信息
    3.4 用戶能夠選擇城區、入住時間、離開時間等條件進行搜索

4. 其餘
    4.1 若是用戶已經登陸，頁面頂部顯示登陸用戶的信息

商品相關

1. 首頁
    1.1 動態指定首頁輪播商品信息
    1.2 動態指定首頁活動信息
    1.3 動態獲取商品的種類信息並顯示
    1.4 動態指定首頁顯示的每一個種類的商品(包括圖片商品和文字商品)
    1.5 點擊某一個商品時跳轉到商品的詳情頁面

2. 商品詳情頁
    2.1 顯示出某個商品的詳情信息
    2.2 頁面的左下方顯示出該種類商品的2個新品信息

3. 商品列表頁
    3.1 顯示出某一個種類商品的列表數據，分頁顯示並支持按照默認、價格、和人氣進行排序
    3.2 頁面的左下方顯示出該種類商品的2個新品信息

4. 其餘
    4.1 經過頁面搜索框搜索商品信息

 購物車相關
    1 列表頁和詳情頁將商品添加到購物車
    2 用戶登陸後，首頁，詳情頁，列表頁顯示登陸用戶購物車中商品的數目 
    3 購物車頁面：對用戶購物車中商品的操做。如選擇某件商品，增長或減小購物車中商品的數目

訂單相關
    1 提交訂單頁面：顯示用戶準備購買的商品信息
    2 點擊提交訂單完成訂單的建立
    3 用戶中心訂單頁顯示用戶的訂單信息
    4 點擊支付完成訂單的支付

四丶項目架構概覽

1.頁面圖

2.功能圖

3. 部署圖

五丶項目數據庫設計

1.分析網站頁面所需的參數

註冊頁（register.html）
    ①用戶名
    ②密碼
    ③郵箱

登陸頁（login.html）
    ①用戶名
    ②密碼

用戶中心頁（user_center_site.html）
    ①收件人
    ②詳細地址
    ③郵編
    ④聯繫方式

商品詳情頁（detail.html）
    ①商品名稱
    ②簡介
    ③價格
    ④單位
    ⑤商品庫存
    ⑥商品詳情
    ⑦商品圖片
    ⑧商品種類編號

主頁（index.html）
    ①商品種類名稱 
    ②logo
    ③圖片

商品列表頁（list.html）
    ①商品名稱
    ②商品價格
    ③商品圖片
    ④商品分類

購物車頁（cart.html）
    ①商品圖片
    ②商品名稱
    ③商品SKU（庫存量單位）

提交訂單頁（place_order.html）
    ①地址
    ②支付方式
    ③商品信息
    ④總金額
    ⑤運費
    ⑥商品信息

用戶訂單頁（user_center_order.html）
    ①訂單編號
    ②支付狀態
    ③訂單建立時間

 2.將參數拆分到其所對應的表中

用戶表（df_user）
    ①主鍵ID
    ②用戶名
    ③密碼
    ④郵箱
    ⑤激活標識（是否激活郵箱）
    ⑥權限標識（普通用戶和管理員）

地址表（df_address）
    ①主鍵ID
    ②收件人
    ③收件地址
    ④郵編
    ⑤聯繫方式
    ⑥是否默認（默認收貨地址）
    ⑦用戶ID （外鍵）

商品SKU表（df_goods_sku）
    ①主鍵ID
    ②商品名稱
    ③簡介
    ④價格
    ⑤單位
    ⑥庫存
    ⑦銷量
    ⑧圖片（這個圖片字段只存一張商品封面圖）
    ⑨狀態
    ⑩商品種類ID（外鍵）
    ⑪spu ID（外鍵）

商品種類表（df_goods_type）
    ①主鍵ID
    ②種類名稱
    ③logo
    ④圖片

主頁幻燈片商品表（df_index_banner）
    ①主鍵ID
    ②sku ID （外鍵）
    ③圖片
    ④index （圖片索引值）

主頁促銷活動表（df_index_promotion）
    ①主鍵ID
    ②圖片
    ③活動url地址
    ④index（圖片索引值）

商品SPU表（df_goods）
    ①主鍵ID
    ②名稱
    ③商品詳情

主頁分類商品展現表（df_index_type_goods）
    ①主鍵ID
    ②sku ID （外鍵）
    ③種類ID
    ④展現標識
    ⑤index（圖片索引值）

商品圖片表（df_goods_image）
    ①主鍵ID
    ②圖片
    ③sku ID

訂單商品表（df_order_goods）
    ①主鍵ID
    ②訂單ID （外鍵）
    ③sku ID （外鍵）
    ④商品數量
    ⑤商品價格
    ⑥評論

訂單信息表（df_order_info）
    ①主鍵ID
    ②訂單ID （外鍵）
    ③用戶ID （外鍵）
    ④支付方式
    ⑤總數量
    ⑥總金額
    ⑦運費
    ⑧支付狀態
    ⑨建立時間

六丶項目框架搭建

說明：博主這裏使用開發環境爲Windows7+PyCharm

1.在PyCharm中建立dailyfresh項目，而後再到終端中建立項目應用模塊，以下圖所示

2. 在實際項目開發中應用比較多時，會在項目下建立一個名爲apps的包，並將應用目錄放在該apps下

3.在配置文件settings中註冊應用

• step1 項目配置文件settings中導入sys模塊，添加apps包到系統路徑中，這樣作的目的是在添加應用時不用寫apps.應用名

sys.path.insert(0, os.path.join(BASE_DIR, "apps"))

• step2 註冊剛建立出來的應用 

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'df_cart',
    'df_goods',
    'df_order',
    'df_user'
]

 4.在配置文件settings中配置mysql數據庫

• step1 在mysql中建立dailyfresh數據庫

create database dailyfresh charset=utf8;

• step2 配置數據庫 

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'dailyfresh',
        'USER': 'root',
        'PASSWORD': 'mysql',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

• step3 順便設置語言和時區

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

5.在配置文件settings中配置靜態文件目錄

• step1 在項目目錄下建立static目錄，用於存放前端靜態文件

• step2 在settings配置文件末端將static目錄路徑添加到系統路徑中

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

• step3 將前端資源放到static目錄下

6.在根基urls.py文件設置正則匹配將應用模塊中的urls包含進來

• step1 在根基urls.py文件中進行以下編寫，namespace表示反向解析

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^user/', include('df_user.urls', namespace='user')),  # 用戶模塊
    url(r'^cart/', include('df_cart.urls', namespace='cart')),  # 購物車模塊
    url(r'^order/', include('df_order.urls', namespace='order')),  # 訂單模塊
    url(r'^', include('df_goods.urls', namespace='goods')),  # 商品模塊
]

• step2 在每一個應用模塊中建立urls.py文件，內容以下

# coding:utf-8

from django.conf.urls import url


urlpatterns = [
   
]

7.在項目目錄下建立一個名爲db的python包，在這個包下建立一個base_model.py文件，用做於基類完成數據庫表共有字段

• step1 建立base_model.py文件

• step2 在base_model.py中進行以下編寫

# coding:utf-8
from django.db import models


class BaseModel(models.Model):
    """抽象模型基類"""
    create_time = models.DateTimeField(auto_now_add=True, verbose_name="建立時間")
    update_time = models.DateTimeField(auto_now=True, verbose_name="更新時間")
    isDelete = models.BooleanField(default=False, verbose_name="刪除標記")

    class Meta:
        # 表示爲抽象模型類
        abstract = True

 8.在df_user模塊中的models.py中定義兩個模型類分別是用戶模型類和地址模型類

# -*- coding: utf-8 -*-
from django.db import models
from django.contrib.auth.models import AbstractUser
from db.base_model import BaseModel
# Create your models here.


class User(AbstractUser, BaseModel):
    '''用戶模型類'''
    class Meta:
        db_table = 'df_user'
        verbose_name = '用戶'
        verbose_name_plural = verbose_name


class Address(BaseModel):
    '''地址模型類'''
    user = models.ForeignKey('User', verbose_name='所屬帳戶')
    receiver = models.CharField(max_length=20, verbose_name='收件人')
    addr = models.CharField(max_length=256, verbose_name='收件地址')
    zip_code = models.CharField(max_length=6, null=True, verbose_name='郵政編碼')
    phone = models.CharField(max_length=11, verbose_name='聯繫電話')
    is_default = models.BooleanField(default=False, verbose_name='是否默認')

    class Meta:
        db_table = 'df_address'
        verbose_name = '地址'
        verbose_name_plural = verbose_name

9.在df_goods模塊中的models.py中定義模型類

• step1 在models.py中進行以下編寫

# -*- coding: utf-8 -*-
from django.db import models
from db.base_model import BaseModel
from tinymce.models import HTMLField
# Create your models here.


class GoodsType(BaseModel):
    '''商品類型模型類'''
    name = models.CharField(max_length=20, verbose_name='種類名稱')
    logo = models.CharField(max_length=20, verbose_name='標識')
    image = models.ImageField(upload_to='type', verbose_name='商品類型圖片')

    class Meta:
        db_table = 'df_goods_type'
        verbose_name = '商品種類'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name


class GoodsSKU(BaseModel):
    '''商品SKU模型類'''
    status_choices = (
        (0, '下線'),
        (1, '上線'),
    )
    type = models.ForeignKey('GoodsType', verbose_name='商品種類')
    goods = models.ForeignKey('Goods', verbose_name='商品SPU')
    name = models.CharField(max_length=20, verbose_name='商品名稱')
    desc = models.CharField(max_length=256, verbose_name='商品簡介')
    price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name='商品價格')
    unite = models.CharField(max_length=20, verbose_name='商品單位')
    image = models.ImageField(upload_to='goods', verbose_name='商品圖片')
    stock = models.IntegerField(default=1, verbose_name='商品庫存')
    sales = models.IntegerField(default=0, verbose_name='商品銷量')
    status = models.SmallIntegerField(default=1, choices=status_choices, verbose_name='商品狀態')

    class Meta:
        db_table = 'df_goods_sku'
        verbose_name = '商品'
        verbose_name_plural = verbose_name


class Goods(BaseModel):
    '''商品SPU模型類'''
    name = models.CharField(max_length=20, verbose_name='商品SPU名稱')
    # 富文本類型:帶有格式的文本
    detail = HTMLField(blank=True, verbose_name='商品詳情')

    class Meta:
        db_table = 'df_goods'
        verbose_name = '商品SPU'
        verbose_name_plural = verbose_name


class GoodsImage(BaseModel):
    '''商品圖片模型類'''
    sku = models.ForeignKey('GoodsSKU', verbose_name='商品')
    image = models.ImageField(upload_to='goods', verbose_name='圖片路徑')

    class Meta:
        db_table = 'df_goods_image'
        verbose_name = '商品圖片'
        verbose_name_plural = verbose_name


class IndexGoodsBanner(BaseModel):
    '''首頁輪播商品展現模型類'''
    sku = models.ForeignKey('GoodsSKU', verbose_name='商品')
    image = models.ImageField(upload_to='banner', verbose_name='圖片')
    index = models.SmallIntegerField(default=0, verbose_name='展現順序')

    class Meta:
        db_table = 'df_index_banner'
        verbose_name = '首頁輪播商品'
        verbose_name_plural = verbose_name


class IndexTypeGoodsBanner(BaseModel):
    '''首頁分類商品展現模型類'''
    DISPLAY_TYPE_CHOICES = (
        (0, "標題"),
        (1, "圖片")
    )

    type = models.ForeignKey('GoodsType', verbose_name='商品類型')
    sku = models.ForeignKey('GoodsSKU', verbose_name='商品SKU')
    display_type = models.SmallIntegerField(default=1, choices=DISPLAY_TYPE_CHOICES, verbose_name='展現類型')
    index = models.SmallIntegerField(default=0, verbose_name='展現順序')

    class Meta:
        db_table = 'df_index_type_goods'
        verbose_name = "主頁分類展現商品"
        verbose_name_plural = verbose_name


class IndexPromotionBanner(BaseModel):
    '''首頁促銷活動模型類'''
    name = models.CharField(max_length=20, verbose_name='活動名稱')
    url = models.URLField(verbose_name='活動連接')
    image = models.ImageField(upload_to='banner', verbose_name='活動圖片')
    index = models.SmallIntegerField(default=0, verbose_name='展現順序')

    class Meta:
        db_table = 'df_index_promotion'
        verbose_name = "主頁促銷活動"
        verbose_name_plural = verbose_name

• step2 由於在df_goods模塊中使用了第三方模塊tinymce富文本編輯器因此須要在settings中進行添加應用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
    'df_cart',
    'df_goods',
    'df_order',
    'df_user'
]

• step3 在配置文件末尾添加編輯器的配置

# 富文本編輯器配置
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}

• step4 在根基urls文件中配置編輯器url

url(r'^tinymce/', include('tinymce.urls')),  # 富文本編輯器

10.在df_order模塊中的models.py中定義以下模型類

# -*- coding: utf-8 -*-
from django.db import models
from db.base_model import BaseModel
# Create your models here.


class OrderInfo(BaseModel):
    '''訂單模型類'''
    PAY_METHOD_CHOICES = (
        (1, '貨到付款'),
        (2, '微信支付'),
        (3, '支付寶'),
        (4, '銀聯支付')
    )

    ORDER_STATUS_CHOICES = (
        (1, '待支付'),
        (2, '待發貨'),
        (3, '待收貨'),
        (4, '待評價'),
        (5, '已完成')
    )

    order_id = models.CharField(max_length=128, primary_key=True, verbose_name='訂單id')
    user = models.ForeignKey('df_user.User', verbose_name='用戶')
    addr = models.ForeignKey('df_user.Address', verbose_name='地址')
    pay_method = models.SmallIntegerField(choices=PAY_METHOD_CHOICES, default=3, verbose_name='支付方式')
    total_count = models.IntegerField(default=1, verbose_name='商品數量')
    total_price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name='商品總價')
    transit_price = models.DecimalField(max_digits=10, decimal_places=2,verbose_name='訂單運費')
    order_status = models.SmallIntegerField(choices=ORDER_STATUS_CHOICES, default=1, verbose_name='訂單狀態')
    trade_no = models.CharField(max_length=128, verbose_name='支付編號')

    class Meta:
        db_table = 'df_order_info'
        verbose_name = '訂單'
        verbose_name_plural = verbose_name


class OrderGoods(BaseModel):
    '''訂單商品模型類'''
    order = models.ForeignKey('OrderInfo', verbose_name='訂單')
    sku = models.ForeignKey('df_goods.GoodsSKU', verbose_name='商品SKU')
    count = models.IntegerField(default=1, verbose_name='商品數目')
    price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name='商品價格')
    comment = models.CharField(max_length=256, verbose_name='評論')

    class Meta:
        db_table = 'df_order_goods'
        verbose_name = '訂單商品'
        verbose_name_plural = verbose_name

11. 在settings配置文件中使用django內置的認證系統指定的模型類爲df_user下的User類

# django認證系統指定的模型類
AUTH_USER_MODEL = 'df_user.User'

12.生成遷移文件

13.執行遷移文件

14.查看數據庫

15.運行項目