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

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

news 来源：原创 2025/5/1 6:05:37

近期在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>