先说一下背景。最近公司要上好几个Fiori项目,这个时候可以边做项目,边写博客了。很高兴啊,朋友们。我们又在CSDN里面相聚了,来一起搞这个东西。
打开VSCODE ,按ctrl+shift+p ,在命令行输入fiori,然后就会打开创建Fiori项目的向导了。选择free style 的生成器,再选择SAPUI5 Application ,因为我们需要开发一个自由度比较高的项目(笑,总而言之,你不知道后面可能要开发什么东西,就选这个模板就行)。
![](https://i-blog.csdnimg.cn/blog_migrate/9213f3b63368cd3eb69ebde79d539ada.png)
然后下一个Data source 这里我要去连on premise 的系统。
![](https://i-blog.csdnimg.cn/blog_migrate/0cfe073faaa105926f9d551bd0861d8b.png)
给View起个名字,一般都是叫App
![](https://i-blog.csdnimg.cn/blog_migrate/ff50215fa1d4062f282083e7d9f389e4.png)
填一下项目名这些信息,改一下manifest.json里面的路由配置。然后在命令行输入npm run start-local
项目就顺利起来了。
然后还有要注意的一个地方是,按照这个方式起的项目用的ODATA服务还要改一下。因为我看到实际上并没有去连接后端,而是生成了自带的虚拟数据。当初步完成开发之后,可以通过以下的办法连到后端去。
步骤一、修改 ui5-local.yaml 文件。这里使用这个ui5-middleware-simpleproxy ,连到on premise系统
![](https://i-blog.csdnimg.cn/blog_migrate/a65e9cc4d6fa54001e6fafcd78eaddf5.png)
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /sap/opu/odata/
configuration:
strictSSL: false
baseUri: "https://hrdev.mindray.com/sap/opu/odata/"
username: "50257785"
password: ""
client: '120'
excludePatterns:
- "/local/**"
步骤二 修改Package.json 文件里的配置
![](https://i-blog.csdnimg.cn/blog_migrate/f5b770d3165c98a2e0a92a2451303493.png)
![](https://i-blog.csdnimg.cn/blog_migrate/91aab7fe87ade8252b440f3d0867a257.png)
步骤三 命令行输入npm install,这个命令会把package.json 里面的依赖下载到本地。所以,如果你更新了package.json 文件,那么注意要重新运行一下,安装对应的依赖。
步骤四 继续在命令行输入 npm start-local 运行项目
可以在odata 调用处看到真实后端返回的数据了