mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-23 21:36:37 +08:00
328 lines
9.3 KiB
Markdown
328 lines
9.3 KiB
Markdown
# 物业管理系统 - 项目架构图
|
|
|
|
## 🏗️ 整体架构
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ 前端应用层 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Vue 2 + Element UI + Vue Router + Vuex + Axios │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 业务逻辑层 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 用户管理 │ 社区管理 │ 费用管理 │ 工单管理 │ 设备管理 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 数据访问层 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ HTTP 请求 │ 本地存储 │ 权限验证 │ 错误处理 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 后端服务层 │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 📁 目录结构详解
|
|
|
|
### 1. 源码目录 (src/)
|
|
|
|
```
|
|
src/
|
|
├── api/ # API 接口层
|
|
│ ├── community/ # 社区管理接口
|
|
│ ├── fee/ # 费用管理接口
|
|
│ ├── work/ # 工单管理接口
|
|
│ ├── user/ # 用户管理接口
|
|
│ ├── room/ # 房屋管理接口
|
|
│ ├── owner/ # 业主管理接口
|
|
│ ├── resource/ # 资源管理接口
|
|
│ ├── system/ # 系统管理接口
|
|
│ └── ...
|
|
├── components/ # 公共组件库
|
|
│ ├── common/ # 通用组件
|
|
│ ├── fee/ # 费用相关组件
|
|
│ ├── room/ # 房屋相关组件
|
|
│ ├── upload/ # 上传组件
|
|
│ └── ...
|
|
├── views/ # 页面组件
|
|
│ ├── index/ # 首页仪表板
|
|
│ ├── layout/ # 主布局框架
|
|
│ ├── user/ # 用户相关页面
|
|
│ ├── community/ # 社区管理页面
|
|
│ ├── fee/ # 费用管理页面
|
|
│ ├── work/ # 工单管理页面
|
|
│ └── ...
|
|
├── router/ # 路由配置
|
|
│ ├── index.js # 主路由配置
|
|
│ ├── feeRouter.js # 费用管理路由
|
|
│ ├── workRouter.js # 工单管理路由
|
|
│ └── ...
|
|
├── i18n/ # 国际化配置
|
|
│ ├── index.js # 国际化主配置
|
|
│ ├── commonLang.js # 通用语言包
|
|
│ ├── feeI18n.js # 费用管理语言包
|
|
│ └── ...
|
|
├── utils/ # 工具函数
|
|
│ ├── request.js # HTTP 请求封装
|
|
│ ├── dateUtil.js # 日期工具函数
|
|
│ ├── moneyUtil.js # 金额工具函数
|
|
│ └── ...
|
|
├── conf/ # 配置文件
|
|
│ └── config.js # 应用配置
|
|
├── App.vue # 根组件
|
|
└── main.js # 应用入口
|
|
```
|
|
|
|
### 2. 配置文件
|
|
|
|
```
|
|
项目根目录/
|
|
├── package.json # 项目依赖配置
|
|
├── vue.config.js # Vue CLI 配置
|
|
├── .eslintrc.js # ESLint 配置
|
|
├── .gitignore # Git 忽略文件
|
|
└── README.md # 项目说明
|
|
```
|
|
|
|
## 🔄 数据流架构
|
|
|
|
### 1. 单向数据流
|
|
|
|
```
|
|
用户操作 → 组件事件 → API 调用 → 数据更新 → 视图渲染
|
|
↓ ↓ ↓ ↓ ↓
|
|
触发事件 事件处理 后端接口 状态变更 响应式更新
|
|
```
|
|
|
|
### 2. 组件通信
|
|
|
|
```
|
|
父组件 ←→ 子组件
|
|
↓ ↓
|
|
Props Events
|
|
↓ ↓
|
|
数据传递 事件通知
|
|
```
|
|
|
|
### 3. 状态管理
|
|
|
|
```
|
|
组件内部状态 (data) ←→ 全局状态 (Vue.prototype)
|
|
↓ ↓
|
|
响应式数据 全局方法/属性
|
|
↓ ↓
|
|
自动更新视图 权限检查/工具函数
|
|
```
|
|
|
|
## 🌐 网络架构
|
|
|
|
### 1. 请求流程
|
|
|
|
```
|
|
前端组件 → Axios 实例 → 请求拦截器 → 后端 API → 响应拦截器 → 组件
|
|
↓ ↓ ↓ ↓ ↓ ↓
|
|
发起请求 统一配置 添加认证头 处理业务 统一处理 更新状态
|
|
```
|
|
|
|
### 2. 代理配置
|
|
|
|
```javascript
|
|
// vue.config.js
|
|
proxy: {
|
|
'/app': {
|
|
target: 'http://demo.homecommunity.cn/app',
|
|
changeOrigin: true,
|
|
pathRewrite: { '^/app': '' }
|
|
},
|
|
'/callComponent': {
|
|
target: 'http://demo.homecommunity.cn/callComponent',
|
|
changeOrigin: true,
|
|
pathRewrite: { '^/callComponent': '' }
|
|
}
|
|
}
|
|
```
|
|
|
|
## 🔐 权限架构
|
|
|
|
### 1. 权限控制流程
|
|
|
|
```
|
|
用户登录 → 获取权限列表 → 存储到 localStorage → 组件权限检查 → 功能控制
|
|
↓ ↓ ↓ ↓ ↓
|
|
身份验证 后端返回权限 本地缓存权限 调用 hasPrivilege 显示/隐藏
|
|
```
|
|
|
|
### 2. 权限检查实现
|
|
|
|
```javascript
|
|
Vue.prototype.hasPrivilege = function(_privaleges) {
|
|
const privilegesToCheck = Array.isArray(_privaleges) ? _privaleges : [_privaleges];
|
|
let userPrivileges = localStorage.getItem('hc_staff_privilege');
|
|
|
|
if (userPrivileges) {
|
|
userPrivileges = userPrivileges.split(',');
|
|
} else {
|
|
return false;
|
|
}
|
|
|
|
return privilegesToCheck.some(item => userPrivileges.includes(item));
|
|
}
|
|
```
|
|
|
|
## 🎨 UI 架构
|
|
|
|
### 1. 组件层次结构
|
|
|
|
```
|
|
App.vue (根组件)
|
|
↓
|
|
Layout.vue (主布局)
|
|
↓
|
|
Router View (路由视图)
|
|
↓
|
|
页面组件 (如 RoomList.vue)
|
|
↓
|
|
业务组件 (如 RoomTree.vue)
|
|
↓
|
|
Element UI 组件 (如 el-table, el-form)
|
|
```
|
|
|
|
### 2. 样式架构
|
|
|
|
```
|
|
全局样式 (App.vue)
|
|
↓
|
|
Element UI 主题样式
|
|
↓
|
|
页面级样式 (scoped)
|
|
↓
|
|
组件级样式 (scoped)
|
|
```
|
|
|
|
## 📱 响应式架构
|
|
|
|
### 1. 移动端适配
|
|
|
|
- 使用 Element UI 的响应式栅格系统
|
|
- 媒体查询适配不同屏幕尺寸
|
|
- 触摸友好的交互设计
|
|
|
|
### 2. 浏览器兼容性
|
|
|
|
- 支持现代浏览器 (Chrome, Firefox, Safari, Edge)
|
|
- 使用 Babel 转译 ES6+ 语法
|
|
- Polyfill 支持旧版本浏览器
|
|
|
|
## 🚀 性能优化架构
|
|
|
|
### 1. 代码分割
|
|
|
|
```javascript
|
|
// 路由懒加载
|
|
component: () => import('@/views/room/roomList.vue')
|
|
|
|
// 组件懒加载
|
|
components: {
|
|
RoomTree: () => import('@/components/room/roomTree.vue')
|
|
}
|
|
```
|
|
|
|
### 2. 资源优化
|
|
|
|
- 图片懒加载
|
|
- CSS/JS 压缩
|
|
- 静态资源 CDN 加速
|
|
- 浏览器缓存策略
|
|
|
|
### 3. 运行时优化
|
|
|
|
- Vue 虚拟 DOM 优化
|
|
- 计算属性缓存
|
|
- 事件委托
|
|
- 防抖节流处理
|
|
|
|
## 🔧 开发工具架构
|
|
|
|
### 1. 构建工具
|
|
|
|
```
|
|
Vue CLI 4.5.0
|
|
↓
|
|
Webpack 4
|
|
↓
|
|
Babel + ESLint + Sass
|
|
↓
|
|
开发/生产环境构建
|
|
```
|
|
|
|
### 2. 代码质量
|
|
|
|
- ESLint: 代码规范检查
|
|
- Prettier: 代码格式化
|
|
- Git Hooks: 提交前检查
|
|
- 代码审查流程
|
|
|
|
### 3. 调试工具
|
|
|
|
- Vue DevTools: Vue 组件调试
|
|
- Chrome DevTools: 浏览器调试
|
|
- 控制台日志: 开发调试
|
|
- 网络面板: API 调试
|
|
|
|
## 📊 监控架构
|
|
|
|
### 1. 错误监控
|
|
|
|
```javascript
|
|
// 全局错误处理
|
|
Vue.config.errorHandler = function(err, vm, info) {
|
|
console.error('Vue Error:', err, info);
|
|
// 上报错误信息
|
|
}
|
|
```
|
|
|
|
### 2. 性能监控
|
|
|
|
- 页面加载时间
|
|
- API 响应时间
|
|
- 用户交互响应时间
|
|
- 内存使用情况
|
|
|
|
### 3. 用户行为监控
|
|
|
|
- 页面访问统计
|
|
- 功能使用统计
|
|
- 错误操作统计
|
|
- 用户反馈收集
|
|
|
|
## 🔄 部署架构
|
|
|
|
### 1. 开发环境
|
|
|
|
```
|
|
本地开发 → 热重载 → 代理转发 → 后端服务
|
|
↓ ↓ ↓ ↓
|
|
npm run dev 实时更新 本地代理 测试环境
|
|
```
|
|
|
|
### 2. 生产环境
|
|
|
|
```
|
|
代码构建 → 资源优化 → 静态部署 → CDN 加速
|
|
↓ ↓ ↓ ↓
|
|
npm run build 压缩优化 服务器部署 全球加速
|
|
```
|
|
|
|
### 3. 环境配置
|
|
|
|
```javascript
|
|
// 环境变量配置
|
|
NODE_ENV=development // 开发环境
|
|
NODE_ENV=production // 生产环境
|
|
|
|
// API 地址配置
|
|
BASE_API=http://localhost:8008 // 开发环境
|
|
BASE_API=https://api.example.com // 生产环境
|
|
```
|
|
|
|
---
|
|
|
|
这个架构图展示了项目的整体结构和技术实现，帮助开发者快速理解项目的组织方式和各个模块之间的关系。 |