SAPUI5 1.71.78老版本的消费restful服务

为了兼容老浏览器,没用Javascript的现代fetch api,用的jquery

controller.js代码如下

javascript 复制代码
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/m/MessageToast"
], function (Controller, JSONModel, MessageToast) {
	"use strict";

	return Controller.extend("zfiori_stock.controller.StockList", {

		onInit: function () {
			// 初始化stock模型
			var oStockModel = new JSONModel([]);
			this.getView().setModel(oStockModel, "stock");
		},

		/**
		 * 重置查询条件并清空表格数据
		 */
		_resetQuery: function () {
			this._clearInputs();
			// 清空表格数据
			var oStockModel = this.getView().getModel("stock");
			oStockModel.setData({});
			MessageToast.show("查询条件已重置");
		},

		/**
		 * 清空所有输入框
		 */
		_clearInputs: function () {
			this.getView().byId("werksInput").setValue("");
			this.getView().byId("matnrInput").setValue("");
			this.getView().byId("chargInput").setValue("");
			this.getView().byId("lgortInput").setValue("");
		},

		/**
		 * 获取库存数据
		 * 兼容Android 8平台的老浏览器
		 */
		_fetchStockData: function () {
			// 后端API信息
			var sUrl = "/api/zbakpda?ACTION=GET_STOCK";

			// 从输入框获取查询条件
			var oRequestData = {
				"werks": this.getView().byId("werksInput").getValue(),
				"matnr": this.getView().byId("matnrInput").getValue(),
				"charg": this.getView().byId("chargInput").getValue(),
				"lgort": this.getView().byId("lgortInput").getValue()
			};

			// 显示加载提示
			MessageToast.show("正在查询数据...");

			// 使用jQuery.ajax以兼容老浏览器
			jQuery.ajax({
				url: sUrl,
				type: "POST",
				data: JSON.stringify(oRequestData),
				headers: {
					"Content-Type": "application/json",
					"Accept-Language": "zh" 
					//	"Authorization": sAuthHeader
				},
				// 兼容老浏览器的参数设置
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				timeout: 30000,
				//通过 jQuery.proxy(fn, this),强制绑定了函数执行时的 this 上下文为当前控制器。
				success: jQuery.proxy(function (oData) {
					// 将返回数据绑定到stock模型
					var oStockModel = this.getView().getModel("stock");
					if (oStockModel) {
						if (oData.length != 0) {
							MessageToast.show("库存数据获取成功");
						} else {
							MessageToast.show("返回数据为空");
						}
						oStockModel.setData(oData);
					}
				}, this),

				error: jQuery.proxy(function (xhr, status, error) {
					console.error("获取库存数据失败:", error);
					console.error("状态码:", xhr.status);

					// 友好的错误提示
					var sErrorMessage = "获取库存数据失败";
					if (xhr.status === 401) {
						sErrorMessage = "认证失败,请检查账号密码";
					} else if (xhr.status === 404) {
						sErrorMessage = "服务器地址错误";
					} else if (xhr.status === 500) {
						sErrorMessage = "服务器内部错误";
					}

					MessageToast.show(sErrorMessage);
				}, this)
			});
		}
	});

});

xml视图代码

javascript 复制代码
<mvc:View
	controllerName="zfiori_stock.controller.StockList"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel class="sapUiResponsiveContentPadding">
		<headerToolbar>
			<Toolbar>
				<Button text="查询" press="_fetchStockData" icon="sap-icon://search"
					class="sapUiSmallMarginEnd" />
				<Button text="重置" press="_resetQuery" icon="sap-icon://refresh" />
			</Toolbar>
		</headerToolbar>
		<l:Grid defaultSpan="L6 M6 S6" class="sapUiResponsiveMargin" vSpacing="1">
			<l:content>
				<!-- 工厂 -->
				<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
					<Label text="工厂:" labelFor="werksInput" width="80px" />
					<Input id="werksInput"
						width="100%"
					/>
				</FlexBox>
				<!-- 库存地点 -->
				<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
					<Label text="库存地点:" labelFor="lgortInput" width="80px" />
					<Input id="lgortInput"
						width="100%"
					/>
				</FlexBox>
				<!-- 物料 -->
				<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
					<Label text="物料:" labelFor="matnrInput" width="80px" />
					<Input id="matnrInput"
						width="100%"
					/>
				</FlexBox>
				<!-- 批次 -->
				<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
					<Label text="批次:" labelFor="chargInput" width="80px" />
					<Input id="chargInput"
						width="100%"
					/>
				</FlexBox>
			</l:content>
		</l:Grid>
		<Table
			id="stockList"
			class="sapUiResponsiveMargin"
			width="100%"
			items="{
				path : 'stock>/'
			}"
			noDataText="暂无数据">
			<columns>
				<Column
					minScreenWidth="Phone"
					demandPopin="true"
					hAlign="Left">
					<Text text="物料编码" />
				</Column>
				<Column
					minScreenWidth="Phone"
					demandPopin="true"
					hAlign="Left">
					<Text text="物料描述" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="工厂" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="库存地点" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="库存地点名称" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="批次" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="库存数量" />
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="true">
					<Text text="单位" />
				</Column>
			</columns>
			<items>
				<ColumnListItem>
					<cells>
						<Text text="{stock>matnr}" />
						<Text text="{stock>maktx}" />
						<Text text="{stock>werks}" />
						<Text text="{stock>lgort}" />
						<Text text="{stock>lgobe}" />
						<Text text="{stock>charg}" />
						<Text text="{stock>clabs}" />
						<Text text="{stock>meins}" />
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	</Panel>
</mvc:View>

ui5.yaml配置代理,解决cors跨域

javascript 复制代码
specVersion: "4.0"
metadata:
  name: zfiori_stock
type: application
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /api
    configuration:
      baseUri: "http://后端ip:port"
      preserveHostHeader: true
      ignoreCertErrors: true
      headers:
        X-Requested-With: XMLHttpRequest
相关推荐
用户8599681677692 小时前
UE5虚幻引擎汽车HMI设计高级研修课
后端
用户8599681677692 小时前
鸿蒙HarmonyOS多线程编程实战:AI语音
后端
开心猴爷2 小时前
iOS 应用发布流程中常被忽视的关键环节
后端
用户21991679703912 小时前
使用Agent Framework进行多Agent工作流编排
后端
serendipity_hky3 小时前
【go语言 | 第5篇】channel——多个goroutine之间通信
开发语言·后端·golang
zhaorong3 小时前
RabbitMQ发布订阅模式同一消费者多个实例如何防止重复消费?
后端
开心猴爷3 小时前
提升 iOS 应用安全审核通过率的一种思路,把容易被拒的点先处理
后端
我家领养了个白胖胖3 小时前
Prompt、格式化输出、持久化ChatMemory
java·后端·ai编程
全栈老石3 小时前
别再折腾端口转发了:使用 Cloudflare Tunnel 优雅地分享你的 localhost
前端·后端·全栈