发布日期：2024年1月25日
一、项目架构设计
本教程将开发一个完整的企业级中后台系统，主要功能模块包括：
- 权限控制体系：基于角色的动态路由和菜单
- 工作流引擎：可视化流程设计与审批
- 复杂表单：动态表单生成与验证
- 数据看板：Echarts深度集成
- 消息中心：WebSocket实时通信
技术栈：Vue2.6 + Vuex + Vue Router + ElementUI + Axios
二、项目初始化与配置
1. 创建项目并安装依赖
vue create admin-system
cd admin-system
vue add element
npm install axios vuex vue-router vuex-persistedstate echarts socket.io-client2. 目录结构优化
src/
├── api/ # API接口
├── assets/ # 静态资源
├── components/ # 公共组件
├── directive/ # 自定义指令
├── filters/ # 全局过滤器
├── layout/ # 布局组件
├── mixins/ # 混入
├── permission/ # 路由权限控制
├── router/ # 路由配置
├── store/ # Vuex状态管理
├── styles/ # 全局样式
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 根组件
└── main.js # 入口文件三、核心功能实现
1. 动态路由与权限控制
// permission.js
router.beforeEach(async (to, from, next) => {
// 获取用户token
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
// 检查用户权限
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// 获取用户信息
const { roles } = await store.dispatch('user/getInfo')
// 根据角色生成可访问路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 动态添加路由
router.addRoutes(accessRoutes)
// 确保addRoutes完成
next({ ...to, replace: true })
} catch (error) {
// 错误处理
next(`/login?redirect=${to.path}`)
}
}
}
} else {
// 处理白名单
if (whiteList.includes(to.path)) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})2. 工作流引擎集成
// WorkflowDesigner.vue
export default {
data() {
return {
nodes: [
{ id: 'start', type: 'start', x: 100, y: 100 },
{ id: 'approval', type: 'approval', x: 300, y: 100 },
{ id: 'end', type: 'end', x: 500, y: 100 }
],
edges: [
{ source: 'start', target: 'approval' },
{ source: 'approval', target: 'end' }
]
}
},
methods: {
handleNodeClick(node) {
this.$prompt('请输入节点名称', '提示', {
inputValue: node.name || ''
}).then(({ value }) => {
node.name = value
})
},
saveWorkflow() {
this.$store.dispatch('workflow/save', {
nodes: this.nodes,
edges: this.edges
})
}
}
}四、复杂表单解决方案
1. 动态表单生成器
// DynamicForm.vue
export default {
props: {
formConfig: {
type: Array,
required: true
},
formData: {
type: Object,
default: () => ({})
}
},
methods: {
renderFormItem(item) {
const componentMap = {
input: 'el-input',
select: 'el-select',
date: 'el-date-picker',
checkbox: 'el-checkbox-group'
}
const component = componentMap[item.type] || 'el-input'
return (
<el-form-item label={item.label} prop={item.prop}>
{this.$createElement(component, {
props: {
value: this.formData[item.prop],
...item.attrs
},
on: {
input: val => this.$emit('update', item.prop, val)
}
}, this.renderOptions(item))}
</el-form-item>
)
},
renderOptions(item) {
if (!item.options) return null
return item.options.map(opt => {
if (item.type === 'select') {
return <el-option key={opt.value} label={opt.label} value={opt.value} />
} else if (item.type === 'checkbox') {
return <el-checkbox key={opt.value} label={opt.value}>{opt.label}</el-checkbox>
}
})
}
},
render() {
return (
<el-form>
{this.formConfig.map(item => this.renderFormItem(item))}
</el-form>
)
}
}2. 表单验证增强
// 自定义验证规则
Vue.prototype.$rules = {
required: { required: true, message: '必填项', trigger: 'blur' },
email: { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
mobile: {
validator: (_, value, callback) => {
if (/^1[3-9]d{9}$/.test(value)) {
callback()
} else {
callback(new Error('手机号格式错误'))
}
},
trigger: 'blur'
}
}
// 使用示例
formRules: {
name: [this.$rules.required],
email: [this.$rules.required, this.$rules.email],
phone: [this.$rules.mobile]
}五、性能优化实践
1. 路由懒加载
// router.js
const routes = [
{
path: '/dashboard',
component: () => import('@/views/dashboard'),
meta: { title: 'Dashboard' }
},
{
path: '/workflow',
component: () => import('@/views/workflow'),
meta: { title: '工作流', roles: ['admin'] }
}
]2. 组件级缓存
<template>
<div id="app">
<keep-alive :include="cachedViews">
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
}
}
}
</script>3. 数据持久化
// store/index.js
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
plugins: [
createPersistedState({
key: 'admin-system',
paths: ['user', 'settings']
})
],
modules: {
// ...
}
})六、企业级功能扩展
1. 错误日志收集
// utils/errorHandler.js
export function errorHandler(err, vm, info) {
// 收集错误信息
const errorLog = {
message: err.message,
stack: err.stack,
info,
url: window.location.href,
timestamp: new Date()
}
// 发送到服务端
axios.post('/api/error', errorLog)
// 开发环境打印错误
if (process.env.NODE_ENV === 'development') {
console.error(err)
}
}
// main.js
Vue.config.errorHandler = errorHandler2. 多标签页管理
// store/modules/tagsView.js
const state = {
visitedViews: [],
cachedViews: []
}
const mutations = {
ADD_VISITED_VIEW(state, view) {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-title'
})
)
},
ADD_CACHED_VIEW(state, view) {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
}
}七、项目部署与总结
1. 生产环境部署
# 构建生产环境代码
npm run build
# Nginx配置示例
server {
listen 80;
server_name admin.example.com;
location / {
root /var/www/admin-system/dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend-server;
}
}2. 技术总结
通过本项目我们掌握了：
- Vue2企业级项目架构设计
- 动态路由与权限控制方案
- 复杂表单与工作流集成
- 中后台系统性能优化
- 生产环境部署配置
