从零开始：在 PyCharm 中搭建 Django 商城的用户注册与登录功能（轮播图+商品页-小白入门版）

发布于：2025-07-26 ⋅ 阅读:(18) ⋅ 点赞:(0)

大家好呀！如果你是编程小白，想自己动手做一个电商网站，那这篇文章简直是为你量身打造的！今天我们一步一步，从无到有搭建 Django 商城的用户注册和登录功能。不用担心，我会把每一个细节都讲清楚，保证你跟着做就能成功！
 

准备工作：安装必要的工具

在开始之前，我们需要先安装 Python 和 Django。别害怕，就像安装 QQ 一样简单！

第一步：安装 Python

  1. 打开浏览器，访问 Python 官网：Download Python | Python.org
  2. 点击 "Download Python X.X.X" 按钮（X.X.X 是版本号）
  3. 下载完成后双击安装文件
  4. 重要：安装时一定要勾选 "Add Python to PATH"，然后点击 "Install Now"

安装完成后，我们来检查一下是否安装成功：

  1. 按下 Win+R，输入 "cmd"，回车打开命令提示符
  2. 输入python --version，如果显示类似 "Python 3.8.0" 的信息，就说明安装成功了（具体的看你的版本号）

第二步：安装 PyCharm

然后，我们需要安装 PyCharm，这是一个专门用于 Python 开发的 IDE（集成开发环境），就像画家需要画板一样，程序员也需要这样的工具。

  1. 访问 PyCharm 官网：PyCharm: The only Python IDE you need
  2. 点击 "Download" 按钮
  3. 对于初学者，建议选择 "Community" 版本（免费）下载
  4. 下载完成后，双击安装文件，按照提示一步步安装（基本上点击 "下一步" 即可）

正式开始部署：

第一步：创建虚拟环境

在开始项目前，我们先创建一个虚拟环境，它就像一个隔离的小空间，让我们的项目依赖不会互相干扰。

  1. 打开 PyCharm
  2. 点击主界面的 "New Project"
  3. 在左侧选择 "Pure Python"
  4. 在 "Location" 处选择项目存放路径，比如D:\projects\mall
  5. 勾选 "New virtual environment using"，选择 "Virtualenv"
  6. "Base interpreter" 选择你安装的 Python 版本
  7. 勾选 "Inherit global site-packages" 和 "Make available to all projects"
  8. 点击 "Create" 按钮

等待片刻，PyCharm 会为我们创建一个新的项目和虚拟环境。

第二步：安装 Django

现在我们需要在虚拟环境中安装 Django：

  1. 在 PyCharm 底部找到 "Terminal"（终端）标签，点击打开
  2. 在终端中输入以下命令并回车：
pip install django

等待安装完成，你会看到成功的提示信息。

第三步：创建 Django 项目

  1. 在终端中输入以下命令，创建 Django 项目：
django-admin startproject mall .

注意命令最后有一个点 "."，不要漏掉了！这个点表示在当前目录创建项目。

稍等片刻，你会看到 PyCharm 的项目结构中出现了一些新文件，这就是我们的 Django 项目文件。

第四步：创建用户应用

在 Django 中，我们通常把不同功能模块放在不同的 "应用" 中。用户相关的功能，我们创建一个名为 "accounts" 的应用。

  1. 在终端中输入：
python manage.py startapp accounts

  1. 现在你会看到项目中多了一个 "accounts" 文件夹。

  2. 让 Django 知道我们创建了这个应用：

    • 在左侧文件列表中找到mall文件夹下的settings.py文件，双击打开
    • 找到INSTALLED_APPS列表，在末尾添加'accounts',
    • 按Ctrl+S保存文件
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'accounts',  # 我们添加的应用
]

第五步：编写视图（处理业务逻辑）

视图用来处理用户的请求，比如注册、登录等操作。

  1. 在 "accounts" 文件夹中找到views.py文件，双击打开
  2. 替换其中的内容为以下代码：
from django.shortcuts import render
def home(request):
    # 准备要传递给模板的数据
    products = [
        {
            'id': 1,
            'name': '时尚运动鞋',
            'price': 399,
            'image': 'images/shoes1.jpg',
            'description': '舒适透气，适合各种运动'
        },
        {
            'id': 2,
            'name': '智能手表',
            'price': 899,
            'image': 'images/watch1.jpg',
            'description': '多功能智能手表，健康监测'
        },
        {
            'id': 3,
            'name': '无线耳机',
            'price': 599,
            'image': 'images/headphones1.jpg',
            'description': '主动降噪，高清音质'
        },
        {
            'id': 4,
            'name': '机械键盘',
            'price': 299,
            'image': 'images/keyboard1.jpg',
            'description': '青轴机械键盘，打字舒适'
        }
    ]
    
    categories = [
        '全部商品', '电子产品', '服装鞋帽', '家居用品', '美妆个护', '图书音像'
    ]
    
    # 将数据传递给模板
    return render(request, 'accounts/home.html', {  # 注意模板路径是accounts/home.html
        'products': products,
        'categories': categories,
        'title': '首页 - 我的商城'
    })

第六步：配置 URL 路由（设置访问路径）

URL 路由用来告诉 Django，当用户访问某个网址时，应该由哪个视图来处理。

创建应用的 URL 配置

  1. 在 "accounts" 文件夹上右键点击
  2. 选择 "New" -> "Python File"
  3. 文件名输入 "urls.py"，点击 "OK"
  4. 在打开的文件中粘贴以下代码：
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),  # 首页路由
]

配置项目的主 URL

  1. 在 "mall" 文件夹中找到urls.py文件，双击打开
  2. 替换其中的内容为以下代码：
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0])

第七步：创建模板文件（HTML 页面）

模板文件就是我们看到的网页，用 HTML 编写。我们需要创建几个模板文件：

创建模板文件夹结构

  1. 在项目根目录（和 "accounts"、"myshop" 文件夹同级）上右键点击
  2. 选择 "New" -> "Directory"，输入 "templates"，点击 "OK"
  3. 在 "templates" 文件夹上右键点击，选择 "New" -> "Directory"，输入 "accounts"，点击 "OK"

现在我们有了这样的文件夹结构：templates/accounts/

创建首页模板（home.html）

  1. 在 "templates" 文件夹上右键点击
  2. 选择 "New" -> "File"，输入 "home.html"，点击 "OK"
  3. 在打开的文件中粘贴以下代码：
<!DOCTYPE html>
 {% load static %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        /* 导航栏样式 */
        .navbar {
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .nav-link {
            margin-right: 1rem;
            transition: color 0.3s;
        }

        .nav-link:hover {
            color: #0d6efd !important;
        }

        /* 轮播图样式 */
        .carousel-item {
            height: 500px;
        }

        .carousel-item img {
            object-fit: cover;
            height: 100%;
        }

        .carousel-caption {
            background-color: rgba(0,0,0,0.5);
            padding: 1rem;
            border-radius: 5px;
        }

        /* 商品展示样式 */
        .products-section {
            padding: 3rem 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: #0d6efd;
            margin: 10px auto;
        }

        .product-card {
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .product-img {
            height: 200px;
            object-fit: cover;
        }

        .card-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .product-price {
            font-weight: bold;
            color: #dc3545;
            font-size: 1.2rem;
            margin-top: auto;
        }

        /* 页脚样式 */
        footer {
            background-color: #f8f9fa;
            padding: 3rem 0 1rem;
            margin-top: 2rem;
        }

        .footer-title {
            font-weight: bold;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: #6c757d;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #0d6efd;
        }

        .social-icons {
            font-size: 1.5rem;
            margin-right: 1rem;
            color: #6c757d;
            transition: color 0.3s;
        }

        .social-icons:hover {
            color: #0d6efd;
        }

        .copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #e9ecef;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <!-- 商城标志 -->
            <a class="navbar-brand text-primary" href="{% url 'home' %}">
                <i class="fas fa-shopping-bag me-2"></i>Mall商城
            </a>

            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- 导航菜单 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{% url 'home' %}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">全部商品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">新品上市</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">优惠活动</a>
                    </li>
                </ul>

                <!-- 搜索框 -->
                <form class="d-flex me-2">
                    <input class="form-control me-2" type="search" placeholder="搜索商品..." aria-label="Search">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </form>

                <!-- 用户功能区 -->
                <div class="d-flex">
                    <a href="#" class="nav-link me-3">
                        <i class="fas fa-user"></i> 登录
                    </a>
                    <a href="#" class="nav-link me-3">
                        <i class="fas fa-shopping-cart"></i> 购物车
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 分类导航 -->
    <div class="bg-light py-2">
        <div class="container">
            <div class="d-flex overflow-x-auto">
                {% for category in categories %}
                <a href="#" class="btn btn-outline-secondary me-2 flex-shrink-0">{{ category }}</a>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://picsum.photos/id/26/1200/500" class="d-block w-100" alt="夏季促销活动">
                <div class="carousel-caption d-none d-md-block">
                    <h5>夏季大促销</h5>
                    <p>全场商品低至5折，限时抢购中！</p>
                    <button class="btn btn-primary">立即查看</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/96/1200/500" class="d-block w-100" alt="新品上市">
                <div class="carousel-caption d-none d-md-block">
                    <h5>新品上市</h5>
                    <p>最新款电子产品，抢先体验！</p>
                    <button class="btn btn-primary">了解详情</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/65/1200/500" class="d-block w-100" alt="会员专享">
                <div class="carousel-caption d-none d-md-block">
                    <h5>会员专享</h5>
                    <p>成为会员，享受更多优惠和服务</p>
                    <button class="btn btn-primary">立即加入</button>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- 特色区域 -->
    <div class="container my-5">
        <div class="row text-center">
            <div class="col-md-4 mb-4">
                <div class="bg-light p-4 rounded shadow-sm">
                    <i class="fas fa-truck text-primary fa-3x mb-3"></i>
                    <h5>免费配送</h5>
                    <p>订单满99元免运费</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="bg-light p-4 rounded shadow-sm">
                    <i class="fas fa-shield-alt text-primary fa-3x mb-3"></i>
                    <h5>正品保障</h5>
                    <p>所有商品100%正品</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="bg-light p-4 rounded shadow-sm">
                    <i class="fas fa-exchange-alt text-primary fa-3x mb-3"></i>
                    <h5>7天无理由退换</h5>
                    <p>购物无忧，售后保障</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品展示区 -->
    <section class="products-section bg-light">
        <div class="container">
            <h2 class="section-title">热门商品</h2>
            <div class="row">
                {% for product in products %}
                <div class="col-md-3 mb-4">
                    <div class="card product-card">
                        <!-- 关键修改：用static标签拼接图片路径 -->
                        <img src="{% static product.image %}" class="card-img-top product-img" alt="{{ product.name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text">{{ product.description }}</p>
                            <p class="product-price">¥{{ product.price }}</p>
                            <button class="btn btn-primary w-100 mt-2">
                                <i class="fas fa-shopping-cart me-1"></i> 加入购物车
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="text-center mt-4">
                <a href="#" class="btn btn-outline-primary">查看更多商品</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3 mb-4">
                    <h5 class="footer-title">关于我们</h5>
                    <ul class="footer-links">
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招贤纳士</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h5 class="footer-title">客户服务</h5>
                    <ul class="footer-links">
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">配送方式</a></li>
                        <li><a href="#">售后服务</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h5 class="footer-title">商家合作</h5>
                    <ul class="footer-links">
                        <li><a href="#">入驻申请</a></li>
                        <li><a href="#">商家后台</a></li>
                        <li><a href="#">运营规则</a></li>
                        <li><a href="#">培训中心</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h5 class="footer-title">关注我们</h5>
                    <div>
                        <a href="#" class="social-icons"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="social-icons"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="social-icons"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Mall商城 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 引入Bootstrap JS和Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 简单的交互脚本 -->
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 为加入购物车按钮添加点击效果
            const addToCartButtons = document.querySelectorAll('.btn-primary');
            addToCartButtons.forEach(button => {
                if(button.innerHTML.includes('加入购物车')) {
                    button.addEventListener('click', function() {
                        const productName = this.closest('.card').querySelector('.card-title').textContent;
                        alert(`已将 "${productName}" 加入购物车！`);
                    });
                }
            });
        });
    </script>
</body>
</html>

 python manage.py migrate（连接你的代码（数据模型）和实际数据库的 “桥梁”）
数据库迁移

python manage.py migrate 是 Django 框架中用于执行数据库迁移的核心命令，主要作用是：

  1. 同步数据库结构
    将你在 models.py 中定义的数据模型（表结构），实际应用到数据库中，创建或更新对应的数据库表、字段、关系等。

  2. 执行迁移文件
    当你修改数据模型后（比如新增字段、修改字段类型等），会通过 makemigrations 生成迁移文件（存放在应用的 migrations 文件夹），而 migrate 命令会执行这些文件，将变更同步到数据库。

  3. 初始化内置表
    Django 自带的用户系统（auth 应用）、会话系统（sessions 应用）等，需要通过 migrate 命令创建对应的表结构，否则无法正常使用用户登录、会话管理等功能。

建立管理员（可选） 

 现在运行服务

python manage.py runserver

浏览器进入127.0.0.1:8000

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布