当前位置: 首页 > ai >正文

SAP学习笔记 - 开发14 - 前端Fiori开发 HelloWorld

之前写过几篇Fiori开发相关的文章。

SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建_sap开发环境-CSDN博客

SAP学习笔记 - 开发05 - Fiori UI5 开发环境搭建2 Fiori Tools插件安装,SEGW创建后台程序,注册服务和Gateway Client确认,从SAP抽数据显示到页面_sap fiori开发-CSDN博客 

发现学的是有点儿乱,咱们这回系统学习一下。

1,Fiori开发工具的选择

- WEBIDE:官方已经不推荐使用,Skip

- BAS:SAP官方推荐使用。但是其实它就是Web版的VSCode,开发体验跟网速关系大

- VSCode:在本地开发,比较方便和流畅。当然开发完要传到BTP平台上

咱们就在VSCode上面学习,下面是Hello级创建步骤。

2,VSCode新建本地项目

开发环境就参照上面的两篇文章就可以了。

内容也可以参照官方文档或网友文章:

OpenUI5 SDK - Demo Kit

SAP OPEN UI5 Step1 环境安装和hello world - 小石王 - 博客园

2-1,npm init --yes (项目初期化)

建好一个文件夹作为项目根目录,然后cd 到该根目录

在根目录下,输入该命令

其实就是生成了package.json文件 

PS E:\Fiori\FioriProject01> npm init --yes 
Wrote to E:\Fiori\FioriProject01\package.json:{"name": "fioriproject01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","type": "commonjs"
}

好,这一步就OK了

2-2, 新建webapp文件夹

这里面将来会放项目文件

2-3,ui5 init (ui5初期化)

PS E:\Fiori\FioriProject01> ui5 init
Wrote ui5.yaml to E:\Fiori\FioriProject01\ui5.yaml:
specVersion: "4.0"
metadata:name: fioriproject01
type: application╭─────────────────────────────────────╮│                                     ││   Update available 4.0.6 → 4.0.8    ││   Run npm i -g @ui5/cli to update   ││                                     │╰─────────────────────────────────────╯PS E:\Fiori\FioriProject01> 

它的目的是生成 ut5.yaml 文件 

2-4,手动新建 manifest.json 文件(webapp文件夹下)

{"sap.app": {"id": "ui5.walkthrough"}
}

2-5,ui5 use SAPUI5@latest

PS E:\Fiori\FioriProject01> ui5 use SAPUI5@latest
Updated configuration written to ui5.yaml
This project is now using SAPUI5 version 1.136.1╭──────────────────────────────────────╮│                                      ││   Update available 4.0.6 → 4.0.16    ││   Run npm i -g @ui5/cli to update    ││                                      │╰──────────────────────────────────────╯PS E:\Fiori\FioriProject01> 

这样就会在ui5.yaml里面生成framework段儿

这个SAPUI5 是收费的,SAP还提供了一个OpenUI5,里面的功能很相似。

SAPUI5有些功能要强大一些,毕竟是收费的嘛

SAP之所以提供OpenUI5,不是因为它高尚无私,是因为这个东西不是它原创的,是在JQuery的基础上创建的,所以它也留点儿体面嘛。

这个 1.136.0 就是openui5.hana.ondemand.com 网页上面的版本

除了这个最新版本,要是想看以前旧版的话,只需要选一下版本就可以看到了

 

2-6,Index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>UI5 Walkthrough</title>
</head>
<body><div>Hello World</div>
</body>
</html>

2-7,ui5 serve (启动Server)

 启动 ui5 服务

PS E:\Fiori\FioriProject01> ui5 serve
Server started
URL: http://localhost:8080

2-8,localhost:8080

点一下上面Terminal里面的URL,或直接粘到浏览器当中

 

再点Index.html,这样就显示出来了。

 

以上就是本篇的全部内容。

更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页

https://blog.csdn.net/shi_ly/category_12216766.html

东京老树根-CSDN博客

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

相关文章:

  • Linux基础指令(一)
  • 木愚科技闪亮第63届高博会 全栈式智能教育解决方案助力教学升级
  • 【容器】docker使用问题处理
  • IoT/基于NB28-A/BC28-CNV通信模组使用AT指令连接华为云IoTDA平台(HCIP-IoT实验2)
  • 打印Yolo预训练模型的所有类别及对应的id
  • 【Rust】Rust获取命令行参数以及IO操作
  • Gartner《2025 年软件工程规划指南》报告学习心得
  • ubuntu国内镜像源手动配置
  • TextIn OCR Frontend前端开源组件库发布!
  • ABP VNext + CRDT 打造实时协同编辑
  • linux中echo命令
  • 深入解析Linux死锁:原理、原因及解决方案
  • 【unity游戏开发——编辑器扩展】EditorUtility编辑器工具类实现如文件操作、进度条、弹窗等操作
  • 计算机网络学习20250528
  • (增强)基于sqlite、mysql、redis的消息存储
  • OpenCV---Canny边缘检测
  • 在 CAD C# 二次开发中,Clipper2、CGAL 和 NTS(NetTopologySuite)对比
  • 上交具身机器人的视觉运动导航!HTSCN:融合空间记忆与语义推理认知的导航策略
  • 11.14 LangGraph检查点系统实战:AI Agent会话恢复率提升287%的企业级方案
  • cuda编程笔记(2)--传递参数、设备属性
  • RabbitMQ监控:关键技术、技巧与最佳实践
  • 【华为战报】4月、5月 HCIP考试战报!
  • 理解并解决高丢包率问题,构建清晰流畅的实时音视频通话
  • 硬件实时时钟(RTC)
  • java调用C语言的dll方法
  • JWT安全:假密钥.【签名随便写实现越权绕过.】
  • PHP+MySQL开发语言 在线下单订水送水小程序源码及搭建指南
  • TypeScript 中的剩余参数:灵活处理可变数量参数
  • Prometheus + Grafana 监控常用服务
  • 《Scientific Reports撤稿门技术节分析》——从图像篡改检测到学术伦理重建的技术透视