SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析

举报
Jerry Wang 发表于 2022/05/17 22:26:54 2022/05/17
【摘要】 我在本地用cds run 命令启动 SAP Cloud Application Programming 应用后,访问如下 url:http://localhost:4004/vue/index.html发现 Chrome 开发者工具里有一些错误消息,导致页面无法正常渲染:仔细观察这个vue应用,发现它调用了下列这个endpoint:endpoint返回的结果里,genre和currency字...

我在本地用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 具有如下格式:

http://localhost:4004/$fiori-preview/AdminService/Authors#preview-app&/?sap-iapp-state=TASRX3O48Z84SZOSVLFJIN3LXDYTC5OS1ESIVYQNV

查询 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.

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。