半导体材料管理系统

这是一个基于 Vue 3 (使用 Vite) + Express + MySQL 的全栈项目示例，用于管理半导体材料信息。项目采用了模块化结构，便于理解和扩展。

本项目已根据讨论进行了简化，移除了 JWT 认证，登录功能使用硬编码用户名密码进行模拟。

项目结构

/project-root
  |-- /src
      |-- /server         # Express后端代码
          |-- app.js          # Express应用配置
          |-- server.js       # 服务器启动文件
          |-- config/         # 配置模块
              |-- db.js         # 数据库连接
              |-- config.js     # 全局配置（端口、数据库信息等）
          |-- models/         # 数据模型（与数据库交互）
              |-- material.js
              |-- user.js       # 简化用户模型
          |-- controllers/    # 业务逻辑处理
              |-- materialController.js
              |-- userController.js # 简化登录逻辑
          |-- routes/         # 路由定义
              |-- material.js
              |-- user.js       # 简化用户路由
          |-- middlewares/    # 中间件
              |-- auth.js       # **重要：已简化，直接放行请求**
          |-- utils/          # 工具函数
              |-- response.js   # 统一响应格式
      |-- /client         # Vue前端代码 (Vite 项目)
          |-- src/          # Vue 应用源代码
              |-- api/          # 后端API调用封装
                  |-- material.js
                  |-- user.js   # 调用简化登录API
              |-- views/        # 页面组件
                  |-- MaterialList.vue # 材料列表/管理页面
                  |-- Login.vue     # 登录页面
              |-- components/   # 可复用组件
                  |-- MaterialForm.vue
                  |-- MaterialTable.vue
              |-- router/       # Vue Router 配置
                  |-- index.js    # **重要：路由守卫检查 `isLoggedIn` 状态**
              |-- store/        # Pinia 状态管理
                  |-- user.js   # **重要：管理 `isLoggedIn` 状态**
              |-- App.vue       # 应用根组件
              |-- main.js       # 应用入口，注册Router和Pinia
          |-- index.html      # HTML入口文件
          |-- vite.config.js  # **重要：配置 `/api` 代理到后端**
  |-- package.json        # 项目根目录依赖和脚本
  |-- package-lock.json

技术栈

• 后端: Express, MySQL2
• 前端: Vue 3, Vite, Pinia, Vue Router, Axios

环境准备

• Node.js (推荐 LTS 版本)
• npm (或 yarn, pnpm)
• MySQL 数据库

安装依赖

需要在项目根目录和前端项目目录分别安装依赖。

1. 在项目根目录安装后端依赖:

   cd /d D:\TheWorking\test_express
   npm install

   注意：请确保在 cmd.exe 终端中执行，并在正确的目录下。

2. 在前端项目目录安装前端依赖:

   cd /d D:\TheWorking\test_express\src\client
   npm install

   注意：请确保在 cmd.exe 终端中执行，并在正确的目录下。

数据库设置

1. 使用 MySQL 客户端执行以下 SQL 脚本，创建数据库和必要的表。

   -- 创建数据库 (如果不存在)
   CREATE DATABASE semiconductor DEFAULT CHARSET utf8mb4;
   
   -- 切换到数据库
   USE semiconductor;
   
   -- 创建材料表
   CREATE TABLE materials (
     id INT PRIMARY KEY AUTO_INCREMENT,
     name VARCHAR(100) NOT NULL,
     type VARCHAR(100) NOT NULL,
     property VARCHAR(255) NOT NULL,
     manufacturer VARCHAR(100) NOT NULL,
     bandgap DECIMAL(5,2) NOT NULL
   );
   
   -- 创建用户表
   CREATE TABLE users (
     id INT PRIMARY KEY AUTO_INCREMENT,
     username VARCHAR(50) NOT NULL UNIQUE,
     password VARCHAR(255) NOT NULL, -- 虽然当前硬编码登录不使用，但保留结构
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );
   
   -- 插入一个测试用户 (密码 '123456')
   -- 注意：当前登录是硬编码匹配 'admin'/'123456'，这里的用户实际不用于硬编码登录验证，仅为数据库示例。
   -- 实际应用中应存储密码哈希，并在后端进行 bcrypt 校验。
   -- 你可能需要手动插入一行，例如:
   -- INSERT INTO users (username, password) VALUES ('admin', 'plaintext_password_for_demo');

2. 配置数据库连接: 编辑 src/server/config/config.js 文件，填写你的 MySQL 数据库连接信息（用户名、密码、数据库名）。

   // src/server/config/config.js
   module.exports = {
     // ...其他配置
     mysql: {
       host: 'localhost',
       user: 'root',
       password: '你的数据库密码', // <-- 在这里填写你的密码
       database: 'semiconductor',
       // ...
     }
   };

运行项目

需要同时启动后端服务和前端开发服务器。

1. 启动后端服务: 打开一个 cmd.exe 终端，切换到项目根目录 (D:\TheWorking\test_express)，运行：

   npm run dev:server

   注意：请检查终端输出，确保服务成功启动，没有报错。nodemon 应该会显示启动信息。

2. 启动前端开发服务器: 打开另一个 cmd.exe 终端，切换到前端项目目录 (D:\TheWorking\test_express\src\client)，运行：

   npm run dev

   注意：请检查终端输出，确保 Vite 开发服务器成功启动，并显示访问地址（通常是 http://localhost:5173）。

访问应用

在浏览器中访问前端开发服务器的地址，通常是：

http://localhost:5173/

你应该会看到登录页面。使用硬编码的用户名 admin 和密码 123456 进行登录。

重要注意点与未来改进

• 认证方式 (已简化):
  • 本项目已移除 JWT 认证，后端认证中间件 (src/server/middlewares/auth.js) 直接放行所有请求。
  • 后端登录 (src/server/controllers/userController.js) 仅进行硬编码的用户名 (admin) 和密码 (123456) 匹配。
  • 未来改进: 强烈建议在实际应用中实现基于数据库的用户认证和密码哈希 (如 bcrypt)，并重新启用或实现安全的认证机制 (如 JWT 或 Session)。
• 前端登录状态:
  • 前端使用 Pinia (src/client/src/store/user.js) 管理 isLoggedIn 状态，并存储后端返回的简化用户信息。
  • 路由守卫 (src/client/src/router/index.js) 检查 isLoggedIn 状态控制访问。
• API 代理:
  • 前端 Vite 开发环境通过 vite.config.js 配置将 /api 的请求代理到后端 http://localhost:3000。
• 数据库连接:
  • 请确保在 src/server/config/config.js 中填写正确的数据库连接信息，并且 MySQL 服务正在运行。
• 依赖安装:
  • 前后端依赖需要分别安装，请确保在正确的目录下执行 npm install。
• 终端环境:
  • 本项目中的命令示例假定在 Windows cmd.exe 终端中执行。

遇到的问题回顾 (供参考)

在开发过程中遇到了一些问题，这些问题的解决思路和方法可能对你有所帮助：

• 模块找不到错误 (Cannot find module '...')：通常是由于依赖没有在正确的目录 (node_modules) 下安装。确保在项目根目录和前端子项目目录都运行了 npm install。
• PowerShell 执行策略问题：在 PowerShell 中执行 npm 脚本可能需要调整执行策略 (Set-ExecutionPolicy)。
• 文件占用导致删除失败：在 Windows 上删除 node_modules 时，如果文件被占用，需要关闭相关程序或以管理员身份操作。
• 后端启动路径错误：使用 npm run script-name 是从 package.json 定义的位置启动，直接使用 node file.js 可能因当前终端目录不同导致找不到文件。
• 404 Not Found 错误：
  • 前端请求的路径与后端路由不匹配。
  • 后端服务未成功启动或 Express 应用加载路由失败（可能是代码错误、依赖问题或内部加载异常）。本次排查主要集中在修复后端 app.js 的语法错误，这很可能是导致路由加载失败的根本原因。

希望这个 README 文件能帮助你顺利运行和理解项目！如需进一步帮助，请随时提出问题。