PC 手机电商MySQL 版完整代码地址 https://www.aiyuanma.vip/posts/homework-pc-shop-mysql项目简介这是一个PC 端手机电商简易版大作业项目采用前后端分离架构层级技术前端原生 HTML CSS JavaScriptAxios、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 会话后端 APIbackend/server.js默认http://localhost:3000方法路径说明POST/api/register用户注册POST/api/login用户登录GET/api/products获取商品列表GET/api/products/:id获取商品详情数据库表backend/sql/db_shop_phone.sqlproducts商品表名称、分类、价格、图片、描述、参数、库存等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_HOSTlocalhost DB_USERroot DB_PASSWORD你的密码 DB_NAMEdb_shop_phone PORT30003. 安装后端依赖需先安装 Node.js 环境在backend/目录下执行cdbackendnpminstall4. 启动后端nodeserver.js启动成功后后端运行在http://localhost:3000。5. 启动前端双击打开frontend/index.html即可访问首页。注意事项前端通过 Axios 请求http://localhost:3000/api需先启动后端再访问页面。密码为明文存储仅用于教学演示生产环境请勿使用。.env中的DB_NAME须与 SQL 文件导入的库名一致db_shop_phone。
