WebRose-低代码PaaS平台的新流派,前后端都可直接在线极简式编码

---

前言

点击地址可进入WebRose在线体验系统(无需注册用户,直接访问)
www.webrose.net.cn:5015/wrs/framework/login.html
本平台已开源,这是Gitee的开源地址,根据文档可搭建本地环境
https://gitee.com/shxch1205/webrose

WebRose平台是近年来在百花齐放的低代码PaaS平台市场出现的一支新流派，受到了越来越多的开发者关注，这是一个极其简单易用，但又功能非常强大，可100%完全在线开发（包括前端JS与后端Java调试）的低代码开发平台，其理念与思路与许多根据表结构生成前后端源代码(代码生成器)的思路大有不同，另辟蹊径，自成一派。

WebRose低代码主要体现在以下几点：
1、一个界面搞定开发全过程，即从建表，建模板，建前端JS与后端Java在一个功能上全部搞定，快速上手简单到极点。

2、直接在线编码，不是生成源代码的思路，前端只要一个JS，后端只要一个普通Java类就够了，没有html,Vue,Controller,Service,实体VO等一批源文件(都被封装到底层)，“所见即所得”模板配置方式，非常低代码。

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

4、还有Java客户端开发与访问模式，遇到一些不适合Web开发的需求时提供另一种强有力的选择，B/S与C/S模式两者无缝完美合二为一，可以与硬件设备交互(比如串口/USB传感器)，非常适用于工业互联网，智能制造，智慧医疗等行业。

点击上面链接可直接进入系统体验，第一个菜单中有多个在线视频，详细讲解如何开发与使用，系统截图如下：.
友情提示，因为文章较长，可能没有耐心阅读完，所以在线演示系统中视频是一种快速轻松的了解方法，除此之外，还有一个高效方法是直接打开系统提供的Demo功能，在功能页签上右键，有个【查看源码】可以查看这个功能点的源码(即实际低代码)，对应实际运行效果，非常容易学习与理解，截图如下：

总之，要进入在线演示测试系统中实际体验，才能真正进一步理解WebRose平台。
.

一、WebRose具体如何在线开发？

系统有一个【★在线PaaS开发台】功能点，就在这里开发！
在一个界面上就可以完成全过程开发，包括：前端JS，后端Java，单据模板创建，SQL建表。截图如下：

截图中PaaS工作台中有4个页签，第一个是在线写前端JS低代码，第二个是在线写Java低代码，第三个是创建与配置单据模板，第四个是写SQL直接建表。
JS与Java编码页面中左边是编码区域，右边是各种例子代码，可以复制到左边编码框中，提高效率。
.
.

二、前端JS编码

1.创建前端组件的方法

WebRose一大特点是：无论是创建数据组件（表格/表单/树）还是布局组件（多页签/分割器）都只要一行代码就解决问题。简言之：凡是一行能解决问题的，绝不用两行代码。

创建表格的代码如下：

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

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

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

创建树代码如下：

//一行代码创建树,第1个参数是微服务名(单体时为空),第二个是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"