UI5与后端的文件交互（一）

---

前言

这系列文章详细记录在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数据的，后续介绍如何在后端解析数据