DM-ROW 接口文档

Appearance

前端开发指南 ​

**本文引用的文件** - [App.vue](file://app/devicemate-app/App.vue) - [main.js](file://app/devicemate-app/main.js) - [pages.json](file://app/devicemate-app/pages.json) - [manifest.json](file://app/devicemate-app/manifest.json) - [store/index.js](file://app/devicemate-app/store/index.js) - [store/modules/index.js](file://app/devicemate-app/store/modules/index.js) - [config/request.js](file://app/devicemate-app/config/request.js) - [locale/index.js](file://app/devicemate-app/locale/index.js) - [utils/userMixins.js](file://app/devicemate-app/utils/userMixins.js) - [uview-ui/index.js](file://app/devicemate-app/uview-ui/index.js) - [modules/equipment/equipment.vue](file://app/devicemate-app/modules/equipment/equipment.vue) - [components/dd-form/baseForm.vue](file://app/devicemate-app/components/dd-form/baseForm.vue) - [components/mescroll-uni/mescroll-uni.vue](file://app/devicemate-app/components/mescroll-uni/mescroll-uni.vue) - [uni.scss](file://app/devicemate-app/uni.scss) - [vue.config.js](file://app/devicemate-app/vue.config.js)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

简介 ​

本指南面向 DeviceMate 前后端分离项目的前端开发者，系统讲解基于 UniApp 的移动端应用与基于 Vue CLI 的 Web 应用的架构设计、组件体系、开发模式与最佳实践。重点覆盖以下方面：

  • uView UI 框架的集成与使用
  • 状态管理（Vuex）与模块划分
  • 路由与页面布局（pages.json）
  • 移动端适配、响应式与跨平台兼容
  • 组件开发规范、样式管理与国际化
  • 实际开发示例、调试技巧与性能优化建议

项目结构 ​

DeviceMate 前端采用“多端统一 + 分层模块”的组织方式：

  • UniApp 移动端应用位于 app/devicemate-app，包含页面、模块、组件、状态管理、国际化、工具库与 UI 框架集成
  • Vue.js Web 应用位于 dm/lemes-web，采用 Vue CLI 构建，提供 PC 端管理界面
  • 两套前端共享后端 API，通过统一的请求封装与国际化机制对接

图表来源

章节来源

核心组件 ​

  • 应用入口与生命周期：在 App.vue 中集中处理应用启动、升级检测、登录态与菜单权限跳转
  • 全局注册与启动：在 main.js 中注册 uView、全局组件、HTTP 请求、本地存储、国际化与 Vuex
  • 页面与 TabBar：通过 pages.json 统一声明页面、导航标题与 TabBar 列表
  • 平台配置：通过 manifest.json 配置 Android/iOS 权限、打包图标、SDK 与 UA
  • 状态管理：store/index.js 与 store/modules/index.js 组织模块化状态
  • 请求封装：config/request.js 提供 get/post 封装、鉴权头、国际化与时区头、网络状态监听与错误处理
  • 国际化：locale/index.js 基于 VueI18n，按系统语言加载对应资源
  • UI 框架：uview-ui/index.js 提供全局 mixin、工具函数与 $u 注入
  • 通用组件：components 下包含 mescroll-uni（滚动加载）、dd-form（表单渲染）、u-charts 等
  • 业务模块：modules 下按功能域拆分设备、巡检、保养、维修、工单等页面

章节来源

架构总览 ​

下图展示移动端应用从启动到页面渲染的关键流程，包括国际化、权限判定、TabBar 动态可见性与网络状态监听。

图表来源

章节来源

详细组件分析 ​

状态管理（Vuex）与模块 ​

  • store/index.js 引入 modules/index.js，按功能域拆分为 common、login、equipment、repair、maintain
  • 模块内包含 state、mutations、actions、getters，便于职责分离与维护
  • 在 main.js 中挂载到 Vue 实例，页面通过 this.$store 访问

图表来源

章节来源

请求封装与鉴权 ​

  • config/request.js 封装 get/post，自动注入 Authorization、Accept-Language、Request-From、timeZone 等头
  • 统一 loading 与错误提示，401 自动清理缓存并跳转登录
  • 支持自定义 filter 与 needCustomUrls，便于特殊接口处理

图表来源

章节来源

国际化（i18n） ​

  • locale/index.js 基于系统语言加载 en_US 与 zh-Hans
  • 在 pages.json 中使用 %key% 占位符动态渲染标题
  • 在组件中通过 $t 与 i18n.t 使用翻译键

章节来源

UI 框架（uView）集成 ​

  • main.js 中 Vue.use(uView)，全局 mixin 与 $u 工具注入
  • uni.scss 引入 uview-ui/theme.scss，统一颜色与尺寸变量
  • 组件中直接使用 u-button、u-form、u-input、u-select 等

章节来源

通用组件与业务页面 ​

  • mescroll-uni：提供下拉刷新与上拉加载，适配多端与 iPhoneX 安全区
  • dd-form：通用表单渲染与上传组件，支持多种输入类型与审核流程
  • modules/equipment/equipment.vue：设备列表页，结合 mescroll 与 uView 实现筛选、搜索与分页

图表来源

章节来源

页面与路由（pages.json） ​

  • pages 数组定义启动页、TabBar 页面与业务页面
  • tabBar 配置包含图标、选中态与文案，支持国际化占位符
  • 每个页面 style 支持导航标题、自定义导航与平台特定配置（如 app-plus 的 titleNView）

章节来源

平台配置（manifest.json） ​

  • app-plus 模块与权限声明，如 Camera、Record、NFC 等
  • Android/iOS 打包图标、权限列表与 SDK 配置
  • 快应用与小程序平台配置

章节来源

Web 应用开发（Vue CLI） ​

  • vue.config.js 提供开发服务器、代理与静态资源路径
  • Web 侧与移动端共享后端 API，通过 /lemes-api 代理到后端服务

章节来源

依赖关系分析 ​

  • 入口依赖：main.js 依赖 uView、store、config/request、locale、components
  • 页面依赖：各模块页面依赖 mescroll-uni、uView 组件、config/request、utils/dictMixins
  • 状态依赖：store/modules 下模块相互独立，通过 actions 与 mutations 解耦
  • 国际化依赖：locale/index.js 与 pages.json 的 %key% 占位符配合

图表来源

章节来源

性能考虑 ​

  • 请求并发与 Loading：通过 ajaxTimes 控制 Loading 显示与关闭，避免重复弹窗
  • 网络状态监听：在请求前监听网络状态，无网直接提示
  • 分页加载：mescroll-uni 上拉加载与分页接口配合，减少一次性渲染压力
  • 图片懒加载：uView 的 u-lazy-load 组件可用于图片懒加载
  • 缓存与本地存储：合理使用 db 工具缓存用户信息与默认工厂，减少重复请求
  • 国际化与主题：统一使用 uni.scss 与 uView 主题变量，避免重复计算样式

故障排查指南 ​

  • 登录过期：401 状态码自动清理缓存并跳转登录，检查后端 Token 有效期与刷新策略
  • 网络异常：无网络时直接提示，确认代理与域名白名单配置
  • 权限跳转：authJump 根据菜单权限动态设置 TabBar 可见性，检查菜单接口返回与权限标识
  • 字典与状态：设备状态、使用状态等通过字典接口获取，确认字典键与页面映射
  • 国际化：确认 locale/index.js 语言选择与 pages.json 占位符匹配

章节来源

结论 ​

DeviceMate 前端采用清晰的分层架构与模块化组织，结合 uView UI 框架与 mescroll-uni 组件，实现了跨平台的一致体验。通过统一的请求封装、国际化与状态管理，开发者可以高效地扩展业务模块并保持代码一致性。建议在后续迭代中持续完善组件库、优化网络层与缓存策略，并加强自动化测试与性能监控。

附录 ​

  • 开发环境：HBuilderX（UniApp）与 VS Code（Web 应用）
  • 本地开发代理：vue.config.js 中 /lemes-api 代理至后端地址
  • 调试技巧：利用 uni.showToast、console 与浏览器 DevTools；在 pages.json 中临时调整页面与标题便于定位问题
  • 组件开发规范：优先使用 uView 组件与 mescroll-uni；复杂页面拆分为多个小组件，遵循单一职责
  • 样式管理：统一使用 uni.scss 与 uView 主题变量；避免内联样式，优先类名与 SCSS 变量
  • 国际化：所有文案使用 $t 或 i18n.t，避免硬编码字符串；在 pages.json 中使用 %key%