当前位置：首页 > news >正文

FastApiAdmin 后端接口开发好了，前端管理界面怎么调用与显示？

news 2026/6/29 23:30:30

本文能帮你解决什么

✅ 搞懂 FastapiAdmin 后端接口和前端页面之间的“连接逻辑”

✅ 手把手完成菜单配置、API 封装、页面开发的完整流程

✅ 避开菜单不显示、接口报 403、组件不渲染等高频翻车场景

🧭 主要内容脉络

前后端连接逻辑

➡️ 第1步：后端菜单配置

➡️ 第2步：前端 API 封装

➡️ 第3步：Vue 页面组件开发

➡️ 第4步：路由与权限联动

➡️ 常见翻车现场

1. 先把逻辑搞清楚：后端接口是怎么“变成”前端页面的？

FastapiAdmin 的前端基于Vue3 + Vite5 + Pinia + Ant Design Vue，它的菜单是动态生成的：用户登录后，前端调用接口获取该用户有权访问的菜单树，然后动态注册路由、渲染左侧导航栏。

所以整个链路是这样的：

🔹① 后端菜单配置：在后台管理界面中创建一条菜单记录，填上路由路径、组件路径、权限标识。

🔹② 前端 API 封装：在 frontend/src/api/ 下写一个请求模块，封装对后端接口的 HTTP 调用。

🔹③ 页面组件开发：写一个 Vue 页面，用 Ant Design Vue 的表格和弹窗实现增删改查的 UI。

🔹④ 路由与权限联动：确保菜单里的组件路径和前端路由配置一致，权限标识和接口的 Depends 一致。

你可能会问：“为什么不能自动生成？”其实 FastapiAdmin 确实内置了代码生成器，可以一键生成前后端代码。但自动生成的东西不一定完全符合你的需求，理解手动流程能让你在定制化时心里有底。

2. 第1步：在后台管理界面配置菜单

登录后台 → 左侧菜单找“平台管理” → 点击“菜单管理”。你会看到一个树形结构的菜单列表。

点击“新增”，填以下信息：

📋 菜单名称：会议纪要

📋 菜单类型：菜单

📋 路由路径：/custom/meeting/

📋 组件路径：module_custom/meeting/index

📋 权限标识：custom:meeting:test

📋 图标：选一个合适的图标

📋 排序：自己定

保存后，如果非管理员用户使用，别忘了去“角色管理”里给当前角色分配这个新菜单的权限，否则你就算加了菜单也看不见。

这个坑我一脚踩进去过——菜单建好了，角色没分配，左侧导航栏就是不显示，试了半天才找到原因。

3. 第2步：在前端工程里封装 API 请求

打开前端目录 frontend/src/api/，FastapiAdmin 的惯例是每个业务模块一个请求文件。我们在 api/ 下新建 module_custom/meeting.ts：

import { request } from "@utils"; const API_PATH = "/custom/meeting"; const MeetingAPI = { getTest() { return request<ApiResponse>({ url: `${API_PATH}/`, method: "get", }) } } export default MeetingAPI

注意这里的request是项目自己封装的 axios 实例，已经帮你处理好了 baseURL、token 注入、错误拦截这些通用逻辑。你别自己再 new 一个 axios 出来，不然 token 不会自动带上，请求全报 401。

4. 第3步：开发 Vue 页面组件（重头戏）

在 frontend/src/views/ 下新建 module_custom/meeting/index.vue（路径要和菜单里填的组件路径对上！）。

这里我们先编写一个简单的字串响应，中通逻辑再进行后续功能添加：

<script setup lang="ts"> import MeetingAPI from "@/api/module_custom/meeting"; import { ref } from "vue"; const info = ref("test"); onMounted(async () => { await MeetingAPI.getTest() .then((res) => { console.log(res.data); info.value = res.data["msg"]; }) .catch((err) => { console.log("出错啦！"); console.log(err); }); }); </script> <template> <p>{{ info }}</p> </template>

后面有时间我们再研究下用 Ant Design Vue 的a-table做列表展示，用a-modal做新增/编辑弹窗。