企业官网建设流程全解析

PC 手机电商（MySQL 版）

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

项目简介

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

功能介绍

首页（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）

数据库表（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/目录下执行：

cdbackendnpminstall

4. 启动后端

nodeserver.js

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

5. 启动前端

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

注意事项

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