目录
一、背景介绍
在企业的系统开发场景中,Excel文件(xls、xlsx、csv)的处理是一个比较常见的功能,例如:
-
将数据导入导出,与其他外部系统、合作伙伴进行数据交换、生成报表进行分析等
-
将数据清洗转换,将excel文件中的数据按照预定义的规则和映射,使其适应系统的数据模型和规范等
-
数据校验和验证,确保导入的数据不会破坏系统数据的完整性等
本次案例将详细讲解如何配置一个如何使用低代码PagePlug实现CSV文件导入功能,通过编写JavaScript代码来将CSV数据转换成JSON格式数据。并且在后续项目迭代中,只需在JSobject中修改即可同步更新,迭代真轻松~~
案例原文件在gitee、github仓库上的demo文件中都可找到(/demo/入门案例/JSobject相关)
二、案例实操
案例会介绍2块的内容
-
对csv格式的数据转换为JSON格式
-
上传的数据进行合并,在新的表格组件中展示
2.1 对csv格式的数据进行转换
-
在JSobject里面,我们新建一个名为Helper的对象
代码如下👇
export default {
csvJSON: (csv) => {
var lines=csv.split("\n");
var result = [];
var headers=lines[0].split(",");
for(let i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
return result; //JSON
},
fileUploader: (fp) => {
if (!fp.files.length) return '';
const objArr=this.csvJSON(fp.files[0].data);
return (objArr == []) ? '' : objArr;
}
}
这段代码包含了两个方法:csvJSON 和 fileUploader:提供了 CSV 数据转换为 JSON 格式的方法和文件上传的方法,最后将上传的 CSV 文件转换为 JSON 对象数组
-
csvJSON: 首先,代码通过换行符将 CSV 数据拆分成多行,并将每行存储在 lines 数组中。然后,它通过逗号将第一行(表头)拆分成多个列,并将列名存储在 headers 数组中。接下来,代码从第二行开始遍历每一行,将每一行数据拆分成多个列,并将列名与对应的值组合成一个 JavaScript 对象 obj。最后,将该对象添加到 result 数组中。最终,方法返回转换后的 JSON 数据。
-
fileUploader: 这个方法用于处理文件上传操作。它接收一个 fp 参数,表示文件上传的对象。首先,代码检查是否存在上传的文件,如果没有文件则直接返回空字符串 ''。如果存在文件,它将调用 csvJSON 方法,并将文件的数据作为参数传递给该方法,将 CSV 数据转换为 JSON 对象数组 objArr。最后,方法会检查 objArr 是否为空数组,如果是空数组则返回空字符串 '',否则返回转换后的 JSON 对象数组。
-
给表格组件绑定数据
在画布中,我们可以拖入文件上传组件(FilePicker)和表格组件(Table),并且对表格组件绑定数据
通过Helper中的fileUploader方法来接收FilePicker1组件
之后我们可以上传一个csv文件测试下,上传文件大功告成~~~
2.2 对上传的csv文件数据进行合并
-
在JSobject里面,我们新建一个名为Merge的对象
代码如下👇
export default {
mergeJSON: (obj1, obj2) => {
let mergedJSON = [];
for (let i=0; i<obj1.length; i++){
for (let j=0; j<obj2.length; j++){
let mergedObj = {};
if (obj1[i].id==obj2[j].id){
mergedObj = {...obj1[i], ...obj2[j]};
mergedJSON.push(mergedObj);
}
}
}
return mergedJSON;
}
}
这段代码主要将两个 JSON 对象数组按照它们的id属性进行合并,并返回合并后的结果数组。
具体的合并过程如下:
-
创建一个空数组 mergedJSON,用于存储合并后的结果。
-
使用两个循环嵌套,分别遍历 obj1 和 obj2 中的元素。
-
在每次循环中,创建一个空对象 mergedObj,用于存储合并后的对象。
-
判断当前遍历到的 obj1 和 obj2 元素的 id 属性是否相等。
-
如果 id 相等,则将 obj1[i] 和 obj2[j] 的属性合并到 mergedObj 中,使用展开运算符 {...obj1[i], ...obj2[j]}。
-
将合并后的 mergedObj 添加到 mergedJSON 数组中。
-
循环结束后,返回合并后的 mergedJSON 数组作为结果。
-
拖入一个新的表格组件,绑定同样的用{{}}方式绑定
通过Helper.fileUploader处理文件后的结果,传递给Merge.mergeJSON方法进行合并
最后合并的数据就展示在表格中了~~是不是其实很灵活很easy
三、场景拓展
在各种业务场景里面,往往会将上传的csv文件进行数据合并,或者上传后进行二次编辑确认,最终更新传到数据库中。那在PagePlug我们又可以如何灵活的编写语句将数据插入到数据库里面呢,场景的拓展留着同学们去探索和拓展~~
也欢迎自己编写案例在PagePlug社区中分享你的作品,如果你有想了解的案例和想法,欢迎在gitee、github社区中、或者该文章下面评论留言哟~~
四、案例体验
-
工程管理系统:优化数据源信息内容及审批流程
👩🏻💻线上体验地址:工程管理系统
- 跨境电商仓库管理系统案例:该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商
👩🏻💻线上体验地址:跨境电商仓库系统
如果想了解PagePlug企业版/商业版的价格及更多功能,可放大下方图片查看
对PagePlug上一些功能使用讲解及介绍,可以点击下方文章查看
1、PagePlug开源低代码权限联动案例——控制组件可用、可见性
2、Formily开发实战——3分钟完成一个登录页的开发,Formily表单与PagePlug低代码的完美融合
3、国内优秀的开源低代码框架:PagePlug,面向研发使用,拒绝重复、低价值的工单循环开发
4、保姆级低代码实战教程——玩转PagePlug表格开发,增删改查分页如此简单
保姆级低代码实战教程——玩转PagePlug表格开发,增删改查分页如此简单_帆软对数据增删改查_PagePlug的博客-CSDN博客面向研发使用的低代码,比低代码区别很大的,相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_帆软对数据增删改查https://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/1312107305、PagePlug:低代码平台入门教程—10分钟搭建一个用户改查系统
6、PagePlug低代码入门教程——与Websocket的集成
7、B站上也有一些案例教程,欢迎查看研究~~
欢迎点赞、收藏、喜欢三连鼓励下哟 ,避免找不到文章啦