edgex-ui-go vue 结构讲解-Go服务器开发

以下是 EdgeX-UI-Go 项目中 Vue 前端结构的详细解析（基于典型版本），重点围绕其模块化设计和核心功能实现：

1. 项目结构概览

edgex-ui-go/frontend/
├── public/                  # 静态资源
├── src/
│   ├── api/                 # API请求封装
│   ├── assets/              # 静态资源（图片、字体等）
│   ├── components/          # 公共组件
│   ├── router/              # 路由配置
│   ├── store/               # Vuex状态管理
│   ├── utils/               # 工具函数
│   ├── views/               # 页面视图
│   ├── App.vue              # 根组件
│   └── main.js              # 应用入口
└── package.json             # 依赖配置

2. Core Modules详解

(1) API层 (`src/api`)

作用：统一管理后端接口请求。
典型文件： “`javascript // device-service.js import request from ‘@/utils/request’

export function getDeviceServiceList(params) {

return request({
  url: '/device-service',
  method: 'get',
  params
})

}

- **特点**：
  - `request`：基于axios封装的统一拦截器（处理token、错误码等）。

#### **(2) Vuex Store (`src/store`)**
- **模块化设计**：
```javascript
// store/index.js (Vue3可能使用Pinia)
import device from './modules/device'
export default new Vuex.Store({
modules: { device }
})

// store/modules/device.js (设备管理状态)
const state = { deviceList: [] }
const mutations = {
SET_DEVICE_LIST(state, list) {
state.deviceList = list 
}
}
const actions = {
async fetchDevices({ commit }) {
const res = await getDeviceList()
commit('SET_DEVICE_LIST', res.data)
}
}

(3)路由配置 (`src/router`)

// router/index.js (动态路由示例)
const routes = [
{
path: '/devices',
component: () => import('@/views/device/List.vue'),
meta: { requiresAuth: true } 
},
{
path: '/login',
component: () => import('@/views/login.vue')
}
]

(4)核心页面 (`src/views`)

目录	功能
`dashboard`	仪表盘数据展示
`device`	设备管理相关页面
`system`	系统配置页面

3.关键组件示例

(1)设备列表组件 (`src/components/DeviceTable.vue`)

<template>
<el-table :data="devices">
<el-table-column prop="name" label="设备名称"/>
<el-table-column label="操作">
<template v-slot="{ row }">
<el-button @click="handleEdit(row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>

<script>
export default {
props: ['devices'],
methods: {
handleEdit(device) {
this.$emit('edit', device)
}
}
}
</script>

(2) WebSocket实时更新 (`src/utils/socket.js`)

export function initWebSocket(store) {
const ws = new WebSocket('ws://edgex-server/realtime')
ws.onmessage = (e) => {
const data = JSON.parse(e.data)
store.commit('UPDATE_DEVICE_STATUS', data) 
}
}

4. EdgeX集成特性

API Proxy
通过反向代理解决跨域，将前端请求转发到EdgeX微服务：
```
location /api-device { proxy_pass http://edgex-core-data:59880; }
```
动态表单生成
根据设备Profile自动渲染配置表单（如Modbus协议字段）。
响应式设计
使用Element UI或Ant Design Vue适配多端。