摘要作为 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 vitelatest tinyvue-ai-form-demo选择Vue JavaScript进入项目目录cd tinyvue-ai-form-demo安装依赖npm install启动项目npm run dev如果能正常打开页面说明基础项目已经跑起来了。四、安装 TinyVue根据 TinyVue 相关安装说明Vue 3 项目可以安装opentiny/vue3。npm i opentiny/vue3然后在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 classpage div classpage-header h1智能业务数据查询/h1 p 这是一个基于 TinyVue 组件搭建的业务查询表单 Demo 模拟后台管理系统中常见的查询、列表和分页场景。 /p /div div classai-tip div classai-titleAI 辅助说明/div div classai-content 你可以输入业务编号、用户名称、状态或时间范围进行筛选。 如果是实际项目这里也可以接入 AI 能力根据自然语言自动生成查询条件。 /div /div div classsearch-card tiny-form :modelqueryForm label-width90px div classform-row tiny-form-item label业务编号 tiny-input v-modelqueryForm.bizNo placeholder请输入业务编号 / /tiny-form-item tiny-form-item label用户名称 tiny-input v-modelqueryForm.userName placeholder请输入用户名称 / /tiny-form-item tiny-form-item label状态 tiny-select v-modelqueryForm.status placeholder请选择状态 clearable tiny-option label成功 valueSUCCESS / tiny-option label处理中 valuePROCESSING / tiny-option label失败 valueFAILED / /tiny-select /tiny-form-item /div div classbutton-row tiny-button typeprimary clickhandleSearch 查询 /tiny-button tiny-button clickhandleReset 重置 /tiny-button tiny-button typesuccess clickhandleAiFill AI 生成查询建议 /tiny-button /div /tiny-form /div div classtable-card div classtable-header span查询结果/span span classtable-count共 {{ filteredList.length }} 条/span /div table classbiz-table thead tr th业务编号/th th用户名称/th th金额/th th状态/th th创建时间/th /tr /thead tbody tr v-foritem in pageList :keyitem.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-ifpageList.length 0 td colspan5 classempty暂无数据/td /tr /tbody /table div classpager tiny-button sizesmall clickprevPage :disabledpageNo 1 上一页 /tiny-button span第 {{ pageNo }} / {{ totalPage }} 页/span tiny-button sizesmall clicknextPage :disabledpageNo 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 创建时间 createTimeAI 可以帮我生成查询表单表格列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 ApiResponsePageResultBusinessRecordVO queryList(RequestBody BusinessQueryDTO query) { PageResultBusinessRecordVO 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-engineTinyVue 是 OpenTiny 社区的企业级 UI 组件库支持 Vue 2、Vue 3、PC 端和移动端适合企业级后台和管理系统场景。