DVHA PRO：由后端驱动的中后台前端框架

DuxWeb
167 阅读12分钟

iShot_2025-07-06_13.31.35.png

🌟 框架定位

DVHA PRO 是基于 DVHA 无头框架和 Naive UI 深度集成的开箱即用中后台解决方案。它继承了 DVHA 的分层架构设计，将业务逻辑、数据管理、UI 渲染进行清晰分离，实现了后端驱动前端渲染的架构模式，让后端开发者也能直接控制前端界面的生成和更新。

与传统框架不同，DVHA PRO 不仅仅是一个 UI 组件库，而是一个完整的企业级前端系统，通过分层架构设计，方便维护和扩展，真正实现了"配置即界面、后端即前端"的开发理念。

🚀 核心理念：后端驱动一切

传统开发模式的痛点

  • 前后端强耦合：界面变更需要前端重新开发部署
  • 配置复杂：复杂的表单和页面需要大量前端代码
  • 维护成本高：UI 变更需要前端开发者参与
  • 响应速度慢：业务需求变更到上线周期长

DVHA PRO 的解决方案

  • 后端直接控制前端：通过 API 返回组件配置，前端自动渲染
  • 零前端代码：复杂表单和页面通过 JSON 配置生成
  • 实时更新：后端配置变更，前端立即生效
  • 业务人员可操作：通过可视化设计器，业务人员也能配置界面

🎯 三大技术优势

1. 🔮 后端驱动渲染引擎

DVHA PRO 支持后端直接返回 Vue 组件代码，前端路由实时编译和渲染：

// 后端 API 返回 Vue 组件字符串
const response = {
  type: 'vue',
  content: `
    <template>
      <n-data-table
        :columns="columns"
        :data="data"
        :loading="loading"
        remote
        @update:page="handlePageChange"
      />
    </template>

    <script setup>
    import { ref, onMounted } from 'vue'
    import { NDataTable } from 'naive-ui'

    const columns = ref([
      { key: 'name', title: '姓名' },
      { key: 'email', title: '邮箱' }
    ])
    const data = ref([])
    const loading = ref(false)

    onMounted(() => {
      fetchData()
    })
    </script>
  `
}

技术特点：

  • ✅ 后端直接编写 Vue 组件代码
  • ✅ 支持完整的 Vue 3 语法和 Composition API
  • ✅ 实时编译和热更新
  • ✅ 完整的 TypeScript 支持

2. 🎨 JSON Schema 动态组件

基于 JSON Schema 的组件渲染引擎，支持复杂组件的动态生成：

// 实际的 JSON Schema 配置格式
const formSchema = [
  {
    tag: 'n-input',
    attrs: {
      'v-model': 'form.username',
      'placeholder': '请输入用户名',
      'clearable': true
    }
  },
  {
    tag: 'n-select',
    attrs: {
      'v-model': 'form.role',
      'placeholder': '请选择角色',
      'options': [
        { label: '管理员', value: 'admin' },
        { label: '用户', value: 'user' }
      ]
    }
  },
  {
    tag: 'n-upload',
    attrs: {
      'v-model:file-list': 'form.files',
      'action': '/api/upload',
      'accept': 'image/*'
    }
  }
]

// 使用 JSON Schema 渲染器
const { render } = useJsonSchema({
  data: formSchema,
  context: { form: formData }
})

支持组件：

  • 📝 基础组件：输入框、选择器、开关、滑块等
  • 📅 日期时间：日期选择、时间选择、日期范围等
  • 📤 文件上传：图片上传、文件管理、批量上传等
  • 🎨 富媒体：富文本编辑器、代码编辑器、图片裁剪等
  • 🔗 异步组件：远程数据选择器、级联选择、树形选择等

3. 🧩 基于 Naive UI 的企业级组件

深度集成 Naive UI，提供 50+ 开箱即用的企业级组件：

<template>
  <!-- 一行代码实现完整的数据管理页面 -->
  <DuxTable
    path="/api/users"
    :columns="columns"
    :tools="{ export: true, import: true, refresh: true }"
    :actions="['create', 'edit', 'delete']"
    :filters="filterSchema"
  />

  <!-- 一行代码实现表单页面 -->
  <DuxPageForm
    :id="route.params.id"
    action="edit"
    path="/api/users"
    :schema="formSchema"
  />
</template>

4. 🔗 DVHA-NaiveUI 异步组件扩展

@duxweb/dvha-naiveui 包提供了针对 Naive UI 的异步数据组件：

<template>
  <!-- 异步选择器 -->
  <DuxSelect
    v-model:value="selectedUser"
    path="/api/users"
    :params="{ status: 1 }"
    label-field="name"
    value-field="id"
  />

  <!-- 异步树形选择 -->
  <DuxTreeSelect
    v-model:value="selectedDepartments"
    path="/api/departments"
  />

  <!-- 异步级联选择 -->
  <DuxCascader
    v-model:value="selectedRegion"
    path="/api/regions"
  />

  <!-- 异步穿梭框 -->
  <DuxTransfer
    v-model:value="userPermissions"
    path="/api/permissions"
  />
</template>

专用 Hooks：

import { useNaiveMenu, useNaiveTable } from '@duxweb/dvha-naiveui'

// 表格 Hook，提供 useColumn 等扩展功能
const { table, columns, columnSelected } = useNaiveTable({
  path: '/api/users',
  columns: tableColumns
})

// 菜单 Hook，转换为 Naive UI 菜单格式
const { options } = useNaiveMenu({
  manage: 'admin'
})

🏗️ 技术架构：无头框架 + UI 集成

分层架构设计

┌─────────────────────────────────────────┐
│           业务应用层                      │
│     (具体业务逻辑和页面组件)               │
└─────────────┬───────────────────────────┘
              │
┌─────────────▼───────────────────────────┐
│         DVHA PRO 集成层                 │
│   (集成 DVHA Core 和 Naive UI)          │
└─────────────┬───────────┬───────────────┘
              │           │
    ┌─────────▼─────────┐ │ ┌─────────────▼─┐
    │  DVHA Core 无头框架│ │ │ Naive UI 组件库│
    │ (路由/状态/认证等) │ │ │ (UI组件/交互)  │
    └─────────┬─────────┘ │ └─────────────┬─┘
              │           │               │
              └───────────┼───────────────┘
                          │
              ┌───────────▼───────────┐
              │   Vue 3 + TypeScript  │
              │      (基础运行时)      │
              └───────────────────────┘

分层职责：

  • 业务应用层：具体的业务逻辑和页面组件
  • DVHA PRO 集成层：集成 DVHA Core 和 Naive UI，提供企业级组件
  • DVHA Core 无头框架：提供路由、状态、认证、数据管理等基础能力
  • Naive UI 组件库：提供高质量的 UI 组件和交互体验

核心技术栈

  • DVHA Core 1.0.33 - 无头框架核心，提供路由、状态、认证等
  • Naive UI 2.42.0 - 现代化 Vue 3 组件库，高质量 UI 组件
  • Vue 3.5.0 - 最新 Vue 3 版本，Composition API
  • TypeScript - 100% 类型安全开发
  • UnoCSS - 原子化 CSS，运行时编译
  • TanStack Query - 数据获取和缓存
  • Pinia - 状态管理

依赖生态

{
  "@duxweb/dvha-core": "1.0.33",
  "@duxweb/dvha-naiveui": "1.0.33",
  "naive-ui": "^2.42.0",
  "vue": "^3.5.0",
  "echarts": "^5.6.0",
  "fabric": "^6.7.0",
  "aieditor": "^1.3.9"
}

🔥 独有特性：市场领先优势

1. 🚀 Vue 组件实时渲染

基于后端输出的实时 Vue 组件编译和渲染：

// 后端返回完整的 Vue SFC 代码
const componentCode = `
<template>
  <n-data-table
    :columns="columns"
    :data="data"
    remote
    :loading="loading"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTable } from '@duxweb/dvha-core'

const { data, loading, columns } = useTable({
  path: '/api/users'
})
</script>
`

// 前端路由实时渲染

技术优势：

  • ✅ 后端直接编写 Vue 3 组件代码
  • ✅ 支持完整的 Composition API 和 TypeScript
  • ✅ 实时编译，无需重新部署
  • ✅ 完整的 Vue 生态支持（Pinia、VueUse 等）

2. ⚡ UnoCSS 运行时编译

集成 UnoCSS 原子化 CSS 引擎，支持运行时动态样式编译：

// 动态生成样式类
const dynamicClass = `bg-${color}-500 text-white p-4 rounded-lg`

// UnoCSS 运行时自动编译生成对应 CSS
// .bg-blue-500 { background-color: rgb(59 130 246); }
// .text-white { color: rgb(255 255 255); }
// .p-4 { padding: 1rem; }
// .rounded-lg { border-radius: 0.5rem; }

技术优势：

  • ✅ 按需生成 CSS，减少包体积
  • ✅ 支持任意原子化样式组合
  • ✅ 运行时编译，支持动态样式
  • ✅ 完整的 Tailwind CSS 兼容性

3. 🎨 JSON Schema 渲染引擎

基于 Vue 3 响应式系统的 JSON Schema 渲染引擎：

// 支持 Vue 指令和响应式绑定
const schema = [
  {
    tag: 'n-input',
    attrs: {
      'v-model': 'form.username',
      'v-if': 'showUsername',
      'placeholder': '{{ $t("common.username") }}',
      'onInput': value => validateUsername(value)
    }
  }
]

// 支持完整的 Vue 3 特性
const adaptors = [
  vIfAdaptor, // v-if/v-else 条件渲染
  vForAdaptor, // v-for 列表渲染
  vModelAdaptor, // v-model 双向绑定
  vOnAdaptor, // 事件处理
  vTextAdaptor // 文本插值 {{ }}
]

技术优势：

  • ✅ 完整的 Vue 3 指令支持
  • ✅ 响应式数据绑定
  • ✅ 支持组件嵌套和插槽
  • ✅ 类型安全的 TypeScript 支持

4. 后端集成示例

apps/cdn 目录提供了完整的后端集成示例，展示了如何通过后端直接编译和分发前端基座：

// apps/cdn/config.ts - 后端配置注入
function injectConfig(config: IConfig): IConfig {
  if (typeof window == 'undefined' || !window.duxConfig) {
    throw new Error('config not found')
  }

  const serverConfig = window.duxConfig

  // 后端动态配置管理端
  serverConfig?.manage?.forEach((serverManage) => {
    config.manages.push({
      ...serverManage,
      components: {
        authLayout: DuxPro.DuxAuthLayout,
        noAuthLayout: DuxPro.DuxLayout,
        notFound: DuxPro.DuxPage404,
        loading: DuxPro.DuxPageLoading,
        error: DuxPro.DuxPage500,
      },
      routes: [
        {
          name: `${serverManage.name}.login`,
          path: 'login',
          component: DuxPro.DuxLoginPage,
          meta: { authorization: false },
        },
      ],
    })
  })

  return config
}

// 远程组件包配置
const config = {
  remote: {
    packages: {
      'naive-ui': NaiveUI,
      '@duxweb/dvha-pro': DuxPro,
      '@duxweb/dvha-naiveui': DuxNaiveUI,
    },
  },
  jsonSchema: {
    components: [
      ...Object.values(DuxPro).filter(comp => comp?.name?.startsWith?.('Dux')),
      ...Object.values(DuxNaiveUI).filter(comp => comp?.name?.startsWith?.('Dux')),
      ...Object.entries(NaiveUI)
        .filter(([key]) => key.startsWith?.('N'))
        .map(([key, component]) => {
          component.name = key
          return component
        }),
    ],
  },
}

后端编译流程：

  1. 后端通过 Vite 编译前端基座
  2. 生成 manifest.json 和静态资源
  3. 动态注入配置到 window.duxConfig
  4. 前端自动加载配置并初始化系统

5. 移动端适配

完整的移动端支持：

  • 响应式布局自动适配
  • 触摸友好的交互体验
  • 移动端专用组件
  • PWA 支持

💼 典型应用场景

🏢 企业管理系统

场景特点：多部门、多角色、复杂业务流程

DVHA PRO 解决方案：

// 后端配置不同部门的界面
function getDepartmentConfig(department) {
  switch (department) {
    case 'hr':
      return {
        menus: ['employee', 'attendance', 'salary'],
        dashboard: hrDashboardConfig
      }
    case 'finance':
      return {
        menus: ['budget', 'expense', 'report'],
        dashboard: financeDashboardConfig
      }
  }
}

🛒 电商后台系统

场景特点：商品管理、订单处理、数据分析

DVHA PRO 优势：

  • 商品信息表单通过设计器配置
  • 订单状态流程后端可控
  • 销售数据实时图表展示

🏛️ 政务服务平台

场景特点：多种办事流程、表单复杂多变

DVHA PRO 优势：

  • 表单设计器支持各种办事流程
  • 后端可随时调整表单字段
  • 移动端支持手机办事

🆚 适用场景对比

对比维度DVHA PROVue Element AdminAnt Design ProNaive UI Admin
技术栈Vue 3 + Naive UIVue 3 + Element PlusReact + Ant DesignVue 3 + Naive UI
后端驱动✅ 原生支持❌ 不支持❌ 不支持❌ 不支持
架构模式无头框架 + UI 集成传统 Admin 模板传统 Admin 模板传统 Admin 模板
JSON 渲染✅ 完整支持❌ 不支持🟡 部分支持❌ 不支持
多管理端✅ 原生支持🟡 需定制🟡 需定制🟡 需定制
运行时更新✅ 热更新❌ 需部署❌ 需部署❌ 需部署
TypeScript✅ 100%✅ 支持✅ 支持✅ 支持
适用场景后端驱动系统传统管理后台企业级应用轻量级后台

🚀 快速开始

一键创建 Pro 系统

# 使用 npx 创建项目
npx @duxweb/dvha-template init my-pro-app

# 选择 Pro 模板
# 进入项目目录
cd my-pro-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

手动安装

# 1. 安装依赖
npm install @duxweb/dvha-pro @duxweb/dvha-core @duxweb/dvha-naiveui

# 2. 创建应用
import { createApp } from 'vue'
import { createDux } from '@duxweb/dvha-core'
import { createDuxPro } from '@duxweb/dvha-pro'

const app = createApp(App)
app.use(createDux(config))
app.use(createDuxPro())
app.mount('#app')

完整配置示例

import type { IConfig } from '@duxweb/dvha-core'

const config: IConfig = {
  defaultManage: 'admin',
  manages: [{
    name: 'admin',
    title: 'DVHA PRO 管理系统',
    routePrefix: '/admin',

    // 菜单配置
    menus: [
      {
        name: 'users',
        label: '用户管理',
        icon: 'i-tabler:users',
        path: 'users',
        component: () => import('./pages/Users.vue')
      }
    ],

    // 数据源配置
    dataProvider: simpleDataProvider({
      apiUrl: 'https://api.example.com'
    })
  }]
}

页面组件示例

<script setup lang="ts">
import { DuxTablePage, useAction, useTableColumn } from '@duxweb/dvha-pro'
import { NInput } from 'naive-ui'
import { ref } from 'vue'

const filters = ref({
  keyword: '',
})

const { renderTable } = useAction()
const { renderMedia, renderSwitch, renderStatus } = useTableColumn()

const columns = [
  {
    title: 'ID',
    key: 'id',
    width: 80,
  },
  {
    title: '用户信息',
    key: 'user',
    width: 200,
    render: renderMedia({
      image: 'avatar',
      title: 'nickname',
      desc: 'email',
    }),
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
    render: renderStatus({
      1: { label: '正常', type: 'success' },
      0: { label: '禁用', type: 'error' },
    }),
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    width: 130,
    align: 'center',
    render: renderTable({
      type: 'dropdown',
      items: [
        {
          label: '编辑',
          type: 'modal',
          component: () => import('./UserForm.vue'),
        },
        {
          label: '删除',
          type: 'delete',
        },
      ],
    }),
  },
]

const filterSchema = [
  {
    tag: NInput,
    attrs: {
      'placeholder': '请输入关键词搜索',
      'v-model:value': [filters.value, 'keyword'],
    },
  },
]

const actions = ref([
  {
    label: '新增',
    type: 'modal',
    component: () => import('./UserForm.vue'),
  },
])
</script>

<template>
  <DuxTablePage
    path="user"
    :columns="columns"
    :filter="filters"
    :filter-schema="filterSchema"
    :actions="actions"
    :tabs="[
      { label: '全部', value: 'all' },
      { label: '已启用', value: 'enabled' },
      { label: '已禁用', value: 'disabled' },
    ]"
    pagination
  />
</template>

表单组件示例

<script setup lang="ts">
import { DuxFormItem, DuxPageForm } from '@duxweb/dvha-pro'
import { NInput, NSelect, NSwitch } from 'naive-ui'
import { ref } from 'vue'

const props = defineProps<{
  id?: string | number
}>()

const model = ref({
  nickname: '',
  email: '',
  status: 1,
  role: 'user',
})

const roleOptions = [
  { label: '用户', value: 'user' },
  { label: '管理员', value: 'admin' },
  { label: '编辑', value: 'editor' },
]
</script>

<template>
  <DuxPageForm
    :id="props.id"
    title="用户管理"
    :data="model"
    path="user"
  >
    <DuxFormItem label="昵称" path="nickname" rule="required">
      <NInput v-model:value="model.nickname" placeholder="请输入昵称" />
    </DuxFormItem>

    <DuxFormItem label="邮箱" path="email" rule="required|email">
      <NInput v-model:value="model.email" placeholder="请输入邮箱" />
    </DuxFormItem>

    <DuxFormItem label="角色" path="role" rule="required">
      <NSelect
        v-model:value="model.role"
        :options="roleOptions"
        placeholder="请选择角色"
      />
    </DuxFormItem>

    <DuxFormItem label="状态" path="status">
      <NSwitch v-model:value="model.status" :checked-value="1" :unchecked-value="0">
        <template #checked>
          启用
        </template>
        <template #unchecked>
          禁用
        </template>
      </NSwitch>
    </DuxFormItem>
  </DuxPageForm>
</template>

💻 开发体验

完整的 TypeScript 支持

import type {
  FormSchema,
  TableColumn
} from '@duxweb/dvha-pro'

// 类型安全的组件配置
const columns: TableColumn[] = [
  {
    key: 'name',
    title: '姓名',
    width: 120,
    render: row => h('span', { class: 'font-bold' }, row.name)
  }
]

const formSchema: FormSchema = [
  {
    type: 'input',
    name: 'username',
    label: '用户名',
    rules: [{ required: true, message: '请输入用户名' }]
  }
]

丰富的 Hooks 生态

import {
  useAction,
  useForm,
  useTable
} from '@duxweb/dvha-pro'

// 表格数据管理
const table = useTable({
  path: '/api/users',
  columns,
  filters: { status: 1 }
})

// 表单处理
const form = useForm({
  path: '/api/users',
  schema: formSchema,
  onSuccess: () => {
    message.success('保存成功')
    table.refresh()
  }
})

// 操作按钮
const { render: ActionRender } = useAction([
  {
    label: '编辑',
    onClick: row => form.edit(row.id)
  },
  {
    label: '删除',
    onClick: row => handleDelete(row.id),
    confirm: '确定要删除吗？'
  }
])

📈 商业价值

开发效率提升

传统开发模式：

  • 前端开发：编写大量重复的 CRUD 页面
  • 后端开发：提供数据接口
  • 联调测试：前后端协作调试
  • 痛点：界面变更需要前端重新开发

DVHA PRO 开发模式：

  • 后端配置：通过 JSON 或 Vue 代码直接控制界面
  • 前端渲染：自动解析和渲染
  • 优势：配置即界面，实时生效

维护成本降低

  • 配置化管理：业务变更通过后端配置完成
  • 统一技术栈：基于 Vue 3 + Naive UI 生态
  • 实时更新：无需重新编译部署
  • 可视化工具：表单设计器降低开发门槛

技术架构优势

  • 分层架构：继承 DVHA 的分层设计，业务逻辑、数据管理、UI 渲染清晰分离
  • 组件复用：50+ 企业级组件开箱即用
  • 类型安全：100% TypeScript 开发
  • 现代化：Vue 3 + Composition API
  • 易维护：清晰的职责分离，便于扩展和维护

🎉 总结

现代开发模式的痛点与机遇

前后端分离的槽点：

  • 🔄 沟通成本高：接口文档维护、字段变更需要双方协调
  • ⏰ 开发周期长：简单的 CRUD 页面也需要前后端分别开发
  • 🐛 联调困难：接口变更导致前端页面频繁调整
  • 📱 重复劳动：大量相似的列表、表单页面重复开发
  • 🚀 上线复杂：前后端需要分别部署，版本同步困难

传统集成开发的优势与局限：

  • ✅ 开发效率高：后端直接控制页面，快速响应需求变更
  • ✅ 部署简单：单体应用，一次部署解决所有问题
  • ❌ 技术栈老旧：多数基于 Jquery、Ajax 等传统技术
  • ❌ 用户体验差：页面刷新、交互体验不如现代 SPA
  • ❌ 维护困难：前后端代码耦合，难以扩展和维护

DVHA PRO 的创新解决方案

DVHA PRO 结合了前后端分离的技术优势和集成开发的效率优势，通过后端驱动前端渲染的创新架构，解决了传统模式的核心痛点：

🎯 解决沟通成本：后端直接输出 Vue 组件，无需接口文档协调 🚀 提升开发效率：JSON Schema 配置生成复杂表单，告别重复开发 ⚡ 实现热更新：后端配置变更，前端立即生效，无需重新部署 🎨 保证用户体验：基于 Vue 3 + Naive UI，现代化交互体验 🔧 降低维护成本：无头架构设计，业务逻辑与 UI 清晰分离

选择 DVHA PRO 的三大理由：

  1. 效率革命：告别前后端分离的繁琐协作，回归高效的集成开发
  2. 技术现代化：享受现代前端技术栈，同时保持后端主导的开发模式
  3. 架构优雅：无头框架设计，既有集成开发的效率，又有分离架构的灵活性

DVHA PRO - 重新定义中后台开发，让效率与体验兼得！

🚀 完整解决方案

DuxPHP Admin - 前后端一体化解决方案

基于 DVHA PRO 架构理念，Dux 团队推出了前后端一体化的完整解决方案：

🔥 DuxPHP Admin - 基于 DuxLite 和 DVHA PRO 的开箱即用中后台管理系统

核心特色：

  • ⚡ 运行时编译：修改 Vue 文件后刷新页面即可看到效果，无需前端工具链
  • 🎯 前后端一体化：Vue 文件和 PHP 代码放在一起，开发体验如传统 PHP 般简单
  • 🛠️ 开箱即用：集成用户管理、权限控制、数据管理等核心功能
  • 🎨 现代技术栈：PHP 8.2+ + Vue 3 + Naive UI + TypeScript

技术架构：

  • 后端: PHP 8.2+ + DuxLite 框架 + Eloquent ORM
  • 前端: Vue 3 + Naive UI + DVHA PRO + TypeScript
  • 特色: 传统 PHP 开发便捷性 + 现代前端强大功能

即将推出

🚧 DuxGo Admin - 基于 Golang 的高性能版本，满足 Go 语言开发者的需求

📞 联系我们

📄 许可证

MIT License - 开源免费，商业友好

avatar
文章
阅读
粉丝