在 Discourse 中创建路由并显示数据

[Discourse]

随着时间的推移，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 显示“哎呀！该页面不存在。”——这是因为我们的前端 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 Route。其 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 上提出。