SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析
我在本地用cds run 命令启动 SAP Cloud Application Programming 应用后,访问如下 url:
http://localhost:4004/vue/index.html
发现 Chrome 开发者工具里有一些错误消息,导致页面无法正常渲染:
仔细观察这个vue应用,发现它调用了下列这个endpoint:
endpoint返回的结果里,genre和currency字段都是空的:
而最后 Vue 页面,需要显示 genre结构的name字段:
解决方案
将genre对应的数据通过 csv 文件导入SQLite数据库即可:
最后的效果:
进入 bookshop 文件夹,命令行 cds watch,以 development mode 启动应用:
点击超链接,即可通过 Fiori Elements 预览这些 service:
预览的 url 具有如下格式:
查询 Authors 的 OData 请求 url:
http://localhost:4004/admin/$batch
返回的数据:
从运行时加载的 SAP UI5 这些源文件能看出,这个预览 (preview) UI 是一个典型的 Fiori Elements 应用:
本文提到的在线书店的例子,参考 Jerry 的文章:SAP Cloud Application Programming 介绍 - 2021 更新版
我定义了两个业务模型,名称分别为 Books 和 Authors, 其中 Books 模型有一个名为 author 的字段,该字段通过 Association, 关联到 Authors 模型。因为这里使用的是 Association to,而非 Association to many,所以语义上表达的是一本书有且仅有一位作者。
那么涉及到具体的业务数据,从书籍到作者的关联关系是如何通过 Association 实现的呢?
注意,SAP Cloud Application Programming 的 .cds schema文件里用 entity 定义的模型的字段,和对应的持久化数据库表的字段名称,并不一定总是完全相同。
Books 模型里的 author 字段,生成的数据库表里,对应的字段名称为 author_ID, 存储的是 Author 模型里数据的 id:
比如 Authors 模型的数据库表里,ID 101 代表金庸:
那么 Books 对应的数据库表里的记录, author_id 为101,代表该书作者为金庸。
这里的 Books 数据库表字段 author_id, 相当于 ABAP 数据库表里的 foreign key.
- 点赞
- 收藏
- 关注作者
评论(0)