news 2026/6/8 21:45:57

SAPUI5 1.71.78老版本的消费restful服务

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
SAPUI5 1.71.78老版本的消费restful服务

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

controller.js代码如下

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视图代码

<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跨域

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
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/7 18:22:56

SQL Server重复记录查询、删除处理

1、查找表中多余的重复记录,重复记录是根据单个字段(aID)来判断 select * from A where aID in (select aID from A group by aID having count(aID) > 1) 例二: select * from testB where numeber in (select number from A group by number having count(…

作者头像 李华
网站建设 2026/6/6 18:58:29

复制字符串而不是直接赋值指针

复制字符串而不是直接赋值指针 &#xff08;LeetCode&#xff1a;2418.按身高排序&#xff09; 1.why&#xff1f;数据独立性&#xff1a; 复制字符串使返回结果与输入数据完全独立 修改返回数组中的字符串不会意外影响原始数据&#xff08;可移植性&#xff09; 原始数据被释放…

作者头像 李华
网站建设 2026/5/30 7:54:17

Kotaemon:基于Gradio的RAG文档对话工具安装与配置

Kotaemon&#xff1a;基于Gradio的RAG文档对话工具安装与配置 在企业知识管理日益复杂的今天&#xff0c;如何让AI真正“读懂”内部文档&#xff0c;并以自然语言准确作答&#xff0c;成为智能客服、知识助手等场景的核心挑战。传统的问答系统常因信息孤岛或上下文缺失而表现不…

作者头像 李华
网站建设 2026/6/4 22:12:58

基于Android的大学生校园互帮APP的设计与实现(源码+lw+部署文档+讲解等)

课题介绍本课题聚焦大学生校园内需求匹配低效、互助渠道单一的痛点&#xff0c;设计实现基于 Android 的大学生校园互帮 APP。系统以 Java 为核心开发语言&#xff0c;基于 Android 原生框架搭建移动端应用&#xff0c;搭配轻量后端服务架构&#xff0c;处理需求发布、技能匹配…

作者头像 李华
网站建设 2026/5/31 4:02:51

LobeChat:全栈开发现代化AI聊天应用

LobeChat&#xff1a;构建现代 AI 聊天应用的全栈实践 在生成式 AI 浪潮席卷各行各业的今天&#xff0c;一个直观、灵活且可定制的对话界面&#xff0c;已成为连接用户与大模型能力的关键入口。然而&#xff0c;从零开发一套稳定、美观、功能完整的 AI 聊天系统——支持多模型切…

作者头像 李华
网站建设 2026/6/5 7:12:03

LobeChat能否取代官方ChatGPT客户端?对比评测来了

LobeChat能否取代官方ChatGPT客户端&#xff1f;对比评测来了 在企业越来越依赖大模型构建智能系统、开发者渴望更自由AI交互入口的今天&#xff0c;一个开源项目正悄然改变游戏规则——LobeChat。它不再只是“另一个聊天界面”&#xff0c;而是试图成为连接人与多模态AI能力的…

作者头像 李华