Java Web：静态页面可视化编辑的一个思路（待续）

最新推荐文章于 2024-07-02 06:15:57 发布

weixin_34194551

最新推荐文章于 2024-07-02 06:15:57 发布

阅读量453

点赞数

文章标签： java 数据库运维

原文链接：https://yq.aliyun.com/articles/320783

版权

一点思路

这里说的静态页面，并不完全是 *.htm/*.html 结尾的网页文件，而是指无须访问数据库的页面，只是存储介质直接换成了计算机磁盘文件就完事了而不是保存在数据库，相对而言较显得“静态”。纯 *.html 固然可以被这样编辑——实际上 *.jsp 有动态内容的文件仍可遵循该思路。

一份网页，无非是 HTML。对于其中欲编辑的东西，我们定义一个范围指明哪些地方需要编辑，就可以了。但前后分离的设计下，很多 HTML/JSP 都是模板，是否把内容都嵌入到模板去呢？这肯定有反分离的原则的。不过我们可以利用强大的 JSP 自定义标签技术（参见之前的博文《JSP Tag Files 技术总结》），进一步实现模板和正文内容的分离，实现 url 对应一份资源（也就是正文内容），模板可自由替换或适配。

前端页面

典型的，有以下一份 JSP：

<%@page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<%@taglib prefix="commonTag" tagdir="/WEB-INF/tags/common/html"%>
	<commonTag:head lessFile="/asset/less/main.less" title="活映 关于我们" />
<body>
	<%@include file="../public/nav.jsp"%>
	<div class="bannerBg">
		<div class="banner">
			<img src="../asset/images/b2_04.jpg" />
		</div>
	</div>
	<div class="contentBody">
		<%@include file="../../public/menu.jsp"%>
		<div>
			<commonTag:node type="anchor" />
			<commonTag:util type="article">
			<!-- Editable AREA|START -->
				<h1>广收互联网浪潮之效</h1>
				<p>  
					<img src="studio.gif" alt="我们的工作室" class="right" style="float:right;margin:2px 0 10px 20px" />
					工作室于二零零三年成立，初建立工作室的目的，一是希望在工作之余培养独立的事业，二是由于在公司的商业设计受时间成本和各种因素的制约，往往没有足够的时间深思熟虑做出经典作品，长久下去对设计师不利。
				</p>
				<p>
					凭借在计算机网络、系统集成、应用软件开发等多方面业务的综合实力和丰富经验，为用户提供全面的应用解决方案，提供技术咨询、调研分析、方案设计、软件开发、系统集成、用户培训、售后支持等全面服务。
					另外面向网站的网站后台管理系统能让你非常简便的管理网站的相关信息，提高与浏览者的交互能力，增进企业的形象。面向企业的软件开发，提供企业内部网和相关软件的开发服务，真正做到满足客户需求，提高企业的工作效率，助力企业发展。
					我们为您量身打造面向 WEB 2.0 或整体的开源方案，提供专业的技术支持和信息咨询服务。</p>
			<!-- Editable AREA|END -->
			</commonTag:util>
			<div style="float:right;">
				<commonTag:util type="share" />
				<commonTag:util type="adjustFontSize" />
			</div>
		</div>
	</div>
	<%@include file="../public/footer.jsp"%>
</body>
</html>

这份 JSP 与一般 JSP 并无特异，只是有没有留意到两段注释： 和  ——这就是我们约定的“可编辑”范围。当然，使用自定义的 HTML Tag 也可以，只要定义了一个范围即可。因为我们不想用户对页面其它部分进行编辑，万一修改了的关键地方造成了错误，那可不好。

至于 HTML 如何编辑？这个答案想必大家都清楚，使用 HTML 可视化编辑器即可，在线的哦，而不是什么 Dreamweaver、FrontPage、VS Web 之类啦。老人们用过的就是有 FCKEditror 呀、TinyMCE Editor，近几年好像喜欢用国产了，我就不知道了。现在我用的是自己写，功能比较单一的。

（待续……）