1

我目前正在关注UI5 教程，并停留在第 27 步：模拟服务器配置。

问题是rootUri模拟服务器的配置。我按照教程使用Northwind OData 服务，并在.dataSourcemanifest.json

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

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

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

无法加载https://services.odata.org/V2/Northwind/Northwind.svc/ $metadata?sap-language=DE：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow- Origin' 标头存在于请求的资源上。因此，不允许访问来源“ https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com ”。响应具有 HTTP 状态代码 501。

Stackoverflow 上的另一个问题显示了使用“通配符”root-uri 的模拟服务器，但这也失败了：

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

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

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

上面的代码有效，但 Web IDE 指出这是一个不好的做法：

错误：Fiori 架构指南：ESLint（sap-no-hardcoded-url）：找到硬编码（非相对）URL。（图片）

我现在的问题是：如何使模拟服务器与亲戚一起以预期的方式运行rootUri？

webapp/manifest.json（摘录）

{
  "_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

<!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

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

<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>
4

2 回答 2

3

在定义rootUrifor mock 服务器时需要注意一些规则。

这rootUri

  • 应该是相对的
  • 必须以斜杠 ( "/")结尾
  • 必须与分配给您的模型的 URI 匹配。

步骤27中提到：

( rootUri) 匹配描述符文件中数据源的 URL。

以及主题模拟服务器：常见问题解答：

根 URI 必须是相对的，并且需要尾随“/”。它还需要匹配 OData/JSON 模型或简单 XHR 调用中设置的 URI，以便模拟服务器拦截它们。

rootUri因此，只要满足上述三个要求，您的定义方式并不重要。这就是为什么某些任意 URI 也rootUri: "/"可以正常工作，但前提是uridataSource 中的 URI 相同。

在您的情况下，像下面这样更改rootUri值应该使模拟服务器运行：

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

并分别在您的应用程序描述符（manifest.json）中......：

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

要使路径在非 MockServer 场景中工作，您需要在 SAP Cloud Platform 中注册相应的目标，并在项目中相应地编辑 neo-app.json。
无需更改应用程序代码。

于 2017-11-08T14:09:05.710 回答
1

本教程第 27 章的一些细节非常具有误导性。

  1. rootUriMockServer 的必须与urimanifest.json 中数据源的参数匹配。

  2. 与其将数据源的 uri 更改rootUri为教程中给出的（错误的）MockServer，您实际上应该将 MockServer 的rootUriURI 更改为外部源的 URI。在webapp/localService/mockserver.js使用这个更正的块：

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

这将创建一个 MockServer 拦截对该外部 URI 的所有调用并在本地响应它们。使用这种结构，实际上可以通过 访问 MockServer/webapp/test/mockServer.html并通过/webapp/index.html.

提示：由于同源策略限制 (SOP)，
您很可能仍然无法访问使用的原始（外部）数据源。/webapp/index.html使用 Google Chrome 可以通过在没有 SOP 的情况下运行第二个（！）浏览器实例来很好地解决这个问题。这可以与标准实例 WITH SOP 的其他打开的浏览器窗口并行进行，因此您无需关闭所有打开的浏览器窗口。有关详细信息，请参阅此答案。

于 2018-01-08T11:10:39.707 回答