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
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
胡写代码3 天前
别再前后端各写一套表单校验了
java·后端
大勇前进3 天前
原生 PHP 还是 Laravel?小项目到底要不要上框架
后端
yuzhi_liu3 天前
我用 LangGraph4j 实现 Multi-Agent Supervisor
后端
alsmile3 天前
Node-RED 之外,国产规则引擎的新方案:基于标准语法,Go 先行实现
后端·开源·go
大白803 天前
PHP 内存溢出排查思路:看懂报错日志,精准定位问题
后端
二月龙3 天前
PHP 接口返回统一响应封装,让前后端对接更省心
后端
盖伦发发3 天前
软件工程SOLID 五大设计原则
后端·软件工程