运行和打包说明.md 5.0 KB

Tools Auto Web 项目运行和打包说明

项目概述

这是一个基于 React + Node.js 的工具库管理系统,包含前端界面和后端 API 服务。项目主要功能包括待接入工具列表管理和自动接入任务管理。

项目结构

tools_auto_web/
├── src/                    # React 前端源码
├── public/                 # 静态资源
├── server/                 # Node.js 后端服务
├── package.json           # 前端依赖配置
└── README.md              # 项目说明

环境要求

  • Node.js: 版本 >= 14.0.0
  • npm: 版本 >= 6.0.0
  • MySQL: 数据库服务
  • 操作系统: Windows / macOS / Linux

数据库配置

项目连接的数据库信息:

  • 主机: rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com
  • 端口: 3306
  • 用户名: crawler_admin
  • 密码: cyber#crawler_2023
  • 数据库: tools_auto_access
  • 字符集: utf8mb4

安装依赖

1. 安装前端依赖

# 在项目根目录下执行
npm install

2. 安装后端依赖

# 进入 server 目录
cd server
npm install

开发环境运行

方式一:分别启动前后端

1. 启动后端服务

# 在 server 目录下
cd server

# 开发模式启动(推荐,支持热重载)
npm run dev

# 或者生产模式启动
npm start

后端服务将在 http://localhost:3001 启动

2. 启动前端服务

# 在项目根目录下
npm start

前端服务将在 http://localhost:3000 启动,并自动打开浏览器

方式二:使用脚本同时启动(如果有配置)

如果项目配置了并发启动脚本,可以:

# 在项目根目录下
npm run dev

生产环境部署

1. 构建前端项目

# 在项目根目录下
npm run build

构建完成后,会在项目根目录生成 build 文件夹,包含所有静态资源。

2. 部署后端服务

# 在 server 目录下
cd server
npm start

3. 部署前端静态文件

build 文件夹中的内容部署到 Web 服务器(如 Nginx、Apache)或 CDN。

项目配置说明

前端配置 (package.json)

{
  "name": "tools-auto-pt",
  "version": "0.1.0",
  "proxy": "http://localhost:3001",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

后端配置 (server/package.json)

{
  "name": "tools-auto-pt-server",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}

主要依赖

前端依赖

  • React: ^18.2.0 - 前端框架
  • Ant Design: ^5.8.0 - UI 组件库
  • React Router: ^6.3.0 - 路由管理
  • Axios: ^1.4.0 - HTTP 请求库
  • Moment.js: ^2.29.4 - 时间处理
  • Tailwind CSS: ^3.4.17 - CSS 框架

后端依赖

  • Express: ^4.18.2 - Web 框架
  • MySQL2: ^3.6.0 - MySQL 数据库驱动
  • CORS: ^2.8.5 - 跨域处理
  • Body Parser: ^1.20.2 - 请求体解析
  • Moment.js: ^2.29.4 - 时间处理

常用命令

开发命令

# 安装依赖
npm install

# 启动开发服务器
npm start

# 启动后端开发服务器(在 server 目录)
npm run dev

# 运行测试
npm test

构建命令

# 构建生产版本
npm run build

# 启动生产服务器(后端)
npm start

端口配置

故障排除

常见问题

  1. 端口被占用 ```bash

    查找占用端口的进程

    lsof -i :3000 lsof -i :3001

# 杀死进程 kill -9


2. **依赖安装失败**
   ```bash
   # 清除缓存
   npm cache clean --force
   
   # 删除 node_modules 重新安装
   rm -rf node_modules
   npm install
  1. 数据库连接失败
    • 检查数据库服务是否正常
    • 验证数据库连接配置
    • 确认网络连接正常

日志查看

  • 前端日志:浏览器开发者工具 Console
  • 后端日志:终端输出

项目功能

主要功能模块

  1. 待接入工具列表管理

    • 工具列表展示
    • 工具详情查看
    • 工具编辑/删除
    • 工具搜索功能
  2. 自动接入任务管理

    • 任务列表管理
    • 任务详情查看
    • 任务状态跟踪

数据库表结构

  • tools_info_search_task - 待接入工具主表
  • tools_info_search_task_detail - 待接入工具详情表
  • tools_auto_access_task - 自动接入任务表

注意事项

  1. 确保数据库服务正常运行
  2. 前端代理配置指向后端服务地址
  3. 生产环境需要配置正确的环境变量
  4. 建议使用 PM2 等进程管理工具部署后端服务
  5. 前端构建文件需要配置正确的静态资源路径

联系方式

如有问题,请联系项目维护人员。