Entwickeln Sie eine Vue-Komponente, die Iframe kapselt
|
Ich denke, der grundlegende Baustein von VUE sollte eine Komponente sein. Um ein Front-End-Projekt mit VUE zu entwickeln, müssen Sie die Komponenten einzeln entwickeln und das Projekt dann wie Bausteine aufbauen. Komponenten sind in Seiten oder in größeren Komponenten enthalten. Dabei scheint die Grenze zwischen Komponenten und Seiten nicht offensichtlich zu sein. Bei einer Single-Page-Anwendung gibt es tatsächlich nur eine Seite. Die Vorteile von Komponenten liegen darin, dass sie erstens die Wiederverwendung verbessern können, zweitens bestimmte Funktionen kapseln können, um den Aufruf zu vereinfachen, und drittens aufgrund klarer Verantwortlichkeiten, hoher Komponentenkohäsion und geringer Kopplung zwischen Komponenten die Optimierung, Erweiterung und Wartung von Systemfunktionen fördern. Es gibt viele Vorteile. Entwicklungskomponenten bestehen hauptsächlich aus zwei Teilen: 1. KomponenteneinführungDies ist ein Karten-Plugin. Seine Funktion besteht darin, Karten anzuzeigen, externe Befehle anzunehmen, Ebenen zu laden, Grafiken zu zeichnen und andere damit verbundene Vorgänge auszuführen. Die Karte wird mit ArcGIS für JS implementiert. Aufgrund der Projekte, die wir in der Vergangenheit entwickelt haben, verfügen wir über einige Erfahrung im Kartenbetrieb, es gibt jedoch keine Trennung zwischen Front-End und Back-End und wir verwenden weder VUE noch REACT, sondern nur herkömmliche Webseiten. Aufgrund des engen Zeitplans und des Wunsches, vorherige Arbeiten wiederzuverwenden, erwog ich, <iframe> zum Hosten der Kartenseite zu verwenden, sie in einer VUE-Komponente einzukapseln und die Komponente mit externen Befehlen zu verbinden und mit der Kartenseite im Iframe zu interagieren. 2. Interne Struktur und Logik der Komponenten1. Code-Organisationsstruktur
2. KartenkomponenteKarte.vue
<Vorlage>
<div Klasse="Kartencontainer">
<!-- Hosting-Kartenseite -->
<iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
</div>
</Vorlage>
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stil scoped="Bereich">
.map-container iframe{
Breite: 100 %;
Höhe: 100%;
Rand: keiner;
}
</Stil>
<Skript>
importiere Konfiguration aus '../../vue.config' // enthält Pfadinformationen let iframeWin = null; // private Variablen exportiere Standard {
props:['size'], //Reiner Test, nutzlos, entspricht <Map id="map" ref="map" size="100"></Map>
Daten() {
zurückkehren {
src: '', //Adresse der Kartenseite isLoaded: false, //Ist die Kartenseite geladen? iMap: null, //Von der Kartenseite für externen Zugriff bereitgestelltes Objekt require: null //ArcGIS require-Funktion, die zum Verweisen auf benutzerdefinierte Plug-Ins verwendet wird. Wir haben in der Vergangenheit ziemlich viele benutzerdefinierte Karten-Plugins geschrieben}
},
erstellt() {
this.src = config.publicPath + 'map.html'
},
montiert() {
//Auf Iframe-Nachrichten warten window.addEventListener('message', this.handleMessage)
iframeWin = this.$refs.iframe.contentWindow
},
Methoden: {
iframeLoad() {
dies.isLoaded = wahr;
window.console.log("Karte ist bereit")
},
async handleMessage() {//Nachrichten vom Iframe empfangen this.require = iframeWin.require;
dies.iMap = iframeWin.iMap;
},
loadLayer(Knoten,Server){
this.iMap.layerHandler.load(Knoten,Server);
},
istBereit(){
gib dies zurück.isLoaded;
}
}
}
</Skript>
Der Aufbau der Komponenten, wie
Standard exportieren {
props:, // Attribute im Tag data() { // öffentliche Variablen },
erstellt() {//Beim Laden?
},
mounted() {//Wenn der Ladevorgang abgeschlossen ist},
Methoden: {//öffentliche Methoden}
}
Exportieren bedeutet, dass dies für die externe Verwendung bestimmt ist. Daher kann auf die darin enthaltenen Eigenschaften, Variablen und Methoden extern zugegriffen werden. Wenn Sie möchten, dass es privat ist, sollten Sie es außerhalb des Exports definieren. Wie in diesem Beispiel:
Eine derart einfache Einführung findet man im Internet nicht. Die chinesische Site von Vue ist veraltet und weist fragmentierte Inhalte auf, was für Anfänger äußerst unfreundlich ist und den Lernaufwand erhöht. 3. Iframe-Schnittstelle Wie kommuniziert die Komponente Map.vue mit dem darin enthaltenen Iframe? Die Kartenseite map.html wird vom iframe gehostet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
...
</Kopf>
<Text>
<div id="Karte"></div>
...
</div>
</body>
</html>
<script src="http://192.168.0.200/pubzy211/arcgis_js_api/3.19/init.js"></script>
<Skripttyp="text/javascript">
var iMap = {}; //Externe Referenzschnittstelle require([
"esri/config",
"esri/karte",
"esri/geometry/Extent",
"esri/SpatialReference",
"layerlib/LtLayer",
"Dojo/Dom",
"dojo/_base/array",
"dojo/parser",
„dojo/domBereit!“
], Funktion(
esriConfig,
Karte,
Ausmaß,
Raumbezug,
LtSchicht,
dom,
ArrayUtils,
Parser
) {
//Karte
var map = ...
/* Externe Schnittstelle */
iMap = {
Karte: Karte,
Legende: Legende,
Zuhause: Zuhause,
tipDialog: tipDialog,
umschalten: umschalten,
Übersichtskarte: Übersichtskarte
};
iMap.drawHandler = ...
iMap.layerHandler = ...;
iMap.centerAt = ...;
iMap.clear = ...;
iMap.restoreView = ...;
//Sende ein Signal zum Abschluss des Ladevorgangs an die übergeordnete Vue-Seite window.parent.postMessage({
cmd: "mapIsReady",
Parameter: {
Erfolg: wahr,
Daten: wahr
}
}, '*');
/* Ende der externen Schnittstelle*/
});
</Skript>
Die Kartenkomponente Map.vue entspricht dem Iframe-Teil, siehe den Code in 1.2 für Details
Standard exportieren {
. . .
montiert() {
//Auf Iframe-Nachrichten warten window.addEventListener('message', this.handleMessage)
//Holen Sie sich das Fensterobjekt des Iframes iframeWin = this.$refs.iframe.contentWindow
},
Methoden: {
iframeLoad() {
dies.isLoaded = wahr;
window.console.log("Karte ist bereit")
},
async handleMessage() {//Nachrichten vom Iframe empfangen this.require = iframeWin.require;
dies.iMap = iframeWin.iMap;
},
loadLayer(Knoten,Server){
//Ebene laden this.iMap.layerHandler.load(nodes,servers);
}
}
}
4. Externe SchnittstelleMap.vue ist eine Komponente, die mit der Komponente oder Seite kommunizieren muss, in der sie sich befindet. Jetzt wird Map.vue in einer Containerseite Home.vue (also einer Testseite) platziert, die auch eine Befehlskomponente Layer.vue enthält. Klicken Sie auf die Schaltfläche in der Befehlskomponente und die Karte reagiert entsprechend. Das Prinzip ist wie folgt: Wenn auf die Schaltfläche der Befehlskomponente geklickt wird, werden Informationen an die Containerseite gesendet und anschließend ruft die Containerseite die Methode der Kartenkomponente auf. Testseite Home.vue
<Vorlage>
<div id="app1">
<div id="Kartencontainer">
<div>Kartenkomponente</div>
<Karte id="Karte" ref="Karte" size="100"></Karte>
</div>
<div id="Schicht-Container">
<div>Andere Komponenten</div>
<Ebene @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Ebene>
</div>
</div>
</Vorlage>
<Skript>
Map aus „../components/Map.vue“ importieren
Importiere Layer aus '../components/Layer.vue'
Standard exportieren {
Name: "App",
Komponenten:
Karte,
Schicht
},
Methoden:{
loadLayer(Knoten,Server){//Ebene laden let map = this.$refs.map;
map.loadLayer(Knoten,Server);
},
loadCloud(data){//Satelliten-Wolkenkarte laden let map = this.$refs.map;
map.require(["drawlib/Cloud"], Funktion (Cloud) {
sei iMap = map.iMap;
sei cloudId = "Cloud";
lass cloud = neue Cloud(iMap.map);
iMap.drawHandler.push(cloudId, cloud);
cloud.draw(Daten, Cloud-ID);
});
},
clearMap(){//Löschen let map = this.$refs.map;
map.iMap.clear();
}
}
}
</Skript>
<Stil>
. . .
</Stil>
Befehlskomponente Layer.vue
<Vorlage>
<div Klasse="Schicht-Container">
<button @click="loadLayer">Ebene laden</button>
<button @click="loadCloud">Satelliten-Wolkenbild</button>
<button @click="clear">Löschen</button>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Methoden: {
LadeLayer() {
lass Knoten = ...
Server lassen = ...
dies.$emit("loadLayer", Knoten, Server)
},
ladenCloud(){
lass Daten = ...;
dies.$emit("loadCloud", Daten);
},
klar(){
dies.$emit("klar");
}
},
}
</Skript>
<Stil scoped="Bereich">
. . .
</Stil>
Beachten Sie, dass die in der gesendeten Nachricht der Befehlskomponente angegebene Methode entsprechende Eigenschaften auf der Containerseite hat:
Befehlskomponente loadCloud(){
lass Daten = ...;
dies.$emit("loadCloud", Daten);
},
Containerseite <Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>
5. Ergebnisse der Operation
VI. FazitAndere Komponenten müssen über die Containerseite mit der Kartenkomponente interagieren. Andere Komponenten interagieren nicht direkt mit der Kartenkomponente. Dies ist eigentlich ein Befehlsmodus. Der Vorteil liegt darin, dass andere Komponenten und Kartenkomponenten entkoppelt und nicht miteinander gekoppelt sind, sich also nicht gegenseitig beeinflussen. Dies dient der Erweiterung und Optimierung der Kartenkomponente selbst. Zu den Nachteilen gehört, dass alles über die Containerseite weitergeleitet werden muss, der Code der Containerseite möglicherweise redundant ist und manche Methoden lediglich als Sprachrohr dienen, sodass man das Gefühl hat, sie seien repetitiv und bedeutungslos. Oben sind die Details zur Entwicklung einer Vue-Komponente beschrieben, die Iframes kapselt. Weitere Informationen zu Vue-Komponenten, die Iframes kapseln, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an
>>: Linux CentOS6.5 yum installiere mysql5.6
Artikel empfehlen
Hinweise zum Upgrade auf mysql-connector-java8.0.27
Kürzlich wurde bei einem Online-Sicherheitsscan e...
Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers
Inhaltsverzeichnis Vorwort Webpack-Deb-Server Sta...
Analyse des Prinzips des MySQL-Extraktionsmodus für große Tabellen aus der Perspektive des Cloud-Datenmigrationsdienstes
Zusammenfassung: Welche Methode sollte für die My...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
MySQL-Tutorial: Ausführliche Erklärung zum Unterabfragebeispiel
Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...
Analyse des Implementierungsprozesses der drei Modi des VMWare-Netzwerkadapters
Drei Modi Bridged (Bridge-Modus), NAT (Network Ad...
Tutorial zu HTML-Tabellen-Tags (20): Zeilenhintergrund-Farbattribut BGCOLOR
Mit dem BGCOLOR-Attribut kann die Hintergrundfarb...
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306. A...
Optimierung der MySQL 4G-Speicherserverkonfiguration
Da die Anzahl der Besuche auf der Website des Unt...
Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen
Zunächst die Struktur innerhalb des Nginx-Contain...
80 Zeilen Code zum Schreiben eines Webpack-Plugins und Veröffentlichen auf npm
1. Einleitung Ich habe vor Kurzem die Prinzipien ...
Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)
Der Erste: Verwenden der CSS-Positionseigenschaft...
Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren
Inhaltsverzeichnis 1. Optionaler Verkettungsopera...
So leiten Sie den Nginx-Verzeichnispfad um
Wenn der Pfad nach dem Domänennamen auf andere Ve...
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...