一个基于dwz的html生成工具(1)工具规划及技术选型
设想
经常做管理系统,对于后端程序员来说,修修改改html真tm烦躁。然而我发现,很多管理系统很类似,当然如果说curd增删改查是共性,应该没毛病,但是这样说又太笼统。按照流程来说,无非是用户登录,跳到主页,根据给该用户设定好的权限显示特定菜单,每个菜单对应不同子页面,具体到每个页面模块,还要判断操作权限。
增,需要一个表单,用户填写后,校验无误保存。删,需要提示,并做数据权限判断,执行删除。改,将已有数据读入可编译状态的表单,修改了提交,再校验再保存。查,用户输入模糊的条件,多条件随机组合,查出感兴趣的信息。
四大操作之外,还有信息的具体的排布显示。有的页面较为简单,比如查询条件在子页面上半部分,查询结果集在下半部分。有的较为复杂,操作较多,或者带有下级子页,或级连操作,或有复杂应用比如地图图表等。
除了信息的显示,数据校验的实现,规则设定,数据范围等,都需要能快速的设计好。这些并不容易。
在传统桌面应用,winform中,ui元素设计为x/y轴坐标绝对定位排布。设计工具将元素的名称,标签,位置,类型,对应的事件等信息保存在数据库。客户端只是一个通信用的外壳,用户点击登录,加载权限范围内的菜单,点击菜单项,远程加载该页面的元素和数据,再在客户端内排布渲染。这样客户端不用修改,可以通用。服务端修改业务即可。实施部署都很快速。
在我的html工具里,只需要分别排版填充子页面,点击保存后在后端生成对应的html文件,而不是存储在数据库。和桌面应用相似的是,页面有哪些元素,怎么排版,功能按钮的点击事件,数据的初始化等。每次添加,可以是一个html元素,可以是多个元素组合的组件,也可以是一个专用div层。在实现之前需要选择一个固定的ui库,这样生成的东西和库是匹配的。这个库可以是bootstrap或其它,这里我选择多年前用过的dwz。在dwz之外,参考jquery ui(拖拽,移动,排序,大小重定义等实现原理),并温习jquery。
布局
页面布局左中右三列,左边区域1为选择ui元素或套件,中间区域2显示,右边区域3设置元素属性或事件。
1 html生成工具
------------------------------------------------------------------------------------- 2 - - - - 3 - - - - 4 - - - - 5 - - - - 6 - - - - 7 - - - - 8 - - - - 9 - 1 - 2 - 3 - 10 - - - - 11 - - - - 12 - - - - 13 - - - - 14 - - - - 15 - - - - 16 - - - - 17 -------------------------------------------------------------------------------------
为什么选择基于dwz?
之所以基于dwz,因为它是ui与事件集成的框架,可以一站式快速开发管理系统,一个不太懂前端的程序员也可以快速使用,只要按照官网结构书写html即可,甚至可以不写或少写js、css。缺点是,界面较为陈旧,是至少10年前的ui主题,而且不支持响应式。但是在企业应用场景或管理系统场景用着很好(上班使用电脑,下班各回各家~_~)。前期快速开发,如果好的话,回头要么修改自定义下主体,要么使用bootstrap再实现一个快速开发的框架。
为什么选择jquery?
工作之初,就使用的jq,还是习惯基于jq做东西。不管是css还是js,在html里直接导入就使用,是熟悉的模式。
目标
做一个简易的能快速生成特定html的web工具。
![](https://files-cdn.cnblogs.com/files/thingk/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E7%A0%81.bmp)