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
相关推荐
Smoothzjc9 分钟前
别再只把AI当聊天机器人了!揭秘大模型进化的终极形态,看完颠覆你的认知!
后端·langchain·ai编程
superman超哥20 分钟前
惰性求值(Lazy Evaluation)机制:Rust 中的优雅与高效
开发语言·后端·rust·编程语言·lazy evaluation·rust惰性求值
9号达人20 分钟前
AI最大的改变可能不是写代码而是搜索
java·人工智能·后端
VX:Fegn089526 分钟前
计算机毕业设计|基于springboot + vue智慧养老院管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
拔剑纵狂歌26 分钟前
helm-cli安装资源时序报错问题问题
后端·docker·云原生·容器·golang·kubernetes·腾讯云
一线大码36 分钟前
服务端架构的演进与设计
后端·架构·设计
末日汐40 分钟前
库的制作与原理
linux·后端·restful
晴虹1 小时前
lecen:一个更好的开源可视化系统搭建项目--数据、请求、寄连对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
前端·后端·低代码
码农小卡拉1 小时前
深度解析 Spring Boot 启动运行机制
java·spring boot·后端