SAP 基于VUE的BSP OO单页移动端Web App开发

最新推荐文章于 2024-06-14 00:28:49 发布

「已注销」

最新推荐文章于 2024-06-14 00:28:49 发布

阅读量1.3k

点赞数 2

分类专栏： ABAP阿卡姆文章标签： abap sap vue

本文链接：https://blog.csdn.net/Ash_Petis/article/details/104113450

版权

本文介绍了如何使用SAP的BSP应用，基于Vue.js实现一个OO设计的单页移动端Web App，强调了前后端分离和RESTful服务的设计。文章详细阐述了从资源和业务分开、利用Page Fragments复用HTML，到创建查询页面和RESTful服务的步骤，并提供了关键代码示例。

摘要由CSDN通过智能技术生成

前言

之前的一篇文章，通过传统的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应用，专门用于存储这些常用类库。见下：

01_01

为确保允许匿名访问，请注意去掉Application中缺省勾选的XSRF Protection。下面的YBSP_OO_DEMO也是同样的，不再赘述。

将这些公用的类库放到一个归口的应用后，我们就可以创建一个空的业务BSP应用，YBSP_OO_DEMO：
01_3

Step II 通过Page Fragments复用html

正如之前我们的BSP应用，Buefy控制前端控件样式的展现，Vue.js扮演Controller的角色来做渲染和事件处理，axios调用HTTP POST异步访问SAP Server。这三板斧是我们每次都会用到的，所以必定在每个应用的html header中引用到它们。虽说我们的例子目前只涉及一个前端页面，但实际生产环境中，随着业务复杂，一个应用中可能还会包含多个页面。为了减少重复的代码，我们把这个通用的html header代码存放到Page Fragments中，以利于后续的项目使用。
02_1

02_2
_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的。
03_1

main.htm的代码见下，它在头部引用了我们的Page Fragments。

<%@page language="abap"%>
<%@include file="_header.htm" %>
      <section class="section">

          <b-field label="Material Number" :label-position=

最低0.47元/天解锁文章

「已注销」

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SAP 基于VUE的BSP OO单页移动端Web App开发

前言之前的一篇文章，通过传统的Page with Flow Logic形式去实现了基于Vue的One Page Application。这种做法其实存在一些设计上的问题，前端页面交互层还好说，但后端服务层明显不符合RESTful设计风格，一个API居然还有View的代码？（二当家：帮主哇，我们不用OO，光去看人家的Page with Flow Logic，被同行知道了会笑我们变态的）咳咳，有鉴...
复制链接

扫一扫

专栏目录