前言
之前的一篇文章,通过传统的Page with Flow Logic形式去实现了基于Vue的One Page Application。这种做法其实存在一些设计上的问题,前端页面交互层还好说,但后端服务层明显不符合RESTful设计风格,一个API居然还有View的代码?(二当家:帮主哇,我们不用OO,光去看人家的Page with Flow Logic,被同行知道了会笑我们变态的)咳咳,有鉴于此,恰好近日因肺炎推迟上班,被禁足在家,所以特别补全一个OO方式实现的例子。
注:本篇仍将实现一个查询库存的例子,但项目的结构、前端HTML页面代码以及SAP后端代码很多重要细节都与上一篇文章有所不同,请留意。
与传统BSP方式相比,OO实现BSP的方式有两点好处
- 前后端逻辑可以完全分离,符合MVC,代码更易阅读和维护
- 可以独立于页面实现类似RESTful风格的API,显得更专业
但受制于NetWeaver平台,BSP本身也还有如下缺点
- 不能完全实现MVC,Model在BSP里面其实不存在,直接Open SQL完事。skr…skr…
- 尽管能做成RESTful API,但分发还得通过SICF,一个服务一个Application。另外,个人猜测,可能并非所有的HTTP方法BSP都支持,但这个无伤大雅,一般HTTP POST日常也足够了。
GKD 搞快点
Step I 资源和业务分开
在上一篇中,我们将应用依赖的js和css文件都上传到了应用本身的目录下,但它们其实是可以被整个Package下的BSP应用共享的,如果你其它的BSP应用也引用了这些文件,那么类库的版本、前端样式能够统一,利于代码复用和后期维护,同时浏览器当发现资源来自同一个url时,不会去重复下载,节约带宽资源。基于这种种好处,也为了避免这些MIME中的文件被业务代码污染,笔者建议单独创建一个BSP应用,专门用于存储这些常用类库。见下:
为确保允许匿名访问,请注意去掉Application中缺省勾选的XSRF Protection。下面的YBSP_OO_DEMO也是同样的,不再赘述。
将这些公用的类库放到一个归口的应用后,我们就可以创建一个空的业务BSP应用,YBSP_OO_DEMO:
Step II 通过Page Fragments复用html
正如之前我们的BSP应用,Buefy控制前端控件样式的展现,Vue.js扮演Controller的角色来做渲染和事件处理,axios调用HTTP POST异步访问SAP Server。这三板斧是我们每次都会用到的,所以必定在每个应用的html header中引用到它们。虽说我们的例子目前只涉及一个前端页面,但实际生产环境中,随着业务复杂,一个应用中可能还会包含多个页面。为了减少重复的代码,我们把这个通用的html header代码存放到Page Fragments中,以利于后续的项目使用。
_header.htm的代码见下,代码中备注的信息请留意:
<%@page language="ABAP"%>
<!DOCTYPE html> <!--解决Safari中Buefy移动模式mobile card显示不正确的问题-->
<html>
<head>
<title>Inventory Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"><!--页面自适应移动端-->
<meta name="format-detection" content="telephone=no"><!--防止纯数字被识别为手机号码-->
<meta name="apple-mobile-web-app-capable" content="yes" ><!--Safari识别为Web应用-->
<meta name="mobile-web-app-capable" content="yes"><!--Chrome识别为Web应用-->
<link rel="icon" href="../YBSP_LIBRARY/monkey.png" type="image/x-icon"/> <!--页面图标-->
<link rel="stylesheet" href="../YBSP_LIBRARY/buefy.min.css" /> <!--buefy-->
<script src="../YBSP_LIBRARY/vue.js"></script> <!--vue.js-->
<script src="../YBSP_LIBRARY/axios.min.js"></script> <!--axios-->
</head>
<body>
<script src="../YBSP_LIBRARY/buefy.min.js"></script> <!--buefy-->
<script src="../YBSP_LIBRARY/all.min.js"></script> <!--icon相关-->
<div id="app"> <!--app 根节点-->
Buefy 支持两种icon类型,缺省是Materail Design Icon,而另一种是FontAwesome。最大的区别在于icon的实现机制不同。使用Material Design Icon,会有访问SAP服务资源导致弹出账号密码验证的问题,故放弃。使用FontAwesome,须要引入其js文件,即上面的
all.min.js
。这个文件,你可以在FontAwesome在Github上的代码库中找到并下载下载:https://github.com/FortAwesome/Font-Awesome
Step III 创建查询页面
不同于传统方式,OO的BSP,我们创建的View是不带Flow Logic的。
main.htm的代码见下,它在头部引用了我们的Page Fragments。
<%@page language="abap"%>
<%@include file="_header.htm" %>
<section class="section">
<b-field label="Material Number" :label-position=