摘要

作为 Java 后端开发者，我平时更多关注接口、SQL 和业务逻辑，但后台系统里也绕不开表单、列表和报表页面。本文结合 OpenTiny NEXT 学习体验，用 TinyVue 做一个智能业务表单 Demo，聊聊 AI 前端对后端开发者到底有没有实际帮助。

---

前言

说实话，我以前对“AI 前端”这个词没太多感觉。

我是做 Java 后端的，平时更多接触的是：

• 接口开发
• SQL 查询
• 业务逻辑
• 定时任务
• 数据排查
• 系统对接

但只要做过后台管理系统的人都知道，后端其实也绕不开前端页面。

比如：

• 查询表单
• 列表表格
• 分页
• 状态展示
• 操作按钮
• 导出按钮
• 简单报表页面

这些东西不一定复杂，但真的挺耗时间。

尤其是有些临时页面、运营后台、数据查询工具，明明核心逻辑在后端，但页面也得有人搭。

所以这次看到 OpenTiny NEXT 前端智能化系列课，我比较感兴趣的点不是“AI 会不会替代前端”，而是：

对一个后端开发者来说，AI 前端和组件库能不能帮我更快搭出一个能用的业务页面？

这篇文章我就从后端开发的视角，结合 TinyVue 做一个简单的智能业务表单 Demo，聊聊我的学习和实战体验。

---

一、先简单认识一下 OpenTiny 和 TinyVue

先简单说一下我对 OpenTiny 的理解。

OpenTiny 是一套面向企业级应用的前端开源解决方案，里面包含 TinyVue、TinyEngine 等项目。TinyVue 是 OpenTiny 社区的企业级 UI 组件库，官方介绍里提到它支持 Vue 2、Vue 3，同时支持 PC 端和移动端，适合做企业后台、表单、列表、管理页面这类场景。 

对我这种后端开发来说，TinyVue 最直观的价值就是：

我不用从 0 写一堆表单、按钮、表格样式，可以直接拿组件拼页面。

这篇文章用到的项目地址如下：

OpenTiny / TinyEngine 项目地址：
https://atomgit.com/opentiny/tiny-engine

---

二、这次 Demo 做什么

不做特别复杂的东西。

我打算做一个后端开发都很熟悉的页面：

智能业务数据查询表单 Demo

页面包含：

• 查询条件
• 状态选择
• 时间范围
• 查询按钮
• 重置按钮
• 数据列表
• 分页区域
• AI 提示文案区域

这个场景很常见。

比如后台里经常有这种页面：

输入业务编号、用户名称、状态、时间范围，然后查询数据列表。

如果只看功能，它不难。
但真正做起来，表单、布局、字段、按钮、列表、分页加起来，也要花一些时间。

我这次想验证的是：

TinyVue + AI 辅助，能不能让这种页面搭得更快一点。

---

三、先创建一个 Vue 项目

这里我用 Vite 创建 Vue 3 项目。

npm create vite@latest tinyvue-ai-form-demo

选择：

Vue
JavaScript

进入项目目录：

cd tinyvue-ai-form-demo

安装依赖：

npm install

启动项目：

npm run dev

如果能正常打开页面，说明基础项目已经跑起来了。

---

四、安装 TinyVue

根据 TinyVue 相关安装说明，Vue 3 项目可以安装 @opentiny/vue@3。

npm i @opentiny/vue@3

然后在 main.js 里引入。

import { createApp } from 'vue'
import App from './App.vue'
import TinyVue from '@opentiny/vue'

const app = createApp(App)

app.use(TinyVue)
app.mount('#app')

这一步做完以后，就可以在页面里使用 TinyVue 的组件了。

---

五、先准备一份模拟数据

因为这篇文章重点不是后端接口，所以我先用前端 mock 数据演示。

后面真接接口时，把这里换成后端 API 就行。

在 src 目录下新建：

src/mock/businessData.js

代码如下：

export const businessData = [
  {
    id: 1,
    bizNo: 'BIZ202605210001',
    userName: '张三',
    amount: 288.00,
    status: 'SUCCESS',
    createTime: '2026-05-21 10:20:00'
  },
  {
    id: 2,
    bizNo: 'BIZ202605210002',
    userName: '李四',
    amount: 168.00,
    status: 'PROCESSING',
    createTime: '2026-05-21 11:05:00'
  },
  {
    id: 3,
    bizNo: 'BIZ202605210003',
    userName: '王五',
    amount: 99.00,
    status: 'FAILED',
    createTime: '2026-05-21 14:30:00'
  },
  {
    id: 4,
    bizNo: 'BIZ202605210004',
    userName: '赵六',
    amount: 520.00,
    status: 'SUCCESS',
    createTime: '2026-05-22 09:10:00'
  }
]

这里字段都很简单：

• bizNo：业务编号
• userName：用户名称
• amount：金额
• status：状态
• createTime：创建时间

这些字段对后端开发者来说应该很熟悉。

---

六、搭一个业务查询页面

接下来直接写页面。

把 App.vue 改成下面这样。

<template>
  <div class="page">
    <div class="page-header">
      <h1>智能业务数据查询</h1>
      <p>
        这是一个基于 TinyVue 组件搭建的业务查询表单 Demo，
        模拟后台管理系统中常见的查询、列表和分页场景。
      </p>
    </div>

    <div class="ai-tip">
      <div class="ai-title">AI 辅助说明</div>
      <div class="ai-content">
        你可以输入业务编号、用户名称、状态或时间范围进行筛选。
        如果是实际项目，这里也可以接入 AI 能力，根据自然语言自动生成查询条件。
      </div>
    </div>

    <div class="search-card">
      <tiny-form :model="queryForm" label-width="90px">
        <div class="form-row">
          <tiny-form-item label="业务编号">
            <tiny-input
              v-model="queryForm.bizNo"
              placeholder="请输入业务编号"
            />
          </tiny-form-item>

          <tiny-form-item label="用户名称">
            <tiny-input
              v-model="queryForm.userName"
              placeholder="请输入用户名称"
            />
          </tiny-form-item>

          <tiny-form-item label="状态">
            <tiny-select
              v-model="queryForm.status"
              placeholder="请选择状态"
              clearable
            >
              <tiny-option label="成功" value="SUCCESS" />
              <tiny-option label="处理中" value="PROCESSING" />
              <tiny-option label="失败" value="FAILED" />
            </tiny-select>
          </tiny-form-item>
        </div>

        <div class="button-row">
          <tiny-button type="primary" @click="handleSearch">
            查询
          </tiny-button>
          <tiny-button @click="handleReset">
            重置
          </tiny-button>
          <tiny-button type="success" @click="handleAiFill">
            AI 生成查询建议
          </tiny-button>
        </div>
      </tiny-form>
    </div>

    <div class="table-card">
      <div class="table-header">
        <span>查询结果</span>
        <span class="table-count">共 {{ filteredList.length }} 条</span>
      </div>

      <table class="biz-table">
        <thead>
          <tr>
            <th>业务编号</th>
            <th>用户名称</th>
            <th>金额</th>
            <th>状态</th>
            <th>创建时间</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in pageList" :key="item.id">
            <td>{{ item.bizNo }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.amount.toFixed(2) }}</td>
            <td>
              <span :class="['status-tag', item.status]">
                {{ formatStatus(item.status) }}
              </span>
            </td>
            <td>{{ item.createTime }}</td>
          </tr>

          <tr v-if="pageList.length === 0">
            <td colspan="5" class="empty">暂无数据</td>
          </tr>
        </tbody>
      </table>

      <div class="pager">
        <tiny-button size="small" @click="prevPage" :disabled="pageNo === 1">
          上一页
        </tiny-button>
        <span>第 {{ pageNo }} / {{ totalPage }} 页</span>
        <tiny-button size="small" @click="nextPage" :disabled="pageNo === totalPage">
          下一页
        </tiny-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { businessData } from './mock/businessData'

const queryForm = reactive({
  bizNo: '',
  userName: '',
  status: ''
})

const pageNo = ref(1)
const pageSize = ref(5)

const filteredList = computed(() => {
  return businessData.filter((item) => {
    const matchBizNo = queryForm.bizNo
      ? item.bizNo.includes(queryForm.bizNo)
      : true

    const matchUserName = queryForm.userName
      ? item.userName.includes(queryForm.userName)
      : true

    const matchStatus = queryForm.status
      ? item.status === queryForm.status
      : true

    return matchBizNo && matchUserName && matchStatus
  })
})

const totalPage = computed(() => {
  return Math.max(1, Math.ceil(filteredList.value.length / pageSize.value))
})

const pageList = computed(() => {
  const start = (pageNo.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredList.value.slice(start, end)
})

const handleSearch = () => {
  pageNo.value = 1
}

const handleReset = () => {
  queryForm.bizNo = ''
  queryForm.userName = ''
  queryForm.status = ''
  pageNo.value = 1
}

const handleAiFill = () => {
  queryForm.status = 'SUCCESS'
  pageNo.value = 1
}

const prevPage = () => {
  if (pageNo.value > 1) {
    pageNo.value--
  }
}

const nextPage = () => {
  if (pageNo.value < totalPage.value) {
    pageNo.value++
  }
}

const formatStatus = (status) => {
  const statusMap = {
    SUCCESS: '成功',
    PROCESSING: '处理中',
    FAILED: '失败'
  }

  return statusMap[status] || status
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding: 32px;
  background: #f5f7fa;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #1f2937;
}

.page-header p {
  margin: 0;
  color: #6b7280;
  line-height: 1.7;
}

.ai-tip {
  padding: 16px 20px;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;
  background: #ecf5ff;
  border-radius: 8px;
}

.ai-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1d4ed8;
}

.ai-content {
  color: #374151;
  line-height: 1.7;
}

.search-card,
.table-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.button-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1f2937;
}

.table-count {
  color: #6b7280;
  font-weight: 400;
}

.biz-table {
  width: 100%;
  border-collapse: collapse;
}

.biz-table th,
.biz-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 14px;
}

.biz-table th {
  background: #f9fafb;
  color: #374151;
}

.empty {
  text-align: center;
  color: #9ca3af;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.status-tag.SUCCESS {
  color: #047857;
  background: #d1fae5;
}

.status-tag.PROCESSING {
  color: #b45309;
  background: #fef3c7;
}

.status-tag.FAILED {
  color: #b91c1c;
  background: #fee2e2;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  color: #374151;
}

@media (max-width: 900px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .page {
    padding: 18px;
  }
}
</style>

都是一些比较简单的，没有搞的太复杂，重点先搭起来。

---

七、这个 Demo 和 AI 前端有什么关系

你可能会说：

这不就是一个普通查询页面么？AI 在哪儿呢？？

其实我觉得 AI 前端的价值，恰恰可以从这种普通页面里看出来。

因为企业后台系统里，很多页面不是特别难，而是重复。

比如：

• 后端给字段
• 前端搭表单
• 前端搭列表
• 前端补状态展示
• 前端补 mock 数据
• 前端调接口联调

这类页面如果完全从 0 写，时间会被消耗在很多细节上。

但如果结合 AI，很多步骤是可以提速的。

---

八、AI 可以帮这个页面做什么

站在后端开发者视角，我觉得 AI 至少能帮这些事情。

1. 根据后端字段生成页面结构

比如我给 AI 一段字段说明：

业务编号 bizNo
用户名称 userName
金额 amount
状态 status
创建时间 createTime

AI 可以帮我生成：

• 查询表单
• 表格列
• mock 数据
• 状态映射
• 基础样式

这对后端来说其实挺有用。

因为很多时候我不是完全不会写页面，而是不想在这些重复结构上耗太久。

---

2. 帮我理解组件怎么用

后端开发者写前端时，最容易卡在组件用法上。

比如：

• 表单怎么绑定
• 下拉框怎么写
• 按钮事件怎么绑定
• 表格数据怎么渲染
• 分页怎么处理

AI 可以先给一个初稿，然后我再根据 TinyVue 文档和实际效果调整。

这个过程会比我自己一点点查文档更快。

---

3. 帮我把“接口字段”转换成“页面字段”

后端接口经常返回这种数据：

{
  "bizNo": "BIZ202605210001",
  "userName": "张三",
  "amount": 288,
  "status": "SUCCESS",
  "createTime": "2026-05-21 10:20:00"
}

AI 可以帮我把这些字段快速转换成前端页面结构。

比如：

• 哪些字段适合放查询条件
• 哪些字段适合放表格
• 状态字段怎么做中文映射
• 金额字段怎么格式化

这些工作不难，但很碎。

AI 的价值就是帮你先搭一个雏形。

---

4. 帮我快速补 mock 数据

很多页面刚开始开发时，后端接口可能还没好。

这时候可以先让 AI 按字段生成一批 mock 数据，前端先把页面跑起来。

等接口好了，再替换成真实请求。

这对联调前的页面开发很有帮助。

---

九、后端开发者看 AI 前端，最实际的价值是什么

我自己体验下来，感觉 AI 前端对后端开发者最大的价值不是：

让我变成专业前端。

而是：

让我在需要参与页面开发、看页面逻辑、搭临时工具时，不至于完全从 0 开始。

比如下面这些场景就很实际：

• 临时做一个内部查询页面
• 做一个简单运营后台
• 搭一个数据核对工具
• 写一个导入导出页面
• 搭一个业务表单 Demo
• 和前端沟通页面结构

以前这些事情，对后端来说多少有点别扭。

但如果有 AI 辅助，再配合 TinyVue 这种企业级组件库，至少可以先把页面雏形搭出来。

这就已经很有价值了。

---

十、AI 前端不是万能的

当然，也不能把 AI 前端想得太神。

我觉得它比较适合做这些事情：

• 生成页面初稿
• 生成表单结构
• 生成 mock 数据
• 解释组件用法
• 帮忙整理交互逻辑
• 辅助完成重复代码

但下面这些事情，还是要开发者自己把关：

• 业务规则是否准确
• 接口字段是否匹配
• 组件用法是否符合项目规范
• 页面交互是否真的好用
• 异常场景是否处理
• 权限和安全是否考虑

所以我更愿意把它理解成：

AI 前端不是替你做完一切，而是帮你把第一版页面更快搭出来。

这和我平时用 AI 写后端代码的感觉也差不多。

AI 可以给你初稿，但最后能不能上线，还是得人来判断。

---

十一、这类页面如果接后端接口，大概怎么扩展

现在我们用的是 mock 数据。

如果后面要接真实后端接口，大概可以改成这样。

1. 新增 API 方法

export async function queryBusinessList(params) {
  const response = await fetch('/api/business/list', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  })

  return response.json()
}

2. 查询按钮调用接口

const handleSearch = async () => {
  pageNo.value = 1

  const result = await queryBusinessList({
    bizNo: queryForm.bizNo,
    userName: queryForm.userName,
    status: queryForm.status,
    pageNo: pageNo.value,
    pageSize: pageSize.value
  })

  tableData.value = result.data.records
  total.value = result.data.total
}

3. 后端接口可以长这样

@PostMapping("/business/list")
public ApiResponse<PageResult<BusinessRecordVO>> queryList(@RequestBody BusinessQueryDTO query) {
    PageResult<BusinessRecordVO> result = businessService.queryList(query);
    return ApiResponse.ok(result);
}

这样前后端就能接起来了。

对我这种后端来说，这个流程就很熟悉了。

前端负责页面和交互，后端负责查询和业务逻辑。

AI 前端可以帮忙提速页面结构，但后端接口设计和业务规则还是要自己做好。

---

十二、这次体验后的几个感受

这次用 TinyVue 做这个 Demo，我有几个比较真实的感受。

1. 企业后台页面很适合组件化

后台系统里很多页面其实都长得差不多：

• 表单
• 表格
• 分页
• 状态
• 操作按钮

这类页面非常适合组件库来做。

不用每次都从 0 写样式，效率会高不少。

---

2. AI 前端更适合做“第一版”

我觉得 AI 最适合帮你生成第一版页面。

比如：

• 先把布局搭出来
• 先把字段放进去
• 先把 mock 数据跑起来
• 先把交互逻辑补个大概

后面再由人去调整细节。

这比完全从空白页面开始舒服很多。

---

3. 后端开发者也可以适当了解一点前端组件

不是说后端要转前端。

而是很多时候，你懂一点页面结构、组件用法、前端交互，会让你和前端沟通更顺。

尤其是后台系统和内部工具场景，后端了解一点前端组件，真的很有用。

---

4. AI 前端真正有价值的地方是提效，不是炫技

我不太喜欢把 AI 前端讲得太玄。

对我来说，它最实际的价值就是：

把重复、耗时、但不算特别难的页面开发过程先提速。

这就够了。

---

总结

这篇文章我没有写特别复杂的前端工程，也没有讲很深的源码。

只是从一个 Java 后端开发者的视角，结合 TinyVue 做了一个简单的智能业务表单 Demo。

做完以后，我最大的感受是：

AI 前端不是只属于前端开发者，后端开发者也可以从里面受益。

尤其是在后台管理、业务查询、数据核对、内部工具这些场景里，AI + 组件库可以帮我们更快搭出页面雏形。

当然，它不能替你把所有细节都做好。

但如果只是想从 0 到 1 搭一个能看的业务页面，它确实能省不少时间。

对我来说，这就是 AI 前端最现实的价值：

不是替代谁，而是让开发流程变得更快一点、更顺一点。

参考项目

OpenTiny / TinyEngine 项目地址：

https://atomgit.com/opentiny/tiny-engine

TinyVue 是 OpenTiny 社区的企业级 UI 组件库，支持 Vue 2、Vue 3、PC 端和移动端，适合企业级后台和管理系统场景。 

---