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

操作指南:在vue-fastapi-admin上增加新的功能模块

近期在github上看到一个很不错的web框架,https://github.com/mizhexiaoxiao/vue-fastapi-admin。该项目基于 FastAPI + Vue3 + Naive UI 的现代化前后端分离开发平台,融合了 RBAC 权限管理、动态路由和 JWT 鉴权,可以助力中小型应用快速搭建,也可用于学习参考。
本着研究和学习的目的,尝试着添加一个新的模块,比如知识库管理。以下是分步骤的代码修改指南:


一、后端修改(FastAPI 部分)

1. 创建数据库模型
# app/models/knowledgebase.py
from sqlalchemy import Column, Integer, String, Text, DateTime
from app.db.base_class import Base
from datetime import datetimeclass KnowledgeBase(Base):__tablename__ = "knowledgebase"id = Column(Integer, primary_key=True, index=True)title = Column(String(100), index=True)content = Column(Text)category = Column(String(50))created_at = Column(DateTime, default=datetime.utcnow)
2. 创建CRUD操作
# app/crud/knowledgebase_crud.py
from sqlalchemy.orm import Session
from app.models.knowledgebase import KnowledgeBase
from app.schemas.knowledgebase import KnowledgeBaseCreate, KnowledgeBaseUpdatedef get_knowledge_base(db: Session, kb_id: int):return db.query(KnowledgeBase).filter(KnowledgeBase.id == kb_id).first()def get_knowledge_bases(db: Session, skip: int = 0, limit: int = 100):return db.query(KnowledgeBase).offset(skip).limit(limit).all()def create_knowledge_base(db: Session, kb: KnowledgeBaseCreate):db_kb = KnowledgeBase(**kb.dict())db.add(db_kb)db.commit()db.refresh(db_kb)return db_kb# 其他更新、删除函数类似...
3. 创建Pydantic模型
# app/schemas/knowledgebase.py
from pydantic import BaseModel
from datetime import datetimeclass KnowledgeBaseBase(BaseModel):title: strcontent: strcategory: str | None = Noneclass KnowledgeBaseCreate(KnowledgeBaseBase):passclass KnowledgeBase(KnowledgeBaseBase):id: intcreated_at: datetimeclass Config:orm_mode = True
4. 添加路由
# app/routers/knowledgebase.py
from fastapi import APIRouter, Depends, HTTPException
from sqlalchemy.orm import Session
from app.crud import knowledgebase_crud
from app.schemas import knowledgebase
from app.api.deps import get_dbrouter = APIRouter()@router.post("/knowledgebases/", response_model=knowledgebase.KnowledgeBase)
def create_knowledge_base(kb: knowledgebase.KnowledgeBaseCreate, db: Session = Depends(get_db)):return knowledgebase_crud.create_knowledge_base(db=db, kb=kb)@router.get("/knowledgebases/", response_model=list[knowledgebase.KnowledgeBase])
def read_knowledge_bases(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):kbs = knowledgebase_crud.get_knowledge_bases(db, skip=skip, limit=limit)return kbs# 添加其他路由(更新、删除、单个查询)
5. 注册路由到主应用
# app/main.py
from app.routers import knowledgebase  # 新增
app.include_router(knowledgebase.router, prefix="/api")  # 新增
6. 执行数据库迁移
alembic revision --autogenerate -m "add knowledgebase table"
alembic upgrade head

二、前端修改(Vue 部分)

1. 创建API请求文件
// src/api/knowledgebase.js
import request from '@/utils/request'export function fetchKnowledgeBases(params) {return request({url: '/api/knowledgebases/',method: 'get',params})
}export function createKnowledgeBase(data) {return request({url: '/api/knowledgebases/',method: 'post',data})
}
2. 创建视图组件
<!-- src/views/knowledge/Index.vue -->
<template><div class="app-container"><el-button type="primary" @click="handleCreate">新增</el-button><el-table :data="list" style="width: 100%"><el-table-column prop="title" label="标题"/><el-table-column prop="category" label="分类"/><el-table-column prop="created_at" label="创建时间"/><el-table-column label="操作"><template #default="{row}"><el-button size="mini" @click="handleEdit(row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button></template></el-table-column></el-table><!-- 新增/编辑对话框 --><el-dialog v-model="dialogVisible" :title="dialogType==='edit'?'编辑':'新增'"><el-form :model="form" label-width="80px"><el-form-item label="标题"><el-input v-model="form.title"/></el-form-item><el-form-item label="内容"><el-input v-model="form.content" type="textarea"/></el-form-item><el-form-item label="分类"><el-select v-model="form.category"><el-option label="技术文档" value="tech"/><el-option label="产品说明" value="product"/></el-select></el-form-item></el-form><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="confirmSubmit">确认</el-button></template></el-dialog></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import { fetchKnowledgeBases, createKnowledgeBase } from '@/api/knowledgebase'const list = ref([])
const dialogVisible = ref(false)
const dialogType = ref('create')
const form = ref({title: '',content: '',category: ''
})// 加载数据
const getList = async () => {const res = await fetchKnowledgeBases()list.value = res.data
}// 提交表单
const confirmSubmit = async () => {if(dialogType.value === 'create') {await createKnowledgeBase(form.value)}dialogVisible.value = falseawait getList()
}onMounted(() => {getList()
})
</script>
3. 添加路由配置
// src/router/index.js
{path: '/knowledge',component: Layout,children: [{path: '',name: 'Knowledge',component: () => import('@/views/knowledge/Index'),meta: { title: '知识库管理', icon: 'document' }}]
}
4. 添加菜单项(根据项目菜单组件位置调整)
<!-- src/layout/components/Sidebar/Item.vue -->
<!-- 在适当位置添加菜单项 -->
<el-menu-item index="/knowledge"><i class="el-icon-document"/><span>知识库管理</span>
</el-menu-item>

三、验证步骤

  1. 启动后端服务,访问/api/docs确认知识库接口存在
  2. 前端运行后,检查菜单是否出现"知识库管理"
  3. 测试增删改查功能是否正常工作
  4. 检查数据库表knowledgebase是否生成

建议先完成后端接口开发并通过Swagger测试,再开发前端界面。如果项目使用权限控制,需要在路由添加权限校验。

http://www.xdnf.cn/news/65467.html

相关文章:

  • 江湖密码术:Rust中的 bcrypt 加密秘籍
  • 算法 | 成长优化算法(Growth Optimizer,GO)原理,公式,应用,算法改进研究综述,matlab代码
  • QLisview 实现model deletage,并且在不需要编辑的情况下自定义UI
  • 【Redis】Jedis与Jedis连接池
  • Oracle数据库和PLSQL安装配置
  • 基于单片机的BMS热管理功能设计
  • 实验四 Java图形界面与事件处理
  • 如何对只能有一个`public`顶层类这句话的理解
  • 【解决】Vue + Vite + TS 配置路径别名成功仍爆红
  • Unreal Engine中FRotator与FQuat在赛车游戏方向盘控制中的协同应用解析
  • 【C++编程入门】:从零开始掌握基础语法
  • CENTOS 7 安装VNC
  • 【Java面试笔记:基础】1.谈谈你对Java平台的理解?
  • 移动端动态滑动拨盘选择器【Axure元件库】
  • 自注意力机制、多头自注意力机制、填充掩码 Python实现
  • 如何在白平衡标定种构建不同类型的白平衡色温坐标系
  • Android 音悦适配-v4.3.3-可在线播放可下载音乐的第三方APP
  • 【解决方法】关于解决QGC地面站4.4.3中文BUG,无法标注航点的问题
  • 模型检测技术的发展历史简介
  • Redis基础知识
  • 山东大学软件学院创新项目实训开发日志(21)之小问题修复之对话方向修改
  • 工厂模式:简单工厂模式
  • 免费送源码:ava+springboot+MySQL 基于springboot 宠物医院管理系统的设计与实现 计算机毕业设计原创定制
  • 修改IP地址能否精确到地级市的县?——全面解析
  • 第39讲|决策树与作物分布建模:可解释的AI助力农业智能推演
  • WINDOWS下使用命令行读取本地摄像头FFMPEG+DirectShow,ffplay直接播放摄像头数据
  • arkTs:使用Refresh实现下拉刷新功能(含状态提示与动画控制)
  • MySQL知识点讲解
  • n2n 搭建虚拟局域网,实现内网穿透
  • C++计算 n! 中末尾零的数量