Wie kann ich in einem Plugin eine benutzerdefinierte Route anpassen und eine benutzerdefinierte Seite rendern?

Wie kann ich in einem Plugin eine benutzerdefinierte Route definieren und dann eine benutzerdefinierte Seite rendern?

Ich habe diesen Beitrag gelesen: Discourse-Plugins entwickeln – Teil 5 – Eine Admin-Oberfläche hinzufügen – Dokumentation / Entwickler-Leitfaden – Discourse Meta und andere Plugins, aber es hat alles nicht funktioniert.

Meine benutzerdefinierten Routen geben alle JSON-Daten zurück, aber ich möchte Ember-Vorlagen rendern. Gibt es einen Beitrag, der dieses Wissen erklärt? Vielen Dank im Voraus.

Wenn das alles ist, was Sie tun möchten, werfen Sie einen Blick auf:

Und:

Ich stecke gerade hier fest, hier sind meine spezifischen Schritte:

Ich habe die Route in der Datei plugins/q/config/routes.rb definiert:

get "/hello" => "examples#hello"

Controller: plugins/q/app/controllers/quectel/examples_controller.rb

def hello
   render json: { hello: "world" }
end

Wenn ich jetzt auf localhost:4200/q/hello zugreife, wird das JSON zurückgegeben:

{"hello":"world"}

Wie kann ich beim Zugriff auf localhost:4200/q/hello das Ember-Template rendern?

Ich habe dieses Thema vor einiger Zeit als Lesezeichen gespeichert, um es später zu lesen: Creating Routes in Discourse and Showing Data. Ich bin mir nicht sicher, ob es noch aktuell ist, aber vielleicht hilft es trotzdem weiter.

Ja, ich habe diesen Beitrag auch gesehen und die Schritte befolgt, aber es funktioniert nicht. Es erscheint der Fehler „Seite nicht gefunden“. Dann war ich ratlos.

ok, durch die Untersuchung des Codes von plugins/discourse-subscriptions habe ich ungefähr das gewünschte Ergebnis erzielt.

Der Zugriff auf /q/hello zeigt den benutzerdefinierten Vorlageninhalt an und ruft benutzerdefinierte Backend-Daten ab.

Hier sind meine Schritte:

1. Neue Pfadzuordnungsdatei erstellen: plugins/quectel/assets/javascripts/discourse/quectel-route-map.js

export default function quectel() {
  this.route("q/hello"); // Die Route ist standardmäßig /q/hello
};

2. Neue Routendatei erstellen: plugins/quectel/assets/javascripts/discourse/routes/q/hello.js

import Route from "@ember/routing/route";
import { ajax } from "discourse/lib/ajax";

export default class HelloRoute extends Route {
  model() {
    return ajax('/q/hello') // Backend-Schnittstelle aufrufen, um Daten abzurufen
  }
}

3. Neue Frontend-Vorlagendatei erstellen: plugins/quectel/assets/javascripts/discourse/templates/q/hello.gjs, um die Daten zu rendern

import QHello from '../../components/q-hello'

<template>
  <h1>q-hello</h1>
  {{!-- Komponente rendern --}}
  <QHello />
  {{!-- Modelldaten rendern --}}
  <div>{{@model.hello}}</div>
</template>

4. Neue Backend-Controller-Datei erstellen: plugins/quectel/app/controllers/quectel/examples_controller.rb

# frozen_string_literal: true

module ::Quectel
  class ExamplesController < ::ApplicationController
    requires_plugin PLUGIN_NAME

    def hello
      render json: { hello: "hello 2333" }
    end
  end
end

5. Backend-Route definieren: plugins/quectel/config/routes.rb

# frozen_string_literal: true

Quectel::Engine.routes.draw do
  get "/hello" => "examples#hello"
end

Discourse::Application.routes.draw { mount ::Quectel::Engine, at: "q" }

Beim Zugriff auf /q/hello wird die folgende Anzeige angezeigt:

image1912×932 47.2 KB