aiotagro/xlxumu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1dbfbebd0514567bba9c790085057c2051766d7a
xlxumu/ARCHITECTURE.md

310 lines
12 KiB
Markdown
Raw Normal View History

feat: 初始化多个小程序和前端项目 - 新建多个小程序的 app.js、app.json 和 app.wxss 文件 - 新建多个前端项目的 App.vue 文件 - 添加 .gitignore 文件和后端 API 的 .env.example 文件
2025-08-18 23:48:54 +08:00
# 系统架构文档
## 1. 概述
本项目是一个综合性的畜牧业数字化管理平台，主要面向锡林郭勒盟地区的安格斯牛养殖产业，包含官网展示、后台管理、移动端小程序等多个子系统。平台集成了养殖管理、银行监管、保险监管、牛只交易、运输管理、牛肉商城等功能模块，旨在通过数字化手段提升整个产业链的管理效率和透明度。
## 2. 技术栈
### 2.1 前端技术栈
- **官网首页**: HTML5 + CSS3 + JavaScript
- **后台管理系统**: Vue.js 3 + TypeScript + Ant Design Vue + Pinia
- **微信小程序矩阵**: 微信小程序原生开发 + uni-app
### 2.2 后端技术栈
- **API服务**: Node.js + Express.js + TypeScript
- **数据库**: MySQL
- **文件存储**: 腾讯云存储
### 2.3 安全架构
- **身份认证**: JWT (JSON Web Tokens)
- **权限管理**: 基于角色的访问控制 (RBAC)
- **数据传输**: HTTPS 加密传输
- **API防护**: 接口限流、参数校验、防SQL注入等
### 2.4 数据架构
- **实时数据采集**: IoT设备数据接入
- **大数据分析**: 数据分析引擎
- **智能预警**: 基于规则的预警系统
- **可视化展示**: 图表化数据展示平台
## 3. 系统架构图
```
┌─────────────────────────────────────────────────────────────────────┐
│ 用户端接入层 │
├─────────────────┬───────────────────────────────────────────────────┤
│ 官网首页 │ 专业管理系统 │
│ (HTML5展示) ├───────────────────────────────────────────────────┤
│ │ - 养殖管理系统 (Vue.js 3 + Ant) │
│ │ - 银行监管系统 (Vue.js 3 + Ant) │
│ │ - 保险监管系统 (Vue.js 3 + Ant) │
│ │ - 政府监管平台 (Vue.js 3 + Ant) │
│ │ - 活牛交易系统 (Vue.js 3 + Ant) │
│ │ - 商城管理系统 (Vue.js 3 + Ant) │
├─────────────────┼───────────────────────────────────────────────────┤
│ 微信小程序矩阵 │
│ - 牛肉商城小程序 │
│ - 养殖管理小程序 │
│ - 银行监管小程序 │
│ - 保险监管小程序 │
│ - 活牛交易小程序 │
├─────────────────┴───────────────────────────────────────────────────┤
│ API服务层 (Node.js) │
├─────────────────────────────────────────────────────────────────────┤
│ 数据层 │
├─────────────────────────────────────────────────────────────────────┤
│ 关系数据库(MySQL) │ 文件存储(腾讯云) │ 缓存系统(Redis) │
├─────────────────────────────────────────────────────────────────────┤
│ 数据分析层 │
├─────────────────────────────────────────────────────────────────────┤
│ 大数据分析引擎 │ 智能预警系统 │ 可视化平台 │
└─────────────────────────────────────────────────────────────────────┘
```
## 4. 前端系统架构
### 4.1 官网首页系统
- 纯HTML5、CSS3、JavaScript实现
- 响应式设计，适配多种设备
- 突出锡林郭勒盟地域元素和蒙古族文化特色
- 绿色草原主题风格
### 4.2 专业管理系统
#### 4.2.1 养殖管理系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 牛只档案管理
2. 饲养记录管理
3. 繁殖管理
4. 环境监测数据展示
5. 生产计划制定和执行跟踪
#### 4.2.2 银行监管系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 贷款申请和审批流程管理
2. 质押物（牛只）状态监控
3. 还款计划跟踪
4. 风险评估数据展示
5. 财务报表生成
#### 4.2.3 保险监管系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 保险投保管理
2. 理赔申请和处理流程
3. 风险评估和预警
4. 保险记录查询
5. 数据统计分析
#### 4.2.4 政府监管平台
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 产业数据总览
2. 各类监管数据汇总
3. 政策发布和通知
4. 合规性检查
5. 统计报表生成
#### 4.2.5 活牛交易系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 牛只信息发布和展示
2. 在线交易撮合
3. 合同管理
4. 支付流程管理
5. 交易记录查询
#### 4.2.6 商城管理系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
##### 功能模块
1. 商品信息管理
2. 库存管理
3. 订单处理
4. 物流跟踪
5. 售后服务管理
### 4.3 微信小程序矩阵
- 使用微信小程序原生开发框架
- 跨平台支持采用uni-app
- 包含5个专门的小程序应用
#### 4.3.1 牛肉商城小程序（消费者端）
- 商品浏览和搜索
- 在线下单和支付
- 订单查询和跟踪
- 售后服务申请
- **认养功能**：用户可以认养特定牛只，跟踪其成长过程
#### 4.3.2 养殖管理小程序（牧民端）
- 移动端牛只档案查看
- 饲养记录录入
- 健康状况上报
- 通知消息接收
- 数据统计查看
#### 4.3.3 银行监管小程序（银行端）
- 移动端贷款审批
- 质押物状态查看
- 风险数据监控
- 移动办公支持
#### 4.3.4 保险监管小程序（保险端）
- 移动端保险处理
- 理赔流程管理
- 风险评估查看
- 移动查勘支持
#### 4.3.5 活牛交易小程序（交易员端）
- 活牛信息发布
- 在线交易撮合
- 合同查看和管理
- 交易记录查询
- 支付状态跟踪
## 5. 后端系统架构
### 5.1 API服务层
- 基于Node.js和Express.js构建
- 使用TypeScript增强代码健壮性
- RESTful API设计风格
- JWT身份认证机制
### 5.2 数据存储层
- 主数据库：MySQL关系型数据库
- 文件存储：腾讯云对象存储服务
- 缓存系统：Redis（可选）
### 5.3 安全架构
- 基于JWT的无状态认证
- RBAC角色权限管理系统
- HTTPS加密传输
- API接口安全防护（限流、防注入等）
### 5.4 数据分析层
- 实时数据采集系统
- 大数据分析引擎
- 智能预警系统
- 数据可视化展示平台
## 6. 项目结构
```
.
├── frontend/ # 前端项目
│ ├── website/ # 官网首页
│ ├── farming-management/ # 养殖管理系统
│ ├── bank-supervision/ # 银行监管系统
│ ├── insurance-supervision/ # 保险监管系统
│ ├── government-platform/ # 政府监管平台
│ ├── cattle-trading/ # 活牛交易系统
│ ├── mall-management/ # 商城管理系统
│ ├── dashboard/ # 大屏可视化系统
│ └── mini-programs/ # 微信小程序矩阵
│ ├── beef-mall/ # 牛肉商城小程序
│ ├── farming-manager/ # 养殖管理小程序
│ ├── bank-supervision/ # 银行监管小程序
│ ├── insurance-supervision/ # 保险监管小程序
│ └── cattle-trading/ # 活牛交易小程序
├── backend/ # 后端项目
│ ├── api/ # API服务
│ ├── database/ # 数据库脚本
│ └── utils/ # 工具函数
├── docs/ # 文档
└── deployment/ # 部署相关配置
```
## 7. 大屏可视化系统
### 7.1 系统概述
大屏可视化系统是本项目的重要组成部分，主要用于展示锡林郭勒盟安格斯牛养殖产业的整体数据、实时监控信息和分析结果。通过直观的图表和数据可视化方式，为管理者提供全面的产业洞察。
### 7.2 技术实现
- **前端框架**: Vue.js 3 + ECharts/DataV
- **可视化库**: Apache ECharts + D3.js
- **响应式设计**: 支持多种大屏比例(16:9, 4:3等)
- **实时数据**: WebSocket实时数据推送
### 7.3 功能模块
1. **产业概览**: 展示整体产业规模、产值、增长率等关键指标
2. **养殖监控**: 实时展示各牧场的养殖情况、环境数据
3. **交易统计**: 牛只交易量、价格趋势、区域分布等数据
4. **运输跟踪**: 牛只运输实时状态和路径展示
5. **风险预警**: 风险事件展示和预警信息推送
6. **生态指标**: 环保数据、可持续发展指标展示
### 7.4 设计特色
- 融入锡林郭勒盟草原绿色主题
- 采用蒙古族文化元素的UI设计
- 突出安格斯牛品牌形象
- 支持多维度数据钻取和交互
## 8. 设计特色
### 8.1 地域文化特色
- 锡林郭勒盟草原绿色主题设计
- 融入蒙古族文化元素
- 体现当地畜牧业特色
### 8.2 品牌专业化
- 突出安格斯牛品牌特色
- 专门的安格斯牛管理和交易模块
- 品牌化展示和推广
### 8.3 生态理念
- 绿色发展理念贯穿整个系统
- 可持续畜牧业理念体现
- 环保数据监控和展示
## 9. 性能优化策略
### 9.1 前端优化
- 代码分割和按需加载
- 图片懒加载和压缩
- CDN加速静态资源
- 浏览器缓存策略
### 9.2 后端优化
- 数据库索引优化
- API响应缓存
- 数据库连接池
- 负载均衡部署
## 10. 部署架构
### 10.1 开发环境
- 本地开发服务器
- 热重载功能
- 代理配置解决跨域问题
### 10.2 生产环境
- Nginx反向代理服务器
- 负载均衡配置
- SSL证书配置
- 日志收集和监控系统
Reference in New Issue Copy Permalink