JSP实用教程简易页面编辑器的实现方法(附源代码)

序

实现一个简单的页面编辑器是每个人在学习jsp时经常遇到的需求。发现网上方便的资料不多，想总结一下自己。详细介绍了JSP简易页面编辑器的实现方法。我们来看看详细的介绍：

要求

提供放置“帮助”和“版权”文本内容的页面。特点：静态页面，无需读取数据库，只需处理频繁变化的文字；没有复杂的交互，没有JavaScript；没有图片，没有文件上传。

给出的方案：提供一个页面和简单的后台管理，功能单一，只需编辑页面(只需修改字体、大小、粗体、斜体等即可。).实现思路：纯jsP显示，用HTTP Basic登录管理界面，通过一个用JS编写的HTML编辑器修改页面内容。直接修改服务器磁盘文件。

界面如下，右侧显示后台编辑。

值得一提的是，Tomcat 7下JSP的默认Java语法仍然是1.6。将Java 1.7特性嵌入到JSP中将抛出一个“这里不允许1.7以下的源代码级别使用资源规范”的异常。因此，需要在Tomcat/conf/web.xml中修改配置文件，找到servlet节点(servlet-namejsp/servlet-name)，并添加下面最后两个init-param节点。注意servlet-namejsp/servlet-name节点，而不是默认节点(非常相似)。

servlet servlet-name JSP/servlet-name servlet-class org . Apache . jasper . servlet . jspservlet/servlet-class init-Param Param-name fork/Param-name Param-value false/Param-value/init-Param init-Param-Param-namexpoweredBy/Param-name Param-value false/Param-value/init-Param init-Param-Param-namecopilersourcevm/Param-name Param-value 1.7/Param-value/admin/action.jsp用于接收保存的动作，数据由表单进行POST。functions.jsp全是业务逻辑代码，不能通过% @ inclusive file=' functions . JSP ' % '由外部url单独访问。

我们先来看看/index.jsp。

% @ pagepagecoding=' utf-8 ' % html head title help/title metacarset=' utf-8 '/！-width 320 px-meta name=' viewport ' content=' width=320，user-scale=0，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0 '/style html { font-size 3360 15px；} body { padd : 0；margin: 0 auto最大宽度： 600 px；-web kit-font-smooth :抗锯齿；font-family : ' Microsoft YaHei '，' ff-tisa-web-pro-1 '，' ff-tisa-web-pro-2 '，' Lucida Grande '，' Hiragino Sans GB '，' Hiragino Sans GB W3 '，Arial背景-color : # ebeb；} h1 { text-align : center；font-size : 1.5 rem；字母间距2pxcolor: # 864c24border-bottom : # e0c 494 solid 1px；padd : 2% 0；} H2 { font-size : 1 rem；字母间距1pxcolor: # 4c4c4c填充-bottom :0；margin : 0；} p { text-align : align；font-size : 1 rem；color: # 818181余量： 1% 0；保证金-top :0；} ol { padd : 0；margin : 0；} ol { } oll : first-child {/*让Firefox将列表标记放在内部*//* https://bugzilla.mozilla.org/show_bug.cgi? id=36854“如果列表样式位置在内部，项目符号采用自己的行”*/display : inline；} olli : first-child : after {/*添加丢失的边距w/display : inline */* Firefox 10将此显示为block *//* Safari 5.1.2和Chrome 17.0.963.56不要*/content :“”；display:块；} Li { padd : 5% 2%；列表样式-内部位置：border-bottom: 1px实心# dddddb} .text { color : # A8 A8；font-size : 1 rem；font-weight:粗体；划水：2%；}/风格/头身！-可编辑区域|START - h1帮助/h1 div class='text '常见问题/div ol li h2Power TV，费用是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p/Li Li 2电源电视的资费是如何收取的？/h2 p12元Power TV手机电视按月订阅，产品代码888888，12元/月；省内用户使用省内3G/月定向流量，流量仅用于使用Power TV。超过定向流量的部分按标准资费收取；/p /li /ol！-Editable AREA | END-/body/html html这个JSP和普通的JSP没什么区别，但是你有没有注意到两个注意事项：-可编辑区域|开始-和！-可编辑区域|END - ——这是我们约定的“可编辑”范围。当然，只要定义了范围，就可以使用自定义的HTML标记。网页无非就是HTML。

对于要编辑的内容，我们可以定义一个范围来指示在哪里编辑。为什么不让所有页面都可以编辑？这是因为我们不希望用户编辑页面的其他部分，如果修改后的关键地方出现错误就不好了。

好了，怎么让这个/index.jsp编辑呢？就是用Java读取磁盘。在此之前，您必须登录/admin/index.jsp。这里，我们通过HTTP Basic Authorization进行用户身份验证，无需数据库。如果您需要修改帐户密码，请打开admin/functions.jsp并编辑标题：

%!公共静态最终字符串userid='admin '，pwd=' 123123.调试HTTP Basic Authorization时遇到了一个小问题，那就是浏览器弹出对话框，不知如何修改提示文本，尝试了好几种方法，要么不显示，要么乱码。如果你懂童鞋，请告诉我一两个！

Action.jsp也应该对认证进行限制，否则就会成为一个漏洞，允许其他人将任何数据发布到页面上。

% @ page page encoding=' UTF-8 ' % % % @ include file=' functions . JSP“% % if(checkAuth(request . getheader(' Authorization ')，userid，pwd)){ request . setcharacterencoding(' utf-8 ')；if (request.getMethod()。equalsIgnoreCase(' POST '){ String content body=request . getparameter(' content body ')，path=Mappath(getEditJSP(request))；system . out . println(' path : '路径)；save_jsp_fileContent(路径，content body)；Out.println('scriptalert('修改成功！');window . location=document . referrer；/script ')；} else { out.println('方法错误')；}} else {%html正文非法登录！/body /html%}%修改页面，点击【保存】修改页面。

如何编辑HTML？答案必须是每个人都清楚的。你可以使用HTML可视化编辑器，这是在线的，而不是Dreamweaver，FrontPage，VS Web等等。老人用FCKEditror和TinyMCE编辑器。这几年他们好像都喜欢用国产的，所以不知道。现在这个是我自己写的，功能比较简单。

核心逻辑由以下代码完成。

% @页页面编码=' UTF-8 '导入=' sun。杂项base64解码器。io。* %!公共静态最终字符串userid='admin '，pwd=' 86006966//检查超文本传送协议基本认证/** * 是否空字符串* * @ param str * @ return */public static boolean isEmptyString(String str){ return str==null | | str。trim().isEmpty()；} /** * 是否不合法的数组* * @ param arr * @ return */public static boolean isBadArray(String[]arr){ return arr==null | | arr。长度！=2;} /** * * @param授权*认证后每次超文本传送协议请求都会附带上批准头信息* @param用户名*用户名* @param密码*密码* @返回真=认证成功/false=需要认证*/public静态布尔checkAuth(字符串授权、字符串用户名、字符串密码){ if (isEmptyString(授权))返回falsestring[]BasiCarray=授权。拆分(' \ \ s ')；if (isBadArray(basicArray))返回错误的字符串idpass=null尝试{ byte[] buf=new BASE64Decoder().decadebuffer(basi carray[1])；idpass=new String(buf，' UTF-8 ')；} catch(IOexception e){ e . print stack trace()；返回false} if (isEmptyString(idpass))返回false string[]idpassArray=id pass。拆分(' : ')；if (isBadArray(idpassArray))返回错误的返回用户名。equalsignorase(idpassArray[0])密码。equalsignorase(idpassArray[1])；} /** * 可编辑标识开始*/私有最终静态字符串startToken='！-可编辑区域|开始-';/** * 可编辑标识结束*/私有最终静态字符串endToken='！-可编辑区域|结束-';/** * 根据页面中可编辑区域之标识，取出来* * @param fullFilePath *完整的jsp文件路径* @返回可编辑内容* @抛出IOException */公共静态String read _ JSP _ file内容(字符串完整文件路径)抛出IOException { String JSP _ file内容=读取文件(完整文件路径)；int start=JSP _ file内容。(开始标记)的索引，结束=JSP _ file内容。(结束标记)的索引；尝试{ JSP _ file内容=JSP _ file内容。子字符串(start starttoken。长度()，结束)；} catch(StringIndexOutOfBoundsException e){ JSP _ file content=null；字符串msg='页面文件"完整文件路径"中没有标记可编辑区域之标识。请参考：“startToken”/“endToken”；抛出新的IOexception(msg)；}返回jsp _ fileContent} /** *请求附带文件参数，将其转换真实的磁盘文件路径* * @param rawFullFilePath *网址提交过来的磁盘文件路径，可能未包含文件名或加了很多全球资源定位器(统一资源定位符)参数* @返回完整的磁盘文件路径*/静态字符串getFullPathByRequestUrl(字符串rawFullFilePath){ if(rawFullFilePath。indexof(').JSP ')===-1)rawFullFilePath='/index。JSP '；//加上扩展名if (rawFullFilePath.indexOf('？') !=-1) //去掉全球资源定位器(统一资源定位符)参数rawFullFilePath=rawFullFilePath。全部替换(' \ \？*$', '');返回rawFullFilePath} /** *保存要修改的页面* * @param rawFullFilePath *真实的磁盘文件路径* @param newContent *新提交的内容* @抛出IOException */public static void save _ JSP _ file内容(String rawFullFilePath，String newContent)抛出IOException { String fullFilePath=getFullPathByRequestUrl(rawFullFilePath)；//真实的磁盘文件路径字符串JSP _ file内容=read文件(完整文件路径)，toDel _ file内容=read _ JSP _ file内容(完整文件路径)；//读取旧内容//系统。出去。println(JSP _ file内容)；//系统。出去。println(ToDel _ FileContent)；if (toDel_fileContent！=null){ JSP _ file内容=JSP _ file内容。替换(ToDel _ file内容，新内容)；save2file(fullFilePath，JSP _ file内容)；//保存新内容} else {抛出新的' IOException('页面文件中没有标记可编辑区域之标识。

请参考：startToken/endTpoken ')；} } /** * 读取文件* * @ param文件名* @ return * @抛出IOException */公共静态字符串readFile(字符串文件名)抛出IOException {文件文件=新文件(文件名);if(！file.exists())引发新的FileNotFoundException(文件名)不存在!');try(file inputstream is=new file inputstream(文件);){字符串行=空；StringBuilder结果=new StringBuilder()；尝试(InputStreamReader是reader=new InputStreamReader(是，‘UTF-8’)；BufferedReader读取器=新的BufferedReader(IsReader)；){ while ((line=reader.readLine())！=null) { result.append(行);结果。追加(' \ n ')；} } catch(IOException e){ system。呃。println(e)；}返回结果。tostring()；} catch(IOexception e){ system。呃。println('讀取文件流出錯！文件名);扔e；} } /** * 写文件不能用FileWriter，原因是会中文乱码* * @ param文件名* @ param内容* @抛出IOException */public static void save 2文件(字符串文件名，字符串内容)抛出IOException { try(文件输出流输出=新文件输出流(文件名);//OutputStreramWriter将输出的字符流转化为字节流输出（字符流已带缓冲)OutputStreamWriter writer=new OutputStreamWriter(out，‘UTF8’)；){作家。写(内容)；} catch(IOexception e){ system。呃。println('写入文件文件名失败');扔e；} } /** * 输入一个相对地址，补充成为绝对地址相对地址转换为绝对地址，并转换斜杠* * @param relativePath *相对地址* @返回绝对地址*/公共字符串映射路径(字符串相对路径){字符串绝对地址=getServletContext().getRealPath(相对路径)；//绝对地址如果（绝对地址！=null)绝对地址=绝对地址。替换(' \\ '，'/')；返回绝对地址；}公共字符串getEditJSP(HttpServletRequest请求){字符串uri=request.getRequestURI().replaceAll('admin/\\w '，' index ')；uri=uri。替换(请求。getcontextpath()，' ')；返回uri} %用户凭账号密码登入简易的后台，通过可视化编辑器即可修改页面内容，立刻修改，立刻产生效果，简单快捷——把页面开放出来允许自主编辑这样会提高效率——减少来回修改的次数。

完整的源代码下载：http://xiaozai.jb51.net/201707/yuanma/JSP-page(jb51.net)

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。