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

本节讲解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业务系统单表业务模块自动化生成html页面

猜你喜欢