root/stand_acs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
993f6ffe4532f215a562eab29b693bc96165d407
stand_acs/acs2/nladmin-ui/FE_DEVELOPMENT_GUIDE.md
郑旭明\73939 993f6ffe45 opt:md文件优化
2026-04-16 14:01:59 +08:00

9.6 KiB
Raw Blame History

前端开发手册

1. 项目概述

1.1 项目简介

本项目是 EL-ADMIN 前端管理系统，基于 Vue 2.x 技术栈构建，是一个功能完善的企业级后台管理系统。

1.2 技术栈

技术 版本 说明
Vue 2.6.10 前端框架
Vue Router 3.0.2 路由管理
Vuex 3.1.0 状态管理
Element UI 2.15.8 UI组件库
Axios 0.18.1 HTTP客户端
ECharts 4.2.1 图表库
LogicFlow 1.2.1 流程图编辑器

1.3 主要功能模块

  • 系统管理：用户管理、角色管理、菜单管理、部门管理、数据字典等
  • ACS管理：设备管理、任务管理、区域管理、路线规划等
  • 布局管理：地图管理、设备布局等
  • 监控管理：日志监控、在线监控、大屏展示等
  • 轨迹管理：轨迹配置、轨迹后台管理

2. 开发环境配置

2.1 环境要求

工具 最低版本 推荐版本
Node.js >= 8.9 >= 14.x
npm >= 3.0.0 >= 6.x

2.2 安装依赖

# 进入项目目录
cd d:\诺力git\stand_acs\acs2\nladmin-ui

# 安装依赖
npm install

2.3 开发命令

# 启动开发服务器
npm run dev

# 生产环境构建
npm run build:prod

# 测试环境构建
npm run build:stage

# ESLint代码检查
npm run lint

# 单元测试
npm run test:unit

# 生成新页面（模板）
npm run new

3. 项目结构

src/
├── api/                 # API接口定义
│   ├── acs/             # ACS模块接口
│   ├── layout/          # 布局模块接口
│   ├── system/          # 系统模块接口
│   ├── monitor/         # 监控模块接口
│   └── ...
├── assets/              # 静态资源
│   ├── icons/           # SVG图标
│   ├── images/          # 图片资源
│   ├── styles/          # 全局样式
│   └── js/              # 第三方JS库
├── components/          # 公共组件
│   ├── Crud/            # CRUD组件
│   ├── Dict/            # 数据字典组件
│   ├── Permission/      # 权限组件
│   └── IconSelect/      # 图标选择组件
├── layout/              # 布局组件
│   ├── components/      # 布局子组件
│   └── mixin/           # 布局混入
├── router/              # 路由配置
│   ├── index.js         # 路由权限控制
│   └── routers.js       # 路由定义
├── store/               # Vuex状态管理
│   ├── modules/         # 状态模块
│   ├── getters.js       # 计算属性
│   └── index.js         # 状态入口
├── utils/               # 工具函数
│   ├── request.js       # Axios封装
│   ├── auth.js          # 认证工具
│   └── nladmin.js       # 通用工具
├── views/               # 页面视图
│   ├── system/          # 系统管理页面
│   ├── acs/             # ACS管理页面
│   ├── monitor/         # 监控页面
│   └── dashboard/       # 仪表盘
├── i18n/                # 国际化配置
├── App.vue              # 根组件
├── main.js              # 入口文件
└── settings.js          # 系统配置

4. 核心模块说明

4.1 入口文件 (main.js)

职责：项目初始化、全局配置、第三方库注册

关键配置：

  • Element UI 全局配置（默认尺寸、表格边框等）
  • 全局方法挂载（parseTime、resetForm、selectDictLabel等）
  • 国际化配置

4.2 路由管理

4.2.1 路由定义 (router/routers.js)

路由采用异步路由加载方式，支持动态菜单加载：

{
  path: '/system/user',
  component: Layout,
  redirect: '/system/user/index',
  name: 'User',
  meta: { title: 'user', icon: 'user', roles: ['admin', 'user'] },
  children: [
    {
      path: 'index',
      component: () => import('@/views/system/user/index'),
      name: 'UserIndex',
      meta: { title: 'userList', icon: 'user', roles: ['admin', 'user'] }
    }
  ]
}

4.2.2 权限控制 (router/index.js)

实现了完整的路由守卫机制：

  • 登录状态检查
  • 动态菜单加载
  • 权限验证

4.3 HTTP请求封装 (utils/request.js)

核心特性：

  • 请求拦截器：自动添加Token、语言标识
  • 响应拦截器：统一错误处理、401/403状态码处理
  • 支持blob下载错误处理
// 请求拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    config.headers['Accept-Language'] = localStorage.getItem('lang')
    return config
  }
)

4.4 状态管理 (store/)

模块 职责
app.js 应用基础状态（侧边栏、设备信息等）
permission.js 权限路由状态
settings.js 系统设置（主题、布局等）
tagsView.js 标签页状态
user.js 用户信息状态

5. 开发规范

5.1 代码规范

5.1.1 ESLint规则

项目使用 eslint-plugin-vue 进行代码检查，配置文件：.eslintrc.js

核心规则：

  • 使用 4 空格缩进
  • 语句结尾必须有分号
  • 单引号优先
  • 禁止未使用的变量
  • Vue组件必须有name属性

5.1.2 Git钩子

通过 husky 和 lint-staged 实现提交前代码检查：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

5.2 组件开发规范

5.2.1 组件命名

  • 组件名：大驼峰命名（PascalCase），如 UserList.vue
  • 组件文件：放在对应模块目录下

5.2.2 组件结构

<template>
  <!-- 模板内容 -->
</template>

<script>
export default {
  name: 'ComponentName',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
/* 样式 */
</style>

5.3 API接口规范

5.3.1 接口定义

每个模块对应一个API文件，统一放在 src/api/ 目录下：

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/api/system/user',
    method: 'get',
    params
  })
}

5.3.2 接口命名

操作 方法 命名示例
查询列表 GET getList
查询详情 GET getInfo
新增 POST add
更新 PUT update
删除 DELETE delete

5.4 国际化规范

项目支持中文、英文、印尼语三种语言，配置文件位于 src/i18n/langs/

使用方式：

<template>
  <span>{{ $t('user.userName') }}</span>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('common.success'))
  }
}
</script>

6. 常用工具函数

6.1 时间处理

// 格式化时间
this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')

6.2 数据字典

// 获取字典标签
this.selectDictLabel(dictList, value)

// 获取多个字典标签
this.selectDictLabels(dictList, values, ',')

6.3 表单操作

// 重置表单
this.resetForm('formName')

// 添加日期范围
this.addDateRange(params, startDate, endDate)

6.4 树结构处理

// 处理树形数据
const treeData = this.handleTree(data, 'id', 'parentId')

7. CRUD开发指南

7.1 使用Crud组件

项目提供了通用的Crud组件，简化增删改查操作：

<template>
  <div class="app-container">
    <Crud ref="crud" :option="crudOption" />
  </div>
</template>

<script>
import { crud } from '@/mixins/crud'

export default {
  name: 'User',
  mixins: [crud],
  data() {
    return {
      crudOption: {
        title: 'user',
        url: '/api/system/user',
        columns: [
          { label: 'userName', prop: 'username' },
          { label: 'email', prop: 'email' }
        ]
      }
    }
  }
}
</script>

7.2 自定义表单

<template>
  <el-dialog :title="title" :visible.sync="visible">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

8. 权限管理

8.1 按钮权限

使用 v-permission 指令控制按钮显示：

<el-button v-permission="['admin', 'user:edit']" type="primary">编辑</el-button>

8.2 角色权限

路由配置中通过 meta.roles 控制访问权限：

{
  path: 'index',
  component: () => import('@/views/system/user/index'),
  meta: { roles: ['admin', 'user'] }
}

9. 构建部署

9.1 环境变量

文件 环境 说明
.env.development 开发环境 本地开发配置
.env.production 生产环境 生产部署配置

9.2 构建命令

# 生产构建
npm run build:prod

# 构建产物目录：dist/

9.3 部署方式

  1. 将 dist/ 目录部署到静态服务器
  2. 配置Nginx反向代理：
server {
  listen 80;
  server_name your-domain.com;
  
  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  
  location /api {
    proxy_pass http://backend-server:8080;
    proxy_set_header Host $host;
  }
}