当前位置： 首页 > news >正文

Fiori 初学记录----怎么调用后端系统odata 服务实现简单的CURD

news 2025/6/14 8:31:08

1.对上面的内表做一个简单的增删改查的操作
 SEGW 创建odata 项目，实现增删改查方法。如下图

2.odata 准备完毕后，打开vscode



下一步等待项目生成

把下面这个目录的视图：替换一下：

View1.view.xml 代码：
 

<mvc:ViewcontrollerName="project4.controller.View1"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"xmlns="sap.m"xmlns:myform="sap.ui.layout.form"
><App id="_IDGenApp1"><Page id="page"><content><Tableid="_IDGenTable1"items="{/ZUSERDATASet}"selectionChange="onSelect"mode="SingleSelectLeft"fixedLayout="false"><columns><Column id="_IDGenColumn1"><Textid="_IDGenText1"text="Employee Id"/></Column><Column id="_IDGenColumn2"><Textid="_IDGenText2"text="Name"/></Column><Column id="_IDGenColumn3"><Textid="_IDGenText3"text="Salary"/></Column><Column id="_IDGenColumn4"><Textid="_IDGenText4"text="Age"/></Column></columns><items><ColumnListItem id="_IDGenColumnListItem1"><cells><Textid="_IDGenText5"text="{Id}"/></cells><cells><Textid="_IDGenText6"text="{Name}"/></cells><cells><Textid="_IDGenText8"text="{Salary}"/></cells><cells><Textid="_IDGenText7"text="{Age}"/></cells></ColumnListItem></items></Table></content><Titleid="_IDGenTitle1"text="Employee Details"class="myformTitle"/><myform:SimpleFormid="cMyform"editable="true"><myform:content><Labelid="_IDGenLabel1"text="Emp_Id"/><Textid="_IDGenText9"text="{Id}"/><Labelid="_IDGenLabel2"text="Name"/><Textid="_IDGenText10"text="{Name}"/><Labelid="_IDGenLabel4"text="Salary"/><Textid="_IDGenText12"text="{Salary}"/><Labelid="_IDGenLabel5"text="City"/><Textid="_IDGenInput5"text="{City}"/></myform:content></myform:SimpleForm><footer><Bar id="_IDGenBar1"><contentRight><Buttonid="_IDGenButton1"text="Create"press="oCreateEmpPopup"type="Emphasized"/><Buttonid="_IDGenButton"text="Read"press="oSearchEmpPopup"type="Emphasized"/><Buttonid="_IDGenButton2"text="Update"press="oUpdateEmpPopup"type="Emphasized"/><Buttonid="_IDGenButton3"text="Delete"press="oDeleteEmp"type="Negative"/></contentRight></Bar></footer></Page></App>
</mvc:View>

把下面的红色框替换成自己的项目名

下面的代码

View1.controller.js
代码：
 

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast","sap/m/MessageBox"
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, MessageToast, MessageBox) {"use strict";return Controller.extend("project4.controller.View1", {onInit: function () {},onSelect: function (oEvent) {var sPath = oEvent.oSource._aSelectedPathssPath = sPath[0].split("/")sPath = sPath[1]var myForm = this.getView().byId("cMyform")myForm.bindElement("/" + sPath)this.oPath = sPath},oCreateEmpPopup: function () {if (!this.oFragment) {this.oFragment = new sap.ui.xmlfragment("project4.fragment.CreateForm", this)this.getView().addDependent(this.oFragment)this.oFragment.open()}else {this.oFragment.open()}},oCloseButton: function () {this.oFragment.close()this.oFragment.destroy(true)this.oFragment = null},oUpdateEmpPopup: function () {if (!this.oReadEmpFragment) {this.oReadEmpFragment = new sap.ui.xmlfragment("project4.fragment.ReadForm", this)var myForm = sap.ui.getCore().byId("cFragmentMyform")myForm.bindElement("/" + this.oPath)this.getView().addDependent(this.oReadEmpFragment)this.oReadEmpFragment.open()}else {this.oReadEmpFragment.open()}},oCloseReadButton: function () {this.oReadEmpFragment.close()this.oReadEmpFragment.destroy(true)this.oReadEmpFragment = null},oCreateEmp: function () // FOR CREATING NEW RECORD ************{var UserName = sap.ui.getCore().byId('_IDGenInput2').getValue()var UserSalary = sap.ui.getCore().byId('_IDGenInput3').getValue()var UserId = sap.ui.getCore().byId('_IDGenInput1').getValue()var UserAge = sap.ui.getCore().byId('_IDGenInput4').getValue()var UserCity = sap.ui.getCore().byId('_IDGenInput5').getValue()var oAddEmpData = {}oAddEmpData.Name = UserNameoAddEmpData.Salary = UserSalaryoAddEmpData.Id = UserIdoAddEmpData.Age = UserAgeoAddEmpData.City = UserCitythis.getView().getModel().create("/ZUSERDATASet", oAddEmpData, {method: "POST",success: function (data) {MessageToast.show("Employee Created Successfully");},error: function (data) {MessageToast.show(data);},});},oUpdateEmp: function () // FOR UPDATING RECORD *************{var UserName = sap.ui.getCore().byId('_IDGenInput2').getValue()var UserSalary = sap.ui.getCore().byId('_IDGenInput4').getValue()var UserId = sap.ui.getCore().byId('_IDGenInput1').getValue()var oAddEmpData = {}oAddEmpData.Name = UserNameoAddEmpData.Salary = UserSalarythis.getView().getModel().update("/ZUSERDATASet('" + UserId + "')",oAddEmpData, {method: "PATCH",success: function (data) {MessageToast.show("Employee update Successfully with number");},error: function (data) {MessageToast.show(data);}});},oDeleteEmp: function () // FOR DELETING RECORD **************{this.oPaththis.getOwnerComponent().getModel().remove("/ZUSERDATASet('" + this.oPath.split("'")[1] + "')", {method: "DELETE",success: function (data) {MessageToast.show("Customer deleted Successfully");},error: function (Error) {sap.m.MessageToast.show(Error);}});},oSearchEmpPopup: function () {if (!this.SearchEmp) {this.SearchEmp = new sap.ui.xmlfragment("project4.fragment.SearchEmp", this)this.getView().addDependent(this.SearchEmp)this.SearchEmp.open()}else {this.SearchEmp.open()}},oReadEmp1: function () // FOR READING A SINGLE RECORD BY USING ID OF EMPLOYEE{var SearchInp = sap.ui.getCore().byId("_IDGenInput1").getValue()this.getOwnerComponent().getModel().read("/ZUSERDATASet('" + SearchInp + "')", {method: "GET",success: function (data) {MessageBox.success("ID :- " + data.Id + " " + "Name :- " + data.Name + " " + "Salary :- " + data.Salary);},error: function (Error) {sap.m.MessageToast.show(Error);}});},oCloseSearchButton: function () {this.SearchEmp.close()this.SearchEmp.destroy(true)this.SearchEmp = null}});});

需要把代码里面的红色框换成自己的项目名字

创建红色框内容CreateForm.fragment.xml
 

<c:FragmentDefinitionxmlns="sap.m"xmlns:c="sap.ui.core"xmlns:myform="sap.ui.layout.form"
><Dialogid="_IDGenDialog1"contentWidth="500px"><content><myform:SimpleFormid="_IDGenSimpleForm1"editable="true"><myform:content><Labelid="_IDGenLabel1"text="Emp_Id"/><Inputid="_IDGenInput1"placeholder="Enter Employee Id"/><Labelid="_IDGenLabel2"text="Name"/><Inputid="_IDGenInput2"placeholder="Enter your Name"/><Labelid="_IDGenLabel3"text="Salary"/><Inputid="_IDGenInput3"placeholder="Enter your Salary"/><Labelid="_IDGenLabel4"text="Age"/><Inputid="_IDGenInput4"placeholder="Enter your Age"/><Labelid="_IDGenLabel5"text="City"/><Inputid="_IDGenInput5"placeholder="Enter your City"/></myform:content></myform:SimpleForm></content><customHeader><Bar id="_IDGenBar1"><contentLeft><Textid="_IDGenText1"text="Add Employee"/></contentLeft><contentRight><Buttonid="_IDGenButton1"icon="sap-icon://decline"press="oCloseButton"/></contentRight></Bar></customHeader><buttons><Buttonid="_IDGenButton2"text="Add"icon="sap-icon://add"press="oCreateEmp"type="Emphasized"/></buttons></Dialog>
</c:FragmentDefinition>

ReadForm.fragment.xml
 

<c:FragmentDefinitionxmlns="sap.m"xmlns:c="sap.ui.core"xmlns:myform="sap.ui.layout.form"
><Dialogid="_IDGenDialog1"contentWidth="500px"><content><myform:SimpleFormeditable="true"id="cFragmentMyform"><myform:content><Labelid="_IDGenLabel1"text="Emp_Id"/><Inputid="_IDGenInput1"value="{Id}"/><Labelid="_IDGenLabel2"text="Name"/><Inputid="_IDGenInput2"value="{Name}"/><Labelid="_IDGenLabel4"text="Salary"/><Inputid="_IDGenInput4"value="{Salary}"/></myform:content></myform:SimpleForm></content><customHeader><Bar id="_IDGenBar1"><contentLeft><Textid="_IDGenText1"text="Employee information"/></contentLeft><contentRight><Buttonid="_IDGenButton1"icon="sap-icon://decline"press="oCloseReadButton"/></contentRight></Bar></customHeader><buttons><Buttonid="_IDGenButton2"text="Update"press="oUpdateEmp"/></buttons></Dialog>
</c:FragmentDefinition>

SearchEmp.fragment.xml
 

<c:FragmentDefinitionxmlns="sap.m"xmlns:c="sap.ui.core"xmlns:myform="sap.ui.layout.form"
><Dialog id="_IDGenDialog1"><content><myform:SimpleFormid="_IDGenSimpleForm1"editable="true"><Inputid="_IDGenInput1"placeholder="Enter Emp_Id"/><Buttonid="_IDGenButton2"press="oReadEmp1"icon="sap-icon://search"/></myform:SimpleForm></content><customHeader><Bar id="_IDGenBar1"><contentLeft><Textid="_IDGenText1"text="Search Employee"/></contentLeft><contentRight><Buttonid="_IDGenButton1"icon="sap-icon://decline"press="oCloseSearchButton"/></contentRight></Bar></customHeader></Dialog>
</c:FragmentDefinition>

运行app  输入命令  npm start 
输出界面：


可以再yaml.xml 里面配置本地SDK

    - name: fiori-tools-servestaticafterMiddleware: compressionconfiguration:paths:- path: /resourcessrc: "C://SDK//resources"- path: /test-resourcessrc: "C://SDK//test-resources"


参考文章：How to Create OData Service and CRUD Operations fr... - SAP Community

http://www.xdnf.cn/news/1023895.html

相关文章：

  • 使用特征线法求解一阶线性齐次偏微分方程组
  • 多模态大语言模型arxiv论文略读（121）
  • html+css+js趣味小游戏~（附源码）
  • 数据库分库分表情况下数据统计的相关问题详解（面试问答）
  • C++面试(9)-----反转链表
  • 2025年渗透测试面试题总结-字节跳动[实习]安全研发员（题目+回答）
  • CoLMDriver：基于LLM的协同自动驾驶
  • LangChain面试内容整理-知识点10：文本嵌入模型（Embeddings）使用
  • 如何安装使用qmt脚本跟单聚宽策略
  • C++四大默认成员函数：构造、析构、拷贝构造与赋值重载
  • 利用pycharm搭建模型步骤
  • Sqoop进阶之路：解锁数据迁移新姿势
  • 2025.6.12 【校内 NOI 训练赛】记录（集训队互测选做）
  • 使用OceanBase的Oblogminer进行日志挖掘的实践
  • Mysql 函数concat、concat_ws和group_concat
  • MySQL的对表对整库备份脚本
  • Elasticsearch 常用命令（未完成）
  • python中的文件操作处理：文本文件的处理、二进制文件的处理
  • 心之眼 豪华中文 免安 离线运行版
  • 大模型记忆相关(MemoryOs)
  • kafka Tool (Offset Explorer)使用SASL Plaintext进行身份验证
  • cinematic-gaussians
  • 【RAG+读代码】学术文档解析工具Nougat
  • DeepSeek 引领前端开发变革：AI 助力学习与工作新路径
  • 基于STM32手势识别智能家居系统
  • 抖音AI数字人对口型软件LatentSync最新版整合包，音频驱动口型讲话
  • echarts图封装 自动切换 大屏 swiper 切换里面放echarts图,注意不要开循环 否则出不来
  • 图像处理算法的学习笔记
  • SpringBoot的Web应用开发——Web缓存利器Redis的应用！
  • 【UEFI系列】PEI阶段讲解