十八、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代码，以${  } 的格式都是在将参数的值进行文本替换，达到我们想要的结果，通过控制台可以看见最终生成代码如下：

	



	
用户管理
	

		

			

				

					

						
							 添加
						
					
					

						

							

								

									
								
								 
								
							
						
					
				
			
		
		

			

				

					

                                
自增主键
                                
用户名称
                                
用户密码
                                
操作
					
				
			
		
	
	

        生成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