秋色园QBlog技术原理解析：Module之基类生命周期-页面加载(七)

亦凉 2022-01-14 11:23 57阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

**文章回顾：**

1： [秋色园QBlog技术原理解析：开篇：整体认识(一)][QBlog] \--介绍整体文件夹和文件的作用

2： [秋色园QBlog技术原理解析：认识整站处理流程(二)][QBlog 1] \--介绍秋色园业务处理流程

3： [秋色园QBlog技术原理解析：UrlRewrite之无后缀URL原理(三)][QBlog_UrlRewrite_URL] \--介绍如何实现无后缀URL

4: [秋色园QBlog技术原理解析：UrlRewrite之URL重定向体系(四)][QBlog_UrlRewrite_URL 1] \--介绍URL如何定位到处理程序

5: [秋色园QBlog技术原理解析：Module之页面基类设计(五)][QBlog_Module] \--介绍创建基类和自定义生命周期

6: [秋色园QBlog技术原理解析：Module之页面基类-生命周期流程(六)][QBlog_Module_-] --介绍基类生命周期内部业务

**ps：[秋色园QBlog][QBlog 2]**下载地址：[http://www.cyqdata.com/download/article-detail-427][http_www.cyqdata.com_download_article-detail-427]

**从上节中，我们详细的解析了页面基类各个生命周期内部的业务逻辑：**

包括如下图的Page\_PreLoad部分流程代码，仅供参考：

![05233336_e2N0.jpg][]

**本节将从上图逻辑中独取一瓢，为你解析秋色园[QBlog][QBlog 2]的html页面加载原理:**

**一：秋色园[QBlog][QBlog 2]：ashx+html架构**

**[秋色园][QBlog 2]，目前没有使用javascript，故无法使用ajax请求结果再进行html修改方式（即html+js+ashx方式）。**

**于是乎，通过ashx加载html页面，就不加思索的出来了。**

**常见有以下2种加载方式：**

**1：IO加载**

优点：加载方便，加载后当成string文本处理。

缺点：内容填充较为复杂，需要自定义一套模板语法，再用正则分析替换，该方式多用在CMS开发。

**2：将html当成Xml文档加载**

优点：以Dom对象操作内容，节点填充方式，操作简便。

缺点：加载时需要处理细节较多:如严格的标签要求、DTD文档解析、名称空间、多文档间的节点替换处理等。

**秋色园 [QBlog][QBlog 2] 采用了第二种方式：因为用此方式还有另一种好处是：**

**不用自定义一套模板语法，也不用正则，仅需1个id，即可取得节点，以Xml方式进行修改或填充。**

**二：[秋色园][QBlog 2]QBlog的html加载原理**

**1：常见的XmlDocument**

普通加载示例：

System.Xml.XmlDocument doc = new System.Xml.XmlDocument();  
            try  
            \{  
                doc.Load("xml文件路径");//加载  
                string html = doc.InnerXml;//取内部xml  
            \}  
            catch  
            \{  
            \}

带有名称空间时，增加两行代码：

System.Xml.XmlDocument doc = new System.Xml.XmlDocument();  
            try  
            \{  
                XmlNamespaceManager xnm = new XmlNamespaceManager(xmlDoc.NameTable);  
                xnm.AddNamespace("pre", "http://www.w3.org/1999/xhtml");//加载html中的名称空间

doc.Load("xml文件路径");//加载  
                string html = doc.InnerXml;//取内部xml  
            \}  
            catch  
            \{  
            \}

**其它重点注意事项：**

1：解析实体，需指定dtd头：如html中的&nbsp;实体属性。

2：默认html的dtd指向远程：[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]

如果直接用远程进行解析，将有几秒的延时时间，这肯定是不被人们接受的。

因此，将其下载到本地，将并路径定位到本地解析，则可以消除延时的情况。

**2：将Html当成xml，XmlHelper出手极简单**

只要把上面几点都处理好了，操作html和操作xml也就没有两样了。

[CYQ.Data][].Xml名称空间下的XmlHelper类，对Xml/html操作进行了简单的封装，使其操作Xml/Html简单的快出人命。

如：加载Html

CYQ.Data.Xml.XmlHelper doc = new XmlHelper(true);  
            if (doc.Load("xml文件路径"))  
            \{  
                string html = doc.xmlDoc.InnerXml;//取内部xml  
            \}

**三：示例，加载秋色园 [QBlog][QBlog 2] 的健康频道**

步骤如下：

**1：Copy[秋色园][QBlog 2]健康频道的样式过去**

**2：Copy[秋色园][QBlog 2]DTD下载的文档过去**

**3：web.Config配置好DTD解析路径**

然后如下图所示：

![05233337_lU2J.jpg][]

**4：完成对语言文件language和index.html的加载，代码如下：**

![05233338_ehqo.jpg][]

**5：CSS和图片路径重定向放行处理**

由于在上节的示例中，我们重定向了所有的URL，于是样式和图片也将被重定向。

在UrlRewrite里，简单的加一行判断，先过滤掉css和img：

![05233339_gjJV.jpg][]

**6：CSS和IMG路径增加前缀处理**

![05233339_x2m9.jpg][]

由于是示例，html样式路径就直接写死了。

**7：最后输出html**

![05233340_X13e.jpg][]

OK，一切就绪。

**8：F5访问页面，结果截图：**

![05233340_iSFA.jpg][]

**总结：**

**本节主要解析了秋色园[QBlog][QBlog 2]加载html并显示的处理过程，同时附加了一点CSS和图片的处理方式。**

**下节，将为你解析[秋色园][QBlog 2]QBlog具体内容的填充的方式，敬请关注。**

**最后是示例下载：[![05233341_zaYL.gif][] UrlRewrite\_LoadHtml.rar][05233341_zaYL.gif_ UrlRewrite_LoadHtml.rar]**

转载于:https://my.oschina.net/secyaher/blog/274140

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/e4e2013394fa4fbabe8d6e890de6bdd9.png
[QBlog]: http://www.cyqdata.com/qblog/article-detail-25090
[QBlog 1]: http://www.cyqdata.com/qblog/article-detail-25166
[QBlog_UrlRewrite_URL]: http://www.cyqdata.com/qblog/article-detail-25284
[QBlog_UrlRewrite_URL 1]: http://www.cyqdata.com/qblog/article-detail-25358
[QBlog_Module]: http://www.cyqdata.com/qblog/article-detail-25538
[QBlog_Module_-]: http://www.cyqdata.com/qblog/article-detail-28598
[QBlog 2]: http://www.cyqdata.com/
[http_www.cyqdata.com_download_article-detail-427]: http://www.cyqdata.com/download/article-detail-427
[05233336_e2N0.jpg]: /images/20220114/d5f3e71e4f744606ae92ebfeb710ada6.png
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[CYQ.Data]: http://www.cyqdata.com/cyqdata
[05233337_lU2J.jpg]: /images/20220114/2ab4986416dc4714b810d6fec982ae4e.png
[05233338_ehqo.jpg]: /images/20220114/bdc8707bea754d319f451ef0cc133c41.png
[05233339_gjJV.jpg]: /images/20220114/6e65df334dd246bb808e29f040bb9c27.png
[05233339_x2m9.jpg]: /images/20220114/23fe92d971b34c5c860ae34b664a82c8.png
[05233340_X13e.jpg]: /images/20220114/54d22636026346a5a2d6f6e0ed00b69f.png
[05233340_iSFA.jpg]: /images/20220114/19e631d597e44d7690fea98f1b6b3f0c.png
[05233341_zaYL.gif]: /images/20220114/343307af36714a9bb01452926c3f1cc2.png
[05233341_zaYL.gif_ UrlRewrite_LoadHtml.rar]: http://www.cyqdata.com/qblog/article-detail-28672