后端前端认证鉴权低代码任务调度【免费下载链接】gin-vue-adminViteVue3Gin拥有AI辅助的基础开发平台企业级业务AI开发解决方案内置mcp辅助服务内置skills管理支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器、表单生成器和可配置的导入导出等开发必备功能。项目地址https://gitcode.com/gh_mirrors/gi/gin-vue-admin点击查看免费下载本篇指南以 gin-vue-admin 仓库 aiDoc/examples/frontend 目录下的讲解型示例为核心面向「在新增或修改前端文件时需要遵循既有代码约定」的开发场景包括 AI 辅助编码场景系统梳理前端四类最常见文件的推荐写法接口封装API、全局状态Pinia、页面组件View与工具函数复用Utils。读完本文你将掌握 gin-vue-admin 前端分层边界、每一层的标准代码骨架、常见反模式以及可以直接对照的真实参考文件。一、目录定位这组示例解决什么问题aiDoc/examples/frontend/目录聚焦前端常见文件类型的讲解型示例它本身是一份索引指向四份独立的示例文档文档讲解主题相对路径API 示例前端接口封装aiDoc/examples/frontend/api-example.mdPinia 示例全局状态管理aiDoc/examples/frontend/pinia-example.mdView 示例页面组件aiDoc/examples/frontend/view-example.md工具函数示例通用能力复用aiDoc/examples/frontend/utils-usage-example.md按照 aiDoc/examples/frontend/README.md 的适用范围说明当需要新增或修改以下目录中的文件时应优先阅读本目录下的对应示例web/src/api/**—— 后端接口封装层web/src/pinia/**—— 全局状态层web/src/view/**—— 页面视图层web/src/plugin/**—— 插件前端代码这一约定把「前端分层规范」沉淀为可被检索、可被对照的示例文档核心目标只有一个新代码与既有代码保持同一套结构接口契约不漂移状态逻辑不散落通用能力不重复造轮子。二、API 层统一走/utils/request的接口封装2.1 这一层负责什么前端 API 文件负责把后端接口封装成可复用函数统一走/utils/request导出的service实例不在组件里直接拼 axios 请求。需要这样写的场景包括新增模块接口给页面提供列表、详情、创建、更新、删除方法为插件页面补接口封装。2.2 推荐写法以订单模块为例标准骨架如下引自 aiDoc/examples/frontend/api-example.mdimport service from /utils/request // Summary 分页获取订单列表 // Router /order/getOrderList [post] export const getOrderList (data) { return service({ url: /order/getOrderList, method: post, data }) } // Summary 创建订单 // Router /order/createOrder [post] export const createOrder (data) { return service({ url: /order/createOrder, method: post, data }) }2.3 为什么这样写源码佐证第一所有请求自动复用拦截器能力。仓库真实入口 web/src/utils/request.js 基于axios.create()创建service实例并在请求/响应拦截器中统一处理了config.baseURL默认取import.meta.env.VITE_BASE_API自动注入请求头x-token来自 userStore 的 token与x-user-id见 web/src/utils/request.js统一的全局 Loading 展示与并发计数、以及 30 秒强制关闭兜底响应中code 0判定业务成功new-token响应头自动续期 token401 自动清理登录态并跳转登录页、密码过期强制跳转改密页、错误消息去重最多同时展示 3 条见 web/src/utils/request.js。这些逻辑一旦在组件里直接用 axios 绕开service就会全部失效因此「统一走 service」不是风格偏好而是安全与体验基线。第二JSDoc 风格注释成为接口契约的一部分。真实参考文件 web/src/api/user.js 中每个函数都带Summary、Router、Param、Success等注释例如// Tags User // Summary 分页获取用户列表 // Security ApiKeyAuth // Param data body modelInterface.PageInfo true 分页获取用户列表 // Router /user/getUserList [post] export const getUserList (data) { return service({ url: /user/getUserList, method: post, data: data }) }这些注释能让 AI 和协作者在不翻后端代码的情况下快速理解每个接口的用途、路径与方法也便于与后端 Swagger 注解见 server/docs/docs.go形成对照。注意不同接口的传参位置POST/PUT 用dataDELETE/GET 查询参数用params可对照插件参考 web/src/plugin/announcement/api/info.js 中deleteInfo与findInfo的写法。2.4 常见错误在页面组件里直接写 axios绕过拦截器与 token 注入把页面状态逻辑混进 API 文件API 层只描述接口不管理 UI 状态URL、method、参数位置写错导致接口契约漂移前后端不同步时尤其隐蔽。三、Pinia 层ref computed async action的全局状态3.1 这一层负责什么Pinia store 负责全局状态、异步动作和跨页面共享数据不负责页面渲染细节。典型适用场景用户信息、路由、字典、系统参数等共享状态多页面都会用到的业务状态需要统一缓存或集中副作用的场景。3.2 推荐写法setup 风格Composition的 store 骨架引自 aiDoc/examples/frontend/pinia-example.mdimport { defineStore } from pinia import { ref, computed } from vue import { getOrderList } from /api/order export const useOrderStore defineStore(order, () { const list ref([]) const total ref(0) const loading ref(false) const hasData computed(() list.value.length 0) const fetchList async (params) { loading.value true try { const res await getOrderList(params) if (res.code 0) { list.value res.data.list total.value res.data.total } return res } finally { loading.value false } } const reset () { list.value [] total.value 0 } return { list, total, loading, hasData, fetchList, reset } })3.3 为什么这样写源码佐证ref computed async action是仓库内最自然的组织方式。真实用户 store web/src/pinia/modules/user.js 即完全采用 setup 风格用ref定义userInfo、token用async函数实现LoginIn、LoginOut、GetUserInfo、ClearStorage等动作并通过return { ... }统一暴露。登录动作内部完整展示了「store 承担副作用」的典型流程const LoginIn async (loginInfo) { const res await login(loginInfo) if (res.code ! 0) return false setUserInfo(res.data.user) setToken(res.data.token) // 密码过期强制跳转改密页 if (res.data.needChangePassword) { await router.push({ name: ForceChangePassword }) return true } // 初始化并注册异步路由 const routerStore useRouterStore() await routerStore.SetAsyncRouter() ... }可以看到登录、登出、清理缓存、拉取用户信息这些跨页面共享的副作用全部收进 store页面层只调用一个方法。字典 store web/src/pinia/modules/dictionary.js 则示范了「store 内做数据标准化与缓存」它把后端树形字典数据统一规范为label / value / extend / children结构并提供按深度过滤filterTreeByDepth与扁平化flattenTree等内部工具供 web/src/utils/dictionary.js 的getDict(type, { depth, value })复用。把 loading 和 reset 一并收进 store调用侧更干净。示例中的fetchList用try/finally保证 loading 复位reset提供状态清理入口——页面切换或组件卸载时不必再逐个字段手动归零。3.4 常见错误把所有局部页面状态都塞进全局 store局部状态应留在页面里用ref管理在 store 里写大量 DOM 操作store 不感知 DOM与渲染解耦不做 loading / reset 管理导致页面状态混乱。四、View 层查询区 表格区 弹窗区的页面骨架4.1 这一层负责什么页面组件负责查询表单、表格、弹窗、抽屉和交互流程是用户真正接触到的界面层。适用场景新增后台管理页面新增列表页 搜索 分页新增表单弹窗或抽屉流程。4.2 推荐写法一个最小的「搜索 列表」页面骨架引自 aiDoc/examples/frontend/view-example.mdtemplate div div classgva-search-box el-form :inlinetrue :modelsearchInfo el-form-item label名称 el-input v-modelsearchInfo.name placeholder请输入名称 / /el-form-item el-form-item el-button typeprimary clickonSubmit查询/el-button el-button clickonReset重置/el-button /el-form-item /el-form /div div classgva-table-box el-table :datatableData row-keyID el-table-column labelID propID width80 / el-table-column label名称 propname / /el-table /div /div /template script setup import { ref } from vue import { getOrderList } from /api/order const searchInfo ref({}) const tableData ref([]) const getTableData async () { const res await getOrderList(searchInfo.value) if (res.code 0) { tableData.value res.data.list } } const onSubmit () { getTableData() } const onReset () { searchInfo.value {} getTableData() } getTableData() /script4.3 为什么这样写源码佐证查询区和表格区结构清晰符合项目后台页面习惯。真实参考文件 web/src/view/systemTools/apiToken/index.vue 完整呈现了这套约定外层用gva-search-box包裹内联查询表单含gva前缀的语义化 class表格区用gva-table-box操作按钮区用gva-btn-list底部用gva-pagination挂载el-paginationlayouttotal, sizes, prev, pager, next, jumper。状态命名也保持一致searchInfo查询条件、tableData表格数据、form表单、page/pageSize/total分页。另一参考文件 web/src/view/superAdmin/api/api.vue 同样遵循该骨架。script setup下把「状态、请求、交互入口」放在一起易读。页面只处理展示和交互不在这里重写公共请求逻辑——数据获取一律调用 API 层封装的函数全局 loading 与错误提示由request.js的拦截器统一完成页面内无需重复实现。4.4 常见错误页面里直接写大量请求封装逻辑应下沉到 API 层组件过大不拆查询区、表格区、弹窗区弹窗/抽屉建议独立子组件或独立区块页面状态命名混乱不区分searchInfo、tableData、form。五、Utils 层先复用src/utils/不临时再造5.1 这一层负责什么当页面或组件需要通用能力时应先复用src/utils/下已有工具而不是临时再造一套。常见场景发送 HTTP 请求格式化日期获取字典数据处理按钮权限做命名转换跨组件通信。5.2 推荐写法组合复用多个工具引自 aiDoc/examples/frontend/utils-usage-example.mdimport service from /utils/request import { formatDate, CreateUUID } from /utils/format import { getDict } from /utils/dictionary import { useBtnAuth } from /utils/btnAuth const token CreateUUID() const createdAt formatDate(new Date()) const loadStatusDict async () { return await getDict(order_status) } const btnAuth useBtnAuth() export const fetchOrderList (data) { return service({ url: /order/getOrderList, method: post, data }) }5.3 为什么这样写源码佐证统一工具入口能减少重复实现且这些工具已被项目广泛使用。逐一对照源码请求/utils/request即 web/src/utils/request.js是全部接口的出口日期/命名web/src/utils/format.js 提供formatDate内部委托formatTimeToStr输出yyyy-MM-dd hh:mm:ss、CreateUUID基于时间戳 performance.now()生成 UUID 格式字符串、formatBoolean、filterDict等字典web/src/utils/dictionary.js 的getDict(type, { depth, value })在调用字典 store 的同时内置了generateCacheKey生成缓存键按「类型 深度 节点 value」维度缓存避免页面重复请求还包含参数校验type 必须为非空字符串、depth 必须为非负数与失败回退按钮权限web/src/utils/btnAuth.js 的useBtnAuth()直接读取当前路由的route.meta.btns一行代码即可拿到当前页面的按钮权限集合跨组件通信还可使用 web/src/utils/bus.js 的emitterrequest.js内部也在用emitter.emit(show-error)上报错误。复用已有工具比新造 helper 更利于 AI 和人协作——新代码与既有代码共享同一实现修复一处即可全局生效。5.4 常见错误手写日期格式化逻辑应使用 web/src/utils/format.js直接使用 axios 绕开request丢失 token 注入、loading、错误处理与 401 处理自己再实现一套按钮权限判断应使用 web/src/utils/btnAuth.js明明已有字典工具却在页面里重复请求和缓存应使用 web/src/utils/dictionary.js。六、分层边界速查与总结四层职责可以概括为一句话API 层只描述接口Store 层管全局状态与副作用View 层管展示与交互Utils 层提供通用能力。对应的「就近原则」是能力应该放在哪不应该放在哪接口请求API 层web/src/api/**、web/src/plugin/**/api/**View 层、Store 层全局共享状态与副作用Store 层web/src/pinia/modules/**View 层、API 层页面展示与交互View 层web/src/view/**Store 层通用能力日期、字典、权限、请求Utils 层web/src/utils/**各页面临时重写四份示例文档对应的真实参考文件汇总如下可作为新代码的「标准答案」直接对照API 封装web/src/api/user.js、web/src/plugin/announcement/api/info.jsPinia storeweb/src/pinia/modules/user.js、web/src/pinia/modules/router.js、web/src/pinia/modules/dictionary.js页面组件web/src/view/systemTools/apiToken/index.vue、web/src/view/superAdmin/api/api.vue工具函数web/src/utils/request.js、web/src/utils/format.js、web/src/utils/dictionary.js、web/src/utils/btnAuth.js按这套规范产出的前端代码接口契约清晰、状态逻辑集中、页面结构统一、通用能力零重复无论是人工协作还是 AI 辅助编码都能以最低的理解成本在 gin-vue-admin 前端中安全落地。赞分享后端前端认证鉴权低代码任务调度【免费下载链接】gin-vue-adminViteVue3Gin拥有AI辅助的基础开发平台企业级业务AI开发解决方案内置mcp辅助服务内置skills管理支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器、表单生成器和可配置的导入导出等开发必备功能。项目地址https://gitcode.com/gh_mirrors/gi/gin-vue-admin点击查看免费下载相关推荐gin-vue-admin前端组件可复用组件开发与封装gin vue admin前端组件可复用组件开发与封装 引言 在现代前端开发中组件化Componentization已成为构建复杂应用的核心范式。gin后端前端认证鉴权低代码任务调度告别重复代码gin-vue-admin前端分页组件开发指南告别重复代码gin vue admin前端分页组件开发指南 你是否还在每个页面重复编写分页逻辑是否厌倦了复制粘贴pageSize、currentPage这些后端前端认证鉴权低代码任务调度gin-vue-admin前端模块化开发组件封装与API设计gin vue admin前端模块化开发组件封装与API设计 在现代前端开发中模块化和组件化是提升代码复用性、可维护性的核心手段。gin vue admin后端前端认证鉴权低代码任务调度上一篇基于vis-three的全自定义Web3D场景编辑器如何打破传统3D编辑工具的限制下一篇CanvasBlocker未来路线图即将推出的7大隐私保护新功能预览创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考