BSP中如何引用外部文件(JS/CSS等)及复杂功能的组织实现

最新推荐文章于 2025-07-03 19:10:06 发布
最新推荐文章于 2025-07-03 19:10:06 发布
阅读量2.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： SAP BSP 文章标签： web开发 asp.net html sap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wren2004/article/details/5585586
本文分享了作者初学BSP的心得体会，介绍了如何通过引用外部脚本来实现代码复用，组织复杂的项目功能，并探讨了纯DHTML+JS+CSS前端开发方式在BSP中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      本人初学BSP, 因为有以前N年的WEB开发基础, 学起来倒是不难. 搞WEB的, 是离不开JS和CSS的, 在大概熟悉了BSP技术之后, 感觉和ASP差不多, 不同的是用ABAP语言而己.

      虽然没有实际的BSP项目经验, 但从通用的WEB开发角度来讲, 把几个比较实用的技术简单罗列一下, 以下想法来源于我自己的习惯很可能不入流, 高手莫笑.

     

      1. 引用外部脚本, 实现代码复用

       在SAP的官方教程中, 教会了我们如何引用HTML代码段, 即所谓的Page Fragment, 其实JS/CSS等也可以看一个HTML代码段来处理, 如下图:

      

       当然比较正规的方式是创建或导入MIME对象的方式来做, 但考虑到JS/CSS等的需要依需求而繁烦修改的情况, 我认为还是上面的方法较为方便. 尤其是在AJAX大行其道的今天, 数据展示与处理的大部分任务都交给了JS, ABAP只需负责后台数据交互, 这种情况下, 该方法就尤显便利了.

       CSS或文件也可以参考JS方式引用.

 

       注: 其实BSP中对文件的扩展名并没有做任何限制的, 你甚至可以将你的首页命名为AA.AA.

 

      2. 复杂功能的组织实现

      在基于第一条方法的基础上, 我想到是否可以将一些通用的JS/CSS/HTML独立出来, 让多个项目引用? 这就涉及到如何引用其他项目Page Fragment的问题, 经过尝试, 方法如下:

     

      这里的ZBSP03就是项目名了.

      在这个思路指导下, 我们就可以象开发ASP.net程序一样, 建很多小的项目, 每个项目都完成一些固定的小的功能,然后再通过一个总的项目整合起来,  这样就可以多人并行开发了, 通用代码库也比较好维护, 优点就不一一列举了, 呵呵.

 

      3. 关于BSP开发的一点见解

      其实所有的WEB开发都可以归结到这一点上来, 就是用不用系统提供的控件的问题. 比如BSP中的HTMLB之类的, 用了当然方便, 但也会受到一些限制. 有兴趣的可以看下HTMLB在浏览器端转换成的HTML代码, 还是比较臃肿的.

      以我个人的习惯,喜欢用纯的DHTML + JS + CSS来做前端数据展示和逻辑处理, 需与后台交互时才用ABAP, 这们界面会清爽很多, 而且以JS的强大和灵活, 会带给用户很多奇妙的体验. 这种方法缺点是对SAP程序员的非ABAP知识要求比较多, 这也是我们从其他语言转过来的ABAPer的优势啦, 呵呵.

     其实,我在做ASP.net时, 就已经不怎么使用MS的标准控件了, 基本上都是JS在做处理, 代码量的大部分也集中在JS上, HTML是相当的灵活, 配合JS的控制可以简单地做出很多标准控件根本不可想象的效果和功能. 后台通过JS调用.net的WebServices和数据库打交道, 经过简单的测试, 我发现这种思路在BSP中一样可以完全实现.

    

      OK, 先写这么多, 以后想起来啥再补充, 明天开始学WD for ABAP.

打造灵活 Web 界面的 SAP ABAP BSP Application 全景解析
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-11 113
Business Server Pages（以下简称 BSP）是 SAP NetWeaver Application Server ABAP 上极富特色的 Web 编程模型。本文从诞生背景、核心结构、开发步骤、完整示例、性能与安全到技术比较，全面解析 BSP Application 的方方面面，并在每个知识点后给出权威参考，帮助读者在最短时间内掌握这一经典技术。
SAP Fiori Launchpad 实现中对启动图像的设计与应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
11-24 98
例如，一个电子商务网站可能会在不同的节日更换网站的主题样式，只需更改 href 指向不同的 CSS 文件即可。这种设计的主要原因是为了针对不同设备提供优化的资源。通过对 href、media 和 rel 属性的深入理解，开发者可以精确地控制资源的加载和应用，为用户提供最佳的体验。这样设计的原因是为了利用 iOS 提供的特性，使 Web 应用在添加到主屏幕并启动时，有类似原生应用的启动画面，提升用户体验。通过这种方式，他们确保无论用户使用哪种设备，都能看到清晰、适配的启动画面，增强用户对品牌的认知和好感。
ThreeBSP.js
08-13
three.js布尔运算库，采用ThreeBSP.coffee编译而成，解决了它和Threejs r8x兼容性的若干问题。
jsBSP:该库是用JS编写的Binary Space Partitioning布局管理器
05-30
jsBSP 这个项目只是一个原型，不推荐 这个库是一个用 JS 编写的二进制空间分区布局管理器。 安装 git clone https://github.com/Arash-Rezaie/jsBSP.git < script type =" text/javascript " src =" [what-ever]/bsp.js " > </ script > < link type =" text/css " rel =" stylesheet " href =" [what-ever]/bsp-styles.css " > 如何使用： 请注意 id 是这个库的一个重要属性。 如果您设置了它，布局经理将雇用它会生成一个。 初始化后不要更改。 当用户右键单击框架 conrner 时，将调用 ctx-handler。 < div class =" bspLayoutManager "
SAP操作手册之 通过BSP应用程序调用JS代码
ABAP 技巧与实战
07-13 1345
点击蓝字关注我们一前言之前写过一篇文章,介绍了ABAP调用JS的方法.非常简单,只是无法传递参数.详见链接无峰，公众号：ABAP 技巧与实战ABAP基础知识 ABAP执行JAVASCRI...
SAP BSP vs Web Dynpro ABAP
wengyupeng 蜗牛一步一步向前。。。
01-26 4233
SAP BSP vs Web Dynpro ABAP
SAP BSP网页端开发
YSY19911230的博客
08-24 868
基于SAP GUI框架的限制，为了支持SAP移动端可用，运用SAP BSP技术学习开发网页端功能。3、控制器CONTROL，需要开发一个控制器类，最下面的URL是当前BSP的进入网址。2、BSP也是基于MVC框架下的，moudle + view + control。mine里面存储source文件，比如JS代码文件，图片等。1、SE80创建新的业务服务器页面应用程序。5、在view里建立这个index.htm。这里的index.htm相当于初始界面。重构DO_REQUEST方法。
SAP CRM WebUI 中字符计数器的实现揭秘：从 ReplyMessageView 到实践扩展
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-03 57
字符计数器看似微不足道，却直接影响输入流畅度、内容合规和品牌形象。SAP CRM 通过十余行脚本解决了社媒客服场景的高频痛点，并留下可复用的设计范式。无论你是维护经典 WebUI，还是在 Fiori、Angular、React 项目里实现字符限制，都可借鉴“轻量监听 + 实时反馈 + 首屏回填 + 多语言支持”的组合拳，让用户在最需要的时候得到最直观的提示。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ nginx配置文件 user zceo; worker_processes auto; error_log /data/openresty/logs/error.log; pid /apps/openresty/run/nginx.pid; events { worker_connections 10240; } http { server_tokens off; include mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" | $http_accept | "$http_x_forwarded_for" | $host | ' '$request_time | $request_length | $upstream_addr | $upstream_status | $upstream_response_time | ' '$connection | $connection_requests '; access_log /data/openresty/logs/access.log main; sendfile on; tcp_nopush on; keepalive_timeout 65; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; gzip_vary on; gzip_disable "MSIE [1-6]\."; gzip_proxied any; # 指定服务器名称hash表的框大小 server_names_hash_bucket_size 512; # header头缓冲区大小，cookie内容较大时可加大 client_header_buffer_size 3072k; large_client_header_buffers 8 3072k; #设置允许发布内容为8M client_max_body_size 500M; client_body_buffer_size 3072k; # websocket配置 map $http_upgrade $connection_upgrade { default upgrade; '' close; } #获取真实请求IP map $http_x_forwarded_for $clientRealIp { "" $remote_addr; ~^(?P<firstAddr>[0-9\.]+),?.*$ $firstAddr; } map $http_user_agent $root_path { default /data/vue/bsp-workbenches-web; # 默认是 PC "~*Mobile" /data/vue/bsp-workbenches-h5; # 如果是移动设备，设置为 h5 路径 "~*Android" /data/vue/bsp-workbenches-h5; "~*iPhone" /data/vue/bsp-workbenches-h5; "~*iPad" /data/vue/bsp-workbenches-h5; "~*Windows Phone" /data/vue/bsp-workbenches-h5; } map $http_origin $cors_origin { default ""; ~^http?://(localhost|127\.0\.0\.1)(:\d+)?$ $http_origin; ~^https?://(.*\.)?gboss\.tech(?::\d+)?$ $http_origin; ~^https?://(.*\.)?ceboss\.cn(?::\d+)?$ $http_origin; ~^https?://(.*\.)?gmarketing\.cn(?::\d+)?$ $http_origin; } include vhosts/upstream.config; include vhosts/server.config; include vhosts/localhost.config; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ vhosts/upstream.config内容 upstream tsdasdaweb { server xxx.xxx.xxx.xxx:8080; keepalive 2000; } upstream csadasdweb { server xxx.xx.xxx.xxx:80; keepalive 2000; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ vhosts/server.config内容 多个下面类似配置 server { listen 80; server_name test-resource.gmarketing.tech; access_log /data/openresty/logs/access-test-resource.log main; error_log /data/openresty/logs/error-test-resource.log error; include /apps/openresty/nginx/conf/vhosts/test-resource-location.conf; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ vhosts/localhost.config内容： server { listen 80; server_name 127.0.0.1; location /ssadas { stub_status on; } location ^~ /csasdasdweb/ { proxy_pass http://asdasdadweb; include /apps/openresty/nginx/conf/vhosts/common-proxy.conf; } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ test-resource-location.conf内容 location ^~ /file-api/ { proxy_pass http://file-api/; include /apps/openresty/nginx/conf/vhosts/common-x-form.conf; include /apps/openresty/nginx/conf/vhosts/common-proxy.conf; } location /file { include /apps/openresty/nginx/conf/vhosts/file-from.conf; alias /data/share/files/; } location /robots.txt { alias /data/vue/robots/robots.txt; add_header Content-Type text/plain; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /apps/openresty/nginx/conf/vhosts/common-x-form.conf内容 add_header Content-Security-Policy "frame-ancestors https://*.ceboss.cn https://*.gmarketing.tech https://*.gboss.tech;"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /apps/openresty/nginx/conf/vhosts/common-proxy.conf内容 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 6000; proxy_read_timeout 6000; proxy_send_timeout 6000; proxy_buffer_size 3072k; proxy_buffers 16 3072k; proxy_busy_buffers_size 3072k; proxy_http_version 1.1; proxy_set_header Connection "Keep-Alive"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /apps/openresty/nginx/conf/vhosts/file-from.conf内容 # CORS 配置 if ($http_origin ~* (https?://([^/]+\.)?(gmarketing\.tech|gboss\.tech|ceboss\.cn)(:\d+)?$)) { set $cors "true"; } if ($http_origin ~* (http?://([^/]+\.)?(gmarketing\.tech|gboss\.tech|ceboss\.cn|localhost:5173|localhost|localhost:5177)(:\d+)?$)) { set $cors "true"; } # 处理 .tiff 文件的 CORS 头 location ~* \.tiff$ { if ($cors = "true") { add_header 'Access-Control-Allow-Origin' "$http_origin" always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; add_header 'Access-Control-Allow-Credentials' 'true' always; } try_files $uri =404; } # 核心 CORS 头 add_header 'Access-Control-Allow-Origin' "$http_origin" always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; add_header 'Access-Control-Allow-Credentials' 'true' always; # 预检请求处理 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 后端页面文件代码： public class SecureUrlGenerator { /** * ??? Nginx secure_link ????? URL. * * @param uri ????????? (??: "/images/secret/document.jpg") * @param secretKey ? Nginx ?????????? * @param durationInSeconds ???????(?) * @return ?????? URL (????) */ public static String generate(String uri, String secretKey, int durationInSeconds) { try { // 1. ??????? (Unix apoch time in seconds) long expires = System.currentTimeMillis() / 1000 + durationInSeconds; // 2. ????????? // ????? Nginx ? secure_link_md5 ?????????? // ??: "$secure_link_expires$uri secret_key" String stringToSign = expires + uri + " " + secretKey; // 3. ?? MD5 ?? MessageDigest md = MessageDigest.getInstance("MD5"); byte[] md5Bytes = md.digest(stringToSign.getBytes(StandardCharsets.UTF_8)); // 4. ? MD5 ???? URL ??? Base64 ?? // Nginx ? secure_link ????????: // - ?? '-' ?? '+' // - ?? '_' ?? '/' // - ????? padding '=' // Java 8 ? Base64.getUrlEncoder().withoutPadding() ?????????? String signature = Base64.getUrlEncoder().withoutPadding().encodeToString(md5Bytes); // 5. ????? URL // ??: /path/to/resource?md5=<signature>&expires=<timestamp> return String.format("%s?sign=%s&t=%d", uri, signature, expires); } catch (NoSuchAlgorithmException e) { // ??????,?????????????????? e.printStackTrace(); throw new RuntimeException("MD5 apoch_time is not available.", e); } } /** * ???,??????? */ public static void main(String[] args) { // --- ???? --- https://pre-file.gmarketing.tech/file/sm9pS0sF6oK/20250611/2b2e90fca62e41b4a048b424dfb75234.jpg String resourceUri = "24Gy8U0OlRbQ/20250616/04fa62de6149b4d11e79fce3ac7638b4.jpg"; String mySecretKey = "q8xyMiuJJAomkrk"; // ????????,??Nginx???? int validDuration = 43200; // ?????12?? (43200?) // --- ???? URL --- String signedUrl = generate(resourceUri, mySecretKey, validDuration); // --- ???? --- System.out.println("?? URI: " + resourceUri); System.out.println("????? URL: " + signedUrl); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 请结合提供内容，修改nginx配置完成如下需求 测试环境Nginx 新的文件服务https://test-resource.gmarketing.tech 只允许通过含有码（sm9pS0sF6oK|24Gy8U0OlRbQ）的链接，并且需要对Referer进行验证，只允许通过含有以下Referer的链接访问【test-wb.gboss.tech test-console.gmarketing.tech test-sw.ceboss.cn】 测试环境Nginx 新的文件服务https://test-resource.gmarketing.tech 需要对sign和时间戳进行校验，加密Key是（q8xyMiuJJAomkrk 请勿泄露），加密方式见截图，加密后的链接示例（https://test-resource.gmarketing.tech/file/24Gy8U0OlRbQ/20250616/04fa62de6149b4d11e79fce3ac7638b4.jpg?sign=ei6aaK9I3H-9ph88m4mrpQ&t=1750103291）
06-20
我们面对的是一个Nginx配置问题，需要实现三个安全访问控制功能：1.通过码验证（类似于密码）-这里看起来是一个固定的字符串验证，可能通过HTTPBasicAuth实现。2.Referer验证-限制请求的Referer头。3.sign和时间戳...
SAP FIORI移动产品架构优化衍进之路
天外野草技术专栏
11-09 6405
前言作为一名SAP Fiori 移动顾问已有些年月，在linkin 上也有很多同志咨询过相关的技术问题，但是关于这方面的文章本人却很少起笔，闲来无事，想想还是记录一些在SAP产品上的项目实施经验，以便更多的同志参考！（视频教程参考链接： http://edu.csdn.net/course/detail/5046）SAP Fiori 简介提到Sap Fiori, 我们要先从SAPUI5讲起。SAPU
我心中的王者：Python-第18章 使用Python处理PDF文件
andyyah晓波的博客
07-30 1080
PDF文件和Word文件一样是二进制(binary)文件，所以处理起来步骤会多一点，不过，读者不用担心，笔者将以实例一步一步讲解，相信读完本章读者也可以很轻松学会使用Python处理PDF文件。
BSP报表开发实例（HTML）
11-19
BSP报表开发实例（HTML）<br>图文并茂。。。。傻瓜式操作。。。、
SAP web 开发技术 BSP2 处理网页的
09-15
BSP Extensions How to master Web reporting with HTMLB
ABAP调用JavaScript进行幂乘运算
DeveloperMrMeng的博客
06-12 482
ECC版本没有内置的ipow运算函数，所以需要进行幂乘运算的话，可以采用调用JavaScript的方式来实现，参考代码如下：
面向 SAP ABAP 开发者的 JavaScript 基础知识（一）
龙哥盟
08-23 1120
本章为 ABAP 开发者提供了 JavaScript 的介绍。我们先从学习 JavaScript 的必备知识开始。然后，我们将介绍 JavaScript 的基础知识，以及 ABAP 和 JavaScript 之间的一些差异。接下来，我们将看一个非常简单的程序和你自己创建它的必要步骤。这本书的第一章介绍了 JavaScript 的基础知识。您看到了如何在程序中定义和使用变量，以及如何创建一个简单的 JS 程序。此外，您还了解了用于创建 JavaScript 程序和 HTML 代码的 Eclipse IDE。
SAP 基于VUE的BSP单页移动端Web App开发
一个不务正业的ABAP
11-18 3069
背景介绍 WinCE设备价格过高，公司决定采购搭载安卓系统的扫码枪来达到降本目的。 原先采用SAP ITS Mobile技术来实现扫码枪调用SAP功能。好处是ABAP只要开发好Dialog界面，将其发布为ITS Mobile应用，就可以直接通过扫码枪上的浏览器直接访问。 但ITS这个框架，设计初衷是为了适配性能孱弱，屏幕较小的移动设备。在性能更为强大，屏幕也更大的安卓扫码枪上，已经很难提供良好的...
SAP 基于VUE的BSP OO单页移动端Web App开发
一个不务正业的ABAP
01-30 1593
前言 之前的一篇文章，通过传统的Page with Flow Logic形式去实现了基于Vue的One Page Application。这种做法其实存在一些设计上的问题，前端页面交互层还好说，但后端服务层明显不符合RESTful设计风格，一个API居然还有View的代码？（二当家：帮主哇，我们不用OO，光去看人家的Page with Flow Logic，被同行知道了会笑我们变态的）咳咳，有鉴...
Three.js - 使用 ThreeBSP 对模型进行布尔运算
ithanmang
06-26 8161
ThreeBSP.js 是 three.js 的一个扩展库，可以实现对模型的数学布尔运算，实际上就是个个点的重新组合和拆分，来重新生成 几何体对象和网格模型。 本实示例浏览地址:http://www.ithanmang.com/threejshome/201806/20180626/01-threeBSPdemo.html ThreeBSP构造函数 function ThreeBSP(tre...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值