商品管理系统（登录注册增删改查）

商品管理系统HTML

这是一个基于 Node.js + MySQL + HTML(Vue2) 的商品管理系统，包含用户登录注册和商品的增删改查功能。

系统要求

• Node.js 20+ 版本
• MySQL 数据库
• VSCode 开发工具

详细安装步骤（适合初学者）

第一步：安装必要软件

1.1 安装 Node.js

1. 访问 Node.js 官网
2. 下载 LTS 版本（推荐版本）
3. 双击下载的安装包，按照提示完成安装
4. 安装完成后，按 Win + R 键，输入 cmd，按回车
5. 在命令行中输入 node -v，如果显示版本号说明安装成功

1.2 安装 MySQL 数据库

1. 访问 MySQL 官网
2. 下载 MySQL Community Server
3. 安装时记住设置的 root 用户密码（本项目默认密码是 root）
4. 安装完成后，确保 MySQL 服务已启动

1.3 安装 VSCode（如果还没有）

1. 访问 VSCode 官网
2. 下载并安装 VSCode
3. 推荐安装以下插件：
   • Chinese (Simplified) Language Pack（中文语言包）
   • Live Server（用于预览 HTML 文件）

第二步：准备项目

2.1 下载项目代码

1. 将项目文件夹下载到你的电脑上
2. 用 VSCode 打开项目文件夹：
   • 打开 VSCode
   • 点击 "文件" → "打开文件夹"
   • 选择项目文件夹

2.2 安装项目依赖

1. 在 VSCode 中打开终端
2. 在终端中输入以下命令并按回车：

   npm install
   

3. 等待安装完成（可能需要几分钟）

第三步：设置数据库

3.1 创建数据库

1. 打开 MySQL 命令行工具或者 MySQL Workbench
2. 如果使用命令行：
   • 按 Win + R，输入 cmd
   • 输入 mysql -u root -p
   • 输入你设置的 MySQL 密码

3.2 导入数据库结构

1. 在项目文件夹中找到 goods_demo.sql 文件
2. 方法一（命令行）：

   source 你的项目路径/goods_demo.sql
   

3. 方法二（直接执行）：
   • 双击运行 init-database.bat 文件（Windows 系统）
   • 或者复制 goods_demo.sql 文件中的 SQL 语句到 MySQL 工具中执行

3.3 确认数据库配置

项目使用的数据库配置如下，如果你的 MySQL 设置不同，需要修改 server.js 文件：

// 数据库连接配置
host: "localhost"; // 数据库地址
user: "root"; // 数据库用户名
password: "root"; // 数据库密码（请改为你的实际密码）
database: "goods_demo"; // 数据库名称

第四步：启动项目

4.1 启动后端服务器

1. 在 VSCode 终端中输入：

   node server.js
   

2. 如果看到类似 "服务器运行在端口 3000" 的提示，说明启动成功
3. 重要：保持这个终端窗口开启，不要关闭

4.2 打开前端页面

1. 在项目文件夹中找到 login.html 文件
2. 方法一：直接双击 login.html 文件
3. 方法二：在 VSCode 中右键 login.html → "Open with Live Server"
4. 浏览器会自动打开登录页面

第五步：使用系统

访问地址：

1. 登录 http://localhost:3300/login.html

目前的测试帐号密码

1. admin/admin

2. zhangsan/123456

3. lisi/123456

4. 注册 http://localhost:3300/register.html

5. 首页 http://localhost:3300/index.html

5.1 注册新用户

1. 在登录页面点击"注册"链接
2. 填写用户名和密码
3. 点击注册按钮

5.2 登录系统

1. 使用注册的用户名和密码登录
2. 登录成功后可以进行商品的增删改查操作

常见问题解决

问题1：npm install 失败

解决方案：

# 清除 npm 缓存
npm cache clean --force
# 重新安装
npm install

问题2：MySQL 连接失败

检查项目：

1. MySQL 服务是否启动
2. 用户名密码是否正确
3. 数据库 goods_demo 是否已创建

问题3：页面无法访问

检查项目：

1. 后端服务器是否正常启动（终端是否显示启动信息）
2. 浏览器地址是否正确
3. 防火墙是否阻止了端口访问

问题4：端口被占用

如果 3300 端口被占用，可以修改 server.js 文件中的端口号：

const PORT = 3001; // 改为其他端口号

项目结构说明

项目文件夹/
├── server.js          # 后端服务器文件
├── package.json       # 项目依赖配置
├── goods_demo.sql     # 数据库结构文件
├── init-database.bat  # 数据库初始化脚本
├── login.html         # 登录页面
├── register.html      # 注册页面
├── index.html         # 主页面
├── 视频演示.mp4       # 功能演示视频
└── README.md          # 项目说明文档

学习建议

1. 先看视频演示：观看 视频演示.mp4 了解系统功能
2. 理解代码结构：从 server.js 开始，了解后端 API 接口
3. 学习前端交互：查看 HTML 文件中的 Vue.js 代码
4. 数据库操作：理解 SQL 语句和数据库设计

技术栈说明

• 后端：Node.js + Express.js
• 数据库：MySQL
• 前端：HTML + Vue.js 2.x + Axios
• 样式：CSS

如果在使用过程中遇到问题，建议：

1. 仔细阅读错误信息
2. 检查每个步骤是否正确执行
3. 查看浏览器开发者工具的控制台信息
4. 确认数据库连接和服务器状态

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/login-register-curd