面试题：SvelteKit 中页面路由和 API 路由的区别与基础配置

Question

请阐述 SvelteKit 里页面路由和 API 路由在功能、用途上的主要区别。并举例说明如何在 SvelteKit 项目中分别配置一个简单的页面路由和 API 路由。

Answer 1

功能和用途区别

1. 页面路由：
   • 功能：用于呈现用户界面，处理与用户交互相关的逻辑，比如展示页面内容、处理表单提交后页面的更新等。
   • 用途：负责构建应用的用户可访问的页面结构，提供完整的用户体验，是用户与应用交互的直接入口。例如，电商应用中的商品展示页面、购物车页面等都是通过页面路由实现的。
2. API 路由：
   • 功能：主要用于提供数据接口，接收客户端的请求并返回数据，通常以 JSON 格式为主。不涉及页面渲染相关的逻辑。
   • 用途：为前端页面或其他客户端提供数据服务，实现前后端的数据交互。比如为电商应用的商品展示页面提供商品数据的接口，或者处理用户登录注册时的数据验证和存储等。

配置示例

1. 页面路由：
   • 在 SvelteKit 项目中，页面路由通过在 src/routes 目录下创建文件和文件夹来实现。例如，创建一个简单的关于页面：
     • 在 src/routes/about.svelte 文件中编写如下代码：

<script>
    // 页面相关逻辑
</script>

<main>
    <h1>关于我们</h1>
    <p>这是关于我们公司/项目的介绍内容。</p>
</main>

- 这样就创建了一个 `/about` 的页面路由，当用户访问 `http://your - app - url/about` 时，会展示这个页面。

2. API 路由： - API 路由同样在 src/routes 目录下，不过文件名需要以 .json.js 结尾。例如，创建一个获取用户列表的 API 路由： - 在 src/routes/users.json.js 文件中编写如下代码：

export async function GET() {
    const users = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
    ];
    return new Response(JSON.stringify(users), {
        headers: {
            'Content - Type': 'application/json'
        }
    });
}

- 这个 API 路由可以通过 `http://your - app - url/users.json` 来访问，返回一个包含用户列表的 JSON 数据。