PC 手机电商（MySQL 版）

PC 手机电商（MySQL 版）

• 完整代码地址： https://www.aiyuanma.vip/posts/homework-pc-shop-mysql

项目简介

这是一个 PC 端手机电商简易版 大作业项目，采用前后端分离架构：

层级	技术
前端	原生 HTML + CSS + JavaScript（Axios、Swiper）
后端	Node.js + Express
数据库	MySQL

---

功能介绍

首页（frontend/index.html）

• 顶部轮播图展示（Swiper，自动播放）
• 从后端获取手机商品列表，以卡片形式展示图片、名称、价格
• 点击商品卡片跳转至详情页

商品详情（frontend/detail.html）

• 根据 URL 参数 id 加载单个商品
• 展示商品图片、分类、价格、描述及参数列表
• 预置 5 款手机：iPhone 15 Pro Max、华为 Mate 60 Pro、小米 14 Ultra 等

用户注册（frontend/register.html）

• 输入用户名、密码完成注册
• 校验用户名是否重复，注册成功后跳转登录页

用户登录（frontend/login.html）

• 输入用户名、密码完成登录
• 登录成功后跳转首页（教学简化版，无 Token 会话）

后端 API（backend/server.js，默认 http://localhost:3000）

方法	路径	说明
POST	/api/register	用户注册
POST	/api/login	用户登录
GET	/api/products	获取商品列表
GET	/api/products/:id	获取商品详情

数据库表（backend/sql/db_shop_phone.sql）

• products：商品表（名称、分类、价格、图片、描述、参数、库存等）
• users ：用户表（用户名、密码；含测试账号 zhangsan / lisi，密码均为 123456）

---

文件目录

homework-pc-shop-mysql/
├── 项目说明.md                 # 本文件
├── 演示材料/
│   └── 演示视频.mp4            # 项目演示录像
├── frontend/                   # 前端静态页面
│   ├── index.html              # 首页（轮播 + 商品列表）
│   ├── detail.html             # 商品详情
│   ├── login.html              # 登录
│   └── register.html           # 注册
└── backend/                    # 后端服务
    ├── server.js               # Express API 入口
    ├── package.json            # 依赖配置
    ├── .env                    # 数据库连接配置
    └── sql/
        └── db_shop_phone.sql   # MySQL 建表及初始数据

---

环境准备与启动

1. 安装 MySQL 并导入数据

先确保本机已安装 MySQL，再导入 SQL 文件：

backend/sql/db_shop_phone.sql

导入后数据库名为 db_shop_phone。

2. 配置后端数据库连接

编辑 backend/.env，将 DB_PASSWORD 改为本机 MySQL 密码：

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=你的密码
DB_NAME=db_shop_phone
PORT=3000

3. 安装后端依赖

需先安装 Node.js 环境，在 backend/ 目录下执行：

cd backend
npm install

4. 启动后端

node server.js

启动成功后，后端运行在 http://localhost:3000。

5. 启动前端

双击打开 frontend/index.html 即可访问首页。

---

注意事项

• 前端通过 Axios 请求 http://localhost:3000/api，需先启动后端再访问页面。
• 密码为明文存储，仅用于教学演示，生产环境请勿使用。
• .env 中的 DB_NAME 须与 SQL 文件导入的库名一致（db_shop_phone）。