查看 路由文章 如果您更倾向于使用 PHP 定义 API 路由。
在使用 Vue.js 或 React 等客户端框架时，将需要调用服务器端 API。这些 API 可以使用您的主题来定义，其中每个页面代表一个 API 端点。
页面充当一个转换层，位于你的CMS组件和返回到你的应用的JSON响应之间。大多数对象，例如模型和集合，支持JSON序列化，并且可以直接作为响应返回。
以最简单的形式，API 资源可以通过使用 response() Twig 函数返回一个 Twig 变量来构成。此函数会覆盖页面内容，并向浏览器返回一个自定义响应。
url = "/api/foobar"{% do response({ foo: 'bar' }) %}请提供您要翻译的英文技术文档片段。我将严格按照您的要求进行翻译。
上述调用将返回一个具有 application/json 内容类型的响应。
{ "foo": "bar" }在大多数情况下，您将转换组件变量为响应。
{% do response({
id: post.id,
title: post.title,
email: post.author.email,
created_at: post.created_at,
updated_at: post.updated_at
}) %}该 collect()Twig 函数 为响应构建一个集合。该 push 方法用于将项推入集合，并且可以用来定制每个结果。
{% set result = collect() %}
{% for post in posts %}
{% do result.push({
id: post.id,
title: post.title,
email: post.author.email,
created_at: post.created_at,
updated_at: post.updated_at
}) %}
{% endfor %}
{% do response(result) %}所有 Twig 条件都可以在标记中使用，以影响响应，并且最后一次响应调用是将发送到浏览器的那个。
使用 this.request.method Twig 属性 检查请求方法。
{% if this.request.method == 'GET' %}
<!-- Do GET Logic -->
{% else %}
<!-- Method Unsupported -->
{% endif %}abort() Twig 函数 可用于中止请求并返回 404 响应。
{% if post %}
{% do response(post) %}
{% else %}
{% do abort(404) %}
{% endif %}由于 API 是在页面或布局的标记部分中定义的，所以所有组件和生命周期事件都可用。
使用布局作为中间件中间件允许您将通用逻辑应用于多个端点，例如检查身份验证或限制请求。一个 具有优先级模式的 CMS 布局 可用于将逻辑应用于多个页面，并且布局逻辑在页面逻辑之前执行。
请记住包含 {% page %} Twig 标签 以便包含页面逻辑。例如，一个名为 api.htm 的布局可以包含任何条件逻辑。
cmstemplate
description = "API Authentication"
is_priority = 1{% if someCondition %}
{% page %}
{% else %}
{% do response({ message: 'Condition not met' }, 400) %}
{% endif %}:::
使用该布局的每个页面都将应用该布局的条件。
layout = "api"{% do response({ success: true }) %}始终使用布局中的优先模式以确保布局内容首先运行。
在某些情况下，您可能希望调用组件或页面内部的 AJAX 处理程序。这可以通过使用 ajaxHandler() Twig 函数 来实现。
url = "/api/signin
[account]{% set result = ajaxHandler('onSignin') %}
{% if result.error %}
{% do response({ message: 'Login Failed' }, 401) %}
{% else %}
{% do response({ success: true }) %}
{% endif %}你也可以调用一个处理程序，并直接将其作为响应传递。该响应包含页面上设置的变量以及由函数返回的数组值。
{% do response(ajaxHandler('onSubmitPost')) %}它还会自动处理重定向。请参阅 Twig 函数文章 了解更多详情。
在处理模型和集合时，建议返回包裹在 data 属性中的数据。将响应包裹起来可以提供一致的接口。
返回模型资源。
url = "/api/blog/post/:slug"
[section post]
handle = "Blog\Post"
identifier = "slug"{% if post %}
{% do response({
data: post
}) %}
{% else %}
{% do abort(404) %}
{% endif %}返回集合资源
url = "/api/blog/posts"
[collection posts]
handle = "Blog\Post"{% do response({
data: posts
}) %}当响应分页集合时，建议使用 pager() Twig 函数 来构建响应使用 links 和 meta 属性。
{% set posts = blog.paginate(3) %}
{% set pager = pager(posts) %}
{% do response({
data: posts,
links: pager.links,
meta: pager.meta
}) %}上述将输出以下 JSON 格式。
{
"data": {},
"links": {
"first": "https://yoursite.tld/api/blog/posts?page=1",
"last": "https://yoursite.tld/api/blog/posts?page=1",
"prev": null,
"next": null
},
"meta": {
"path": "https://yoursite.tld/api/blog/posts",
"per_page": 3,
"total": 2,
"current_page": 1,
"last_page": 1,
"from": 1,
"to": 2
}
}这些是代码片段用法的一些实用示例。
以下示例将 users 变量设置为在 User 插件 中找到的所有用户。avatar 关系随后被预加载，并且如果找到头像，则将 avatar_thumb 属性设置为每个用户的缩略图 URL。
## pages/api/users.htm
url = "/api/users"function onStart()
{
$this['users'] = \RainLab\User\Models\User::all();
}{# Load up the avatar relation #}
{% do users.load('avatar') %}
{# Set the 'avatar_thumb' attribute on each user #}
{% for user in users %}
{% do user.setAttribute(
'avatar_thumb',
user.avatar.getThumbUrl(100, 100, {mode: 'crop'})|default(null)
) %}
{% endfor %}
{# Respond with the user #}
{% do response({
data: users
}) %}