Routen in Discourse erstellen und Daten anzeigen

[Discourse]

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

Dieses Tutorial soll den vollständigen Lebenszyklus einer Anfrage in Discourse veranschaulichen und die Schritte erklären, die erforderlich sind, wenn du eine neue Seite mit eigener URL in unserer Anwendung erstellen möchtest.

Zuerst die URLs

Ich beginne immer damit, Funktionen in Bezug auf die URLs zu denken, unter denen sie erreichbar sind. Angenommen, wir möchten eine Admin-Funktion erstellen, die den letzten Snack anzeigt, den ich gegessen habe, während ich an Discourse gearbeitet habe. Eine geeignete URL dafür wäre /admin/snack

In diesem Fall:

• Wenn du /admin/snack in deinem Browser aufrufst, sollte der Snack über den „vollständigen Stack“ angezeigt werden. Das bedeutet, die Ember-Anwendung wird geladen und fordert die Daten an, die sie benötigt, um den Snack anzuzeigen.

• Wenn du /admin/snack.json aufrufst, sollten die JSON-Daten für den Snack selbst zurückgegeben werden.

Die Server-Seite (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. Es gibt noch eine Sache, die wir tun müssen, bevor wir auf unseren Controller zugreifen können, und zwar eine Zeile in config/routes.rb hinzuzufügen:

Finde den Block, der so aussieht:

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

Und füge diese Zeile darin hinzu:

get 'snack' => 'snack#index'

Wenn du fertig bist, solltest du /admin/snack.json in deinem Browser aufrufen können und das JSON für den Snack sehen! Unsere Snack-API scheint zu funktionieren

Natürlich wirst du, wenn du deine Funktion entwickelst und mehr Komplexität hinzufügst, wahrscheinlich nicht einfach hartkodiertes JSON von einem Controller wie diesem zurückgeben, sondern die Datenbank abfragen und die Daten auf diese Weise zurückgeben.

Die Client-Seite (Ember.js)

Wenn du deinen Browser öffnest und /admin/snack (ohne .json) aufrufst, siehst du, dass Discourse „Oops! That page doesn’t exist.“ anzeigt – das liegt daran, dass es in unserer Frontend-Ember-Anwendung nichts gibt, das auf die 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. Öffne die Datei app/assets/javascripts/admin/routes/admin-route-map.js und suche nach der export default function()-Methode. Füge die folgende Zeile hinzu:

this.route("snack");

Es gibt noch eine letzte Sache, die wir in der Ember-Welt tun müssen, und zwar die Ember-Anwendung dazu zu bringen, eine AJAX-Anfrage auszufü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 führen wir dort unseren ajax-Aufruf aus:

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 kannst du deinen Browser auf /admin/snack öffnen und solltest die Details des Snacks in der Seite gerendert sehen!

Zusammenfassung

• Wenn du deinen Browser auf /admin/snack öffnest, startet die Ember-Anwendung

• Der Router der Ember-Anwendung sagt, dass snack die Route sein sollte

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

• Der Router der Rails-Anwendung 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

Wo geht es von hier aus weiter

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

---

Dieses Dokument wird versioniert verwaltet – Vorschläge für Änderungen auf github.