上一讲我们体验了自动导入功能，整合了 NaiveUI。再加上前面若干章节的学习，视图开发部分告一段落，紧接着我们需要服务端提供接口和数据来填充视图。获取接口和数据通常有两种情况：

1. 接口已经存在或者由其他后端同事提供；
2. 接口并不存在需要我们自行编写。

第一种情况属于数据获取范畴，我们将在下一讲讲解；本讲我们针对第二种情况，给大家讲解如何使用 Nuxt3 提供的 API Route 自己编写接口，主要包括以下知识点：

• 创建服务端 API；
• 处理请求参数；
• 返回响应数据。

# 创建服务端 API

Nuxt 项目下~/server/api目录下的文件会被注册为服务端 API，并约定在这些文件中导出一个默认函数defineEventHandler(handler)，handler 中可以直接返回 JSON 数据或 Promise，当然也可以使用 event.node.res.end() 发送响应，虽然这没有必要。

下面我们创建一个 server/api/hello.ts 测试一下：这里我们返回给用户一个 json 数据。

javascript
复制代码export default defineEventHandler((event) => {
  return {
    message: 'hello，nuxt3！'
  }
})

这个接口可以使用$fetch('/api/hello')请求，创建一个 hello.vue：

xml
复制代码<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup lang="ts">
const { message } = await $fetch('/api/hello')
</script>

测试效果如下：

# 范例：获取博客列表

下面我们实践一下，实现一个博客需求：

• 创建一个 /api/posts 接口，获取指定目录下 markdown 文章列表数据。

创建 content 目录，创建若干 markdown 文件作为文章：

css
复制代码|-content
---test1.md
---test2.md
---test3.md

创建 server/api/posts.ts，获取 content 中文件列表并返回。

javascript
复制代码import fs from "fs";
import path from "path";
import matter from