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

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

网友: 技术文档 2025-07-26 20:02:16

大家好呀！如果你是编程小白，想自己动手做一个电商网站，那这篇文章简直是为你量身打造的！今天我们一步一步，从无到有搭建 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 renderdef 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 pathfrom . import viewsurlpatterns = [ path(\'\', views.home, name=\'home\'), # 首页路由]

配置项目的主 URL

  1. 在 \"mall\" 文件夹中找到urls.py文件，双击打开
  2. 替换其中的内容为以下代码：
from django.contrib import adminfrom django.urls import include, pathfrom django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [ 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. 在打开的文件中粘贴以下代码：
 {% load static %}   {<!-- -->{ title }}       /* 导航栏样式 */ .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; }     
 
 
 {% for category in categories %} {{ category }} {% endfor %} 
 
 
    
 
 
 
    
免费配送
  
订单满99元免运费
 
 
 
 
    
正品保障
  
所有商品100%正品
 
 
 
 
    
7天无理由退换
  
购物无忧，售后保障
 
 
 
 
  
 
 
热门商品
 
 {% for product in products %} 
  
  <img src=\"{% static product.image %}\" class=\"card-img-top product-img\" alt=\"{{ product.name }}\"> 
 
{{ product.name }}
 
{{ product.description }}
 
¥{{ product.price }}
  
  
 
 {% endfor %} 
 
 查看更多商品 
 
 
       // 页面加载完成后执行 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}\" 加入购物车！`);  }); } }); });

 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

网络标签：

相关问题