我的新宠技术栈 Nuxt 4 Nuxt UI MongoDB 和 Quarkus

my-app/
 ├─ app/
 │  ├─ assets/
 │  ├─ components/
 │  ├─ pages/
 │  └─ app.vue
 ├─ shared/
 ├─ server/
 └─ nuxt.config.ts

// 优化的数据获取示例
const { data: products } = await useAsyncData(
  'products',
  () => $fetch('/api/products'),
  {
    server: true,
    default: () => [],
    transform: (data) => data.map(p => ({...p, formattedPrice: formatCurrency(p.price)}))
  }
)

<template>
  <UContainer class="py-8">
    <UCard>
      <template #header>
        <h1 class="text-2xl font-bold">用户管理</h1>
      </template>
      
      <UTable :rows="users" :columns="columns">
        <template #actions-data="{ row }">
          <UButton
            icon="i-heroicons-pencil"
            size="sm"
            color="primary"
            variant="ghost"
            @click="edit(row)"
          />
        </template>
      </UTable>
      
      <template #footer>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">
            {{ users.length }} users found
          </span>
          <UPagination
            v-model="page"
            :total="total"
            :page-count="10"
          />
        </div>
      </template>
    </UCard>
  </UContainer>
</template>

<script setup lang="ts">
const users = ref([])
const page = ref(1)
const total = ref(100)

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' },
  { key: 'actions', label: 'Actions' }
]

async function loadUsers() {
  const { data } = await useFetch('/api/users', {
    query: { page: page.value }
  })
  users.value = data.value
}
</script>

// Nuxt 中的 Mongoose 连接
import mongoose from 'mongoose'

export default defineNitroPlugin(async (nitroApp) => {
  if (!mongoose.connection.readyState) {
    await mongoose.connect(process.env.MONGODB_URI)
  }
})

// 示例架构
const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  role: { type: String, enum: ['admin', 'user', 'editor'] },
  preferences: {
    theme: String,
    notifications: Boolean
  },
  createdAt: { type: Date, default: Date.now }
})

// 优化索引
userSchema.index({ email: 1 })
userSchema.index({ createdAt: -1 })

// Quarkus 中的 REST API 示例
@Path("/api/products")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class ProductResource {
    
    @Inject
    ProductService service;
    
    @GET
    @Operation(summary = "列出产品", description = "返回所有产品")
    public Response list(
            @QueryParam("page") @DefaultValue("0") int page,
            @QueryParam("size") @DefaultValue("20") int size) {
        List<Product> products = service.list(page, size);
        return Response.ok(products).build();
    }
    
    @POST
    @Operation(summary = "创建产品")
    public Response create(ProductDTO dto) {
        Product product = service.create(dto);
        return Response.status(Status.CREATED)
                      .entity(product)
                      .build();
    }
}

// 使用 Panache 的实体
@Entity
public class Product extends PanacheMongoEntity {
    public String name;
    public String description;
    public BigDecimal price;
    public Integer stock;
    public String category;
    public LocalDateTime createdAt;
    
    // 静态查询
    public static List<Product> findByCategory(String category) {
        return list("category", category);
    }
    
    public static List<Product> findActive() {
        return list("stock > 0");
    }
    
    public static long countByCategory(String category) {
        return count("category", category);
    }
}

// 仓库
@ApplicationScoped
public class ProductRepository implements PanacheMongoRepository<Product> {
    
    public List<Product> searchWithStock(int page, int size) {
        return find("stock > 0")
               .page(page, size)
               .list();
    }
    
    public Optional<Product> searchByCode(String code) {
        return find("code", code).firstResultOptional();
    }
}

┌─────────────────────────────────────────────────────────┐
│                    Nuxt 4 (前端)                        │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │ Nuxt UI v4  │  │  Pages/Views│  │   API Client    │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘
                              │
                              ▼ HTTP/REST/gRPC
┌─────────────────────────────────────────────────────────┐
│                   Quarkus (后端)                        │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │  REST API   │  │  Services   │  │ MongoDB Panache │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────┐
│                      MongoDB                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │  Products   │  │    Users    │  │     Orders      │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/mdc',
    '@pinia/nuxt'
  ],
  
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  },
  
  ui: {
    global: true,
    icons: ['heroicons', 'simple-icons']
  },
  
  devtools: { enabled: true }
})

// composables/useApi.ts
export const useApi = () => {
  const config = useRuntimeConfig()
  
  const client = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      'Content-Type': 'application/json'
    },
    timeout: 30000
  })
  
  return {
    get: <T>(url: string, options?: object) =>
      client<T>(url, { method: 'GET', ...options }),
    
    post: <T>(url: string, body: object, options?: object) =>
      client<T>(url, { method: 'POST', body, ...options }),
    
    put: <T>(url: string, body: object, options?: object) =>
      client<T>(url, { method: 'PUT', body, ...options }),
    
    delete: <T>(url: string, options?: object) =>
      client<T>(url, { method: 'DELETE', ...options })
  }
}