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

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

news 来源：原创 2025/6/14 14:52:11

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

相关文章：

  • App渠道效果怎么统计和对比，有哪些实用方法和工具？
  • 一个用专业知识库与多层RAG打造调研报告的Agent
  • 封装python的docker镜像
  • 图纸管理教程-4 物料关联产品多，如何管理发布、变更？
  • Ubuntu VMware虚拟机卡在/dev/sda1
  • 编译器基础概念
  • 【MPC】模型预测控制笔记 (2)：约束MPC
  • HTML+CSS实现的动态登录界面
  • 【技术追踪】用于 CBCT 到 CT 合成的纹理保持扩散模型（MIA-2025）
  • 车载以太网-switch
  • python精讲之文件操作
  • 晶振常见封装工艺及其特点
  • 《第五章-心法进阶》 C++修炼生涯笔记（基础篇）指针与结构体⭐⭐⭐⭐⭐
  • Python脚本开发入门：从基础到进阶技巧
  • 印度客机坠毁致波音美股盘前直线下跌​
  • python中的zip函数
  • Java集合 - ArrayList底层源码解析
  • C++标准库大全(STL)
  • jupyter内核崩溃
  • 第四章 指令系统
  • 深圳有做网站的公司有哪些/seo变现培训
  • 网站建设模板源代码/拓客软件哪个好用
  • 巩义网站建设方案书/北京快速优化排名
  • flash网站建设技术/企业网站定制开发
  • 免费自动网页生成器/重庆百度推广seo
  • 现在网站用什么语言做最好/搜索seo