随着时间推移，Discourse 的复杂性不断增加，对于初学者来说，要理解数据如何从后端的 Ruby on Rails 应用一路传递到前端的 Ember.js 应用，可能会感到有些不知所措。
本教程旨在展示 Discourse 中请求的完整生命周期，并解释如果你想在我们的应用程序中构建一个拥有自己 URL 的新页面，需要采取哪些步骤。
首先从 URL 开始
我通常喜欢从访问功能的 URL 角度来思考功能设计。例如，假设我们要构建一个管理员功能，用于显示我在开发 Discourse 期间吃的最后一份零食。一个合适的 URL 可以是 /admin/snack
在这种情况下：
-
在浏览器中访问
/admin/snack时，应该使用“全栈”方式显示该零食，换句话说，Ember 应用会被加载，并请求显示该零食所需的数据。 -
访问
/admin/snack.json时，应该返回该零食本身的 JSON 数据。
服务端（Ruby on Rails）
让我们从为零食创建一个新的 控制器 开始。
app/controllers/admin/snack_controller.rb
class Admin::SnackController < Admin::AdminController
def index
render json: { name: "donut", description: "delicious!" }
end
end
在这里，我们继承自 Admin::AdminController，以获得所有安全检查，确保查看该控制器的用户是管理员。在我们能够访问该控制器之前，还有一件事要做，那就是在 config/routes.rb 中添加一行：
找到如下所示的代码块：
namespace :admin, constraints: StaffConstraint.new do
# lots of stuff
end
并在其中添加以下行：
get 'snack' => 'snack#index'
完成后，你应该能够在浏览器中访问 /admin/snack.json，并看到该零食的 JSON 数据！我们的零食 API 似乎工作正常 
当然，当你构建功能并增加更多复杂性时，你通常不会像这样直接从控制器返回硬编码的 JSON，而是会查询数据库并以此方式返回数据。
客户端（Ember.js）
如果你打开浏览器并访问 /admin/snack（不带 .json），你会发现 Discourse 显示“Oops! That page doesn’t exist.”——这是因为我们的前端 Ember 应用中没有任何内容来响应该路由。让我们添加一个 .gjs 模板来显示我们的零食：
app/assets/javascripts/admin/templates/snack.gjs
<template>
<h1>{{@controller.model.name}}</h1>
<hr />
<p>{{@controller.model.description}}</p>
</template>
并且，就像在 Rails API 端一样，我们需要配置路由。打开文件 app/assets/javascripts/admin/routes/admin-route-map.js，找到 export default function() 方法。添加以下行：
this.route("snack");
在 Ember 领域，我们还有最后一件事要做，那就是让 Ember 应用执行一个 AJAX 请求，从服务器获取我们的 JSON。让我们创建最后一个文件。这将是一个 Ember 路由。当进入该路由时，其 model() 函数会被调用，因此我们将在那里进行 ajax 调用：
app/assets/javascripts/admin/routes/admin-snack.js
import { ajax } from "discourse/lib/ajax";
export default Ember.Route.extend({
model() {
return ajax("/admin/snack.json");
},
});
现在，你可以在浏览器中打开 /admin/snack，你应该会在页面上看到渲染出的零食详情！
总结
-
在浏览器中打开
/admin/snack会启动 Ember 应用 -
Ember 应用的路由器指出
snack应该是路由 -
snack的 Ember.Route 向/admin/snack.json发起 AJAX 请求 -
Rails 应用的路由器指出这应该是
admin_snack controller -
admin_snack_controller返回 JSON -
Ember 应用获取 JSON 并渲染
.gjs模板
接下来去哪里
我编写了一篇后续教程，介绍如何向 Discourse 添加 Ember 组件。
本文档受版本控制 - 建议修改 在 github 上。