以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XSL/XSLT/XSL-FO/CSS 』  (http://bbs.xml.org.cn/list.asp?boardid=8)
----  [原创]剖析CSDN论坛的XML页面(一)  (http://bbs.xml.org.cn/dispbbs.asp?boardid=8&rootid=&id=10812)


--  作者:doubleG
--  发布时间:10/8/2004 12:56:00 PM

--  [原创]剖析CSDN论坛的XML页面(一)
                             剖析CSDN论坛的XML页面(一)[原创]
                                           作者:doubleG
                                            2004-10-08
    XML+XSL也是近几年大家才开始关注的数据与表示分离的的方式,在国外已经有了不错的应用,但在国内可能应用的范围还不是很广泛。就我自己来看,最早看到的此类应用当然是CSDN的论坛贴子显示页面了。可能大多数朋友都和我一样,第一次看到以.xml后缀名结尾的页面显示时更多的好奇,在查看页面源码时看到的只是一个一个包含着数据的标签,怎么回事呢?当然现在这些都已不再神奇,大家都知道这是XSL的作用。
    为什么要用XML来保存数据呢?数据库不是更好吗?呵呵,我们自己的做的小页面估计不会超过一百个人同时浏览,但是CSDN就不一样了啊。没有哪个程序员不知道CSDN的吧,成千上万的人都去访问,他的数据库再厉害估计也是够呛啊。用XML其实就是提供了一个类静态页面的方式,因为我们去打开它的页面时,链接地址是个XML文件,浏览器会先吧XML文件Down下来,然后根据文件中提供的XSL的地址找到XSL然后进行解析再将解析生成的页面展现给我们。在CSDN上有人戏称,这样做是为大多数潜水爱好者准备的,不无道理啊。
    很多人都想知道xsl怎样去构造一个那样美妙的东西,其实一切都不困难。你只要掌握了XSLT的部分功能和一些Html的知识就可以了。你知道一些MSXMLDOM的知识?那就更好了,让我们一步一步的把CSDN的页面剖开来看看。你不是懂很多?也不要紧,这是初学者们学习的好东东哦,只用最基础的语法结构就能搭建起来。你知道<xsl:value-of select="..."/>吧,你也了解xsl:template和xsl:call-template吧,行了,足够了。让我们来
把CSDN的xml页面来动手实现吧!
    CSDN的论坛页面我把它分为三个部分,问题主题、回复显示和提交回复。用xslt解析的只是前两部分,那么第三部分是什么呢?呵呵,暂不是我们讨论的重点。下面我们看一下CSDN存放贴子内容的一个XML文件的事例:
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type='text/xsl' href='Topic.xsl'?>
<Topic>
 <Issue>
  <PostUserNickName>随风</PostUserNickName>
  <rank>1</rank>
  <ranknum>user1</ranknum>
  <credit>100</credit>
  <TopicId>3420145</TopicId>
  <TopicName>在线等待XML问题(服务端接收)</TopicName>
  <PostUserId>449974</PostUserId>
  <PostUserName>mazying99</PostUserName>
  <RoomName>Web服务 XML/SOAP</RoomName>
  <ReplyNum>2</ReplyNum>
  <PostDateTime>2004-9-29 23:55:18</PostDateTime>
  <Point>50</Point>
  <ReadNum>6</ReadNum>
  <RoomId>306</RoomId>
  <EndState>0</EndState>
  <Content><![CDATA[.....]]></Content>
 </Issue>
 <Replys>
  <Reply>
   <PostUserNickName>坐行八万里</PostUserNickName>
   <rank>1</rank>
   <ranknum>user1</ranknum>
   <credit>100</credit>
   <ReplyID>24484920</ReplyID>
   <TopicID>3420145</TopicID>
   <PostUserId>40078</PostUserId>
   <PostUserName>guiqing</PostUserName>
   <Point>0</Point>
   <Content><![CDATA[.....]]></Content>
   <PostDateTime>2004-9-30 7:52:03</PostDateTime>
  </Reply>
</Replys>
</Topic>
    当然我把主题和回复内容给省略了,大家可以看到Topic是整个XML文件的主节点,其下有两个孩子节点:Issue和Replys。
    OK,显而易见Issue存放的是提出的问题和作者以及时间等相关信息;Replys存放着一个个的回复。
    首先我们先分析一下Issue节点,多数节点不用解释都一目了然。这里需要注意的是<rannum/>节点。user1的user是指等级较低的也就是大家看到的三角符号(数字标明了几个符号),如果等级高的话就是star1也就是一颗五角星。为什么存放着有表示等级的<rank/>又在<ranknum/>中最后一位也用数字标等级?可能是因为在数据库中还有者相关信息吧。其实仔细分析大家就可以发现,那些三角、五角星都是一张张图片,OK!它们文件名是什么呢?就是<ranknum/>的Text值加上后缀.gif。呵呵,比如显示一个三角的图片就是user1.gif。这样在用xslt解析时,就能够直接提供给图片信息,岂不是一举两得。Content节点用CDATA来存放就不用多说了。
  我们来看看发布主题部分的实现:
  开头:
  <?xml version="1.0" encoding="UTF-8"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
  我是用的是XMLSpy,生成的是.xsl文件,所以就给多加了一个fo的名称空间,我们不管它。因为我们要生成的是html文件,(注意:XML+XSL生成的页面默认的是UTF的编码),如果要指定编码格式,我们应该紧接着写上一句:<xsl:output method="html" encoding="GB2312"/>。因为解析时默认情况是生成XML或HTML,所以也可以指定生成的文件类型。
    我们继续:
      <xsl:template match="Topic">
         <html>
           <link rel="stylesheet" href="topic.css" type="text/css"/>
             <xsl:apply-templates select="Issue"/>
             <xsl:apply-templates select="Replys"/>
             <xsl:call-template name="SetReplyFrame"/>
          </html>
      </xsl:template>

    这个就是我们的Main函数,入口就在这里了。为什么不用match="/"呢,因为我们主要就是顾着Topic这个节点,其余的根本不需要去管它。match="/"并没有匹配Topic,这点要注意!
    为了让我们的网页好看些,当然要用上CSS样式表的喽(我的审美观很差的啦)呵呵。直接使用<link rel="stylesheet" href="topic.css" type="text/css"/>在解析过程中会直接将该条语句输出到html页面,这也就是我们为什么可以使用html的标签。
    <xsl:apply-templates select="Issue"/>这句标明对于Issue可以去匹配已有可用的模版。这里有的人就有疑问了,以前你不是说apply-templates只是匹配子节点吗?这里怎么又成了Issue一个了啊。是的,如果在xsl:apply-templates中没有使用select属性,那么就是匹配当前节点下的所有孩子节点,但是如果使用了select那么就是处理所选取得节点。
  从这个模版中大家已经清楚地看到,我把整个页面分成了三块儿了吧。后面我会给大家详细介绍各个部分的实现,这篇是个奠基部分,刚开始没有构思好就动手些了,以后我会写清楚些的。(源码过两天放上)
    文章写的我自己读着都罗嗦的受不了,下次一定精简...

(未完待续)


[此贴子已经被作者于2004-10-8 17:21:01编辑过]

--  作者:卷积内核
--  发布时间:10/8/2004 5:10:00 PM

--  
大力支持!!学习中~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
--  作者:chirac
--  发布时间:10/9/2004 9:51:00 AM

--  
继续吧,俺等的好急了呢~
特别要好好讲讲不同的人怎么显示不同的头像,俺这个很不明白(在csdn是不同的人的等级显示不同的星星数量)
--  作者:doubleG
--  发布时间:10/11/2004 9:08:00 AM

--  
“在csdn是不同的人的等级显示不同的星星数量“这个在文章中已经提到了啊,是有个元素控制的就是<ranknum/>啊,每个人的得分是保存在数据库中的,所以当你的分数达到一定的数量时,就会更改你的<ranknum/>,那样你的图片自然也就跟着变了啊。这两天休息,文章今天继续写,呵呵
--  作者:chirac
--  发布时间:10/14/2004 12:30:00 AM

--  
哈哈,对不起拉,俺没留意看帖子就先回复了,没办法,俺是编程新手,发现好的资料都先保存、回复,,慢慢再看的~~~嘿嘿
待续待续呢~~

想问一下,用装spy时候附装的 Stylesheet Designer 编 xsl 好呢,还是用spy编好呢?


--  作者:anchen0617
--  发布时间:10/19/2004 11:10:00 AM

--  
我在上面的内容里复制了一段代码,另存了一下可是会出现错误,不知道为什么?楼主可不可以解释一个呢?
--  作者:anchen0617
--  发布时间:10/19/2004 11:14:00 AM

--  
我是学编程的,我做了一个网站,网址是www.han.te8.com   有兴趣可以看一下

--  作者:doubleG
--  发布时间:10/19/2004 11:17:00 AM

--  
我已经把我写的源码放上去了,你可以参照一下。
http://bbs.xml.org.cn/dispbbs.asp?boardID=8&ID=10907
--  作者:myding
--  发布时间:10/25/2004 7:34:00 PM

--  

老大快点吧,我都急死啦,想知道的兄弟快顶呀


--  作者:topfans
--  发布时间:5/4/2005 9:16:00 PM

--  
关注ing .........
--  作者:lazyy
--  发布时间:11/14/2005 11:44:00 AM

--  
太谢谢了啊,感动啊!楼主多辛苦一点吧。
--  作者:huangshirock
--  发布时间:11/16/2005 10:40:00 AM

--  
thanks!!!!!!!!
--  作者:avavolcano
--  发布时间:12/8/2005 4:22:00 PM

--  
高人,受教了!
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
93.750ms