Routen in Discourse erstellen und Daten anzeigen

[Discourse]

Im Laufe der Zeit ist die Komplexität von Discourse gewachsen, und es kann für Einsteiger überwältigend sein, zu verstehen, wie Daten von der Backend-Anwendung auf Basis von Ruby on Rails bis zur Ember.js-Anwendung im Frontend gelangen.

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

Zuerst die URLs

Ich beginne mein Denken über Funktionen immer mit den URLs, unter denen sie erreichbar sind. Nehmen wir zum Beispiel an, 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 man /admin/snack im Browser aufruft, sollte der Snack über den „vollständigen Stack“ angezeigt werden, das heißt, die Ember-Anwendung wird geladen und fordert die Daten an, die sie zur Anzeige des Snacks benötigt.

• Wenn man /admin/snack.json aufruft, 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'

Sobald 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 weiterentwickelst und mehr Komplexität hinzufügst, wahrscheinlich nicht einfach hartkodiertes JSON von einem Controller wie diesem zurückgeben, sondern die Datenbank abfragen und die Ergebnisse auf diese Weise zurückgeben.

Die Client-Seite (Ember.js)

Wenn du deinen Browser öffnest und /admin/snack (ohne die .json) besuchst, wirst du feststellen, dass Discourse „Ups! Diese Seite existiert nicht.“ 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:

frontend/discourse/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 frontend/discourse/admin/routes/admin-route-map.js und suche nach der Methode export default function(). Füge die folgende Zeile hinzu:

this.route("snack");

Wir haben noch eine letzte Sache in der Ember-Welt zu tun, und zwar muss die Ember-Anwendung eine AJAX-Anfrage ausfü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:

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

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 weiter?

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

---

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