工业App开发与应用 课件 项目4 工业App前端低代码开发

前端低代码开发过程目录一、事件驱动机制二、前端低代码开发基本过程三、前端低代码开发优势一、事件驱动机制一、事件驱动机制01-02-前端低代码开发采用事件驱动机制，使用事件驱动来响应用户操作。使用事件驱动机制是前端低代码开发的核心特性之一。1.事件指在网页中发生的交互性事件用户事件如点击、滑动、输入等系统事件如加载完成、错误提示等事件可以被网页中的元素（如按钮、文本框、链接等）捕捉和处理，从而实现网页的交互功能。2.事件驱动一种编程模式，即当某个事件发生时，程序会自动调用相应的事件处理函数来处理该事件。通过给页面及页面元素添加各种动作（事件）来实现交互效果。当用户执行某个动作时比如点击按钮、输入文本等，程序会自动调用相应的事件处理函数来处理该事件。这些事件处理函数可以是开发者自己编写的代码，也可以是预定义的代码库。事件驱动

编程模式优点使程序更加灵活、响应更快01更符合人类的思维方式02因为人类在日常生活中也是通过感知事件来做出反应的例如：给水壶加上蜂鸣器，只要在听到提示音时就知道水开了该关火了。3.事件驱动函数指用于处理特定事件的函数事件处理函数的分类预定义的函数开发者自定义函数当特定事件发生时，程序会调用相应的事件处理函数来处理该事件。事件处理函数的作用可以实现各种功能，如修改网页内容、执行动画效果、发送请求等是网页交互的核心部分function(event){……}二、前端低代码开发基本过程二、前端低代码开发的基本过程Step1

确认操作对象Step2

添加动作Step3

编写前端函数Step4

前端调试事件事件处理函数1.确认操作对象理解页面构成确认需要对哪个对象或元素进行操作，如按钮、文本框、图片等。2.给操作对象添加动作（事件）需选择在该对象上执行哪种动作例如，如果要在页面加载完后给页面元素设置默认值页面初始化动作鼠标点击键盘输入3.编写前端函数（事件处理函数）前端函数（事件处理函数）采用JavaScript脚本语言编写支持ES6规范负责处理动作（事件）发生后的逻辑操作，如弹出对话框、跳转页面等function(event){varviewModel=this;//弹出提示框

cb.utils.alert(“helloworld!”);}4.前端调试可以通过调试快速定位和修复问题，帮助开发者更加高效地完成开发任务。三、前端低代码开发优势三、前端低代码开发优势01-02-前端低代码开发更加高效、简单、易用可以大幅度缩短开发周期，降低开发成本03-04-在前端低代码开发中，开发者无需关注底层技术细节，只需要专注于业务逻辑和用户体验的实现成为了企业快速迭代和创新的首选方法总结前段低代码开发过程前端低代码开发优势事件驱动机制事件事件驱动事件驱动函数前端低代码开发基本过程确认操作对象给操作对象添加动作编写前端函数前端调试思考1简述事件驱动机制？思考2简述前端低代码开发基本过程？Model模型目录一、Model模型简介二、Model模型的构成三、Model模型的分类四、Model模型的应用一、Model模型简介一、Model模型简介01-02-在前端低代码开发中，Model模型是非常重要的一个概念。它是页面的数据模型，也可以理解为页面的结构模型。二、Model模型的构成二、Model模型的构成Model模型三、Model模型的分类三、Model模型的分类类型选择方法事件三、Model模型的分类常用的Model模型主要包括viewModelbaseModelgridModellistModelsimpleModeltreeModelfilterModelreferModel1.viewModel原生数据模型结合组装010101010101010101001010102.baseModel数据模型基类baseModel是数据模型基类，不会直接出现在页面中。封装常用模型3.simpleModel简单模型API4.simpleModel简单模型

下拉项

复选框

单选框自动搜索

下拉按钮

打印5.gridModel表格模型5.gridModel表格模型排序筛选分页6.treeModel树形模型展开折叠拖曳7.filterModel过滤器模型文本框下拉框日期选择器8.referModel参照模型四、Model模型的应用四、Model模型的应用四、Model模型的应用viewModel原生数据模型gridModel表格模型treeModel树形模型四、Model模型的应用模型事件方法总结Model模型Model模型的应用Model模型简介viewModel原生数据模型simpleModel简单模型listModel列表模型gridModel表格模型baseModel数据模型基类listModel列表模型gridModel表格模型treeModel树形模型filterModel过滤器模型referModel参照模型Model模型的构成Model模型的分类思考1简述Model模型的分类？思考2简述viewModel模型与其他模型的关系？表格模型目录一、表格模型概述二、获取表格vm对象三、获取表格数据四、表格模型常用脚本和方法五、表格模型常用事件一、表格模型概述一、表格模型概述排序筛选分页二、获取表格vm对象二、获取表格vm对象01-获取表格的vm对象，以便于使用表格gridModel模型上的方法和事件。页面只有一个表格function(event){varviewModel=this;vargridModel=viewModel.getGridModel();}当页面有多个表格时，我们可以通过表格的childrenfield属性值或者cCode，获取指定表格vm对象。三、获取表格数据三、获取表格数据010010101011001010101001001010101100101010100100101010110010101010三、获取表格数据示例代码function(event){varviewModel=this；

vargirdModel=viewModel.getGridModel();//触发按钮点击事件

viewModel.get('button5xa').on('click',function(args){//获取点击行的行数据（根据行号）

constrowData=gridModel.getRow(args.index);//获取表格当前页面所有的行数据

constrowAllDatas=gridModel.getRows();//获取表格当前页面表体数据(比getRows多了_status字段)consttabelDatas=gridModel.getData();//获取表格已勾选行的行数据（不使用行号查找）

constselecteDatas=gridModel.getSelectedRows();})}Vm对象回调函数三、获取表格数据示例代码function(event){varviewModel=this；

vargirdModel=viewModel.getGridModel();//触发按钮点击事件

viewModel.get('button5xa').on('click',function(args){//获取点击行的行数据（根据行号）

constrowData=gridModel.getRow(args.index);//获取表格当前页面所有的行数据

constrowAllDatas=gridModel.getRows();//获取表格当前页面表体数据(比getRows多了_status字段)consttabelDatas=gridModel.getData();//获取表格已勾选行的行数据（不使用行号查找）

constselecteDatas=gridModel.getSelectedRows();})}四、表格模型常用脚本和方法四、表格模型常用脚本和方法获取单元格value值getCellValue(rowIndex,cellName)行号列号model.getCellValue(rowIndex,cellName)四、表格模型常用脚本和方法获取单元格value值setCellValue(rowIndex,cellName,value,check,blur)行号列号值boolean型blur为true时，单元格数据改变后变为不可编辑状态。model.setCellValue(rowIndex,cellName,value,check,blur)五、表格模型常用事件五、表格模型常用事件单元格数据改变后事件选中select后事件取消选中select后事件增行/插行前事件增行/插行后事件删行前事件删行后事件1.单元格数据改变后事件function(event){varviewModel=this；vargirdModel=viewModel.getGridModel();//单元格数据改变后事件gridModel.on("afterCellValueChange",function(event){//rowIndex:'行号'，cellName:'列名'，value:'新值'，oldValue:'旧值'let{rowIndex,cellName,value,oldValue,childrenField}=event;/*todosomeing...*/})；}使用afterCellValueChange事件，可以在单元格数据改变后触发相应的事件。rowIndex行号cellName列名value新值oldValue旧值2.选中select后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//选中select后事件rowIndexs为行号，单行（整形）or多行（数组）

gridModel.on("afterSelect",function(rowIndexs){/*todosomeing...*/});}使用afterSelect事件，可以在选中select后触发相应的事件。rowIndexs为行号，单行（整型）或多行（数组）。3.取消选中select后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//取消选中select后事件rowIndexs为行号，单行（整型）or多行（数组）

gridModel.on("afterUnselect",function(rowIndexs){/*todosomeing...*/})；}使用afterUnselect事件，可以在取消选中select后触发相应的事件。rowIndexs为行号，单行（整型）或多行（数组）。4.增行/插行前事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//增行/插行前事件

gridModel.on("beforeInsertRow",function(data){/*todosomeing...*///返回true为允许增/插行，返回false为终止操作

returnfalse;})；}使用beforeInsertRow事件，可以在增行/插行前触发相应的事件。data为要插入的行数据。5.增行/插行后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//增行/插行后事件data格式为{index:'增/插行行号'，row:'行数据'}gridModel.on("afterInsertRow",function(data){/*todosomeing...*/});}使用afterInsertRow事件，可以在增行/插行后触发相应的事件。data为已插入的行数据。6.删行前事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//删行前事件data为要删除的行数据

gridModel.on("beforeDeleteRows",function(data){/*todosomeing...*///返回true为允许删行，返回false为终止操作

returnfalse;})；}使用beforeDeleteRows事件，可以在删行前触发相应的事件。data为要删除的行数据。7.删行后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//删行后事件data为已删除的行数据

gridModel.on("afterDeleteRows",function(data){/*todosomeing...*/});}使用afterDeleteRows事件，可以在删行后触发相应的事件。data为已删除的行数据。总结前段低代码开发过程表格模型常用脚本和方法表格模型概述获取表格数据前端低代码开发优势获取表格vm对象单元格数据改变后事件取消选中select后事件选中select后事件增行/插行前事件增行/插行后事件删行前事件删行后事件思考1简述girdModel对象获取表格数据的常用方法？思考2简述表格模型的常用事件？前端调试目录一、前端调试概述二、如何进行前端调试三、前端调试的注意事项一、前端调试概述一、前端调试概述01-02-前端调试是指使用浏览器进行调试，通过控制台来检查代码的运行结果。前端调试是Web开发中非常重要的一环，因为它能够帮助我们在开发过程中及时发现并解决问题，提高开发效率和代码质量。03-我们可以使用浏览器开发者工具来检查代码的运行结果，并进行相应的优化和修复，从而更加高效地进行前端调试工作，提高Web应用的质量和性能。二、如何进行前端调试二、如何进行前端调试前端调试开发者工具结构样式脚本网络请求开发者工具打开方法直接按快捷键F1201右键单击鼠标，并在菜单中单击“检查”02二、如何进行前端调试元素面板控制台面板源代码面板网络面板1元素面板元素面板（Elements）123查找网页HTML源代码的任一元素查看网页的HTML结构和对应的CSS样式通过修改代码来实时预览效果查找和编辑DOM元素查看元素的盒模型和事件监听器2控制台面板控制台面板123可以用于查看网页运行过程中的信息，控制台输出的信息，一般包括错误信息、警告信息和调试信息等可以用console.log()将日志信息输出到控制台进行查看可以用于执行JavaScript命令和表达式，查看和修改JavaScrip