点击地址进入WebRose在线体验系统(直接访问无需注册用户) www.webrose.net.cn:5015/wrs/framework/login.html

WebRose平台是近年来百花齐放的低代码PaaS平台市场在平台市场上的新流派越来越受到开发者的关注。这是一个非常简单和容易使用非常强大的在线开发（包括前端）JS与后端Java调试)低代码开发平台的概念和想法与许多根据表结构生成前后端源代码(代码生成器)的想法大不相同。

WebRose低代码主要体现在以下几点： 1.一个界面完成整个开发过程，即从建表、建模板、建前端JS与后端Java所有的功能都完成了，快速手简单到极点。

2.直接在线编码不是生成源代码的想法。前端只有一个JS，只要一个普通的后端Java够了，没有html,Vue,Controller,Service,实体VO等待一批源文件(都封装到底层)，所见即所得模板配置模式，代码很低。

3.在线编译调试异常时，点击异常堆栈直接跳转到源代码窗口的对应行号，就像Idea/Eclipse等待开发工具Debug同样的快速定位问题。

系统有一个【★在线PaaS这里开发的功能点！ 全过程开发可以在一个界面上完成，包括：前端JS，后端Java，创建单据模板，SQL建表。截图如下： 截图中PaaS工作台有四个页签，第一个是在线写前端JS二是在线写低代码Java三是创建和配置文件模板，四是写作SQL直接建表。 JS与Java编码页面的左边是编码区域，右边是各种例子代码，可以复制到左边的编码框中，以提高效率。 . .

WebRose一个主要特点是，无论是创建数据组件（表/表/树）还是布局组件（多页签名/分割器），只要一行代码就可以解决问题。简言之，任何一行能解决问题的人都不需要两行代码。

创建表格的代码如下：

//一行代码创建表格,第1个参数是微服务名(单体时为空),第二个是div的id,第三个参数是模板编码WRS.createBillList("",  "d1",  "demo_user1_SYSTEM");

创建卡片(即表单)的代码如下:

///一行代码创建卡片(即表单)，第一个参数是微服务名(单体时为空)，第二个是div的id,第三个参数是模板编码WRS.createBillCard("",  "d1",  "demo_user1_SYSTEM");

创建树代码如下：

///创建一行代码，第一个参数是微服务名(单体时为空)，第二个是div的id,第三个参数是模板编码WRS.createBillTree("",  "d1",  "demo_user1_SYSTEM");

直接创建静态Html

WRS.createHtml("d1", "<div'><button class='wrs-button'>测试按钮</button></div>");

把布局组件与数据组件组合到一起：

//下面这是是创建一个左右布局，左边是树，右边是卡片的WRS.createSplit("d1", "左右", 300); //界面左右分割WRS.createBillTree("", "d1_A", "demo_corp1_SYSTEM");  //左边是机构树WRS.createBillCard("", "d1_B", "demo_corp1_SYSTEM");  //右边是机构卡片

下面这个是机构/部门/人员结合多页签与分割布局

WRS.createSplit("d1", "左右", 300);  //先左右布局WRS.createTabb("d1_B", ["部门", "人员"]);  //在右边再创建多页签WRS.createBillTree("", "d1_A", "demo_corp1_SYSTEM");  //左边是机构树WRS.createBillList("", "d1_B_1", "demo_dept1_SYSTEM");  //右边第一个页签是部门表WRS.createBillList("", "d1_B_2", "demo_user3_SYSTEM");  //右边第二个页签是人员表

下面这个是机构/部门/人员结另一种分割布局嵌套

WRS.createSplit("d1", "左右", 300);  //先左右布局WRS.createSplit("d1_B", "上下", 280);  //右边再做上下布局WRS.createBillTree("", "d1_A", "demo_corp1_SYSTEM");  //左边机构树WRS.createBillList("", "d1_B_A", "demo_dept1_SYSTEM");  //右上是部门表WRS.createBillList("", "d1_B_B", "demo_user3_SYSTEM");  //右下是人员表

由上几段代码可以看出，WebRose的理念与特点是：一行代码解决一个问题，无论是布局组件还是数据组件都只要一行代码创建，低代码简洁到无法再简洁（零代码我们认为不太现实，或者说丧失了灵活度，只能做一些简单固化的功能，比如单表增删改，即零代码的实际意义有限，而低代码是可行的）。

布局组件可以实现任意层次无限嵌套，但没有采用的html/xml(或vue)那种本身就是嵌套结构的思路，而是通过id的命名规则来实现父子div的关联嵌套，比如在id为“d1”创建分割器时，就会以"_A"与"_B"为后辍创建两个子div，即d1_A与d1_B，然后就可以继续在这两个子div中继续创建，多页签则是以_1、_2、_3…为后辍。

这种扁平化代码结构更简洁，代码量最少，而且在页面层次非常多时，那种嵌套结构的语法就有点像“JS回调地狱”一样，量变导致质变，可读性就不太友好了，有种代码错位层次太深，眼睛都看花了的感觉，不如扁平化语法简洁。

举例，如果我们用Vue的语法样同样实现一个先左右布局，然后右边再有两个页签的代码比较一下就更容易理解. Vue语法如下：

<el-row>  <el-col :span="10">  </el-col>  <el-col :span="14">    <el-tabs v-model="activeName" @tab-click="handleClick">	    <el-tab-pane label="部门" name="first">部门</el-tab-pane>	    <el-tab-pane label="人员" name="second">人员</el-tab-pane>		</el-tabs>  </el-col></el-row>

WebRose语法如下:

WRS.createSplit("d1", "左右", 300);  //先左右布局WRS.createTabb("d1_B", ["部门", "人员"]);  //在右边再创建多页签

通过比较可以看出WebRose的语法更简洁。

这里的本质区别是，一种是用XML自身的嵌套结构表达父子隶属关系，一种是通用id命名规则表达父子隶属关系，而前者是有头有尾的，即有个〈div〉,必然还要有个〈/div〉，所以代码行数必然至少要多一行，而要想进一步低代码简化代码行数，使用id名称直接表达隶属关系肯定会更简洁。

使用id命名规则表达父子隶属关系，还带来一个好处是代码本没就是扁平化了，从上往下一行行代码是对齐的，没有嵌套结构，反而可读性更友好，尤其是在层次非常深的时候。

在线演示系统中，特意做一个层次非常多与深的功能例子，代码如下：

WRS.createTabb("d1", ["页签1", "页签2"]);WRS.createSplit("d1_1", "左右", 300);WRS.createTabb("d1_1_B", ["部门", "人员"]);WRS.createSplit("d1_2", "上下", 300);WRS.createSplit("d1_2_A", "左右", 300);WRS.createTabb("d1_2_B", ["部门", "人员"]);WRS.createBillTree("", "d1_1_A", "DEMO_CORP_CODE1.xml");  //左边树WRS.createBillList("", "d1_1_B_1", "DEMO_DEPT_CODE1.xml");  //部门表WRS.createBillList("", "d1_1_B_2", "DEMO_USER_CODE3.xml");  //人员WRS.createBillTree("", "d1_2_A_A", "DEMO_CORP_CODE1.xml");  //机构树WRS.createBillCard("", "d1_2_A_B", "DEMO_CORP_CODE1.xml");  //机构卡片WRS.createBillList("", "d1_2_B_1", "DEMO_DEPT_CODE1.xml");  //部门表WRS.createBillList("", "d1_2_B_2", "DEMO_USER_CODE2.xml");  //人员表

后来也再用Vue语法验证做这个例子，就发现代码层次真的太深了，代码量太大，量变导致质变，可读性不够友好。

这里需要指出的是，Vue静态XML嵌套结构与JS扁平化结构两种思路各有优缺点（决不能说谁优谁劣），WebRose这样设计基于以下几点考虑： 1.想进一步体现低代码思想，代码更少一点更简洁一点，不想有复杂嵌套结构，所以想在Vue组件化基础上再封装一层，把常见的表格/卡片/树/查询框及布局组件封装成一个函数，一行代码搞定，其实内部可以理解成依然是一个“Vue组件”，肯定还是一个双向数据绑定的组件，可以简单理解成是基于Vue思想的再次封装。

2.对于管理软件来说，常见的七八种数据与布局组件已经可以解决了85%（甚至更高）以上的各种界面需求了，剩下的就是一些非常个性化界面需求了，那些个性化的界面封装组件没有意义（因为没有重用性），即使用Vue也没必要封装组件的，真不如直接写Html算了，所以既然这样，不如抓大放小，把常用的组件用新思路，封装更进一步，更简洁一些，然后又可以与html混合在一起运行，依然可以使用Html的嵌套结构。即可以先创建一段个性化的html，然后在获取其中某个div的id中使用WRS.createBillCard()也是可以创建对象的，两者不矛盾，可以混合在一起执行的。

3.什么都用JS创建界面，缺点就是没有了界面与逻辑分离的概念，即html/vue静态页面是表达界面展现，而JS是处理逻辑，两者分离的思想是许多人非常认可的，道理也是非常对的，但在实际应用中也发现，管理软件许多界面都是高度封装与抽象的“数据化界面”，就是表格/表单/树/按钮这几种东东反复叠加，然后通过单据模板配置，这里的组件表达就一行很简单的配置(只有一个模板编码参数)，什么Css展示效果都已封装成了组件里面的一部分了，美工也不需要再为每个页面做什么效果了（简称画页面），最后导致所谓的静态页面内容越来越简单（有的页面甚至只有一个div了，其他啥都没有），静态页面分离似乎如同鸡肋一般，随着封装程度越高，这种趋势与感觉越明显，好象最后不如放弃静态页面，什么都是JS动态创建反倒更省事，下面有讲动态创建页面会再次讲到这一点。 .

创建好组件(表格/卡片/树)后，如何操作或调用这些组件，比如往卡片中设置某个字段的值，或者取得表格选中行的数据。

这个非常简单，即上面一行代码创建组件时，同时也在当前window中创建了一个对象，对象名就是拿div的id加上_BillList、_BillCard、_BillTree等后辍，这个对象可以直接使用，比如d1_BillList，d1_A_BillCard…

比如下面这段代码，其中的“d1_A_BillList”就在第2行代码创建时生成了，后面可以直接拿来使用:

WRS.createSplit("d1", "上下", 350);  //界面上下分割WRS.createBillList("", "d1_A", "DEMO_DEPT_CODE1.xml");  //部门主表WRS.createBillList("", "d1_B", "DEMO_USER_CODE3.xml");  //人员子表d1_A_BillList.addRowSelectAction(onSelectDept);  //d1_A_BillList对象已有,可直接使用

当然，也可以为创建的组件自己重新取个名字，有时可读性好一些（尤其是层次数量较多时），代码如下：

var myDeptTable,myUserTable;  //自己定义变量名WRS.createSplit("d1", "上下", 350);  //界面上下分割myDeptTable = WRS.createBillList("", "d1_A", "DEMO_DEPT_CODE1.xml");  //部门主表,返回自己对象名myUserTable = WRS.createBillList("", "d1_B", "DEMO_USER_CODE3.xml");  //人员子表,返回自己对象名myDeptTable.addRowSelectAction(onSelectDept);  //使用自己的对象名

只要取得d1_A_BillList或d1_A_BillCard这个对象句柄，就可以直接操作其中的方法与变量，这与Vue等现在流行的“组件化”,“双向数据绑定”思想是一样的，即只要操作对象属性或方法，页面会自动同步渲染，不需要程序员去解决渲染同步问题。

比如BillCard(卡片/即表单)的常用方法有(所有方法查看平台完整帮助)：

d1_A_BillCard.setItemValue("usercode","001");  //设置表单中某个字段值d1_A_BillCard.getItemValue("usercode");  //取得某个字段值d1_A_BillCard.setBillCardValue({
     "usercode":"001","username":"张三"});  //设置整个表单值,会根据不同控件类型渲染不同效果d1_A_BillCard.getBillCardValue();  //取得整个表单值d1_A_BillCard.setItemEditable("usercode",false);  //设置某个控件不可编辑

从卡片设置值的方法可以看出，开发人员只要了解这一个setItemValue方法就够了，而不需要学习各种具体控件（比如文本框，下拉框，图片上传）的具体API，平台会负责不同控件之间的转换渲染出不同效果，这样学习难度就低多了。

BillList(表格)的常用方法有(所有方法查看平台完整帮助)：

d1_B_BillList.getSelectedRowData();  //取得选中行的数据d1_B_BillList.getSelectedRowIndex();  //取得选中行的行号d1_B_BillList.addRowData(1,{
     "usercode":"001","username":"张三"});  //插入一行数据d1_B_BillList.deleteRow(3);  //删除某一行数据d1_B_BillList.addRowSelectAction(function(_rowData){
     });  //行选择变化监听事件

总之，各种控件肯定都有非常全面的API函数，可能满足实现各种常见需求。 .