From cedccae9d5103429956b4e5962fd5cbfbd9b1d2d Mon Sep 17 00:00:00 2001 From: LiuChang <3178799235@qq.com> Date: Sat, 14 Dec 2024 19:33:02 +0800 Subject: [PATCH] tijiao --- src/main/webapp/WEB-INF/jsp/look-dorm.jsp | 157 ++++++++--- .../webapp/WEB-INF/jsp/regist_visitor.jsp | 248 ++++++++++++++---- src/main/webapp/js/hLight.js | 51 +++- src/main/webapp/js/layfilter.js | 205 +++++++++++---- 4 files changed, 506 insertions(+), 155 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/look-dorm.jsp b/src/main/webapp/WEB-INF/jsp/look-dorm.jsp index 49cf3f0..67e1106 100644 --- a/src/main/webapp/WEB-INF/jsp/look-dorm.jsp +++ b/src/main/webapp/WEB-INF/jsp/look-dorm.jsp @@ -6,53 +6,136 @@ To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> + <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> - - + + + + Title + + + + - - -
-
+ + + +
+ + + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
${dorm.dorm_id}
${dorm.dorm_intro}
- - ${dorm.dorm_rps}
- - ${dorm.dorm_leader}
${dorm.teacher}
${dorm.dorm_id}
${dorm.dorm_intro}
+ + ${dorm.dorm_rps}
+ + ${dorm.dorm_leader}
${dorm.teacher}
去修改
-
- - - + + + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/jsp/regist_visitor.jsp b/src/main/webapp/WEB-INF/jsp/regist_visitor.jsp index 6bf7e92..2fef960 100644 --- a/src/main/webapp/WEB-INF/jsp/regist_visitor.jsp +++ b/src/main/webapp/WEB-INF/jsp/regist_visitor.jsp @@ -6,74 +6,191 @@ To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> + <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> - - + + + + + + + + + + 来访登记 - + + + + + - + + - + - + - + - + - - - -
+ + + +
学生来访登记 -
- -
+ + +
+
-
- 姓名： - -
-
- 学号： - -
-
- 手机： - -
-
- 楼宇： + +
+ 姓名： + + +
+ +
+ 学号： + + +
+ +
+ 手机： + + +
+ +
+ 楼宇： +
+ 备注： + +
+ +
-
- - - + if (${logout_msg!= null &&!(logout_msg.trim().equals(""))}) { + // 使用 JSP 表达式语言（EL）进行条件判断，判断名为 logout_msg 的变量是否不为 null 并且去除两端空白字符后不为空字符串，如果满足该条件，则执行以下代码块，此处可能是用于处理注销相关的提示信息显示逻辑 + layer.msg(${logout_msg}); + // 使用 layer 插件弹出提示框，显示 logout_msg 变量对应的消息内容，向用户展示相关提示信息（例如注销成功或失败等提示） + } + if (${error_msg!= null &&!("".trim().equals(error_msg))}) { + // 同样使用 EL 表达式进行条件判断，判断名为 error_msg 的变量是否不为 null 并且去除两端空白字符后不为空字符串，如果满足条件，则执行以下代码块，此处可能是用于处理其他错误相关的提示信息显示逻辑 + layer.msg(${error_msg}); + // 使用 layer 插件弹出提示框，显示 error_msg 变量对应的消息内容，向用户展示相应的错误提示信息（例如表单提交失败等错误提示） + } + + + diff --git a/src/main/webapp/js/hLight.js b/src/main/webapp/js/hLight.js index 4dc7bac..a7879b8 100644 --- a/src/main/webapp/js/hLight.js +++ b/src/main/webapp/js/hLight.js @@ -1,53 +1,90 @@ -function highlight(s,id) { - if(s.length == 0) { +function highlight(s, id) { + // 判断传入的字符串s的长度是否为0，如果长度为0，表示可能不需要进行高亮相关操作了，执行以下代码块 + if (s.length == 0) { + // 通过document.getElementById方法根据传入的id获取对应的DOM元素，并将其赋值给变量obj，后续会对这个元素的innerHTML内容进行处理 var obj = document.getElementById(id); + // 使用正则表达式替换obj元素innerHTML中的内容，目的是去除已经存在的带有"highlight"类名的标签，只保留其内部的文本内容， + // 正则表达式 /([^<>]*)<\/span>/gi 用于匹配包含"highlight"类名的标签及其内部的非尖括号内容（通过 ([^<>]*) 捕获），并将匹配到的内容替换为捕获的内部文本内容（通过 $1 引用捕获组） var t = obj.innerHTML.replace(/([^<>]*)<\/span>/gi, "$1"); + // 将处理后的文本内容重新赋值给obj元素的innerHTML属性，实现去除已有高亮标签的效果 obj.innerHTML = t; + // 返回false，表示在这种字符串长度为0的情况下，没有进行实际的搜索和高亮操作 return false; } + // 调用内部定义的encode函数，对传入的字符串s进行编码处理（主要是对一些特殊字符进行转义等操作，从函数内部实现可以看到具体转义的字符），并将结果重新赋值给s s = encode(s); + // 通过document.getElementById方法根据传入的id获取对应的DOM元素，赋值给变量obj，后续会基于这个元素来查找匹配的文本并进行高亮显示操作 var obj = document.getElementById(id); + // 同样使用正则表达式替换obj元素innerHTML中的内容，去除已有的带有"highlight"类名的标签，只保留其内部文本内容，与前面长度为0时的处理类似，目的是先清理之前可能存在的高亮标记，准备进行新的高亮操作 var t = obj.innerHTML.replace(/([^<>]*)<\/span>/gi, "$1"); + // 将清理后的文本内容重新赋值给obj元素的innerHTML属性 obj.innerHTML = t; + // 调用内部定义的loopSearch函数，传入经过编码处理的字符串s和获取到的DOM元素obj，这个函数会递归地在DOM元素及其子元素中查找匹配的文本内容，并返回匹配到的次数，将返回的结果赋值给变量cnt var cnt = loopSearch(s, obj); - t = obj.innerHTML + // 获取obj元素当前的innerHTML内容，并赋值给变量t，后续会基于这个内容再次进行处理，添加高亮显示的标签 + var t = obj.innerHTML + // 定义一个正则表达式r，用于匹配之前在文本中标记好的需要高亮显示的位置（通过 {searchHL} 和 {/searchHL} 包裹的内容），以便后续将其替换为带有"highlight"类名的标签来实现可视化的高亮效果 var r = /{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g + // 使用正则表达式r对变量t（即obj元素的innerHTML内容）进行替换操作，将匹配到的用 {searchHL} 和 {/searchHL} 包裹的内容替换为带有"highlight"类名的标签包裹的内容，实现文本的高亮显示效果，然后将替换后的结果重新赋值给变量t t = t.replace(r, "$1"); + // 将添加了高亮显示标签后的文本内容重新赋值给obj元素的innerHTML属性，使得页面上对应的DOM元素中的文本呈现出高亮显示的效果 obj.innerHTML = t; + // 定义一个名为encode的内部函数，用于对传入的字符串进行编码处理，主要是对一些在正则表达式中有特殊含义或者HTML中有特殊用途的字符进行转义，防止出现意外的匹配或解析问题 function encode(s) { + // 使用字符串的replace方法，通过正则表达式匹配并替换相应的特殊字符，将 & 替换为 & （HTML实体编码转义），< 替换为 < （防止被解析为HTML标签开头），> 替换为 > （同理防止被解析为HTML标签结尾）， + // 对于正则表达式中有特殊含义的字符（如 \、.、*、[、]、(、)、$、^ 等），在其前面添加 \ 进行转义，使其在后续作为正则表达式内容时能按字面意思进行匹配，最后将处理后的字符串返回 return s.replace(/&/g, "&").replace(//g, ">").replace(/([\\\.\*\[\]\(\)\$\^])/g, "\\$1"); } + // 定义一个名为decode的内部函数，与encode函数作用相反，用于对经过编码的字符串进行解码还原操作，将转义后的字符恢复为原来的字符形式 function decode(s) { + // 使用字符串的replace方法，通过正则表达式匹配并替换相应的转义字符，将前面添加了 \ 转义的字符（如 \[ 等）还原为原来的字符（去除前面的 \ ）， + // 然后将 > 替换为 > ，< 替换为 < ，& 替换为 & ，恢复字符串中这些特殊字符的原始形式，最后将处理后的字符串返回 return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g, "$1").replace(/>/g, ">").replace(/等），通过循环遍历它的子节点（使用childNodes属性获取子节点列表）， + // 对于每个子节点c，判断如果其不存在className属性或者className属性不等于"highlight"（即不是已经处理过的高亮显示的节点），则递归调用loopSearch函数在这个子节点中继续查找匹配内容，并将返回的匹配次数累加到变量cnt中 + for (var i = 0, c; c = obj.childNodes[i]; i++) { + if (!c.className || c.className!= "highlight") { cnt += loopSearch(s, c); } } + // 循环结束后，将统计好的匹配次数cnt返回，这个cnt就是整个DOM元素及其所有子元素中匹配到传入字符串s的总次数 return cnt; } + // 定义一个名为replace的内部函数，它用于在给定的文本节点dest中查找与传入字符串s匹配的文本内容，并进行替换操作，将匹配的内容用特定标记包裹起来（后续会进一步处理为高亮显示的标签），同时返回匹配到的次数 function replace(s, dest) { + // 根据传入的字符串s创建一个正则表达式对象r，设置全局匹配模式（g标志），用于在文本节点中查找所有匹配的内容 var r = new RegExp(s, "g"); + // 初始化一个变量tm，用于存储通过正则表达式匹配到的结果，初始值设为null var tm = null; + // 获取文本节点dest的nodeValue属性（即文本节点中的文本内容），赋值给变量t，后续会基于这个文本内容进行查找和替换操作 var t = dest.nodeValue; + // 初始化一个变量cnt，用于记录匹配到的次数，初始值设为0 var cnt = 0; - if(tm = t.match(r)) { + // 使用match方法在文本t中查找所有与正则表达式r匹配的内容，如果匹配到了（即tm不为null），则执行以下代码块 + if (tm = t.match(r)) { + // 将匹配到的次数（即tm数组的长度，因为match方法返回的数组包含了所有匹配到的内容）赋值给变量cnt，记录匹配的次数 cnt = tm.length; + // 使用replace方法对文本t进行替换操作，将匹配到的内容替换为用 {searchHL} 和 {/searchHL} 包裹起来，并且内部通过decode函数对匹配的字符串s进行解码还原后的内容， + // 这样就标记好了需要后续处理为高亮显示的文本位置，然后将替换后的结果重新赋值给文本节点dest的nodeValue属性，实现文本内容的初步替换标记 t = t.replace(r, "{searchHL}" + decode(s) + "{/searchHL}") dest.nodeValue = t; } + // 将记录的匹配次数cnt返回，供外部调用的函数（如loopSearch函数）获取并进一步处理（比如累加统计总的匹配次数等） return cnt; } } \ No newline at end of file diff --git a/src/main/webapp/js/layfilter.js b/src/main/webapp/js/layfilter.js index e109d5c..af5dd3c 100644 --- a/src/main/webapp/js/layfilter.js +++ b/src/main/webapp/js/layfilter.js @@ -1,147 +1,242 @@ -layui.define(['jquery', 'layer'], function (exports){ +layui.define(['jquery', 'layer'], function (exports) { + // 获取layui框架中引入的jQuery模块，并将其赋值给变量$，方便后续使用jQuery的相关功能，如DOM操作、AJAX请求等 var $ = layui.jquery; + // 创建一个空对象chekedArr，用于存储一些被选中的数据相关信息（从后续代码推测可能是记录过滤组件中被选中的选项等情况），其结构和具体用途会在后续代码中逐渐清晰 var chekedArr = {}; + // 创建一个名为layfilter的对象，用于封装与查询过滤组件相关的一系列功能方法，比如初始化组件、获取选中值、绑定事件等操作 var layfilter = { - render:function(options){ + // 定义名为render的方法，用于渲染查询过滤组件，该方法接收一个名为options的参数，参数中应该包含了组件渲染所需的各种配置信息，如请求数据的URL、筛选条件等 + render: function (options) { + // 从传入的options参数中获取名为url的属性值，该值可能是用于获取过滤组件数据的接口地址，后续根据这个地址来发起数据请求 var url = options.url; + // 定义一个布尔变量flag，并初始化为true，用于标记数据获取及组件渲染过程中的一些状态，比如数据获取是否成功等情况，后续会根据不同情况修改这个值来控制流程 var flag = true; - //传入了地址，则直接将此地址覆盖 - if(url){ - $.getJSON(url,options.where,function(res){ - if(res.code == 0){ - var data = res.data; + // 判断如果传入的url属性存在（即有值），则执行以下代码块，意味着如果配置了数据请求地址，就按照这个地址去获取数据来渲染组件 + if (url) { + // 使用jQuery的$.getJSON方法发起一个GET类型的AJAX请求，请求的URL就是前面获取到的url，同时传入options.where作为请求参数（可能是一些筛选条件等数据），请求成功后的回调函数用于处理返回的数据 + $.getJSON(url, options.where, function (res) { + // 判断返回数据中的code属性是否等于0，如果等于0通常表示请求成功，数据正常获取到了，可以进行后续的组件渲染等操作 + if (res.code == 0) { + // 从返回的数据中获取名为data的属性值，这应该就是实际用于渲染组件的数据源，例如包含了各种过滤选项的数据列表等内容 + var data = res.data; + // 此处疑似拼写错误，将flase（应该是想写false）赋值为true，不过从逻辑上推测可能是想重置某个用于判断的标志位，但这个变量名错误可能会导致意想不到的问题，先按照正确的逻辑理解此处应该是设置一个表示数据获取成功等相关含义的标志为true flase = true; - layfilter.init(options,data); - }else{ - layer.msg(res.msg||'查询过滤组件数据异常',{icon:2}); + // 调用layfilter对象自身的init方法，传入options和获取到的data数据，进行查询过滤组件的初始化操作，将数据展示在页面上形成可交互的过滤组件 + layfilter.init(options, data); + } else { + // 如果返回数据中的code属性不等于0，表示请求出现异常，比如服务器端返回错误等情况，使用layer弹出提示框显示相应的错误信息，优先显示res.msg中的内容，如果res.msg不存在则显示默认的提示信息'查询过滤组件数据异常'，同时设置提示框的图标为2（通常表示错误图标） + layer.msg(res.msg || '查询过滤组件数据异常', {icon: 2}); + // 将flag标志位设置为false，表示数据获取或处理出现问题，后续可能根据这个标志来决定是否继续进行组件渲染等操作 flag = false } }) } - if(!flag){ + // 判断如果flag为false（即前面的数据获取或处理出现问题了），则直接使用return语句结束当前函数的执行，不再进行后续可能的组件渲染等操作 + if (!flag) { return; } }, - init:function(options,dataSource){ + // 定义名为init的方法，用于初始化查询过滤组件，接收两个参数，options包含了组件的各种配置信息，dataSource则是具体要展示在组件中的数据列表等数据源信息 + init: function (options, dataSource) { + // 从options参数中获取名为elem的属性值，该值可能是一个DOM元素的选择器或者DOM元素本身，用于指定查询过滤组件在页面中要挂载的位置，后续会将生成的组件内容添加到这个元素内 var elem = options.elem; + // 使用jQuery根据elem选择器（或者传入的就是DOM元素本身）获取对应的DOM元素，并赋值给变量$dom，方便后续对这个挂载元素进行操作，比如添加子元素等 var $dom = $(elem); + // 从options参数中获取名为itemWidth的属性值，从变量名推测可能是用于设置组件中每个选项元素的宽度相关信息，后续会根据这个值来进行宽度的具体设置 var itemWidth = options.itemWidth + // 创建一个空对象arr，同样从后续代码推测可能是用于临时存储一些与组件选项相关的数据结构，具体用途会随着代码执行逐渐清晰 var arr = {}; + // 使用jQuery创建一个元素，并添加类名"filterTable"，这个表格元素将用于构建查询过滤组件的可视化布局，后续会往里面添加行、列以及具体的选项内容 var $table = $('
'); - for(var i=0;i'); - var $td1 = $(''+dataSource[i].title+':'); + // 开始循环遍历数据源dataSource，dataSource应该是一个数组，里面每个元素代表一组过滤选项数据等相关内容，循环是为了逐个处理并展示这些数据到组件中 + for (var i = 0; i < dataSource.length; i++) { + // 使用jQuery创建一个元素，代表表格中的一行，用于放置一组过滤选项的相关标题和具体选项内容，后续会将这行添加到前面创建的表格$table中 + var $tr = $(''); + // 使用jQuery创建一个元素，作为表格的单元格，添加类名"item-title"，并将当前数据源中对应元素的title属性值（应该是这组过滤选项的标题名称）添加到单元格内作为文本内容，用于展示这组选项的标题 + var $td1 = $('' + dataSource[i].title + ':'); + // 使用jQuery创建另一个元素，添加类名"items"，这个单元格将用于放置具体的过滤选项内容（如单选框、复选框等选项列表），后续会将构建好的选项列表添加到这个单元格内 var $td2 = $(''); + // 从当前数据源中对应元素获取名为type的属性值，该值可能用于指定这组过滤选项的类型，比如是单选、复选等类型，后续会根据这个类型来构建不同样式和交互逻辑的选项元素 var type = dataSource[i].type; - if(!type){ - console.warn('第'+(i+1)+'个元素的类型[type]为空设为默认值[radio]'); + // 判断如果type属性不存在（即为空），则在控制台输出警告信息，提示第几个元素的类型[type]为空，并将其默认设置为'radio'（单选类型），以保证组件能正常构建，避免因类型未定义出现错误 + if (!type) { + console.warn('第' + (i + 1) + '个元素的类型[type]为空设为默认值[radio]'); type = 'radio'; } - var $ul = $('
    '); - var width = itemWidth && itemWidth.length>0 ? (itemWidth.length>i ? itemWidth[i]:itemWidth[itemWidth.length-1]):80; - arr[dataSource[i].name]=[]; - for(var j=0;j元素，添加类名"layfilter-ul"，并设置type和name属性，type属性使用前面获取到的（或者默认设置的）选项类型值，name属性则使用当前数据源中对应元素的name属性值（可能用于唯一标识这组选项等用途），这个