十八、mcg-helper业务系统单表业务模块自动化生成html页面

来源：互联网发布：分层匹配追踪算法编辑：程序博客网时间：2024/05/21 03:58

本节讲解html页面生成，如果您需要更多的页面（如增加页面、修改页面等等），不管是jsp、html、php或是其它，以这篇教程都能完成，下面我们来看看在《业务系统单表业务模块生成》中所用到的控件：

红色方框标记在之前教程中已讲解过的控件，绿色方框标记本节要讲解的控件，那我们从绿色方框所标记的JS脚本控件开始：

首先，从控件台先看看该控件的参数值：

{"userData":{"record":[{"tableFieldType":"INT","include":"java.lang.Integer","tableField":"user_id","autoincrement":true,"dataType":"Integer","precision":0,"length":10,"show":false,"comment":"自增主键","mandatory":true,"classField":"userId","primary":true},{"tableFieldType":"VARCHAR","include":"java.lang.String","tableField":"user_name","autoincrement":false,"dataType":"String","precision":0,"length":50,"show":false,"comment":"用户名称","mandatory":false,"classField":"userName","primary":false},{"tableFieldType":"VARCHAR","include":"java.lang.String","tableField":"user_pwd","autoincrement":false,"dataType":"String","precision":0,"length":255,"show":false,"comment":"用户密码","mandatory":false,"classField":"userPwd","primary":false}],"property":{"dataDesc":"用户管理","name":"读取用户表信息","className":"McgHelperUser","packageName":"com.mcghelper.model","key":"userData","tableName":"mcg_helper_user"}},"implScript":{"implClassName":"McgHelperUserServiceImpl","serviceClassName":"McgHelperUserService","modelClassName":"McgHelperUser","daoClassName":"McgHelperUserDao","servicePackageName":"com.mcghelper.service","modelPackageName":"com.mcghelper.model","implPackageName":"com.mcghelper.service.impl","implFileName":"McgHelperUserServiceImpl.java","importParam":{"0":"com.mcghelper.model.McgHelperUser","1":"com.mcghelper.dao.McgHelperUserDao","2":"com.mcghelper.service.McgHelperUserService"},"daoPackageName":"com.mcghelper.dao","controllerFileName":"McgHelperUserController.java","controllerPackageName":"com.mcghelper.controller","primary":{"type":"Integer","classField":"userId"}}}

这些参数可以清晰的看见是从“data控件 ”和另一个“JS脚本控件”中传递过来的，这里需要对参数值再次进行处理，为下一个子级“文本控件”（绿色方框标记）生成html页面提供参数，我们双击该JS脚本控件看看编写的javascrpt源代码：

通过上面的原生javascript进行处理后，再从控制台看看该JS脚本控件的运行值：

{"htmlScript":{"htmlTableName":"mcgHelperUserTable","htmlFileName":"mcgHelperUserList.html","userData":{"record":[{"tableFieldType":"INT","include":"java.lang.Integer","tableField":"user_id","autoincrement":true,"dataType":"Integer","precision":0,"length":10,"show":false,"comment":"自增主键","mandatory":true,"classField":"userId","primary":true},{"tableFieldType":"VARCHAR","include":"java.lang.String","tableField":"user_name","autoincrement":false,"dataType":"String","precision":0,"length":50,"show":false,"comment":"用户名称","mandatory":false,"classField":"userName","primary":false},{"tableFieldType":"VARCHAR","include":"java.lang.String","tableField":"user_pwd","autoincrement":false,"dataType":"String","precision":0,"length":255,"show":false,"comment":"用户密码","mandatory":false,"classField":"userPwd","primary":false}],"property":{"dataDesc":"用户管理","name":"读取用户表信息","className":"McgHelperUser","packageName":"com.mcghelper.model","key":"userData","tableName":"mcg_helper_user"}},"jsFileName":"mcgHelperUserList.js","namespace":"mcgHelperUser","primary":{"classField":"userId"}}}

红色突出的是我们处理后的数据，之前传递过来参数的数据保持不变，有了这些参数后，我们可以生成的html页面，您可以直接贴上研发框架的某个已完成的模块页面，如列表页面、增加页面、修改页面，对于后台系统每个模块的这些页面基本上风格和代码都会很接近，在少量的地方会有所变量，这里就是将这些不同或有变动的地方进行替换生成。
说到这里，我们来看看基于JS脚本控件的参数，我们看看文本控件（绿色方框标记）的源代码，是如何实现的，下图所示：

观察一下上面的html代码，以${ } 的格式都是在将参数的值进行文本替换，达到我们想要的结果，通过控制台可以看见最终生成代码如下：

<!DOCTYPE html><html><head><title>用户管理</title></head><body><div class="container"><h4>用户管理</h4><div class="card"><div id="data-table-selection-header"class="bootgrid-header container-fluid"><div class="row"><div class="col-sm-12 actionBar"><div class="pull-left" style="padding-top: 5px;"><button type="button" id="addButton" class="btn btn-default"><i class="zmdi zmdi-plus"></i> 添加</button></div><div class="pull-right" style="width:100%"><div class="pull-right" style="width: 300px;"><div class="input-group"><div class="fg-line"><input id="searchPhase" type="text" class="form-control"placeholder="请输入名称"></div><span id="searchBtn" class="input-group-addon last f-16"style="cursor: pointer;"> <i class="zmdi zmdi-search"style="font-size: 23px;"></i></span></div></div></div></div></div></div><div class="table-responsive"><table id="mcgHelperUserTable" class="table table-striped bootgrid-table"><thead><tr>                                <th data-column-id="userId" data-type="numeric" data-identifier="true" data-visible="true">自增主键</th>                                <th data-column-id="userName">用户名称</th>                                <th data-column-id="userPwd">用户密码</th>                                <th data-column-id="commands" data-formatter="commands" data-sortable="false">操作</th></tr></thead></table></div></div></div></body></html>

生成html页面就这样完成了！使用mcg-helper稍微动动手，重复的工作就这样解决了，更多教程或资讯请访问以下链接：

        mcg-helper的使用指南：http://blog.csdn.net/loginandpwd/article/details/76944900
        mcg-helper研发小助手发布v1.0.0-beta版本：http://blog.csdn.net/loginandpwd/article/details/77447363
        mcg-helper研发小助手软件介绍：http://blog.csdn.net/loginandpwd/article/details/77751566
        生成model类：http://blog.csdn.net/loginandpwd/article/details/77448277
        生成xml映射文件：http://blog.csdn.net/loginandpwd/article/details/77452902
        生成dao接口：http://blog.csdn.net/loginandpwd/article/details/77452927
        生成service接口：http://blog.csdn.net/loginandpwd/article/details/77452946
        生成serviceImpl实现类：http://blog.csdn.net/loginandpwd/article/details/77452979
        生成controller控制类：http://blog.csdn.net/loginandpwd/article/details/77452993
        生成html页面：http://blog.csdn.net/loginandpwd/article/details/77453013
        生成js文件：http://blog.csdn.net/loginandpwd/article/details/77453024

阅读全文

1 0