Erstellen von Routen in Discourse und Anzeigen von Daten

[Discourse]

Im Laufe der Zeit ist Discourse komplexer geworden, und es kann für Anfänger abschreckend sein zu verstehen, wie Daten vom Backend-Ruby-on-Rails-Anwendungsbereich bis zur Ember.js-Anwendung im Frontend gelangen.

Dieses Tutorial soll den vollständigen Lebenszyklus einer Anfrage in Discourse aufzeigen und die notwendigen Schritte erklären, wenn Sie eine neue Seite mit eigener URL in unserer Anwendung erstellen möchten.

Zuerst die URLs

Ich bevorzuge es immer, Funktionen zunächst anhand der URLs zu betrachten, über die sie erreichbar sind. Nehmen wir beispielsweise an, wir möchten eine Admin-Funktion erstellen, die den letzten Snack anzeigt, den ich während der Arbeit an Discourse gegessen habe. Eine geeignete URL dafür wäre /admin/snack.

In diesem Fall:

• Der Aufruf von /admin/snack im Browser sollte den Snack unter Verwendung des „Full Stack“ anzeigen. Mit anderen Worten: Die Ember-Anwendung wird geladen und fordert die Daten an, die sie benötigt, um den Snack darzustellen.

• Der Aufruf von /admin/snack.json sollte die JSON-Daten für den Snack selbst zurückgeben.

Die Serverseite (Ruby on Rails)

Beginnen wir damit, einen neuen Controller für den Snack zu erstellen.

app/controllers/admin/snack_controller.rb

class Admin::SnackController < Admin::AdminController
  def index
    render json: { name: "donut", description: "delicious!" }
  end
end

In diesem Fall erben wir von Admin::AdminController, um alle Sicherheitsprüfungen zu erhalten, die sicherstellen, dass der Benutzer, der den Controller aufruft, ein Administrator ist. Wir müssen nur noch eine Sache tun, bevor wir auf unseren Controller zugreifen können, und zwar eine Zeile in config/routes.rb hinzufügen:

Suchen Sie den Block, der so aussieht:

namespace :admin, constraints: StaffConstraint.new do
  # viel Zeug
end

Und fügen Sie diese Zeile darin hinzu:

get 'snack' => 'snack#index'

Sobald Sie fertig sind, sollten Sie in der Lage sein, /admin/snack.json in Ihrem Browser aufzurufen, und Sie werden die JSON-Daten für den Snack sehen! Unsere Snack-API scheint zu funktionieren

Natürlich würden Sie, wenn Sie Ihre Funktion mit mehr Komplexität ausbauen, nicht einfach hart codiertes JSON aus einem Controller wie diesem zurückgeben, sondern würden stattdessen die Datenbank abfragen und die Daten auf diese Weise zurückgeben.

Die Clientseite (Ember.js)

Wenn Sie Ihren Browser öffnen und /admin/snack (ohne .json) aufrufen, sehen Sie, dass Discourse „Oops! Diese Seite existiert nicht.“ anzeigt. Das liegt daran, dass es in unserer Frontend-Ember-Anwendung nichts gibt, das auf diese Route reagiert. Fügen wir eine .gjs-Vorlage hinzu, um unseren Snack anzuzeigen:

app/assets/javascripts/admin/templates/snack.gjs

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

  <hr />

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

Und wie auf der Rails-API-Seite müssen wir die Route verdrahten. Öffnen Sie die Datei app/assets/javascripts/admin/routes/admin-route-map.js und suchen Sie nach der Methode export default function(). Fügen Sie die folgende Zeile hinzu:

this.route("snack");

Wir haben noch eine letzte Sache in der Ember-Welt zu tun, nämlich dass die Ember-Anwendung eine AJAX-Anfrage stellt, um unser JSON vom Server abzurufen. Erstellen wir eine letzte Datei. Dies wird eine Ember Route sein. Ihre model()-Funktion wird aufgerufen, wenn die Route betreten wird, also führen wir dort unseren ajax-Aufruf durch:

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");
  },
});

Jetzt können Sie Ihren Browser auf /admin/snack öffnen, und Sie sollten die Details des Snacks auf der Seite gerendert sehen!

Zusammenfassung

• Das Öffnen Ihres Browsers auf /admin/snack startet die Ember-Anwendung.

• Der Ember-Anwendungsrouter sagt, dass snack die Route sein sollte.

• Die Ember.Route für snack stellt eine AJAX-Anfrage an /admin/snack.json.

• Der Rails-Anwendungsrouter sagt, dass dies der admin_snack controller sein sollte.

• Der admin_snack_controller gibt JSON zurück.

• Die Ember-Anwendung erhält das JSON und rendert die .gjs-Vorlage.

Wie es weitergeht

Ich habe ein Folgetutorial darüber geschrieben, wie man eine Ember-Komponente zu Discourse hinzufügt.

---

Dieses Dokument wird versionskontrolliert – schlagen Sie Änderungen auf GitHub vor.