后端 API 示例

用户认证

from fastapi import APIRouter, Depends
from app.core.dependencies import AuthPermission
from app.api.v1.module_system.auth.schema import AuthSchema

router = APIRouter()

@router.get("/profile")
async def get_profile(
    auth: AuthSchema = Depends(AuthPermission(["system:user:profile"])),
):
    return {"user": auth.user}

CRUD 操作

from fastapi import APIRouter, Depends
from app.api.v1.module_system.role.crud import RoleCRUD
from app.core.dependencies import AuthPermission

router = APIRouter()

@router.get("/roles")
async def get_roles(
    auth: AuthSchema = Depends(AuthPermission(["system:role:list"])),
):
    roles = await RoleCRUD.get_all()
    return {"roles": roles}

前端示例

Vue 组件

<template>
  <div class="user-profile">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const user = ref({})

onMounted(async () => {
  const response = await fetch('/api/v1/profile')
  user.value = await response.json()
})
</script>

仪表盘组件

<template>
  <div class="dashboard">
    <div class="stats">
      <el-card>
        <h3>总用户数</h3>
        <p>{{ userCount }}</p>
      </el-card>
      <el-card>
        <h3>活跃角色</h3>
        <p>{{ roleCount }}</p>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const userCount = ref(0)
const roleCount = ref(0)

onMounted(async () => {
  const response = await fetch('/api/v1/stats')
  const data = await response.json()
  userCount.value = data.userCount
  roleCount.value = data.roleCount
})
</script>

Docker Compose 示例

services:
  backend:
    build: ./docker/backend
    ports:
      - "8001:8001"
    depends_on:
      - mysql
      - redis

  nginx:
    build: ./docker/nginx
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - backend

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: fastapiadmin

  redis:
    image: redis:7.0