1dbfbebd05
- 新建多个小程序的 app.js、app.json 和 app.wxss 文件 - 新建多个前端项目的 App.vue 文件 - 添加 .gitignore 文件和后端 API 的 .env.example 文件
12 KiB
12 KiB
系统架构文档
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增强代码可维护性
功能模块
- 牛只档案管理
- 饲养记录管理
- 繁殖管理
- 环境监测数据展示
- 生产计划制定和执行跟踪
4.2.2 银行监管系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
功能模块
- 贷款申请和审批流程管理
- 质押物（牛只）状态监控
- 还款计划跟踪
- 风险评估数据展示
- 财务报表生成
4.2.3 保险监管系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
功能模块
- 保险投保管理
- 理赔申请和处理流程
- 风险评估和预警
- 保险记录查询
- 数据统计分析
4.2.4 政府监管平台
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
功能模块
- 产业数据总览
- 各类监管数据汇总
- 政策发布和通知
- 合规性检查
- 统计报表生成
4.2.5 活牛交易系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
功能模块
- 牛只信息发布和展示
- 在线交易撮合
- 合同管理
- 支付流程管理
- 交易记录查询
4.2.6 商城管理系统
- 基于Vue.js 3 Composition API
- 使用Ant Design Vue组件库
- 状态管理采用Pinia
- TypeScript增强代码可维护性
功能模块
- 商品信息管理
- 库存管理
- 订单处理
- 物流跟踪
- 售后服务管理
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 功能模块
- 产业概览: 展示整体产业规模、产值、增长率等关键指标
- 养殖监控: 实时展示各牧场的养殖情况、环境数据
- 交易统计: 牛只交易量、价格趋势、区域分布等数据
- 运输跟踪: 牛只运输实时状态和路径展示
- 风险预警: 风险事件展示和预警信息推送
- 生态指标: 环保数据、可持续发展指标展示
7.4 设计特色
- 融入锡林郭勒盟草原绿色主题
- 采用蒙古族文化元素的UI设计
- 突出安格斯牛品牌形象
- 支持多维度数据钻取和交互
8. 设计特色
8.1 地域文化特色
- 锡林郭勒盟草原绿色主题设计
- 融入蒙古族文化元素
- 体现当地畜牧业特色
8.2 品牌专业化
- 突出安格斯牛品牌特色
- 专门的安格斯牛管理和交易模块
- 品牌化展示和推广
8.3 生态理念
- 绿色发展理念贯穿整个系统
- 可持续畜牧业理念体现
- 环保数据监控和展示
9. 性能优化策略
9.1 前端优化
- 代码分割和按需加载
- 图片懒加载和压缩
- CDN加速静态资源
- 浏览器缓存策略
9.2 后端优化
- 数据库索引优化
- API响应缓存
- 数据库连接池
- 负载均衡部署
10. 部署架构
10.1 开发环境
- 本地开发服务器
- 热重载功能
- 代理配置解决跨域问题
10.2 生产环境
- Nginx反向代理服务器
- 负载均衡配置
- SSL证书配置
- 日志收集和监控系统