SAP UI5 ist ein Entwicklungsframework zum Erstellen moderner Webanwendungen, eine von SAP eingeführte Frontend-Technologie (Systeme, Anwendungen und Produkte in der Datenverarbeitung). Es bietet eine umfangreiche Steuerungsbibliothek, MVC-Architekturmuster (Model-View-Controller), Datenbindung, Designanpassung und andere Funktionen, um Entwicklern beim Erstellen intuitiver, hochgradig anpassbarer und einfach zu wartender Anwendungen auf Unternehmensebene zu helfen. Bei der Entwicklung von SAP UI5-Anwendungen ist es häufig erforderlich, das Verhalten von Backend-Diensten zum Testen und Debuggen in der lokalen Entwicklungsumgebung zu simulieren. In diesem Fall spielt sap-fe-mockserver eine wichtige Rolle.
sap-fe-mockserverEs handelt sich um eine Simulationsserverbibliothek im SAP UI5-Framework, die es Entwicklern ermöglicht, Back-End-Dienste in der lokalen Umgebung für die Entwicklung und das Testen von Front-End-Anwendungen zu simulieren. Es bietet eine einfache Möglichkeit, virtuelle OData-Dienste (Open Data Protocol) zu definieren, sodass Front-End-Entwickler die Funktionalität und Interaktion von UI5-Anwendungen ohne tatsächliche Back-End-Dienste simulieren und testen können.
sap-fe-mockserverVerfügt über die folgenden Hauptfunktionen und Merkmale:
-
Definitionen virtueller Datensätze : Entwickler können damit
sap-fe-mockservervirtuelle Datensätze definieren, die die vom Backend zurückgegebenen Daten simulieren. Beispielsweise könnte ein fiktiver Datensatz „Produkte“ definiert werden, der Informationen wie Produktnamen, Preise, Beschreibungen usw. enthält. -
Daten -CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren, Löschen) dürfen
sap-fe-mockserverden OData-Dienst simulieren. Entwickler können Dummy-Daten hinzufügen, ändern und löschen, um die Reaktion der Anwendung auf Datenänderungen zu testen. -
Routing und Filterung : Der Mock-Server unterstützt Routing und Filterung von OData-URLs. Dadurch können Entwickler den Umgang der Anwendung mit verschiedenen Routen und Abfrageparametern testen.
-
Batch-Simulation : In echten OData-Diensten kann Batch-Verarbeitung oft zur Optimierung von Anfragen und Antworten eingesetzt werden.
sap-fe-mockserverUnterstützung für die Simulation von Batch-Anfragen, um die Handhabung dieser zusammengesetzten Anfragen durch Ihre Anwendung zu testen. -
Verzögerungs- und Fehlersimulation : Um das Verhalten von Backend-Diensten realistischer zu simulieren,
sap-fe-mockserverkönnen Entwickler verzögerte Antworten festlegen und Fehlerstatuscodes simulieren, z. B. 404 Nicht gefunden oder 500 Interner Serverfehler.
Als nächstes werde ich anhand eines Beispiels detailliert beschreiben, wie es in der lokalen Entwicklungsumgebung von SAP UI5 verwendet wird sap-fe-mockserver.
Beispielszenario:
Angenommen, wir entwickeln eine einfache SAP UI5-Anwendung, die eine Liste von Produkten anzeigt und es Benutzern ermöglicht, neue Produkte hinzuzufügen.
Schritt 1: Mock Server installieren und konfigurieren
Zuerst müssen wir ihn im Projekt installieren und konfigurieren sap-fe-mockserver. Führen Sie den folgenden Befehl im Projektverzeichnis aus:
npm install @sap\ui5-mockserver --save-dev
Als Nächstes erstellen wir eine mockserver.jsDatei mit dem Namen „Konfiguration des Mock-Servers“. Hier ist ein einfaches Konfigurationsbeispiel:
const {
MockServer } = require("@sap/ui5-mockserver");
const oMockServer = new MockServer({
rootUri: "/odata/Products",
});
const sPath = "./mockdata"; // 虚拟数据文件存放目录
oMockServer.simulate(sPath + "/metadata.xml", {
sMockdataBaseUrl: sPath,
bGenerateMissingMockData: true,
});
oMockServer.start();
Im obigen Code importieren wir zuerst @sap/ui5-mockserverdas Modul, erstellen dann eine MockServerInstanz von und geben den simulierten Root-URI an, d. h /odata/Products. . Als nächstes geben wir das Verzeichnis des virtuellen Datensatzes und der simulierten Daten an und starten den Mock Server.
Schritt 2: Virtuelle Daten definieren
Im obigen Beispiel haben wir metadata.xmldas Verzeichnis angegeben, in dem die Datei und die virtuellen Daten gespeichert sind. Hier ist eine vereinfachte metadata.xmlBeispieldatei:
<edmx:Edmx Version="1.0">
<edmx:DataServices>
<Schema Namespace="MyService" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
<EntityType Name="Product" HasStream="true">
<Key>
<PropertyRef Name="ProductID" />
</Key>
<Property Name="ProductID" Type="Edm.String" Nullable="false" />
<Property Name="ProductName" Type="Edm.String" />
<Property Name="Price" Type="Edm.Decimal" />
<Property Name="Description" Type="Edm.String" />
</EntityType>
<EntityContainer Name="MyService" m:IsDefaultEntityContainer="true">
<EntitySet Name="Products" EntityType="MyService.Product" />
</EntityContainer>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Unter mockdatadem Verzeichnis erstellen wir eine Products.jsonDatei mit dem Namen, um die virtuellen Produktdaten zu definieren. Hier ist ein Beispiel:
{
"d": {
"results": [
{
"ProductID": "1",
"ProductName": "Widget A",
"Price": 19.99,
"Description": "This is Widget A"
},
{
"ProductID": "2",
"ProductName": "Widget B",
"Price": 24.99,
"Description": "This is Widget B"
}
]
}
}
Schritt 3: Mock Server in der Anwendung verwenden
Nachdem wir nun den Mock Server konfiguriert und Dummy-Daten definiert haben, müssen wir ihn in der Anwendung verwenden. Hier ist ein Beispiel für einen einfachen SAP UI5-Controller, um Produktdaten von Mock Server abzurufen und auf der Seite anzuzeigen:
javascript
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/odata/v2/ODataModel"
], function(Controller, ODataModel) {
"use strict";
return Controller.extend("my.app.controller.ProductList", {
onInit: function() {
// 创建 OData 模型并指定 Mock Server 的根 URI
var oModel = new ODataModel({
serviceUrl: "/odata/Products",
defaultBindingMode: "TwoWay"
});
// 设置模型到视图
this.getView().setModel(oModel);
// 绑定产品列表到视图
var oList = this.byId("productList");
oList.bindItems({
path: "/Products",
template: new sap.m.StandardListItem({
title: "{ProductName}",
description: "{Description}",
info: "{Price}"
})
});
},
// 添加新产品
onAddProduct: function() {
var oModel = this.getView().getModel();
var oNewProduct = {
ProductID: "3",
ProductName: "Widget C",
Price: 29.99,
Description: "This is Widget C"
};
oModel.create("/Products", oNewProduct, {
success: function() {
sap.m.MessageToast.show("Product added successfully");
},
error: function() {
sap.m.MessageToast.show("Failed to add product");
}
});
}
});
});
Im obigen Beispiel haben wir einen im Controller erstellt ODataModelund den Root-URI des Mock-Servers ( /odata/Products) angegeben. Anschließend binden wir dieses Modell an die Ansicht und zeigen die Produktliste auf der Seite durch Datenbindung an. Schließlich haben wir die Funktion zum Hinzufügen neuer Produkte implementiert und oModel.create()über diese Methode neue Produktdaten zum Mock Server hinzugefügt.
Schritt 4: Führen Sie die Anwendung aus.
Nach Abschluss der oben genannten Schritte können wir die Anwendung ausführen und Produktdaten über den simulierten Mock-Server abrufen. In einer SAP UI5-Anwendung /odata/Productswerden beim Zugriff auf den Pfad Products.jsondie von uns in der Datei definierten Dummy-Daten zurückgegeben. In der Produktliste können wir die Informationen von zwei virtuellen Produkten sehen, Widget A und Widget B. Durch Klicken auf die Schaltfläche „Produkt hinzufügen“ wird ein neues virtuelles Produkt „Widget C“ zum Mock Server hinzugefügt.
Dadurch sap-fe-mockserverkonnten wir die Backend-Dienste erfolgreich in unserer lokalen Entwicklungsumgebung simulieren, sodass wir SAP UI5-Anwendungen effizient entwickeln, testen und debuggen konnten, ohne eine Verbindung zu den eigentlichen Backend-Diensten herzustellen.
Zusammenfassen
sap-fe-mockserverEs handelt sich um ein leistungsstarkes Tool im SAP UI5-Framework, das es Entwicklern ermöglicht, OData-Dienste in der lokalen Entwicklungsumgebung zu simulieren und zu testen und so die Entwicklungseffizienz und Codequalität zu verbessern. Durch die Definition virtueller Datensätze, die Simulation von CRUD-Vorgängen, die Unterstützung von Routing und Filterung sowie Verzögerungs- und Fehlersimulation können Entwickler effizient voll funktionsfähige SAP UI5-Anwendungen ohne tatsächliche Back-End-Dienste erstellen. Dadurch kann das Entwicklungsteam die Front- und Back-Ends besser parallel entwickeln, Probleme in der Integrationsphase reduzieren und die Qualität und Stabilität der Produktbereitstellung verbessern.