# 管理系统手脚架

**Repository Path**: zhangjun76/management-system-tripod

## Basic Information

- **Project Name**: 管理系统手脚架
- **Description**: 前后端分离
后端：python Flask
前端：Vue3+Element-plus+Vue-Router+Axios
数据库：Mysql、redis
- **Primary Language**: Python
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-11
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 管理系统手脚架

#### 介绍
后端：python Flask  
前端：Vue3 + Element-plus + Vue-Router + Axios  
数据库：MySQL、Redis

#### 软件架构

1. **前端架构**：
   - **Vue3**：现代的前端框架，用于构建用户界面。
   - **Element Plus**：基于 Vue3 的 UI 组件库，提供丰富的组件和样式。
   - **Vue Router**：用于前端路由管理，实现单页应用（SPA）的导航。
   - **Axios**：用于发送 HTTP 请求，与后端 API 进行数据交互。

2. **后端架构**：
   - **Flask**：轻量级的 Python Web 框架，用于构建 RESTful API。
   - **SQLAlchemy**：ORM（对象关系映射）工具，用于与 MySQL 数据库进行交互。
   - **Redis**：用于缓存和会话管理。
   - **JWT**：用于身份验证和授权。

3. **数据库架构**：
   - **MySQL**：用于存储主要的数据，如管理员信息、公告信息等。
   - **Redis**：用于缓存频繁访问的数据，提高系统性能。

#### 安装教程

1. **安装依赖**：
   - 确保你已经安装了 Python 和 Node.js。
   - 安装后端依赖：
    cd backend 
    pip install -r requirements.txt
   
   - 安装前端依赖：
   cd frontend
   npm install

2. **配置环境变量**：
   - 在 `backend` 目录下创建一个 `.env` 文件，并添加以下配置：
    
    FLASK_APP=app/init.py
    FLASK_ENV=development 
    VITE_BASE_URL=http://localhost:5000 
    SQLALCHEMY_DATABASE_URI=mysql+pymysql://username:password@localhost/dbname
    SECRET_KEY=your_secret_key
3. **初始化数据库**：
   - 运行数据库迁移脚本：
    cd backend 
    flask db init 
    flask db migrate -m "Initial migration." 
    flask db upgrade  
     
4. **启动后端服务**：
   - 启动 Flask 应用：
    cd backend 
    flask run
   - 默认运行在 `http://localhost:5000`。

5. **启动前端服务**：
   - 启动 Vue 开发服务器：
     cd frontend
     npm run dev
   - 默认运行在 `http://localhost:5173`。

#### 使用说明

1. **注册管理员**：
   - 访问 `http://localhost:5173/register`。
   - 填写用户名和密码进行注册。

2. **登录系统**：
   - 访问 `http://localhost:5173/login`。
   - 使用注册的用户名和密码登录。

3. **管理公告**：
   - 登录后，访问 `http://localhost:5173/manager/Notice`。
   - 可以进行公告的新增、编辑、删除和批量删除操作。

4. **管理管理员**：
   - 登录后，访问 `http://localhost:5173/manager/Admin`。
   - 可以进行管理员的新增、编辑、删除和批量删除操作。

5. **查看日志**：
   - 后端日志输出到控制台，可以查看详细的请求和错误信息。
   - 前端日志输出到控制台，可以查看前端请求和响应信息。

#### 目录结构
![输入图片说明](image.png)
![输入图片说明](vue/image.png)


#### 技术栈

- **前端**：
  - Vue3
  - Element Plus
  - Vue Router
  - Axios

- **后端**：
  - Flask
  - SQLAlchemy
  - Redis
  - JWT

- **数据库**：
  - MySQL
  - Redis

#### 贡献

欢迎贡献代码和提出建议！请遵循以下步骤：

1. Fork 项目。
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)。
3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)。
4. 推送到分支 (`git push origin feature/AmazingFeature`)。
5. 打开一个 Pull Request。

#### 许可证

本项目采用 MIT 许可证。详情请参阅 [LICENSE](LICENSE) 文件。

#### 联系

- **项目维护者**：lw
- **邮箱**：lw1369377@163.com

说明
环境变量配置：
VITE_BASE_URL：前端请求后端 API 的基础 URL。
SQLALCHEMY_DATABASE_URI：MySQL 数据库的连接字符串。
SECRET_KEY：用于生成 JWT 令牌的密钥。
数据库初始化：
使用 Flask-Migrate 进行数据库迁移，确保数据库表结构正确。
日志：
后端日志输出到控制台，可以查看详细的请求和错误信息。
前端日志输出到控制台，可以查看前端请求和响应信息。
通过以上 README.md 文件，用户可以快速了解项目的架构、安装步骤和使用方法。希望这对你有帮助！如果有任何进一步的需求或问题，请随时告知。