WebUI页面结构

1. WebUI 总体结构一套典型的WebUI系统其文件结构遵循清晰的模块化划分各目录各司其职、相互配合构成完整的前端运行体系。具体结构如下html/存放页面HTML模板定义各页面的基础结构是页面呈现的核心载体。js/panel/对应各页面的前端控制器负责处理页面的加载、数据交互、事件响应等核心逻辑。js/base/包含通用工具函数如AJAX请求封装、布局处理、XML解析、通用校验等为各页面提供基础支撑。xml/用于定义UI菜单配置驱动菜单的展示、层级关系及页面关联。xmldata/存储各业务模块的XML数据模板约定前后端数据交互的结构规范。properties/多语言资源文件存放不同语言的文案实现系统的多语言适配。css/样式文件目录包含全局样式、页面专用样式统一页面视觉风格。后端applet或CGI处理代码负责模块注册、前端请求接收、数据获取与保存是前后端交互的桥梁。2. 新增一个页面需要改哪些地方在现有WebUI系统中新增一个页面需完成前端各模块的配置与开发若涉及数据读写还需联动后端进行模块注册。具体需接入的内容如下页面HTML定义页面结构、输入控件及交互区域为JS控制器提供绑定基础。页面JS控制器实现页面加载、数据读写、表单校验、提交反馈等核心逻辑。页面JS脚本引用在入口页引入新增页面的JS控制器确保菜单点击时能正常实例化页面对象。菜单配置在XML菜单中注册新增页面关联页面对象与业务模块。数据模板XML若页面需读写数据需定义对应的数据模板约定前后端数据结构。多语言文案在多语言资源文件中补充页面相关文案如菜单名、标题、按钮文字等。后端模块处理函数若页面需读写后端数据需注册后端处理函数负责数据的获取与保存。页面样式优先复用全局样式必要时新增页面专用样式保证视觉一致性。补充说明若页面仅展示静态内容可省略后端数据模块相关操作若页面需要读写配置则必须完成前后端的全流程对接。3. 步骤一新增页面 HTML页面HTML的核心职责是定义页面的基础结构为后续的JS交互和样式渲染提供载体具体需包含以下内容定义页面整体结构划分标题区、表单区、按钮区、错误提示区等核心区域。定义必要的输入控件如input文本输入、select下拉选择、textarea多行输入等。预留标题、分组标题、错误提示和按钮区域确保页面布局清晰、交互逻辑明确。为各元素分配唯一id用于与JS控制器绑定实现事件响应和数据回填。以下是一个通用的页面HTML结构示例htmllabel idtitle classtitle/labeldiv classformBoxlabel idlGroupTitle classsubttl1/labeldiv classformRowlabel idlField1 forfield1/labelinput idfield1 typetext //divdiv classformRowlabel idlField2 forfield2/labelselect idfield2/select/div/divdiv alignrightspan classbtnWrpinput typebutton idbtUpdate valueSave onclicksetData() //span/divdiv aligncenterlabel idlError classerror styledisplay:none;/label/div4. 步骤二新增页面 JS 控制器每个页面通常对应一个独立的JS控制器对象该对象封装了页面的所有交互逻辑是页面与后端、页面与用户交互的核心。通用页面对象通常包含以下核心方法实现页面的全生命周期管理loadHTML()将页面HTML模板加载到系统的内容展示区域完成页面的初始渲染。setXMLName(xmlName)保存当前页面关联的业务模块名用于后续数据读写时关联后端模块。onLoad()页面初始化方法负责加载HTML、初始化多语言文案、读取后端数据并完成表单回填。onPost()数据提交方法负责收集表单数据、进行数据校验、组装XML数据并提交到后端。onPostSuccess()提交成功后的回调方法通常用于页面刷新、提示用户操作成功等。以下是通用页面对象的结构示例javascript(function ($) {$.fn.objPageName function (initKey) {var xmlName ;function localize() {// 标题、标签、选项、按钮本地化从多语言文件中读取文案并赋值}function isValid() {// 表单校验逻辑判断输入内容是否合法返回布尔值return true;}this.loadHTML function () {document.getElementById(Content).innerHTML ;document.getElementById(Content).innerHTML callProductHTML(html/module/page.html);};this.onLoad function () {var xml;this.loadHTML();localize();xml getData(xmlName);// 从xml中解析字段并回填到表单$(#field1).val($(xml).find(field1).text());$(#field2).val($(xml).find(field2).text());};this.onPost function () {var mapData new Array(0);var index 0;if (!isValid()) {return;}// 把表单字段组装成XML映射mapData g_objXML.putMapElement(mapData, index, RGW/module/field1, $(#field1).val());mapData g_objXML.putMapElement(mapData, index, RGW/module/field2, $(#field2).val());// 提交XML数据到后端postXML(xmlName, g_objXML.getXMLDocToString(g_objXML.createXML(mapData)));};this.onPostSuccess function () {// 提交成功后刷新页面重新加载数据this.onLoad();};this.setXMLName function (_xmlName) {xmlName _xmlName;};return this.each(function () {});};})(jQuery);5. 步骤三在入口页中引入页面 JS新增页面控制器后需在系统主入口页通常为index.html中引入该JS脚本否则菜单点击时无法找到对应的页面对象导致页面无法正常加载。引入方式如下需确保脚本路径与实际文件路径一致htmlscript typetext/javascript srcjs/panel/module/page.js/script6. 步骤四在菜单配置中注册页面WebUI菜单通常由XML或JSON文件驱动其中XML配置是最常用的形式。新增页面需在菜单XML中注册关联菜单项、页面对象与业务模块确保菜单点击时能正确实例化页面对象并加载页面。菜单XML的通用配置示例如下xmlTab NametModule typesubmenupresentMenuesMenu idmPageConfig implFunctionobjPageName xmlNamemodule_config //Menues/Tab各配置字段的含义如下id菜单项唯一标识同时通常作为多语言文案的key用于匹配多语言文件中的菜单名称。implFunction前端页面对象名必须与JS控制器中定义的对象名如上述示例中的objPageName完全一致否则无法实例化页面。xmlName当前页面关联的业务模块名必须与后端注册的模块名、数据模板XML的模块名一致用于前后端数据交互时的模块匹配。注意事项implFunction、xmlName与对应模块的命名必须严格一致否则会导致页面无法加载或数据交互失败id需在多语言文件中配置对应的显示文案确保菜单正常显示。7. 步骤五增加数据模板 XML若新增页面需要读取或提交后端配置数据必须定义对应的XML数据模板该模板用于约定前后端数据交互的结构明确数据的层级关系和字段名称确保前后端数据解析一致。数据模板XML的通用示例如下xml?xml version1.0 encodingUS-ASCII?RGWmodule_configfield1 /field2 /field3 //module_config/RGW数据模板的核心作用定义业务模块的数据结构明确字段名称和层级关系。约定前后端数据交互的格式避免因数据结构不统一导致解析失败。为页面表单字段提供统一的组织形式方便数据的读取、回填和提交。8. 步骤六补充多语言文案为实现系统的多语言适配新增页面的所有文案包括菜单名、页面标题、字段标签等都需补充到多语言资源文件properties格式中确保不同语言环境下页面文案正常显示。需补充的文案类型如下菜单名称对应菜单XML中id字段的值。页面标题对应HTML中标题元素的文案。分组标题页面中表单分组的标题文案。字段标签输入控件对应的提示文案。下拉选项文案select控件的选项内容。错误提示表单校验失败时的提示文案。按钮文字提交、取消等按钮的显示文案。多语言文案的通用示例如下propertiestModule ModulemPageConfig ConfigurationtitlePageConfig Configuration PagelGroupTitle Basic SettingslField1 Field 1lField2 Field 2lErrorInvalid Invalid valuebtUpdate Save9. 步骤七补充页面样式新增页面时应优先复用系统已有的全局样式如表单样式、标题样式、按钮样式等避免样式冗余和视觉不一致。仅在页面布局与全局样式存在差异时补充少量页面专用样式遵循以下建议优先复用全局样式减少重复代码降低维护成本。页面专用样式仅用于解决布局差异避免引入复杂、难维护的CSS代码。样式命名遵循系统统一规范确保代码可读性和可扩展性。页面专用样式示例如下css.page-row {display: flex;flex-wrap: wrap;gap: 16px 24px;}.page-item {width: 180px;}10. 步骤八后端注册模块处理函数若新增页面需要读写后端数据必须在后端注册对应的模块处理函数用于接收前端的GET读取数据和SET保存数据请求完成数据的读取与保存。后端模块注册通常采用数组形式通用结构如下以C语言为例cconst struct applet_info g_webui_applets[] {{.di_modname module_config,.di_version 1,.di_handler_post_get_func module_config_get,.di_handler_post_set_func module_config_set,},};各字段含义如下di_modname业务模块名必须与前端菜单配置中的xmlName、数据模板XML中的模块名完全一致用于前后端模块匹配。di_version模块版本号用于版本管理和兼容性控制。di_handler_post_get_func处理前端GET请求的函数负责从后端配置源读取数据并组装XML返回给前端。di_handler_post_set_func处理前端SET请求的函数负责接收前端提交的XML数据、校验数据合法性并保存到配置源。注意若未注册后端模块处理函数前端虽然能发送请求但后端无法识别模块导致数据读取或保存失败。