Ink Web - 前端后台系统

项目概述

Ink Web 是一个基于 Flask 的前端后台系统，提供商品管理、用户认证和实时通信功能。系统采用模块化设计，包含数据库、模型、路由和前端页面，支持 RESTful API 和 WebSocket 实时通信。

1. 后台 Flask

app.py  加载前端页面 和 处理接口，DB操作
start.sh 一键部署

2. 前端 Vue3

前端 采用 art-design-pro 实现

核心功能

1. 商品管理

• 创建、读取、更新、删除商品（CRUD）
• 商品编码唯一性校验
• 支持商品分类、价格、库存等信息管理

2. 用户认证

• 用户注册与登录（基于 JWT Token）
• 用户权限管理（通过 roles 字段控制）
• 用户信息查询

3. 实时通信

• WebSocket 支持实时消息推送
• 机器人状态实时更新（位置、电量、状态）
• 支持分组房间管理

API 路由列表

方法	路径	说明
POST	/api/auth/login	用户登录
POST	/api/auth/register	用户注册
GET	/api/user/info	获取用户信息
GET	/api/products	获取所有商品
POST	/api/products	创建商品（需要商品编码）
GET	/api/products/<id>	获取单个商品
PUT	/api/products/<id>	更新商品（需要商品编码）
DELETE	/api/products/<id>	删除商品

API 规范

商品编码要求

创建商品和更新商品时，必须提供 code 字段（商品编码）：

// 创建商品
POST /api/products
{
    "code": "PROD001",
    "name": "商品名称",
    "description": "商品描述",
    "price": 99.99,
    "stock": 100,
    "category": "分类"
}

// 更新商品
PUT /api/products/1
{
    "code": "PROD001",
    "name": "更新后的名称",
    "price": 199.99
}

响应格式

{
    "code": 200,
    "msg": "操作成功",
    "data": { ... }
}

用户登录

POST /api/auth/login
{
    "userName": "Super",
    "password": "password"
}

用户注册

POST /api/auth/register
{
    "username": "newuser",
    "password": "password",
    "email": "newuser@ink.com"
}

系统架构

Ink Web
├── app.py                      # Flask 应用主入口
├── database/                  # 数据库模块
│   └── __init__.py            # 数据库初始化
├── models/                    # 数据模型层
│   ├── product.py             # 商品数据模型
│   └── user.py                # 用户数据模型
├── routes/                    # 路由层
│   ├── auth.py                # 认证路由
│   ├── user.py                # 用户路由
│   ├── product.py             # 商品路由
│   └── register.py            # 路由注册器
└── templates/                 # HTML 模板
    └── index.html

启动服务

# 启动 Flask 应用
python app.py

# 启动 ROS2 桥接服务
python ros2_bridge.py

访问地址

• Flask API: http://localhost:5000
• 前端页面: http://localhost:5000 (由 art-design-pro 提供)
• WebSocket: ws://localhost:5000

数据库初始化

系统会自动创建用户和商品表，并初始化以下默认用户：

• Super 用户: username=Super, email=art.design@gmail.com, roles=["R_SUPER"]
• User 用户: username=User, email=user@ink.com, roles=["R_USER"]

安全说明

• 所有敏感操作（如登录、注册）均使用 JWT Token 进行身份验证
• 用户密码使用 SHA256 哈希存储
• 所有 API 请求必须包含有效的 JWT Token（在请求头中以 Authorization: Bearer <token> 格式提供）
• 系统支持软删除，删除操作不会永久移除数据，而是标记为 is_active=0

开发环境

依赖安装

# 安装 Python 依赖
pip install -r requirements.txt

项目结构说明

• app.py: Flask 应用主入口，配置 CORS 和 SocketIO
• database/__init__.py: 数据库初始化，创建用户和商品表
• models/: 数据模型层，封装数据库操作
• routes/: 路由层，定义 API 接口
• templates/: HTML 模板文件

前端集成

前端页面（art-design-pro）已集成到 Flask 应用中，通过以下方式访问：

• 静态文件路径: /assets (位于 art-design-pro/dist/assets)
• 主页: / (位于 art-design-pro/dist/index.html)

未来扩展

• 增加商品搜索功能
• 实现商品分类管理
• 添加订单管理模块
• 支持多租户架构
• 增加数据导出功能
• 实现更完善的权限控制系统