在 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 模板来显示我们的零食：

frontend/discourse/admin/templates/snack.gjs

<template>
  <h1>{{@controller.model.name}}</h1>

  <hr />

  <p>{{@controller.model.description}}</p>
</template>

并且，就像在 Rails API 端一样，我们需要配置路由。打开文件 frontend/discourse/admin/routes/admin-route-map.js，查找 export default function() 方法。添加以下行：

this.route("snack");

在 Ember 领域，我们还剩下最后一件事要做，那就是让 Ember 应用执行一个 AJAX 请求，从服务器获取我们的 JSON。让我们创建最后一个文件。这将是一个 Ember Route。当进入该路由时，其 model() 函数会被调用，因此我们在那里进行 ajax 调用：

frontend/discourse/admin/routes/admin-snack.js

import { ajax } from "discourse/lib/ajax";
import DiscourseRoute from "discourse/routes/discourse";

export default class AdminSnackRoute extends DiscourseRoute {
  model() {
    return ajax("/admin/snack.json");
  }
}

现在，你可以打开浏览器访问 /admin/snack，你应该能在页面上看到渲染出的零食详情！

总结

• 在浏览器中打开 /admin/snack 会启动 Ember 应用

• Ember 应用的路由器指出 snack 应该是该路由

• snack 的 Ember 路由向 /admin/snack.json 发起 AJAX 请求

• Rails 应用的路由器指出这应该是 admin_snack controller

• admin_snack_controller 返回 JSON

• Ember 应用获取 JSON 并渲染 .gjs 模板

接下来该做什么

我撰写了一篇后续教程，介绍如何为 Discourse 添加 Ember 组件。

---

本文档受版本控制 - 请在 github 上建议修改。