aiotagro/xlxumu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1dbfbebd0514567bba9c790085057c2051766d7a
xlxumu/ARCHITECTURE.md
ylweng 1dbfbebd05 feat: 初始化多个小程序和前端项目 
- 新建多个小程序的 app.js、app.json 和 app.wxss 文件
- 新建多个前端项目的 App.vue 文件
- 添加 .gitignore 文件和后端 API 的 .env.example 文件
2025-08-18 23:48:54 +08:00

310 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 系统架构文档
## 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 View Git Blame Copy Permalink