UI5与后端的文件交互(一)

文章目录

  • 前言
  • 一、RAP的开发
    • 1. 创建表格
    • 2. 创建CDS Entity
    • 3. 创建BDEF
    • 4. 创建implementation class
    • 5. 创建Service Definition和Binding
    • 6. 测试API
  • 二、创建UI5 Project
    • 1. 使用Basic模板创建
    • 2. 创建View
    • 3. 测试页面及绑定的oData数据是否正确
    • 4. 创建Controller
    • 5. 导入外部包(重要)
    • 6. 测试


前言

这系列文章详细记录在Fiori应用中如何在前端和后端之间使用文件进行交互。
这篇的主要内容有:

  1. 后端RAP的开发(S4HANA On-Premise)
  2. 前端(UI5)读取Excel文件并保存到后端

一、RAP的开发

1. 创建表格

@EndUserText.label : 'Student List'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table ymoon_t010 {key client : abap.clnt not null;key uuid   : sysuuid_x16 not null;name       : abap.char(40);age        : abap.int1;gender     : abap.char(10);city       : abap.char(40);}

2. 创建CDS Entity

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Student List CSD'
define root view entity ymoon_i_010as select from ymoon_t010
{key uuid   as Uuid,name   as Name,age    as Age,gender as Gender,city   as City
}

3. 创建BDEF

这里使用managed 类型减少二次开发

managed implementation in class zbp_moon_i_010 unique;
strict ( 2 );define behavior for ymoon_i_010 alias Student
persistent table YMOON_T010
early numbering
lock master
authorization master ( instance )
//etag master <field_name>
{create;update;delete;}

4. 创建implementation class

因为使用了early numbering,所以在类中实现具体的方法

class lhc_student definition inheriting from cl_abap_behavior_handler.private section.methods get_instance_authorizations for instance authorizationimporting keys request requested_authorizations for student result result.methods earlynumbering_create for numberingimporting entities for create student.endclass.class lhc_student implementation.method get_instance_authorizations.endmethod.method earlynumbering_create.loop at entities into data(entity).data(uuid) = cl_system_uuid=>create_uuid_x16_static( ).append value #(%cid      = entity-%cid%key      = entity-%keyuuid     = uuid) to mapped-student .endloop.endmethod.endclass.

5. 创建Service Definition和Binding

@EndUserText.label: 'Student List SD'
define service YMOON_SD_010 {expose ymoon_i_010 as Student;
}

在这里插入图片描述

6. 测试API

在这里插入图片描述


二、创建UI5 Project

1. 使用Basic模板创建

Service选择我们刚才创建的API
在这里插入图片描述

2. 创建View

我们使用Table和FileUploader组件创建页面

  • 当点击Upload时会触发onUploadButton事件
<mvc:ViewcontrollerName="ikdproject901.controller.Main"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"xmlns="sap.m"xmlns:u="sap.ui.unified"
><Pageid="page"title="{i18n>title}"><VBoxwidth="auto"class="sapUiLargeMargin"><Table items="{/Student}"><headerToolbar><OverflowToolbar id="_IDGenOverflowToolbar1"><content><Titleid="salesTableTitle"text="Excel Upload Demo"level="H2"/><ToolbarSpacer id="_IDGenToolbarSpacer1" /><u:FileUploaderid="fileUploader"name="myFileUpload"tooltip="Upload your file to the server"/><Buttonid="_IDGenButton3"press="onUploadButton"icon="sap-icon://create"text="Upload"type="Emphasized"class="sapUiLargeMarginBegin"/></content></OverflowToolbar></headerToolbar><columns><Column><Text text="姓名" /></Column><Column><Text text="年龄" /></Column><Column><Text text="性别" /></Column><Column><Text text="城市" /></Column></columns><items><ColumnListItem><cells><Text text="{Name}" /><Text text="{Age}" /><Text text="{Gender}" /><Text text="{City}" /></cells></ColumnListItem></items></Table></VBox></Page>
</mvc:View>

3. 测试页面及绑定的oData数据是否正确

有一条数据显示,和后端是一致的

  • 页面
    在这里插入图片描述
  • 后端
    在这里插入图片描述

4. 创建Controller

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/m/MessageToast",
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, JSONModel, MessageToast) {"use strict";return Controller.extend("ikdproject901.controller.Main", {onInit: function () {},onUploadButton: function () {var that = thisvar oModel = this.getView().getModel();var oFileUploader = this.byId("fileUploader");var file = oFileUploader.oFileUpload.files[0];var reader = new FileReader();reader.onload = function (evt) {// get file datavar vContent = evt.currentTarget.result;//read xlsx var workbook = XLSX.read(vContent, {type: 'binary'});workbook.SheetNames.forEach(function (sheetName) {// Here is your object for every sheet in workbookvar excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);console.log(excelData)// Convert to internal Datavar newData = excelData.map(function (entry) {return {"Name": entry["姓名"],"Age": parseInt(entry["年龄"]),"Gender": entry["性别"],"City": entry["城市"]};});//Create Modelvar lines = 0newData.forEach(function (oData) {oModel.create("/Student", oData,{success: function (rData, oResponse) {lines += 1if (lines === newData.length) {MessageToast.show(lines + "条数据导入成功");}}, error: function (oError) {MessageToast.show("数据导入失败");}})})});}reader.readAsBinaryString(file);}});});

5. 导入外部包(重要)

将如下包的导入写在index.html中

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/jszip.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js"></script>

6. 测试

在这里插入图片描述

  • 后端
    在这里插入图片描述

这篇文章是在前端解析excel数据的,后续介绍如何在后端解析数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/234414.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机体系结构期末复习流程大纲

1.存储器和cache 存储器的容量、速度与价格之间的要求是相互矛盾的&#xff0c;速度越快&#xff0c;没bit位价格越高&#xff0c;容量越大&#xff0c;速度越慢&#xff0c;目前主存一般有DRAM构成。 处理器CPU访问存储器的指标&#xff1a; 延迟时间&#xff08;Latency&am…

【算法】算法设计与分析 期末复习总结

第一章 算法概述 时间复杂度比大小&#xff0c;用代入法&#xff0c;代入2即可。求渐进表达式&#xff0c;就是求极限&#xff0c;以极限为O的括号&#xff1b;O是指上界&#xff0c;Ω是指下界&#xff0c;θ是指上下界相等&#xff0c;在这里&#xff0c;可以这样理解&#…

Influxdb2修改管理员密码

通过恢复管理员令牌来重置InfluxDB2管理员的密码 1.找到数据库的配置文件 一般为config.json 2.配置文件的的blod文件配置 3.在这个混合文本和二进制json文件中搜索已知的用户名或token之类的字符串。 例如&#xff1a; "id":"0bd73badf2941000","…

WEB 3D技术 three.js 线框几何体

本文 我们说一下 线框几何体 想将一个几何体 以线框形式展现 threeJS中 有两种类可以实现 第一种 WireframeGeometry 这种几何体 其实就类似于 将材质中的 wireframe 开启 这种方法 之前我们也用过 还有一种 就是 EdgesGeometry 边缘几何体 我们先将代码写成这样 import .…

关于kthread_stop的疑问(linux3.16)

线程一旦启动起来后&#xff0c;会一直运行&#xff0c;除非该线程主动调用do_exit函数&#xff0c;或者其他的进程调用kthread_stop函数&#xff0c;结束线程的运行。 之前找销毁内核线程的接口时&#xff0c;发现了kthread_stop这个接口。网上说这个函数能够销毁一个内核线程…

Java中的IO流

在Java中&#xff0c;I/O&#xff08;输入/输出&#xff09;流用于处理与输入和输出相关的操作。Java的I/O流按照数据处理的不同方式分为两大类&#xff1a;字节流和字符流。每个类别又分为输入流和输出流。以下是Java中常用的I/O流及其继承关系&#xff1a; 字节流&#xff0…

批量剪辑方法:掌握视频剪辑技巧,按指定时长轻松分割视频

在视频制作和编辑过程中&#xff0c;经常要批量处理和剪辑大量的视频片段。学会批量剪辑方法可以提高工作效率&#xff0c;还可以使视频编辑更加准确和高效。下面来看下云炫AI智剪如何按指定时长轻松分割视频的批量剪辑方法。 分割后的视频文件效果&#xff0c;已分割分段的视…

业界首款PCIe 4.0/5.0多通道融合接口SSD技术解读

之前小编写过一篇文章劝大家不要碰PCIe 5.0 SSD&#xff0c;详细内容&#xff0c;可以再回顾下&#xff1a; 扩展阅读&#xff1a;当下最好不要入坑PCIe 5.0 SSD 如果想要进一步了解PCIe 6.0&#xff0c;欢迎点击阅读&#xff1a; 浅析PCIe 6.0功能更新与实现的挑战 PCIe 6.…

云卷云舒:【实战篇】云主机/虚拟机迁移

1. 简介 用户原有业务通过不同版本型号、不同操作系统的主机承载&#xff0c;形式上包括物理服务器、虚拟机、公有云主机等。随着业务不断扩张&#xff0c;需要将其业务云化转型&#xff0c;必须保证上云过程数据完整&#xff0c;业务平滑过度。 如果将所有业务系统都重新部署…

教你如何将本地虚拟机变成服务器,供其它电脑访问

场景&#xff1a;最近在做数据仓库的作业&#xff0c;需要团队协作&#xff0c;买不起阿里云服务器&#xff0c;所以想到能不能将我本地机上的虚拟机变成服务器&#xff0c;供其它同学的电脑访问。在虚拟机上安装hadoop和hive&#xff0c;然后同学机子上安装kettle进行连接。最…

Java 反射(一)

反射 1.反射的介绍 1.反射机制允话程序在执行期间借助于Refelction API取得任何类的信息&#xff08;比如成员变量&#xff0c;构造器&#xff0c;成员方法等&#xff09;并能操作对象的属性及方法&#xff0c;反射在设计模式和框架底层都会用到 2.加载完类之后&#xff0c;在…

可狱可囚的爬虫系列课程 08:新闻数据爬取实战

前言 本篇文章中我带大家针对前面所学 Requests 和 BeautifulSoup4 进行一个实操检验。 相信大家平时或多或少都有看新闻的习惯&#xff0c;那么我们今天所要爬取的网站便是新闻类型的&#xff1a;中国新闻网&#xff0c;我们先来使用爬虫爬取一些具有明显规则或规律的信息&am…

【Redis-04】Redis命令在客户端与服务器之间的执行流程

Redis本质上是一个数据结构服务器&#xff0c;支持键值对类型存储的内存管理系统&#xff0c;可以用作数据库、缓存和消息中间件&#xff0c;在我日常的开发中&#xff0c;基本上使用redis作为缓存中间件。 在Redis中有两个重要的角色&#xff0c;一个是服务器server&#xff0…

Adding Conditional Control to Text-to-Image Diffusion Models——【论文笔记】

本文发表于ICCV2023 论文地址&#xff1a;ICCV 2023 Open Access Repository (thecvf.com) 官方实现代码&#xff1a;lllyasviel/ControlNet: Let us control diffusion models! (github.com) Abstract 论文提出了一种神经网络架构ControlNet,可以将空间条件控制添加到大型…

性能分析与调优: Linux 监测工具的数据来源

目录 一、实验 1.环境 2. proc目录 3. sys目录 4.netlink 5.tracepoint 6.kprobes 7. uprobes 二、问题 1.systemd如何查看启动时间 2.CentOS与Ubuntu如何安装bpftrace 3.snap有哪些常用的命令 4.snap如何安装store 5.如何列出使用bpftrace的OpenJDK USDT探针 一…

显示管理磁盘分区 fdisk

显示管理磁盘分区 fdisk fdisk是用于检查一个磁盘上分区信息最通用的命令。 fdisk可以显示分区信息及一些细节信息&#xff0c;比如文件系统类型等。 设备的名称通常是/dev/sda、/dev/sdb 等。 对于以前的设备有可能还存在设备名为 /dev/hd* (IDE)的设备&#xff0c;这个设…

回顾2023编程之旅

一、前言 看在给了我一个博客专家的份上就继续写写博客&#xff0c;实事求是的讲如果是工作之余去总结csdn写写技术博客&#xff0c;还想混个专家什么的&#xff0c;真的是精力不够。因为里面的灌水的实在太多&#xff0c;比不过的&#xff0c;写这个玩意必须得淡泊名利才能悠然…

【PostgreSQL在线创建索引(CIC)功能的锁分析以及使用注意】

前一篇文章提到了普通创建索引会阻塞DML操作 PostgreSQL创建索引的锁分析和使用注意 而PostgreSQL里可以使用create index concurrently 在线创建索引(CIC)功能&#xff0c;降低创建索引在表上申请的锁的级别&#xff0c;ShareUpdateExclusiveLock级别的锁和RowExclusiveLock…

烟花燃放如何管控?智能分析网关V4烟火检测保障烟火安全

一、方案背景 随着元旦佳节的热潮退去&#xff0c;春节也即将来临&#xff0c;在众多传统的中国节日里&#xff0c;烟花与烧纸祭祀都是必不可少的&#xff0c;一方面表达了人们对节日的庆祝的期许&#xff0c;另一方面也是一种对故者思念的寄托。烟花爆竹的燃放不仅存在着巨大的…

Git将本地项目上传到Gitee仓库

1.右键点击文件&#xff0c;点击Git Bash Here,进入git窗口 2.初始化本地仓库 git init3.将本地仓库与远程仓库建立连接 git remote add origin 远程仓库地址远程仓库地址在gitee仓库复制即可 4.将远程仓库的文件拉到本地仓库中 git pull origin master5.将本地文件全部上传…