Routen in Discourse erstellen und Daten anzeigen

[Discourse]

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

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

URLs zuerst

Ich ziehe es immer vor, mit den URLs zu beginnen, um über Funktionen nachzudenken. Angenommen, wir möchten eine Admin-Funktion erstellen, die den letzten Snack anzeigt, den ich bei 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 über den „Full Stack“ anzeigen, d. h. die Ember-Anwendung wird geladen und fordert die Daten an, die zur Anzeige des Snacks erforderlich sind.

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

Die Serverseite (Ruby on Rails)

Beginnen wir mit der Erstellung eines neuen Controllers für den Snack.

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 ansieht, ein Administrator ist. Wir müssen nur noch eine Sache tun, bevor wir auf unseren Controller zugreifen können, und zwar das Hinzufügen einer Zeile zu config/routes.rb:

Suchen Sie den Block, der wie folgt aussieht:

namespace :admin, constraints: StaffConstraint.new do
  # lots of stuff
end

Und fügen Sie diese Zeile darin ein:

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 bei der Entwicklung Ihrer Funktion, um mehr Komplexität hinzuzufügen, wahrscheinlich nicht einfach hartcodierte JSON von einem Controller wie diesem zurückgeben, sondern die Datenbank abfragen und sie auf diese Weise zurückgeben.

Die Clientseite (Ember.js)

Wenn Sie Ihren Browser öffnen und /admin/snack (ohne die .json) aufrufen, werden Sie sehen, dass Discourse meldet: „Hoppla! Diese Seite existiert nicht.“ – das liegt daran, dass in unserer Ember-Frontend-Anwendung nichts vorhanden ist, um auf die Route zu antworten. Fügen wir eine Handlebars-Vorlage hinzu, um unseren Snack anzuzeigen:

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

<h1>{{model.name}}</h1>

<hr />

<p>{{model.description}}</p>

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 erledigen, und zwar die Ember-Anwendung dazu zu bringen, eine AJAX-Anfrage durchzuführen, 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 werden wir unseren ajax-Aufruf dort machen:

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 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 führt eine AJAX-Anfrage an /admin/snack.json durch

• Die 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 Handlebars-Vorlage

Wie geht es weiter?

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

---

Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.