寫在前面

本期內容：基于Django+HTML+CSS+的在線購物商城

實驗環(huán)境：

• vscode或pycharm
• python(3.11.4)
• django
• celery
• dj-static

代碼下載地址：https://download.csdn.net/download/m0_68111267/88718630

實驗目標

使用Django+HTML+CSS開發(fā)一個在線購物商城系統(tǒng)，該在線購物商城分為四大部分：購物界面、購物車、訂單界面以及后臺?？梢栽诤笈_實現(xiàn)商品的添加、修改與刪除操作，在購物界面實時展示后臺添加的商品，當加入購物車后，可以查看購物車里的內容，最后付款時跳到結算訂單界面。

實驗內容

安裝依賴庫

在正式開始之前，我們需要先安裝本次實戰(zhàn)項目所依賴的庫：

• django：一個高級的Python Web框架。
• celery：一個分布式任務隊列框架。
• dj-static：一個用于在Django應用程序中提供靜態(tài)文件的庫。

安裝命令：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple celery
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple dj-static

1.創(chuàng)建項目

1.我們先使用以下命令創(chuàng)建一個django項目：

django-admin startproject myshop

2.然后我們使用以下命令創(chuàng)建三個主要的項目app（購物界面、購物車界面、訂單結算界面）

django-admin startapp cart
django-admin startapp shop
django-admin startapp orders

3.整個項目的結構如下

注意你的myshop此時應該沒有"media"這個文件夾（這個文件夾后面會出現(xiàn)滴）

2.系統(tǒng)設置

1.打開myshop中的myshop文件夾，然后打開settings.py配置系統(tǒng)設置

修改以下幾處地方

添加以下內容

2.打開/myshop/myshop/urls.py文件，添加以下內容

3.新建celery.py文件，添加以下內容

import os
from celery import Celery
from django.conf import settings

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myshop.settings')

app = Celery('myshop')

app.config_from_object('django.conf:settings')
app.autodiscover_tasks(lambda: settings.INSTALLED_APPS)

這段代碼的作用是創(chuàng)建一個Celery應用程序（app）并配置它。

具體來說，它做了以下幾件事情：

1. 設置默認的Django settings模塊為myshop.settings。這使得Celery應用程序能夠訪問Django項目的配置信息。

2. 創(chuàng)建一個名為app的Celery實例，參數(shù)為myshop。這個實例將用于定義和管理任務。

3. 使用app.config_from_object方法將Django項目的配置應用到app實例中。這意味著app實例會使用項目中的配置信息，如Broker URL、任務序列化方式等。

4. 使用app.autodiscover_tasks方法自動發(fā)現(xiàn)INSTALLED_APPS中的任務模塊。這使得app實例能夠找到并加載在Django項目中定義的任務。

3.購物界面

1. 整個購物界面的框架如下：

• static：存放了靜態(tài)資源，包括css渲染文件以及img圖片文件。
• templates：存放django項目中的html模版文件的目錄。
• shop：shop中的product存放購物界面，base.html是購物界面的基本界面。
• _ _init_ _.py：Python包的標識和初始化文件，用于控制包的導入和初始化行為。
• admin.py：用于定義和配置django的后臺管理界面。
• models.py：用于定義和配置數(shù)據(jù)庫模型。
• test.py：用于編寫和運行單元測試。（咱們用不到）
• urls.py：用于配置路由。
• views.py：用于定義視圖函數(shù)或類視圖。

2. 雙擊打開admin.py，填入以下內容

from django.contrib import admin
from .models import Category, Product

class CategoryAdmin(admin.ModelAdmin):
    list_display = ['name', 'slug']
    prepopulated_fields = {'slug': ('name',)}
admin.site.register(Category, CategoryAdmin)


class ProductAdmin(admin.ModelAdmin):
    list_display = ['name', 'slug', 'category', 'price', 'stock', 'available', 'created', 'updated']
    list_filter = ['available', 'created', 'updated', 'category']
    list_editable = ['price', 'stock', 'available']
    prepopulated_fields = {'slug': ('name',)}
admin.site.register(Product, ProductAdmin)

這段代碼是用于在Django的管理界面中注冊兩個模型類Category和Product，以便可以在后臺管理界面中對它們進行管理。

首先，代碼從django.contrib模塊中導入了admin模塊，該模塊包含了Django管理界面的相關功能。

然后，定義了一個繼承自admin.ModelAdmin的CategoryAdmin類，該類用于定義Category模型在管理界面中的展示和操作方式。list_display屬性指定了在列表中顯示的字段，prepopulated_fields屬性用于自動填充slug字段。

接著，在admin.site.register函數(shù)中將Category模型和CategoryAdmin類進行注冊，以便在管理頁面中顯示和管理Category模型的數(shù)據(jù)。

接下來，定義了一個繼承自admin.ModelAdmin的ProductAdmin類，該類用于定義Product模型在管理界面中的展示和操作方式。list_display屬性指定了在列表中顯示的字段，list_filter屬性用于添加過濾器，list_editable屬性指定可以直接在列表中編輯的字段，prepopulated_fields屬性用于自動填充slug字段。

最后，通過admin.site.register函數(shù)將Product模型和ProductAdmin類進行注冊，以便在管理頁面中顯示和管理Product模型的數(shù)據(jù)。

通過以上代碼，Category和Product模型的數(shù)據(jù)將在Django管理界面中以指定的方式進行展示和管理。

3. 打開 models.py文件，填入以下內容

from django.db import models
from django.urls import reverse


class Category(models.Model):
    name = models.CharField(max_length=200, db_index=True)
    slug = models.SlugField(max_length=200, db_index=True, unique=True)

    class Meta:
        ordering = ('name',)
        verbose_name = 'category'
        verbose_name_plural = 'categories'

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('shop:product_list_by_category', args=[self.slug])


class Product(models.Model):
    category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
    name = models.CharField(max_length=200, db_index=True)
    slug = models.SlugField(max_length=200, db_index=True)
    image = models.ImageField(upload_to='products/%Y/%m/%d', blank=True)
    description = models.TextField(blank=True)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    stock = models.PositiveIntegerField()
    available = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ('-created',)
        index_together = (('id', 'slug'),)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('shop:product_detail', args=[self.id, self.slug])

這段代碼定義了兩個模型類：Category和Product。

Category模型類定義了商品類別的屬性和行為，包括name（類別名）和slug（類別的URL標識符）。它還定義了Meta類，用于指定模型對象在數(shù)據(jù)庫中的排序方式和在管理界面中的顯示方式。__str__方法用于返回對象的字符串表示，get_absolute_url方法用于生成該對象在網(wǎng)站中的URL。

Product模型類定義了商品的屬性和行為，包括category（商品所屬的類別，使用外鍵關聯(lián)到Category模型），name（商品名），slug（商品的URL標識符），image（商品圖片），description（商品描述），price（商品價格），stock（商品庫存數(shù)量），available（商品是否可用），created（商品創(chuàng)建時間），updated（商品更新時間）。它也定義了Meta類，用于指定模型對象在數(shù)據(jù)庫中的排序方式和在管理界面中的顯示方式。__str__方法用于返回對象的字符串表示，get_absolute_url方法用于生成該對象在網(wǎng)站中的URL。

這兩個模型類之間通過外鍵關聯(lián)建立了關系，一個Category可以有多個Product，而一個Product只能屬于一個Category。通過related_name屬性，可以通過Category對象反向查詢到與之關聯(lián)的Product對象。

此外，這兩個模型類都定義了Meta類用于指定模型的排序方式和其他元數(shù)據(jù)。

通過以上代碼，實現(xiàn)了Category和Product模型的定義，用于存儲和管理商品的類別和具體信息。

4. 打開urls.py文件，填入以下內容

from django.urls import path
from . import views

urlpatterns = [
    path('', views.product_list, name='product_list'),
    path('<str:category_slug>/', views.product_list, name='product_list_by_category'),
    path('<int:id>/<str:slug>/', views.product_detail, name='product_detail'),
]
app_name = 'myshop'

這段代碼定義了URL路由規(guī)則，將URL路徑映射到對應的視圖函數(shù)。

第一行導入了path函數(shù)和views模塊。

接下來，urlpatterns是一個列表，其中包含了多個URL路徑和對應的視圖函數(shù)的映射關系。

第一個URL路徑是空字符串，對應的視圖函數(shù)是product_list，并命名為’product_list’。這意味著當用戶訪問網(wǎng)站的根路徑時，會調用product_list視圖函數(shù)處理請求。

第二個URL路徑包含一個動態(tài)參數(shù)category_slug，對應的視圖函數(shù)也是product_list，并同樣命名為’product_list_by_category’。這意味著當用戶訪問類似于"/category_slug/"的URL路徑時，會調用product_list視圖函數(shù)處理請求，并將category_slug作為參數(shù)傳遞給該函數(shù)。

第三個URL路徑包含兩個動態(tài)參數(shù)id和slug，對應的視圖函數(shù)是product_detail，并命名為’product_detail’。這意味著當用戶訪問類似于"/id/slug/"的URL路徑時，會調用product_detail視圖函數(shù)處理請求，并將id和slug作為參數(shù)傳遞給該函數(shù)。

最后一行是為該應用程序指定命名空間，命名為’myshop’。這可以在其他地方使用該命名空間來引用該應用程序的URL。

5. 打開views.py文件，填入以下內容

from django.shortcuts import render, get_object_or_404
from .models import Category, Product
from cart.forms import CartAddProductForm


def product_list(request, category_slug=None):
    category = None
    categories = Category.objects.all()
    products = Product.objects.filter(available=True)
    if category_slug:
        category = get_object_or_404(Category, slug=category_slug)
        products = products.filter(category=category)
    return render(request, 'shop/product/list.html', {'category': category,
                                                      'categories': categories,
                                                      'products': products})


def product_detail(request, id, slug):
    product = get_object_or_404(Product, id=id, slug=slug, available=True)
    cart_product_form = CartAddProductForm()
    return render(request,
                  'shop/product/detail.html',
                  {'product': product,
                   'cart_product_form': cart_product_form
                   })

這段代碼定義了用于處理產(chǎn)品列表和產(chǎn)品詳情的視圖函數(shù)。

第一個視圖函數(shù)product_list接收一個可選參數(shù)category_slug，并根據(jù)該參數(shù)過濾產(chǎn)品列表。首先，它會獲取所有的分類對象，并將其存儲在categories變量中。接下來，它會獲取所有available為True的產(chǎn)品，并將其存儲在products變量中。如果category_slug參數(shù)不為空，它會通過調用get_object_or_404函數(shù)根據(jù)slug獲取對應的分類對象，并將其存儲在category變量中。然后，它會將products按照分類過濾，并傳遞給模板渲染。最后，它會使用render函數(shù)將模板’templates/shop/product/list.html’渲染成HTML響應，傳遞給客戶端。

第二個視圖函數(shù)product_detail接收兩個參數(shù)id和slug，并根據(jù)這兩個參數(shù)獲取對應的產(chǎn)品對象。如果找不到對應的產(chǎn)品對象，會返回404錯誤頁面。然后，它會創(chuàng)建一個CartAddProductForm對象，并將產(chǎn)品對象和表單對象傳遞給模板渲染。最后，它會使用render函數(shù)將模板’templates/shop/product/detail.html’渲染成HTML響應，傳遞給客戶端。

6. 打開base.html文件，填入以下內容

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{% block title %}My shop 我的商店{% endblock %}</title>
    <link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
    <div id="header">
        <a href="/" class="logo">My shop 我的商店</a>
    </div>
    <div id="subheader">
        <div class="cart">
            {% with total_items=cart|length %}
                {% if cart|length > 0 %}
                    Your cart: 
                    <a href="{% url "cart:cart_detail" %}">
                        {{ total_items }} item{{ total_items|pluralize }}, ${{ cart.get_total_price }}
                    </a>
                {% else %}
                    Your cart is empty.
                {% endif %}
            {% endwith %}
        </div>
    </div>
    <div id="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

這段代碼是一個基本的模板，用于渲染整個網(wǎng)頁的結構。下面對其中的部分代碼進行解析：

• {% load static %}：加載靜態(tài)文件標簽，用于引入靜態(tài)文件。

• <link href="{% static "css/base.css" %}" rel="stylesheet">：引入名為"css/base.css"的靜態(tài)文件，用于樣式渲染。

• <title>{% block title %}My shop 我的商店{% endblock %}</title>：定義頁面標題。這里使用了模板繼承的特性，block標簽用于定義一個可被子模板繼承和覆蓋的區(qū)域。

• <a href="/" class="logo">My shop 我的商店</a>：設置網(wǎng)站的logo鏈接，點擊后返回首頁。

• <div class="cart">...</div>：展示購物車信息。此處使用了模板變量和模板標簽進行條件判斷，根據(jù)購物車中的商品數(shù)量和總價格來顯示不同的內容。

• <div id="content">{% block content %}{% endblock %}</div>：定義頁面內容區(qū)域，使用模板繼承的特性，子模板可以在其中定義自己的內容。

這段代碼是一個基礎模板，子模板可以通過繼承此模板并在{% block content %}{% endblock %}區(qū)域填充內容來渲染他們自己的頁面。

7. 還有details.html和list.html，由于代碼太多，博主就不放出來了，需要代碼的小伙伴可以下載后查看哦~

4.購物車界面

項目結構如下：

5.訂單界面

項目結構如下：

6.運行項目

1.購物界面

2.購物車界面

3.結算界面

4.后臺界面

寫在后面

我是一只有趣的兔子，感謝你的喜歡！文章來源地址http://www.zghlxwxcb.cn/news/detail-781825.html

到了這里，關于Web實戰(zhàn)丨基于django+html+css的在線購物商城的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！