操作指南：在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 datetime

class 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, KnowledgeBaseUpdate

def 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 datetime

class KnowledgeBaseBase(BaseModel):
    title: str
    content: str
    category: str | None = None

class KnowledgeBaseCreate(KnowledgeBaseBase):
    pass

class KnowledgeBase(KnowledgeBaseBase):
    id: int
    created_at: datetime

    class 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_db

router = 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 = false
  await 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测试，再开发前端界面。如果项目使用权限控制，需要在路由添加权限校验。