mirror of https://gitee.com/java110/MicroCommunityWeb.git synced 2026-02-24 05:46:03 +08:00

wuxw fe9e5fc57d v1.9 加入一些开发相关说明，方便大家快速上手

2025-08-16 11:43:58 +08:00

7.7 KiB

Raw Blame History

HC物业管理系统 - 开发者快速上手指南

📖 项目概述

项目名称: 物业管理系统 (MicroCommunityWeb)
技术栈: Vue 2 + Element UI + Vue Router + Vuex + Axios
项目类型: 企业级物业管理 Web 应用
版本: v1.9

这是一个基于 Vue 2 的物业管理系统，提供完整的物业管理功能，包括业主管理、费用管理、工单管理、设备管理等。

🚀 快速开始

环境要求

Node.js >= 12.0.0
npm >= 6.0.0
Vue CLI >= 4.5.0

安装依赖

# 安装项目依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

开发服务器配置

端口: 3000
自动打开浏览器: 是
代理配置: 已配置后端 API 代理

🏗️ 项目架构

目录结构

src/
├── api/           # API 接口层
├── components/    # 公共组件
├── conf/         # 配置文件
├── i18n/         # 国际化配置
├── router/       # 路由配置
├── utils/        # 工具函数
├── views/        # 页面组件
├── App.vue       # 根组件
└── main.js       # 入口文件

核心模块

用户管理: 员工、角色、权限管理
社区管理: 小区、楼栋、房屋管理
业主管理: 业主信息、家庭成员、车辆管理
费用管理: 物业费、水电费、停车费管理
工单管理: 维修、投诉、巡检工单
设备管理: 门禁、监控、充电桩管理
报表统计: 各类数据统计和报表

🛠️ 技术特性

前端技术栈

Vue 2.6.14: 渐进式 JavaScript 框架
Element UI 2.15.6: 基于 Vue 的组件库
Vue Router 3.5.1: 官方路由管理器
Axios 0.21.1: HTTP 客户端
Vue I18n 8.26.7: 国际化插件
ECharts 5.6.0: 数据可视化图表库

开发工具

Vue CLI 4.5.0: Vue 项目脚手架
ESLint: 代码质量检查
Sass: CSS 预处理器
Babel: JavaScript 编译器

📱 页面结构

主要页面模块

views/
├── index/        # 首页仪表板
├── user/         # 用户登录相关
├── layout/       # 主布局框架
├── staff/        # 员工管理
├── community/    # 社区管理
├── room/         # 房屋管理
├── owner/        # 业主管理
├── fee/          # 费用管理
├── work/         # 工单管理
├── resource/     # 资源管理
├── system/       # 系统管理
├── report/       # 报表统计
└── ...

路由配置

项目使用模块化路由配置，主要路由文件：

src/router/index.js - 主路由配置
src/router/feeRouter.js - 费用管理路由
src/router/workRouter.js - 工单管理路由
src/router/communityRouter.js - 社区管理路由

🔧 开发规范

组件命名规范

页面组件: 使用 PascalCase，如 RoomList.vue
公共组件: 使用 PascalCase，如 RoomTree.vue
组件名: 使用 kebab-case，如 room-list

文件命名规范

页面文件: 以 List.vue、Detail.vue、Add.vue 等结尾
API 文件: 以 Api.js 结尾
语言文件: 以 Lang.js 结尾

代码风格

使用 ESLint 进行代码检查
遵循 Vue 官方风格指南
使用 2 空格缩进
使用单引号

🌐 国际化支持

多语言配置

项目支持中英文双语，语言文件位于 src/i18n/ 目录：

commonLang.js - 通用语言包
feeI18n.js - 费用管理语言包
workI18n.js - 工单管理语言包
等等...

使用方式

// 在模板中使用
{{ $t('common.save') }}

// 在 JavaScript 中使用
this.$t('common.save')

🔌 API 接口

接口配置

基础 URL: 通过代理配置到后端服务
超时时间: 15 秒
请求拦截器: 自动添加认证头信息
响应拦截器: 统一错误处理

接口调用示例

import { getDict } from '@/api/community/communityApi'

// 获取字典数据
const data = await getDict('tableName', 'columnName')

常用 API 模块

communityApi.js - 社区相关接口
feeApi.js - 费用相关接口
workApi.js - 工单相关接口
userApi.js - 用户相关接口

🎨 UI 组件使用

Element UI 组件

项目大量使用 Element UI 组件，常用组件：

el-table - 数据表格
el-form - 表单组件
el-dialog - 对话框
el-select - 下拉选择器
el-button - 按钮组件

自定义组件

项目包含多个自定义组件：

RoomTree - 房屋树形选择器
UploadImage - 图片上传组件
ChooseOrgTree - 组织树选择器

📊 数据管理

状态管理

使用 Vue 的响应式数据管理
局部状态存储在组件内部
全局状态通过 Vue.prototype 挂载

数据流

组件调用 API 接口
接口返回数据
组件更新本地状态
视图自动更新

🔐 权限控制

权限检查

// 检查用户权限
if (this.hasPrivilege('502020082453087940')) {
  // 有权限的操作
}

权限配置

权限通过后端接口返回，存储在 localStorage 中：

hc_staff_privilege: 用户权限列表
user: 用户信息

🚨 常见问题

1. 下拉框不显示内容

问题: el-select 下拉选项不显示解决: 检查数据格式，确保 key 和 value 属性一致

2. 表格选择功能不工作

问题: el-table 的 type="selection" 不工作解决: 添加 @selection-change 事件处理

3. 路由跳转失败

问题: 页面跳转后显示空白解决: 检查路由配置和组件导入路径

4. API 请求失败

问题: 接口调用返回错误解决: 检查网络代理配置和接口地址

📝 开发流程

1. 创建新页面

# 在 src/views/ 下创建新目录
mkdir src/views/newModule

# 创建页面组件
touch src/views/newModule/NewModuleList.vue

2. 配置路由

在对应的路由文件中添加新路由：

{
  path: '/views/newModule/newModuleList',
  name: 'NewModuleList',
  component: () => import('@/views/newModule/NewModuleList.vue')
}

3. 创建 API 接口

在 src/api/ 下创建对应的 API 文件：

import request from '@/utils/request'

export function getNewModuleList(params) {
  return request({
    url: '/newModule/list',
    method: 'get',
    params
  })
}

4. 添加国际化支持

在对应的语言文件中添加翻译：

export const messages = {
  zh: {
    newModule: {
      title: '新模块管理',
      add: '新增'
    }
  }
}

🎯 最佳实践

1. 组件设计

保持组件单一职责
合理使用 props 和 emit
避免组件间过度耦合

2. 性能优化

使用 v-if 和 v-show 合理控制显示
避免在模板中使用复杂表达式
合理使用计算属性和监听器

3. 错误处理

添加 try-catch 错误捕获
提供用户友好的错误提示
记录错误日志便于调试

4. 代码复用

提取公共逻辑到 mixins
创建可复用的工具函数
使用公共组件减少重复代码

📚 学习资源

Vue 2 官方文档

Element UI 文档

Element UI 组件库

项目相关

查看现有组件代码了解项目风格
参考相似功能的页面实现
阅读 API 接口文档

🤝 团队协作

代码提交

使用清晰的提交信息
提交前进行代码检查
及时同步最新代码

问题反馈

遇到问题先查看本文档
搜索现有 issue 避免重复
提供详细的错误信息和复现步骤

祝您开发愉快！ 🎉

如有问题，请查看项目文档或联系团队成员。

7.7 KiB Raw Blame History Unescape Escape