Nuxt Content 中 JSON 数据的管理与查询指南

最新推荐文章于 2025-06-11 09:18:13 发布

苏玥隽

最新推荐文章于 2025-06-11 09:18:13 发布

阅读量254

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00392/article/details/148578312

Nuxt Content 中 JSON 数据的管理与查询指南

content The file-based CMS for your Nuxt application, powered by Markdown and Vue components. 项目地址: https://gitcode.com/gh_mirrors/con/content

前言

在现代前端开发中，内容管理是一个重要环节。Nuxt Content 作为一个强大的内容管理系统，提供了对多种文件格式的支持，其中 JSON 格式因其结构化和易读性而广受欢迎。本文将深入探讨如何在 Nuxt Content 项目中高效地定义、创建和查询 JSON 数据。

JSON 数据集合的定义

在 Nuxt Content 中，我们需要首先定义数据集合的结构。这通过 content.config.ts 文件完成：

import { defineCollection, defineContentConfig, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    authors: defineCollection({
      type: 'data',  // 指定为数据集合类型
      source: 'authors/**.json',  // 文件路径匹配模式
      schema: z.object({  // 使用 Zod 定义数据结构
        name: z.string(),
        avatar: z.string(),
        url: z.string()
      })
    })
  }
})

关键点解析：

type: 'data' 表示这是一个数据集合，与常规内容集合区分
source 使用 glob 模式匹配文件路径
schema 使用 Zod 库定义数据结构，确保数据一致性

JSON 文件的创建规范

在 content/authors/ 目录下创建 JSON 文件时，需遵循以下规范：

{
  "name": "Ahad Birang",
  "avatar": "https://avatars.githubusercontent.com/u/2047945?v=4",
  "url": "https://github.com/farnabaz"
}

重要注意事项：

每个 JSON 文件应只包含一个顶层对象
属性名称需与 schema 定义完全匹配
避免使用数组作为顶层结构，这会导致查询结果异常

数据查询实践

Nuxt Content 提供了灵活的查询 API，以下是两种典型查询方式：

1. 查询单个作者

<script lang="ts" setup>
const { data: author } = await useAsyncData('larbish', () => {
  return queryCollection('authors')
    .where('stem', '=', 'larbish')  // 根据文件名查询
    .first()  // 获取第一条匹配记录
})
</script>

2. 查询所有作者并排序

<script lang="ts" setup>
const { data: authors } = await useAsyncData('authors', () => {
  return queryCollection('authors')
    .order('name', 'DESC')  // 按名称降序排列
    .all()  // 获取所有记录
})
</script>

查询方法详解：