页面自动生成工具设计_html/css
2020-11-27
来源：小奈知识网
页面自动生成工具设计
1功能概述1.1使用术语
页面自动生成工具：自定义查询条件以及数据显示的一种页面生成工具1.2功能说明
页面自动生成工具是按照工程人员的需求定义查询条件以及数据显示方式的一种工具，数据显示可以用表格和图表的方式：查询统计以表格的方式显示数据，趋势页面以图表方式显示页面。1.2.1查询统计页面
查询统计页面的设置如下图："设置数据集"：整个查询统计显示数据的完整sql语句。
"查询条件设置":写完sql语句后点击"设置查询条件"按钮，将sql语句中的参数带入条件设置中。其中"显示顺序"确定了在生成的页面中该条件显示的顺序;"参数名称"对应sql中的参数;"参数显示名称"确定该参数在查询统计页面上的提示名称;"控件类型"可以确定该参数在页面上的控件(文本框，时间框，下拉框),控件类型会在1.2.4节中说明。
"显示设置":控制sql查询出的数据有哪些列需要显示。" 是否显示"控制该列是否显示；"列名称"对应数据列，"列显示名称"控制该列显示的列头。
"保存":点击"保存"按钮，会把页面的信息才存入数据库以便下次读取。
"预览":点击"预览"可以查看上面的页面设置是否正确。
最终生成的页面效果如下：
其中开始时间大于，开始时间小于选择的是时间控件，回路ID选择的是下拉框控件：SELECT numCircuitID,varCircuitName from WD_Circuit;
1.2.2趋势页面
趋势页面的设置如下图："设置数据集"：整个查询统计显示数据的完整sql语句。
"查询条件设置":写完sql语句后点击"设置查询条件"按钮，将sql语句中的参数带入条件设置中。其中"显示顺序"确定了在生成的页面中该条件显示的顺序;"参数名称"对应sql中的参数;"参数显示名称"确定该参数在查询统计页面上的提示名称;"控件类型"可以确定该参数在页面上的控件(文本框，时间框，下拉框),控件类型会在1.2.4节中说明。
"显示设置":控制sql查询出的数据有哪些列需要显示。" 是否显示"控制该列是否显示；"显示位置"确定该列作为x轴或者y轴（只能有一个x轴），"列名称"对应数据列，"列显示名称"是对该列的说明。
"保存":点击"保存"按钮，会把页面的信息才存入数据库以便下次读取。
"预览":点击"预览"可以查看上面的页面设置是否正确。
最终生成的页面效果如下：
其中开始时间，开始时间选择的是时间控件，表ID选择的是下拉框控件：select numTableID,varIP from WD_Table;列ID选择的是下拉框控件：SELECT numColID,varCName from WD_Column;
1.2.3增删查找页面
增删查找页面设计如下图："主数据库":增删查找所操作的数据表
"设置查询条件"：点击该按钮可以查询出所需要操作数据表的所有字段。
"修改设置":"显示顺序"控制查询条件和查询出的数据的显示顺序;"主键"是该表的主键：在更新(update)和删除(delete)时作为条件(where);"是否修改"控制在更新(update)和插入(insert)时是否修改该字段;"查询条件":表示该参数是否作为查询条件;"参数"是该字段对应表的字段;"查询参数名称"是该参数作为查询参数的字符串;"参数显示名称"是作为查询条件的参数的界面提示名称;"控件类型"可以确定该参数在页面上的控件(文本框，时间框，下拉框),控件类型会在1.2.4节中说明。
"保存":点击"保存"按钮，会把页面的信息才存入数据库以便下次读取。
"预览":点击"预览"可以查看上面的页面设置是否正确。
最终生成的页面效果如下：
1.2.4控件类型
控制选择条件时的控件类型：文本框,下拉框,时间控件。文本框：默认的控件类型
下拉框:输入sql语句来确定下拉框中的显示数据（SELECT numCircuitID,varCircuitName from WD_Circuit;）：第一列是下拉框的value，第二列是下拉框的text.
时间控件：用于时间的选择
2模块设计
2.1页面自动生成工具模块划分
页面自动生成工具将设计保存到数据库，也可以将数据库中的设计读取出来修改，其他系统读取数据库中的设计自动生成页面。2.2数据相关设计
页面自动生成工具的设计最终以json格式存储数据2.2.1查询统计页面
json如下：{
"dataTable":"select numRefID,datStart d1,numCircuitID from WD_CircuitParents where datStart BETWEEN ':start:' and ':end:' and numCircuitID=':numCircuitID:'",
"pageType":"query",
"condition": [
{ "order": "1", "name": ":start:", "showName": "开始时间大于", "control": "DateTimePicker", "controlData": "" },
{ "order": "2", "name": ":end:", "showName": "开始时间小于", "control": "DateTimePicker", "controlData": ""},
{ "order": "3", "name": ":numCircuitID:", "showName": "回路ID", "control": "dropdownlist", "controlData": "select numCircuitID,varCircuitName from WD_Circuit" }
]，
"show": [
{ "isShow": "1", "name": "numRefID", "showName": "ID" },
{ "isShow": "1", "name": "d1", "showName": "开始时间"},
{ "isShow": "1", "name": "numCircuitID", "showName": "回路ID"}
]}
dataTable：页面显示数据的sql
pageType：页面类型（admin：管理页面, trend:趋势页面，query：查询统计页面）
condition：查询条件：“order”是条件显示顺序，“name”是该条件对应sql语句中的字符串，“showName”是该条件的提示名称，“control”是条件适宜的控件，“controlData”是条件控件的值集合
show：表格数据显示：“isShow”该列是否显示，“name”该列对应列名，“showName”该列显示的列头
2.2.2趋势页面
json如下：{
"dataTable":"select datBuild,varValue,numColID,numTableID from WD_TableData WHERE datBuild BETWEEN ':start:' and ':end:' numTableID=:numTableID: and numColID=:numColID:;",
"pageType":"trend",
"condition": [
{ "order": "1", "name": ":start:", "showName": "开始时间", "control": "DateTimePicker", "controlData": "" },
{ "order": "2", "name": ":end:", "showName": "结束时间", "control": "DateTimePicker", "controlData": ""},
{ "order": "3", "name": ":numTableID:", "showName": "表ID", "control": "dropdownlist", "controlData": "select numTableID,varIP from WD_Table" },
{ "order": "4", "name": ":numColID:", "showName": "列ID", "control": "dropdownlist", "controlData": "select numColID,varCName from WD_Column" }
]，
"show": [
{ "isShow": "x", "name": "datBuild", "showName": "时间" },
{ "isShow": "y", "name": "varValue", "showName": "值"},
{ "isShow": "", "name": "numColID", "showName": "列ID"},
{ "isShow": "", "name": "numColID", "showName": "表ID"}
]}
dataTable：页面显示数据的sql
pageType：页面类型（admin：管理页面, trend:趋势页面，query：查询统计页面）
condition：查询条件：“order”是条件显示顺序，“name”是该条件对应sql语句中的字符串，“showName”是该条件的提示名称，“control”是条件适宜的控件，“controlData”是条件控件的值集合
show：表格数据显示：“isShow”在x轴或者y轴显示数据，“name”该列对应列名，“showName”该列显示的列头
2.2.3增删查找页面
json如下：{
"dataTable":"select * from WD_User",
"pageType":"admin",
"condition": [
{"order": "1","key":"1","modify":"0","show":"0","name": "numUser", "showName": "用户ID", "control": "text", "controlData": ""},
{"order": "2","key":"0","modify":"1","show":"1","name": "varUserName", "showName": "用户名称", "control": "text", "controlData": ""},
{"order": "3","key":"0","modify":"1","show":"1","name": "varLoginName", "showName": "登录名", "control": "text", "controlData": ""},
{"order": "4","key":"0","modify":"0","show":"0","name": "varPassword", "showName": "密码", "control": "text", "controlData": ""},
{"order": "5","key":"0","modify":"1","show":"1","name": "datCreate", "showName": "创建时间", "control": "DateTimePicker", "controlData": ""},
{"order": "6","key":"0","modify":"1","show":"1","name": "numOrganizeID", "showName": "机构", "control": "dropdownlist", "controlData": "SELECT numOrganizeId,varOrganizeName from WD_Organize"},
{"order": "7","key":"0","modify":"1","show":"1","name": "numPositionId", "showName": "职位", "control": "dropdownlist", "controlData": "SELECT numPositionId,varPositionName from WD_Position"}
]}
dataTable：页面显示数据的sql
pageType：页面类型（admin：管理页面, trend:趋势页面，query：查询统计页面）
condition：查询条件："order": 控制查询条件和查询出的数据的显示顺序,"key":是否作为主键,"modify":控制在更新(update)和插入(insert)时是否修改该字段,"show":是否作为查询条件,"name": 该参数作为查询参数的字符串, "showName":作为查询条件的参数的界面提示名称, "control": 可以确定该参数在页面上的控件(文本框，时间框，下拉框), "controlData": 默认数据
页面的增删查找sql如下：
INSERT into WD_User(varUserName,varLoginName,datCreate,numOrganizeID,numPositionID) VALUES(:varUserName:,:varLoginName:,:datCreate:,:numOrganizeID:,:numPositionID:)
UPDATE WD_User SET varUserName=:varUserName:,varLoginName=:varLoginName:,datCreate=:datCreate:,numOrganizeID:numOrganizeID:,numPositionID=:numPositionID: where numUserID=:numUserID:
DELETE from WD_User where numUserID=:numUserID:
3接口设计 4系统性能设计 5系统出错处理
显示全文