IMS 项目启动与配置指南

1. 项目目录结构及介绍

IMS 项目是一个基于 React、Python 和 MySQL 的集成管理系统。项目采用前后端分离的架构，前端使用 React 框架，后端使用 Python 和 Flask。以下是项目的目录结构：

IMS
├─ backend
│  ├─ app.py
│  ├─ application.py
│  ├─ db
│  │  ├─ chat.sql
│  │  ├─ users.sql
│  │  └─ visual_list.sql
│  ├─ db.py
│  ├─ README.md
│  ├─ routes
│  │  ├─ chat.py
│  │  ├─ ip_info.py
│  │  ├─ users.py
│  │  ├─ visual_list.py
│  │  └─ __pycache__
│  │     ├─ chat.cpython-311.pyc
│  │     ├─ ip_info.cpython-311.pyc
│  │     ├─ users.cpython-311.pyc
│  │     └─ visual_list.cpython-311.pyc
│  ├─ util
│  │  ├─ get_ip_info.py
│  │  ├─ token.py
│  │  └─ __pycache__
│  │     ├─ get_ip_info.cpython-311.pyc
│  │     └─ token.cpython-311.pyc
│  └─ __pycache__
│     ├─ app.cpython-311.pyc
│     ├─ application.cpython-311.pyc
│     └─ db.cpython-311.pyc
├─ frontend
│  ├─ .eslintrc.cjs
│  ├─ index.html
│  ├─ package.json
│  ├─ pnpm-lock.yaml
│  ├─ public
│  │  └─ vite.svg
│  ├─ README.md
│  ├─ src
│  │  ├─ api
│  │  │  ├─ axios.ts
│  │  │  ├─ index.ts
│  │  │  └─ request
│  │  │     ├─ chat.ts
│  │  │     ├─ ip.ts
│  │  │     ├─ list.ts
│  │  │     └─ sign.ts
│  │  ├─ App.less
│  │  ├─ App.tsx
│  │  ├─ assets
│  │  │  ├─ audio
│  │  │  │  └─ majestic_music.mp3
│  │  │  ├─ images
│  │  │  │  ├─ background
│  │  │  │  │  └─ grasslandScenery.jpg
│  │  │  │  ├─ logo
│  │  │  │  │  └─ technology
│  │  │  │  │     └─ mdn.png
│  │  │  │  └─ pages
│  │  │  │     ├─ AIGC_business_layout.png
│  │  │  │     ├─ AIGC_business_layout_add.png
│  │  │  │     ├─ chat.png
│  │  │  │     ├─ dash.png
│  │  │  │     ├─ e_c.png
│  │  │  │     ├─ issues.png
│  │  │  │     ├─ milk.png
│  │  │  │     ├─ record_video.png
│  │  │  │     ├─ sign.png
│  │  │  │     ├─ user_management.png
│  │  │  │     └─ vusual.png
│  │  │  └─ react.svg
│  │  ├─ components
│  │  │  ├─ Chat
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ GraphglGpuLayout
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ MultifunctionalInput
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ MyInput
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ MyList
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ SummaryGraph
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ SwitchLanguageButton
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  └─ Video
│  │  │     ├─ index.less
│  │  │     └─ index.tsx
│  │  ├─ hooks
│  │  │  ├─ index.tsx
│  │  │  └─ reduxHook.ts
│  │  ├─ index.css
│  │  ├─ main.tsx
│  │  ├─ store
│  │  │  ├─ index.tsx
│  │  │  └─ slices
│  │  │     ├─ AIGCMechanismSlice.ts
│  │  │     ├─ index.tsx
│  │  │     └─ signSlice.ts
│  │  ├─ types
│  │  │  ├─ aigc.ts
│  │  │  ├─ chat.ts
│  │  │  ├─ entertainment.ts
│  │  │  ├─ foods.ts
│  │  │  ├─ index.ts
│  │  │  ├─ list.ts
│  │  │  ├─ otherInfo.ts
│  │  │  ├─ sign.ts
│  │  │  ├─ technology.ts
│  │  │  └─ user.ts
│  │  ├─ utils
│  │  │  ├─ aigc.ts
│  │  │  ├─ eventBus.ts
│  │  │  ├─ index.ts
│  │  │  ├─ playMusic.ts
│  │  │  └─ sign.ts
│  │  ├─ views
│  │  │  ├─ About
│  │  │  │  ├─ AboutIMS
│  │  │  │  │  ├─ index.less
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ AboutMe
│  │  │  │     ├─ index.less
│  │  │  │     └─ index.tsx
│  │  │  ├─ AIGC
│  │  │  │  ├─ BusinessLayout
│  │  │  │  │  ├─ AddModal
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  ├─ index.tsx
│  │  │  │  │  ├─ inex.less
│  │  │  │  │  ├─ MechanismDataForm
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  └─ MechanismTable
│  │  │  │  │     └─ index.tsx
│  │  │  │  └─ Introduction
│  │  │  │     └─ index.tsx
│  │  │  ├─ ChatChat
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ DashBoard
│  │  │  │  └─ Overview
│  │  │  │     ├─ index.less
│  │  │  │     └─ index.tsx
│  │  │  ├─ Entertainment
│  │  │  │  └─ CharacterIntroduction
│  │  │  │     ├─ index.less
│  │  │  │     └─ index.tsx
│  │  │  ├─ Foods
│  │  │  │  └─ MilkPowder
│  │  │  │     └─ index.tsx
│  │  │  ├─ Header
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ IpInfo
│  │  │  │  └─ index.tsx
│  │  │  ├─ Menu
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ Other
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ QueryTable
│  │  │  │  └─ index.tsx
│  │  │  ├─ RecordVideo
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ SignInOrUp
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  ├─ Technology
│  │  │  │  └─ Frontend
│  │  │  │     ├─ Frame
│  │  │  │     │  └─ index.tsx
│  │  │  │     ├─ ProgrammingLanguage
│  │  │  │     │  └─ index.tsx
│  │  │  │     └─ Websites
│  │  │  │        ├─ index.less
│  │  │  │        └─ index.tsx
│  │  │  ├─ UsersManagement
│  │  │  │  ├─ EditUserModal
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.less
│  │  │  │  └─ index.tsx
│  │  │  └─ VisualLargeScreen
│  │  │     ├─ CustomData
│  │  │     │  ├─ index.less
│  │  │     │  └─ index.tsx
│  │  │     ├─ GaugeData
│  │  │     │  ├─ index.less
│  │  │     │  └─ index.tsx
│  │  │     ├─ index.less
│  │  │     └─ index.tsx
│  │  └─ vite-env.d.ts
│  ├─ tsconfig.json
│  ├─ tsconfig.node.json
│  └─ vite.config.ts
├─ LICENSE
├─ README.md
├─ README_de.md
├─ README_ja-JP.md
└─ README_zh-CN.md

2. 项目的启动文件介绍

前端启动文件

前端启动文件位于 frontend 目录下的 package.json 文件。该文件定义了项目的前端构建和启动脚本。以下是 package.json 中的关键部分：

{
  "scripts": {
    "dev": "pnpm run dev",
    "build": "pnpm run build",
    "start": "pnpm run start",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

其中，dev 脚本用于启动开发服务器，build 脚本用于构建项目，start 脚本用于启动生产环境服务器。

后端启动文件

后端启动文件位于 backend 目录下的 app.py 和 application.py 文件。app.py 是 Flask 应用的入口文件，而 application.py 用于创建 Flask 应用实例。以下是 app.py 中的关键部分：

from flask import Flask
from application import app

if __name__ == '__main__':
    app.run(debug=True)

3. 项目的配置文件介绍

IMS 项目使用 Python 的 config.py 文件进行配置。以下是 config.py 中的关键部分：

import os

class Config:
    SECRET_KEY = os.getenv('SECRET_KEY', 'your_secret_key')
    SQLALCHEMY_DATABASE_URI = os.getenv('DATABASE_URL', 'sqlite:///data.db')
    SQLALCHEMY_TRACK_MODIFICATIONS = False

在这个配置文件中，可以设置 Flask 应用的密钥和数据库连接字符串。需要注意的是，数据库连接字符串可以通过环境变量 DATABASE_URL 进行配置，以便在开发、测试和生产环境中使用不同的数据库实例。

以上就是 IMS 项目的启动和配置文档。希望对您有所帮助！