AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Web实战丨基于django+html+css的在线购物商城

2024-06-11 604
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Web实战丨基于django+html+css的在线购物商城

写在前面

本期内容：基于Django+HTML+CSS+的在线购物商城


实验环境：


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


实验目标

使用Django+HTML+CSS开发一个在线购物商城系统，该在线购物商城分为四大部分：购物界面、购物车、订单界面以及后台。可以在后台实现商品的添加、修改与删除操作，在购物界面实时展示后台添加的商品，当加入购物车后，可以查看购物车里的内容，最后付款时跳到结算订单界面。

实验内容

安装依赖库

在正式开始之前，我们需要先安装本次实战项目所依赖的库：

  • django：一个高级的Python Web框架。
  • celery：一个分布式任务队列框架。
  • dj-static：一个用于在Django应用程序中提供静态文件的库。

安装命令：

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.创建项目

1.我们先使用以下命令创建一个django项目：

django-admin startproject myshop
• 1

2.然后我们使用以下命令创建三个主要的项目app（购物界面、购物车界面、订单结算界面）

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

3.整个项目的结构如下

注意你的myshop此时应该没有"media"这个文件夹（这个文件夹后面会出现滴）

2.系统设置

1.打开myshop中的myshop文件夹，然后打开settings.py配置系统设置

修改以下几处地方

添加以下内容

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)

这段代码的作用是创建一个Celery应用程序（app）并配置它。

具体来说，它做了以下几件事情：

  1. 设置默认的Django settings模块为myshop.settings。这使得Celery应用程序能够访问Django项目的配置信息。
  2. 创建一个名为app的Celery实例，参数为myshop。这个实例将用于定义和管理任务。
  3. 使用app.config_from_object方法将Django项目的配置应用到app实例中。这意味着app实例会使用项目中的配置信息，如Broker URL、任务序列化方式等。
  4. 使用app.autodiscover_tasks方法自动发现INSTALLED_APPS中的任务模块。这使得app实例能够找到并加载在Django项目中定义的任务。

3.购物界面

  1. 整个购物界面的框架如下：

  • static：存放了静态资源，包括css渲染文件以及img图片文件。
  • templates：存放django项目中的html模版文件的目录。
  • shop：shop中的product存放购物界面，base.html是购物界面的基本界面。
  • _ _init_ _.py：Python包的标识和初始化文件，用于控制包的导入和初始化行为。
  • admin.py：用于定义和配置django的后台管理界面。
  • models.py：用于定义和配置数据库模型。
  • test.py：用于编写和运行单元测试。（咱们用不到）
  • urls.py：用于配置路由。
  • views.py：用于定义视图函数或类视图。
  1. 双击打开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函数中将Category模型和CategoryAdmin类进行注册，以便在管理页面中显示和管理Category模型的数据。


接下来，定义了一个继承自admin.ModelAdmin的ProductAdmin类，该类用于定义Product模型在管理界面中的展示和操作方式。list_display属性指定了在列表中显示的字段，list_filter属性用于添加过滤器，list_editable属性指定可以直接在列表中编辑的字段，prepopulated_fields属性用于自动填充slug字段。


最后，通过admin.site.register函数将Product模型和ProductAdmin类进行注册，以便在管理页面中显示和管理Product模型的数据。


通过以上代码，Category和Product模型的数据将在Django管理界面中以指定的方式进行展示和管理。

  1. 打开 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类，用于指定模型对象在数据库中的排序方式和在管理界面中的显示方式。__str__方法用于返回对象的字符串表示，get_absolute_url方法用于生成该对象在网站中的URL。


Product模型类定义了商品的属性和行为，包括category（商品所属的类别，使用外键关联到Category模型），name（商品名），slug（商品的URL标识符），image（商品图片），description（商品描述），price（商品价格），stock（商品库存数量），available（商品是否可用），created（商品创建时间），updated（商品更新时间）。它也定义了Meta类，用于指定模型对象在数据库中的排序方式和在管理界面中的显示方式。__str__方法用于返回对象的字符串表示，get_absolute_url方法用于生成该对象在网站中的URL。


这两个模型类之间通过外键关联建立了关系，一个Category可以有多个Product，而一个Product只能属于一个Category。通过related_name属性，可以通过Category对象反向查询到与之关联的Product对象。


此外，这两个模型类都定义了Meta类用于指定模型的排序方式和其他元数据。


通过以上代码，实现了Category和Product模型的定义，用于存储和管理商品的类别和具体信息。

  1. 打开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路由规则，将URL路径映射到对应的视图函数。


第一行导入了path函数和views模块。


接下来，urlpatterns是一个列表，其中包含了多个URL路径和对应的视图函数的映射关系。


第一个URL路径是空字符串，对应的视图函数是product_list，并命名为’product_list’。这意味着当用户访问网站的根路径时，会调用product_list视图函数处理请求。


第二个URL路径包含一个动态参数category_slug，对应的视图函数也是product_list，并同样命名为’product_list_by_category’。这意味着当用户访问类似于"/category_slug/"的URL路径时，会调用product_list视图函数处理请求，并将category_slug作为参数传递给该函数。


第三个URL路径包含两个动态参数id和slug，对应的视图函数是product_detail，并命名为’product_detail’。这意味着当用户访问类似于"/id/slug/"的URL路径时，会调用product_detail视图函数处理请求，并将id和slug作为参数传递给该函数。


最后一行是为该应用程序指定命名空间，命名为’myshop’。这可以在其他地方使用该命名空间来引用该应用程序的URL。

  1. 打开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
                   })

这段代码定义了用于处理产品列表和产品详情的视图函数。


第一个视图函数product_list接收一个可选参数category_slug，并根据该参数过滤产品列表。首先，它会获取所有的分类对象，并将其存储在categories变量中。接下来，它会获取所有available为True的产品，并将其存储在products变量中。如果category_slug参数不为空，它会通过调用get_object_or_404函数根据slug获取对应的分类对象，并将其存储在category变量中。然后，它会将products按照分类过滤，并传递给模板渲染。最后，它会使用render函数将模板’templates/shop/product/list.html’渲染成HTML响应，传递给客户端。


第二个视图函数product_detail接收两个参数id和slug，并根据这两个参数获取对应的产品对象。如果找不到对应的产品对象，会返回404错误页面。然后，它会创建一个CartAddProductForm对象，并将产品对象和表单对象传递给模板渲染。最后，它会使用render函数将模板’templates/shop/product/detail.html’渲染成HTML响应，传递给客户端。

  1. 打开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>

这段代码是一个基本的模板，用于渲染整个网页的结构。下面对其中的部分代码进行解析：


  • {% load static %}：加载静态文件标签，用于引入静态文件。


  • <link href="{% static "css/base.css" %}" rel="stylesheet">：引入名为"css/base.css"的静态文件，用于样式渲染。


  • <title>{% block title %}My shop 我的商店{% endblock %}</title>：定义页面标题。这里使用了模板继承的特性，block标签用于定义一个可被子模板继承和覆盖的区域。


  • <a href="/" class="logo">My shop 我的商店</a>：设置网站的logo链接，点击后返回首页。


  • <div class="cart">...</div>：展示购物车信息。此处使用了模板变量和模板标签进行条件判断，根据购物车中的商品数量和总价格来显示不同的内容。


  • <div id="content">{% block content %}{% endblock %}</div>：定义页面内容区域，使用模板继承的特性，子模板可以在其中定义自己的内容。

这段代码是一个基础模板，子模板可以通过继承此模板并在{% block content %}{% endblock %}区域填充内容来渲染他们自己的页面。


还有details.html和list.html，由于代码太多，博主就不放出来了，需要代码的小伙伴可以下载后查看哦~

4.购物车界面

项目结构如下：



5.订单界面

项目结构如下：

6.运行项目

1.购物界面

2.购物车界面

3.结算界面

4.后台界面

写在后面

我是一只有趣的兔子，感谢你的喜欢！

文章标签：
Python
存储
前端开发
数据库
测试技术
关键词：
web实战
web商城
Django实战
web django
HTML CSS
Want595
目录
相关文章
啦啦啦191
|
6月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城，涵盖技术选型、核心功能实现、安全控制与容器化部署，助开发者掌握最新Java Web全栈开发实践。
啦啦啦191
630 1
啦啦啦191
|
6月前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现，涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块，提供完整代码示例，助力掌握Java Web项目实战技能。（238字）
啦啦啦191
734 0
游客vx6uejvd6s6ck
|
9月前
|
移动开发 前端开发 JavaScript
征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具，采用HTML5实现，仅供学习参考。核心功能通过JavaScript构建，包含虚拟数据生成、权重分配及信用因素分析（如还款记录、信用使用率等）。
游客vx6uejvd6s6ck
2075 4
游客vx6uejvd6s6ck
|
9月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
这是一款纯前端实现的多平台虚拟评论生成器，支持抖音、快手、小红书风格，适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局，利用IndexedDB存储数据，CSS Variables切换主题。
游客vx6uejvd6s6ck
1263 2
游客vx6uejvd6s6ck
|
9月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
842 0
啦啦啦191
|
7月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统，采用微服务架构，整合Spring Cloud、Redis、MySQL等技术，涵盖用户认证、商品管理、购物车功能，并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程，助力高效开发与扩展。
啦啦啦191
793 64
啦啦啦191
|
7月前
|
前端开发 Java 数据库
Java 项目实战从入门到精通 ：Java Web 在线商城项目开发指南
本文介绍了一个基于Java Web的在线商城项目，涵盖技术方案与应用实例。项目采用Spring、Spring MVC和MyBatis框架，结合MySQL数据库，实现商品展示、购物车、用户注册登录等核心功能。通过Spring Boot快速搭建项目结构，使用JPA进行数据持久化，并通过Thymeleaf模板展示页面。项目结构清晰，适合Java Web初学者学习与拓展。
啦啦啦191
498 1
游客vx6uejvd6s6ck
|
9月前
|
存储 前端开发 安全
病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器，旨在为医学教学和软件开发测试提供数据支持，严格遵守《医疗机构病历管理规定》。
游客vx6uejvd6s6ck
3628 5
游客ib7xsk7hcucuo
|
9月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2754 4
游客vx6uejvd6s6ck
|
9月前
|
前端开发 容器
处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
这是一个电子处方模拟生成系统，使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识，并明确标注为模拟数据，仅供学习
游客vx6uejvd6s6ck
1916 1