一、示例简介
该示例通过xml配置数据源，在其xsl样式模板中配置数据源的展示模板,从而达到数据和页面模板解耦,降低前端和后端开发的依赖，相比于传统的HTML+CSS的实现页面模板展示，数据和模板解耦层度更加明显。该示例主要实现列表页面、新增修改页面。
二、代码&演示
1. 列表页面实现（index.xml+list.xsl）
index.xml代码,在href在关联展示模板list.xsl - 将xml数据用xsl的模板进行展示
<?xml version='1.0'?>@b@<?xml-stylesheet type="text/xsl" href="list.xsl"?>@b@<articles>@b@ <article>@b@ <id name="主键">11111111</id>@b@ <title name="标题">java代码烦烦烦</title>@b@ <tag name="标签">java json</tag>@b@ <column name="栏目">java</column>@b@ <img name="图片icon">图片地址111</img>@b@ <description name="描述">随碟附送...</description>@b@ <content name="内容">随碟附送方法地方撒飞洒发生发顺丰</content>@b@ <author name="作者">倪俊</author>@b@ <time name="时间">2013-08-03</time>@b@ <url name="内链接">http://localhost/detail.html</url>@b@ </article>@b@ <article>@b@ <id name="主键">2222222</id>@b@ <title name="标题">c是如何生存</title>@b@ <tag name="标签">c c++</tag>@b@ <column name="栏目">c++</column>@b@ <img name="图片icon">图片地址222</img>@b@ <description name="描述">随碟附送...</description>@b@ <content name="内容">fsdfsdfssdfsddsf</content>@b@ <author name="作者">倪俊</author>@b@ <time name="时间">2013-08-03</time>@b@ <url name="内链接">http://localhost/detail.html</url>@b@ </article>@b@</articles>
list.xsl - 模板样式
<?xml version='1.0'?>@b@<xsl:stylesheet version="1.0"@b@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">@b@@b@<xsl:template match="/">@b@ <HTML>@b@ <head>@b@ <style>@b@ *{margin:0; padding:0; list-style:none;} @b@ body {margin:0; padding:0;font:normal 14px/21px Verdana;text-align:center;font-family:"Microsoft YaHei","SimSun","Arial Narrow";}@b@ div{margin:0 auto;padding:0px;}@b@ .rr{border:1px solid red;}@b@ @b@ .heads{height:60px;line-height:60px;vertical-align:middle;@b@ border-bottom:1px double #000000;@b@ text-align:left;color:#1A00FF;padding-left:10px;}@b@ @b@ .cons{width:100%;margin-top:10px;margin-left:2px;}@b@ .cons div{float:left;}@b@ .cons .clists{width:64%;}@b@ .cons .clists .clist{width:99%;margin-bottom:10px;margin-left:8px;border:1px dotted #000000;} @b@ .cons .clists .clist:hover{background:#FFFFC1;}@b@ .cons .clists .clist li{text-align:left;width:100%;color:#1A00FF;padding:0 8px 0 8px;}@b@ @b@ .cons .ctags{width:26%;margin-left:12px;}@b@ .cons .ctags div{width:100%;}@b@ .cons .ctags .searchBar{height:44px;}@b@ .cons .ctags .searchBar input{margin-top:6px;width:70%;border:1px dotted #000;} @b@ .cons .ctags .searchBar span{font-size:12px;margin-left:8px;background:#1A00FF;@b@ color:#fff;height:18px;width:30px;} @b@ .cons .ctags .searchBar span:hover{background:#1A00FF;}@b@ @b@ .cons .ctags .ctag{width:100%;text-align:left;padding-left:14px;}@b@ .cons .ctags .ctag span{background:#1A00FF;margin:0px 8px 4px 0px;color:#fff;text-decoration:underline;}@b@ @b@ .footer{text-align:left;margin-top:30px;margin-left:12px;clear:both;}@b@ .footer span{font-size:12px;text-decoration:underline;margin:0px 12px 4px 0px;}@b@ </style>@b@ </head>@b@ <BODY>@b@ <div class="heads"><h1>我的知识库</h1></div>@b@ @b@ <div class="cons">@b@ <div class="clists">@b@ <xsl:for-each select="articles/article">@b@ <div class="clist">@b@ <ul>@b@ <xsl:apply-templates select="title" />@b@ <xsl:apply-templates select="tag" />@b@ <xsl:apply-templates select="description" />@b@ </ul>@b@ </div>@b@ </xsl:for-each>@b@ </div>@b@ <div class="ctags">@b@ <div class="searchBar"><input type="text"/><span>搜索</span></div>@b@ <div class="ctag"><span>java</span> <span>css</span></div>@b@ </div>@b@ </div>@b@ @b@ <div class="footer">@b@ <span>收藏本站</span>@b@ <span>设为首页</span>@b@ <span>关于本站</span>@b@ <span>导航地图</span>@b@ <span>订阅本页</span>@b@ </div>@b@ </BODY>@b@ </HTML>@b@</xsl:template>@b@@b@<xsl:template match="title">@b@ <li>@b@ . <xsl:apply-templates />@b@ </li>@b@</xsl:template>@b@@b@<xsl:template match="tag">@b@ <li > <xsl:apply-templates /> </li>@b@</xsl:template>@b@@b@<xsl:template match="description">@b@ <li> <xsl:apply-templates /> </li>@b@</xsl:template>@b@</xsl:stylesheet>演示效果
2. 新增&修改页面（edit.xml+edit.xsl）
edit.xml
<?xml version='1.0'?>@b@<?xml-stylesheet type="text/xsl" href="edit.xsl"?>@b@<eroot/>
edit.xsl
<?xml version='1.0'?>@b@<xsl:stylesheet version="1.0"@b@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> @b@<xsl:template match="/">@b@ <HTML>@b@ <head> @b@ <script charset="utf-8" src="kindeditor-min.js"></script>@b@ <script charset="utf-8" src="lang/zh_CN.js"></script>@b@ <style>@b@ *{margin:0; padding:0; list-style:none;} @b@ body {margin:0; padding:0;font:normal 14px/21px Verdana;text-align:center;font-family:"Microsoft YaHei","SimSun","Arial Narrow";}@b@ div{margin:0 auto;padding:0px;}@b@ .rr{border:1px solid red;}@b@ .clr{clear:both;}@b@ @b@ .heads{height:60px;line-height:60px;vertical-align:middle;@b@ border-bottom:1px double #000000;@b@ text-align:left;color:#1A00FF;padding-left:10px;}@b@ @b@ .cons{width:100%;margin-top:10px;margin-left:2px;}@b@ .cons .ebody{margin-top:18px;float:left;width:98%;margin:0 auto;padding:0px;margin-bottom:10px;}@b@ .cons .ebody li{margin:0 auto;padding:0px;width:82%;text-align:left;height:40px;line-height:40px;vertical-align:middle;}@b@ .cons .ebody div li{float:left;height:100%;}@b@ .cons .ebody div ._tit{width:12%;text-align:left;}@b@ .cons .ebody div ._input{width:86%;}@b@ .cons .ebody div ._input input{height:32px;width:50%;border:1px solid #1A00FF} @b@ .cons .ebody div ._input input:hover{background:#ECEBFE;}@b@ ._submit{width:80px;height:32px;border:1px solid #1A00FF;background:#fff;}@b@ ._submit:hover{background:#ECEBFE;}@b@ @b@ </style>@b@ <script>@b@ var editor;@b@ KindEditor.ready(function(K) {@b@ editor = K.create('textarea[name="content"]', {@b@ allowFileManager : true@b@ });@b@ K('input[name=getHtml]').click(function(e) {@b@ alert(editor.html());@b@ });@b@ K('input[name=isEmpty]').click(function(e) {@b@ alert(editor.isEmpty());@b@ });@b@ K('input[name=getText]').click(function(e) {@b@ alert(editor.text());@b@ });@b@ K('input[name=selectedHtml]').click(function(e) {@b@ alert(editor.selectedHtml());@b@ });@b@ K('input[name=setHtml]').click(function(e) {@b@ editor.html('<h3>Hello KindEditor</h3>');@b@ });@b@ K('input[name=setText]').click(function(e) {@b@ editor.text('<h3>Hello KindEditor</h3>');@b@ });@b@ K('input[name=insertHtml]').click(function(e) {@b@ editor.insertHtml('<strong>插入HTML</strong>');@b@ });@b@ K('input[name=appendHtml]').click(function(e) {@b@ editor.appendHtml('<strong>添加HTML</strong>');@b@ });@b@ K('input[name=clear]').click(function(e) {@b@ editor.html('');@b@ });@b@ });@b@ </script>@b@ </head>@b@ <BODY>@b@ <div class="heads"><h1>我的知识库</h1>>注册内容</div>@b@ @b@ <div class="cons">@b@ @b@ <div class="ebody">@b@ <li> @b@ <div>@b@ <li class="_tit">标题：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">所属栏目：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">标签：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">更新日期：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">作者：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">图片附件：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="_tit">描述：</li>@b@ <li class="_input"><input/></li>@b@ </div>@b@ <div>@b@ <li class="clr">内容：</li>@b@ <li >@b@ <textarea name="content" style="width:800px;height:600px;visibility:hidden;"></textarea>@b@ </li>@b@ </div>@b@ <div>@b@ <li class="_tit"> </li>@b@ <li ><input type="submit" value="注册完成" class="_submit"/></li>@b@ </div>@b@ </li>@b@ </div>@b@ @b@ </div> @b@ </BODY>@b@ </HTML>@b@ </xsl:template> @b@</xsl:stylesheet>演示效果