本文介绍了具有本地数据的UI5模拟服务器:"rootUri"无法运作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在关注 UI5教程,并停留在步骤27 :模拟服务器配置.

I'm currently following the UI5 tutorial and am stuck on step 27: Mock Server Configuration.

问题是模拟服务器的rootUri配置.我正在按照教程使用 Northwind OData服务并进行了配置manifest.json发票dataSource.

The problem is the rootUri configuration of the mock server. I am using the Northwind OData service as per tutorial and have configured a dataSource for Invoices in the manifest.json.

现在,要使用本地模拟数据而不是在线服务,我创建了本教程所述的必要文件.然后,当我运行mockServer.html时,服务器不会将服务请求重定向到本地模拟数据,而是发出请求并由于Web安全问题而失败.

Now, to use the local mock data instead of the online service, I created the necessary files as stated by the tutorial. When I then run the mockServer.html, the server doesn't redirect the service request to the local mock data, but instead makes the request and fails because of web security issues.

如果我使用以下rootUri,则模拟服务器不会重定向并且服务请求失败:

If I use the following rootUri, the mock server doesn't redirect and the service request fails:

// Snippet from mockserver.js
var oMockServer = new MockServer({
    rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
});

有关Stackoverflow的另一个问题显示了使用通配符" root-uri的模拟服务器,但这也失败了:

Another question on Stackoverflow shows the mock server using a "wildcard" root-uri, but this also fails:

// Snippet from mockserver.js
var oMockServer = new MockServer({
    rootUri: "/"
});

我可以使模拟服务器配置工作的唯一方法是使用与manifest.json中写入的rootUri完全相同的URL作为我要模拟的数据源的URI:

The only way I can make the mock server configuration work is to use the exact same URL as the rootUri that is written in the manifest.json as the URI of the dataSource I want to mock:

// Snippet from mockserver.js
var oMockServer = new MockServer({
    rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
});

上面的代码有效,但是Web IDE指出这是一种不好的做法:

The above code works, but the Web IDE states that this is a bad practice:

我现在的问题是:如何使模拟服务器以相对的rootUri运行预期的方式?

My question now is: How can I make the mock server run the intended way with a relative rootUri?

webapp/manifest.json(摘录)

webapp/manifest.json (excerpt)

{
  "_version": "1.1.0",
  "sap.app": {
    "_version": "1.1.0",
    "id": "sap.ui.tutorial.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "invoiceRemote": {
        "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0"
        }
      }
    }
  },
...


webapp/test/mockServer.html


webapp/test/mockServer.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>Hello World App - Test Page</title>
        <script src="/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-theme="sap_belize"
                data-sap-ui-libs="sap.m"
                data-sap-ui-compatVersion="edge"
                data-sap-ui-preload="async"
                data-sap-ui-resourceroots='{
                    "sap.ui.tutorial.walkthrough": "../"
                }'></script>

        <script type="text/javascript">
            sap.ui.getCore().attachInit(function() {
                sap.ui.require([
                    "sap/ui/tutorial/walkthrough/localService/mockserver",
                    "sap/m/Shell",
                    "sap/ui/core/ComponentContainer"
                ], function(mockserver, Shell, ComponentContainer) {
                    mockserver.init();

                    new Shell({
                        app: new ComponentContainer({
                            name: "sap.ui.tutorial.walkthrough",
                            height: "100%"
                        })
                    }).placeAt("content")
                });
            });
        </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
</html>


webapp/localService/mockserver.js


webapp/localService/mockserver.js

sap.ui.define([
    "sap/ui/core/util/MockServer"
], function (MockServer) {
    "use strict";

    return {
        init: function () {
            // create
            var oMockServer = new MockServer({
                rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
            });
            var oUriParameters = jQuery.sap.getUriParameters();
            // configure
            MockServer.config({
                autoRespond: true,
                autoRespondAfter: oUriParameters.get("serverDelay") || 1000
            });
            // simulate
            var sPath = jQuery.sap.getModulePath("sap.ui.tutorial.walkthrough.localService");
            oMockServer.simulate(sPath + "/metadata.xml", sPath + "/mockdata");
            // start
            oMockServer.start();
        }
    };
});


webapp/localService/metadata.xml


webapp/localService/metadata.xml

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx">
    <edmx:DataServices m:DataServiceVersion="1.0" m:MaxDataServiceVersion="3.0"
                       xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
        <Schema Namespace="NorthwindModel" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityType Name="Invoice">
                <Key>
                    <PropertyRef Name="ProductName"/>
                    <PropertyRef Name="Quantity"/>
                    <PropertyRef Name="ShipperName"/>
                </Key>
                <Property Name="ShipperName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
                          Unicode="true"/>
                <Property Name="ProductName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
                          Unicode="true"/>
                <Property Name="Quantity" Type="Edm.Int16" Nullable="false"/>
                <Property Name="ExtendedPrice" Type="Edm.Decimal" Precision="19" Scale="4"/>
            </EntityType>
        </Schema>
        <Schema Namespace="ODataWebV2.Northwind.Model" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityContainer Name="NorthwindEntities" m:IsDefaultEntityContainer="true" p6:LazyLoadingEnabled="true"
                             xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation">
                <EntitySet Name="Invoices" EntityType="NorthwindModel.Invoice"/>
            </EntityContainer>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

推荐答案

在为模拟服务器定义rootUri时,需要注意一些规则.

There are some rules to watch out for when it comes to defining the rootUri for mock server.

rootUri

  • 应该是相对的
  • 必须以斜杠("/")
  • 结尾
  • 必须与分配给您模型的URI匹配.
  • Should be relative
  • Has to end with a slash ("/")
  • Has to match with the URI that is assigned to your model.

步骤27 中提到:

以及主题模拟服务器:常见问题:


因此,只要满足上述三个要求,rootUri的定义就无关紧要.这就是为什么某些任意URI(如rootUri: "/")也可以工作,但仅在数据源中的uri相同的情况下的原因.


So it doesn't matter how your rootUri is defined as long as it fulfills those three requirements mentioned above. That's why some arbitrary URIs like rootUri: "/" works as well but only if the uri in the dataSource is the same.

在您的情况下,如下更改rootUri值应使模拟服务器运行:

In your case, changing the rootUri value like this below should make the mock server running:

var oMockServer = new MockServer({
  rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
});

并分别在您的应用程序描述符(manifest.json)中..:

And in your app descriptor (manifest.json) respectively..:

"dataSources": {
  "invoiceRemote": {
    "uri": "/destinations/northwind/V2/Northwind/Northwind.svc/",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0"
    }
  }
}

要在非MockServer方案中使用该路径,您需要注册一个SAP Cloud Platform中的相应目标编辑新应用. /a>在您的项目中.
无需更改应用程序代码.

To make the path work in a non-MockServer scenario, you'll need to register a corresponding destination in SAP Cloud Platform and edit neo-app.json in your project accordingly.
No need to change the application code.

这篇关于具有本地数据的UI5模拟服务器:"rootUri"无法运作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!