调用服务器端点
端点可以用来提供多种类型的数据。在本节示例中,将展示如何在页面的组件脚本中调用一个服务器端点来显示问候语,而不需要额外的获取请求。
前期准备
段落标题 前期准备- 一个开启了 SSR (
output: 'server'
) 的项目
操作步骤
段落标题 操作步骤-
在一个新的文件
src/pages/api/hello.ts
中创建一个端点,该端点返回一些数据:src/pages/api/hello.ts import type { APIRoute } from 'astro'export const GET: APIRoute = () => {return new Response(JSON.stringify({greeting: 'Hello',}),)} -
在任何 Astro 页面上,从端点中导入
GET()
方法。使用Astro
全局对象 来提供请求的上下文,并在页面使用响应数据。src/pages/index.astro ---import { GET } from './api/hello.ts'let response = await GET(Astro)const data = await response.json()---<h1>{data.greeting} world!</h1>
更多操作指南
-
状态共享
学习如何使用 Nano Stores 在框架组件之间共享状态
-
添加 RSS 摘要
通过向你的 Astro 网站添加 RSS 摘要让用户来订阅你的内容。
-
安装一个 Vite 或 Rollup 插件
了解如何通过向项目添加 Rollup 插件来导入 YAML 数据。
-
构建自定义图像组件
了解如何使用 getImage 函数构建支持媒体查询的自定义图像组件
-
使用 API 路由构建表单
了解如何使用 JavaScript 发送表单到 API 路由
-
在 Astro 页面中构建 HTML 表单
了解如何在 Astro 页面中构建 HTML 表单并在你的 frontmatter 中处理提交请求
-
在 Astro 中使用 Bun
了解如何在 Astro 站点中使用 Bun。
-
调用服务器端点
了解如何在 Astro 中调用服务器端点
-
校验验证码
了解如何创建一个 API 路由并从客户端进行获取。
-
用 Docker 来构建你的 Astro 网站
了解如何使用 Docker 来构建你的 Astro 网站。
-
Dynamically Import Images
Learn how to dynamically import images using Vite's import.meta.glob function
-
为链接添加图标
了解如何安装 rehype 插件并为你 Markdown 文件中的链接添加图标
-
添加 i18n 功能
通过动态路由和内容集合来让你的 Astro 站点支持国际化。
-
添加最后修改时间
编写一个在你的 Markdown 和 MDX 文件里添加最后修改时间的 remark 插件。
-
添加阅读时间
编写一个在你的 Markdown 和 MDX 文件里添加阅读所需时间的 remark 插件。
-
在 Astro 组件中共享状态
了解如何通过 Nano Stores 在 Astro 组件中共享状态
-
使用流式处理来提升页面性能
了解如何使用流式处理来提升页面性能
-
使用 Tailwind Typography 美化渲染后的 Markdown
了解如何使用 @tailwind/typography 美化你渲染后的 Markdown