正文

sapui5walkthroughstep27:mockserverconfiguration(代码片段)

keyuming  keyuming  2022-12-04  324

关键词：

模拟服务器配置

增加webapp/test/mockServer.html 文件，修改其中src的值（这里我们引用1.92.1版本），修改resourceroots

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAPUI5 Walkthrough - Test Page</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/1.92.1/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-resourceroots=\'
            "sap.ui.demo.walkthrough": "../"
        \'
        data-sap-ui-oninit="module:sap/ui/demo/walkthrough/test/initMockServer"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
    </script>
</head>
<body class="sapUiBody" id="content">
    <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings=\'"id" : "walkthrough"\'></div>
</body>
</html>

增加webapp/test/initMockServer.js 文件。

sap.ui.define([
    "../localService/mockserver"
], function (mockserver) 
    "use strict";
    // initialize the mock server
    mockserver.init();
    // initialize the embedded component on the HTML page
    sap.ui.require(["sap/ui/core/ComponentSupport"]);
);

增加webapp/localService/mockdata/Invoices.json 文件

[
  
    "ProductName": "Pineapple",
    "Quantity": 21,
    "ExtendedPrice": 87.2000,
    "ShipperName": "Fun Inc.",
    "ShippedDate": "2015-04-01T00:00:00",
    "Status": "A"
  ,
  
    "ProductName": "Milk",
    "Quantity": 4,
    "ExtendedPrice": 9.99999,
    "ShipperName": "ACME",
    "ShippedDate": "2015-02-18T00:00:00",
    "Status": "B"
  ,
  
    "ProductName": "Canned Beans",
    "Quantity": 3,
    "ExtendedPrice": 6.85000,
    "ShipperName": "ACME",
    "ShippedDate": "2015-03-02T00:00:00",
    "Status": "B"
  ,
  
    "ProductName": "Salad",
    "Quantity": 2,
    "ExtendedPrice": 8.8000,
    "ShipperName": "ACME",
    "ShippedDate": "2015-04-12T00:00:00",
    "Status": "C"
  ,
  
    "ProductName": "Bread",
    "Quantity": 1,
    "ExtendedPrice": 2.71212,
    "ShipperName": "Fun Inc.",
    "ShippedDate": "2015-01-27T00:00:00",
    "Status": "A"
  
]

增加webapp/localService/mockserver.js 文件

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

    return 
        init: function () 
            // create
            var oMockServer = new MockServer(
                rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
            );
            var oUriParameters = new UriParameters(window.location.href);
            // configure mock server with a delay
            MockServer.config(
                autoRespond: true,
                autoRespondAfter: oUriParameters.get("serverDelay") || 500
            );
            // simulate
            var sPath = "../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"/>
                <Property Name="Status" Type="Edm.String" Nullable="false" MaxLength="1" FixedLength="false"
                            Unicode="true"/>
            </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>

调整完成后使用 mockServer.html 文件执行程序。

Save and Run，查看执行结果

sapui5使用了哪些开源技术

我们知道SAPUI5已经开源了，共享给了Apache开源组织后的名字叫OpenUI5,虽然从API的长度上看，OpenUI5比SAPUI5要短，但是两者的核心并没有多大区别，SAPUI5多了一些SAP产品所用到的控件，而开源时这部分也就没有必要提交了，当然，SAP... 查看详情

SAPUI5 - 绑定问题

】SAPUI5-绑定问题【英文标题】：SAPUI5-Bindingproblem【发布时间】：2016-06-3007:56:23【问题描述】：我尝试修复此问题几个小时，但看不到我的错误。我尝试做一个简单的绑定：在我的index.html中data-sap-ui-xx-bindingSyntax="complex"...varoModel=n... 查看详情

嵌套路由 SAPUI5

】嵌套路由SAPUI5【英文标题】：NestedroutingSAPUI5【发布时间】：2017-10-3121:33:55【问题描述】：我对SAPUI5中的路由有疑问。我有一个带有两个主视图的SplitApp容器。第一个主视图显示设备列表。第二个主视图显示所选设备的测量点列... 查看详情

SAPUI5 XML 视图文本不可见

】SAPUI5XML视图文本不可见【英文标题】：SAPUI5XMLViewtextnotvisible【发布时间】：2015-04-1612:21:59【问题描述】：我是SAPUI5的新手，在显示模型内容时遇到问题。例如，我正在使用以下JSON设置模型：vara=newsap.ui.model.json.JSONModel(name:\'test... 查看详情

SAPUI5绑定JSON模型来控制

】SAPUI5绑定JSON模型来控制【英文标题】：SAPUI5bindingJSONmodeltocontrol【发布时间】：2016-05-2410:55:31【问题描述】：我是一名ABAPer，正在学习SAPUI5。我正在通过splitApp控制练习主从应用。我一直在寻找这种例子，但没有找到。所以，... 查看详情

sapui5应用xml视图的加载逻辑分析

任务：分析SAPUI5rootXML视图的加载逻辑。鼠标放到initiator这一列上，找到调用栈的UIComponent.js的createContent方法：可以看到，这里的逻辑是，从manifest.json里解析出rootview定义，然后实例化该视图。我们再来看看另一个root视图加载失... 查看详情

sapui5教程——框架简介以及应用实践

前言SAPUI5是SAP公司推出的一款前端UI技术框架，基于HTML5技术，开发语言为JavaScript,诞生于2011年，此款移动框架和SAP系列产品贴合紧密，开发迅速，符合SAP系统的整体风格，SAPUI5是一款封闭框架（收费），如果拥有SAPNetweaverLicense... 查看详情

SAPUI5 重用视图并创建新实例

】SAPUI5重用视图并创建新实例【英文标题】：SAPUI5reuseViewsandmakenewinstance【发布时间】：2017-07-1007:43:00【问题描述】：我是SAP的新手，正在尝试开发SAPUI5应用程序，但在重用视图/部分视图时遇到了一些问题。我想要一个局部视图... 查看详情

SAPUI5中的垂直IconTabBar

】SAPUI5中的垂直IconTabBar【英文标题】：VerticalIconTabBarinSAPUI5【发布时间】：2014-12-1715:13:33【问题描述】：我正在编写一个SAPUI5应用程序，我想实现一个垂直菜单，看起来IconTabBar。IconTabBar只允许我水平配置。我可以用其他组件模... 查看详情

使用 Puppeteer/Playwright 滚动不适用于 SAPUI5 应用程序

】使用Puppeteer/Playwright滚动不适用于SAPUI5应用程序【英文标题】：ScrollingwithPuppeteer/PlaywrightnotworkingforSAPUI5app【发布时间】：2020-10-0912:53:30【问题描述】：我目前正在尝试使用Playwright（类似于Puppeteer）在示例SAPUI5应用程序上运行... 查看详情

使用 SAPUI5 和 HandsOnTable 进行无限滚动

】使用SAPUI5和HandsOnTable进行无限滚动【英文标题】：InfiniteScrollwithSAPUI5andHandsOnTable【发布时间】：2015-06-0301:20:55【问题描述】：我正在尝试实现无限滚动，即在使用HandsOnTable插件呈现的表中按需加载数据。该表是使用SAPUI5设计的... 查看详情

在 SAPUI5 列表中添加复选框

】在SAPUI5列表中添加复选框【英文标题】：AddcheckboxesinSAPUI5list【发布时间】：2016-12-2212:28:32【问题描述】：尊敬的SAPUI5开发人员，我做了一个主细节申请。我想为选择多个项目然后按删除按钮的用户提供此功能。为此，我需要... 查看详情

SAPUI5中如何实现数据绑定？

】SAPUI5中如何实现数据绑定？【英文标题】：HowisdatabindingimplementedinSAPUI5?【发布时间】：2018-10-0304:26:34【问题描述】：在这个很棒的问题中：HowtoImplementDOMDataBindinginJavaScript许多数据绑定实现细节都得到了很好的解释。还有很多... 查看详情

html5开发移动web应用——sapui5篇

SAPUI5中支持利用Component对组件进行封装。想封装一个组件，Component的基本代码例如以下：sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){"usestrict";returnUIComponent.extend("",{init:function(){//calltheinitfunctionoft 查看详情

vscode中sapui5版本(代码片段)

ui5.yaml缺省配置如下ui5:path:-/resources-/test-resourcesurl:https://ui5.sap.com可以根据需要修改之ui5:path:-/resources-/test-resourcesurl:https://sapui5.hana.ondemand.comverssion:1.60.1 查看详情

vscode中sapui5版本(代码片段)

如何从另一个函数触发选择事件 [SAPUI5]

】如何从另一个函数触发选择事件[SAPUI5]【英文标题】：Howtofireanselectioneventfromanotherfunction[SAPUI5]【发布时间】：2021-08-1514:42:04【问题描述】：我想知道如何从另一种方法中选择和触发(CheckBox)选择事件，就好像在使用selectionFunction... 查看详情

html5开发移动web应用——sapui5篇

...是基于显示的，现在我们来格式化一下，引入更多的SAPUI5组件概念。这使得APP的一个界面更有层次性，更像是一个手机应用的界面，并且更好地使用SAPUI5中提供的功能。每个不同的层次都有不同的功能。首先修改App.view.xml文... 查看详情