.Net版的ExtJS單用戶Blog系統源碼解析

在講解源碼之前，這裏先簡單說說系統運行的幾個事項。雖然下載的壓縮包中已經包含了簡單的說明，但有一個重點沒有強調，也就是雖然這個系統會在啓動的時候自動創建數據庫表結構，但他是不能自動創建數據庫的，因此在啓動之前需要自己手動創建數據庫，比如VifirBlog,在後續版本中將增加自動建庫功能。

數據庫的配置是在Web.config文件中，在啓動應用程序時，需要修改Web.config文件中的數據庫配置，把用戶名及密碼根據你的情況進行修改，數據庫的配置內容如下：

</databaseSettings>

db.datasource表示數據源，默認是SQL Server的，當然你可以選擇使用MySQL、Oracle等各種數據源，其中db.user表示用戶名，db.password表示密碼，db.database表示數據庫名，db.generateDdl表示是否讓程序啓動的時候自動生成表系統所需要的表結構。db.generateDdl默認爲true，第一次運行成功後會自動建表結構，然後請手動修改成false這樣下次再啓動就不會再建表結構了。

壓縮後的文件結構是一個VS項目文件，如下圖所示：

如果你機器上安裝了VS2005(SP1)以上的版本，那麼理論上應該可以直接雙擊Vifir.Web.sln這個文件來實現在VS中打開項目（如果裝的VS版本打不開的話，那麼你就得好好想辦法了），如下圖所示：

項目打開後，大家可以直接打開Web.config文件，重點看看databaseSettings一節的配置，確認沒問題後，可以直接點擊上面的運行按鈕來運行項目。

啓動後即可進行Blog後臺管理頁面的登錄頁面，演示系統的用戶名及密碼均爲admin，直接輸入後按登錄即可進入系統。如下圖所示：

進入後可以先進入日誌目錄管理，程序主區域會出現一個還算漂亮的可編輯表格，可以點擊上面的按鈕添加日誌分類等，並在右邊的表格中直接編輯各表格薦的內容。如下圖所示：

到這裏，這個.Net版的程序就算成功跑起來了。至於系統其它的功能，你就得慢慢體驗了，用Ext做的更多實用功能（像在線聊天、在線課堂等），可以直接到[url]http://www.vifir.com/my.html[/url]中進行實地體驗。下面我們重點對本項目的代碼作簡單的解析。

由於這裏主要演示的是ExtJS與.Net結合應用，因此一個核心就是ExtJS部分，打開manage/Default.aspx中的源代碼，可以得到如下的內容：

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Vifir.Web.manage.Default" %>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[url]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd[/url]">

<head>

}{ text-decoration:none; color:#000033 }

.link{

}{

font-weight:bold;

padding:6px 0 0 -2px;

line-height:25px;

}

</style>

<title>Blog後臺管理</title>

</head>

<div style="text-align:center;padding-top:25%"><img src="../images/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading

</div>

</body>

</html>

其對應的Default.aspx.cs文件內容如下：

namespace Vifir.Web.manage

{

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!UserContext.isAdmin())//如果沒有登錄

{

Response.Redirect("login.html");//跳轉到登錄頁面

}

在manage/Default.aspx中，我們沒有引入任何特殊的服務器控件，基本上就是普通的html，注意包含了很多的js文件。其中../plugins/extjs/ext-2.0/adapter/ext/ext-base.js及../plugins/extjs/ext-2.0/ext-all.js是Ext的庫文，而manage.js、core.js、topic.js、album.js等是我們本系統中編寫的ExtJS應用文件，那些豔麗的界面都是直接在這些js文件中調用ExtJS的組件生成的。對於不熟悉Ext的朋友們來說，我推薦直接通過《ExtJS實用開發指南》來進行一個系統的學習、並且可以把《指南》作爲日常的參考書籍。而對於熟悉Ext並且希望進一步提升的朋友們來說，我建議你直接看《Wlr單用戶Blog系統源碼詳細開發文檔》，該文檔中包含了對我們這裏用到的manage.js、core.js、topic.js、album.js等文件作了較爲詳盡的講解及分析。

由於這裏是一個基於DotNet平臺的應用，因此我們重點來看看後臺管理部分。後臺管理的程序在manage目錄中，包含Album.aspx、AlbumCategory.aspx、Topic.aspx、TopicCategory.aspx、Blog.aspx、Link.aspx、User.aspx、Comment.aspx等等。經常搞Asp.Net開發的朋友一定會迫不急待的點開這些擴展名爲.aspx的文件想看過究竟，看看這些文件是如何與客戶端交付、使用了哪些控件、如何產生JSON、如何訪問數據庫、SQL語句如何寫等。但我想點開後你一定會有所失望了，因爲點開這些文件後你會發現裏面幾乎什麼東西都沒有。比如Topic.aspx文件中只包含下面一句大家平時瞟都不會瞟一眼的代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Topic.aspx.cs" Inherits="manage_Topic" %>

當然，你一定猜到我們一定把處理這些內容的東西都放下面的Topic.aspx.cs文件中了，恭喜你，完全正確！我們重點應該是看aspx下面的C#類文件，比如Topic.aspx.cs，如下圖所示：

由於每一個模塊要實現的功能本來就是相似的，使得這些代碼都是模板化的，所以你打開其它的Link.aspx.cs、User.aspx.cs、TopicCategory.aspx.cs都會看到類似的內容，只要搞懂一個，其它的舉一反三自然就都懂了。而且在實際開發中，這些代碼還真不需要用手來寫（那麼用什麼呢？當然是用機器人了，簡單寫一個代碼生成工具，替換一下名稱就給你搞定了！）。因此，下面我們來重點看看Topic.aspx.cs的源代碼，其全部內容如下：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Vifir.Model.Service;

using Vifir.Core;

using Vifir.Model.Domain;

using Vifir.Web.Code;

public partial class manage_Topic : BaseAction

{

private ITopicService service;

private ITopicCategoryService categoryService;

public ITopicService Service

{

set

{ service = value; }

}

public ITopicCategoryService CategoryService

{

set

{ categoryService = value; }

}

public void List()

{

QueryObject qo = new QueryObject();

ToPo(qo);

string categoryId = Request.Params["categoryId"];

if (categoryId != null && !"".Equals(categoryId))

{

qo.addQuery("obj.Category.id", long.Parse(categoryId), "=");

}

IPageList pageList = service.getTopicBy(qo);

jsonResult = pageList;

}

public void Remove()

{

long id = long.Parse(Request.Params["id"]);

service.delTopic(id);

jsonResult = true;

}

public void Save()

{

Topic obj = new Topic();

ToPo(obj);

string CategoryId = Request.Params["CategoryId"];

if (CategoryId != null && !"".Equals(CategoryId))

{

TopicCategory c = this.categoryService.getTopicCategory(long.Parse(CategoryId));

obj.Category = c;

}

if (!HasError())

service.addTopic(obj);

extFormResult = true;

}

public void Update()

{

long id = long.Parse(Request.Params["id"]);

Topic obj = service.getTopic(id);

ToPo(obj);

string CategoryId = Request.Params["CategoryId"];

if (CategoryId != null && !"".Equals(CategoryId))

{

TopicCategory c = this.categoryService.getTopicCategory(long.Parse(CategoryId));

obj.Category = c;

}

if (!HasError())

service.updateTopic(id, obj);

extFormResult = true;

}

Topic.aspx用來實現日誌的添加、修改、刪除、分頁查詢、排序等一系列的功能，我們可以理解爲日誌管理模塊。

前面的一大堆using我想不用多說，你應該知道就是引入需要用到的包package(或命名空間)，其中的System.XX的我想你是見多了，不會有什麼疑問，而Vifir.XX是本系統的域模型、業務邏輯層接口等，另外還包含Vifir的核心類庫，你直接像System.XX裏面的東西一樣在該用的時候使用是了。（備註：Vifir.Model是本系統的後臺業務邏輯，如果你是Vifir的VIP用戶，則應該還能夠直接下載他的源代碼，我也會在後面的文章中對Vifir.Model中的源碼進行具體的分析，Vifir.Core是Vifir提供的一個簡單Ajax、Ext支持及企業應用快速開發的開發庫，不是開源項目，但可以免費使用，所以想看他源代碼的就只有加入到Vifir團隊中才有可能了。當然，看不到也沒關係，想想我們雖然沒看到.net類庫裏面的一句代碼，還不是照樣屁顛屁顛地用着！）。

下面我們來看看類的聲明，代碼如下：

class manage_Topic : BaseAction

直接繼承自BaseAction，而不是傳統的System.Web.UI.Page，BaseAction.cs在Code目錄，直接打開可以看到下面的代碼：

public abstract class BaseAction : Vifir.Core.Web.AbstractCmdPage

{

protected new void Page_Load(object sender, EventArgs e)

{

if (!UserContext.isAdmin())

{

Response.Redirect("login.html");

}

else

{

base.Page_Load(sender, e);

}

從代碼中我們可以看出，該類繼承自Vifir.Core.Web.AbstractCmdPage，AbstractCmdPage類是從EasyJF開源團隊的EasyJWeb這個開源MVC框架中借鑑來類，用於在Vifir提供用於開發ExtJS的底層開發庫，包含了命令處理、JSON數據處理、Ext表單交互及VO轉換成PO等實用方法。如果你對這些內容感興趣，那麼歡迎你直接下載EasyJWeb(官方網址: [url]http://www.easyjf.com/easyjweb/index.html[/url])的源代碼來看看即可（其實雖然研究DotNet沒多久，但發現.Net的很多東西、特別是設計思想，有不少是得益於Java領域、特別是開源領域的貢獻），因此也勸廣大的DotNe用戶有空時了關注一下Java，他也許能讓你走在前面。

BaseAction中包含了Page_Load方法的公共實現，用來實現用戶登錄檢查的功能，這裏通過調用業務邏輯層的UserContext.isAdmin()來判斷是否登錄，如果沒有登錄則把頁面導向login.html。如果登錄，則直接調用父類（也就是AbstractCmdPage）中的Page_Load方法來處理用戶的請求。

回到Topic.aspx.cs，繼續往下看，我們可以看到service及categoryService字段及屬性的聲明，在定義Service及CategoryService屬性的時候只設置了set方法，因爲該模塊中的屬性基本上，也不可能給其它程序使用，所以不需要設置get。

下面來看List方法，該方法的簽名爲public void List()，是一個普通的方法而已，當用戶在地址欄中輸入Topic.aspx?cmd=List的時候，會調用該方法中的內容執行。該方法實現的功能是調用業務邏輯層提供的業務方法getTopicBy，來獲得日誌信息。getTopicBy方法需要一個參數，即類型爲IQueryObject的對象，該對象中包含了分頁及排序的一些相關信息。IQueryObject的一個默認實現的QueryObject，我們直接調用即可。下面是List方法中的代碼及註解：

public void List()

{

QueryObject qo = new QueryObject();//創建一個分頁查詢對象

ToPo(qo);//把前臺傳來參數，如分頁信息以對象中

string categoryId = Request.Params["categoryId"];//得到前臺傳來的categoryId參數

if (categoryId != null && !"".Equals(categoryId))

{

qo.addQuery("obj.Category.id", long.Parse(categoryId), "=");//指定只查詢某一個分類中的日誌信息

}

IPageList pageList = service.getTopicBy(qo);//調用業務邏輯層的getTopicBy方法來查詢日誌，該方法返回的是一個包含了數據分頁及內容的IPageList對象。

jsonResult = pageList;//把返回的結構保存到jsonResult中，並作爲JSON數據輸出。

}

整個方法的代碼如果把處理日誌分類的部分去掉的話，就會顯得更加簡潔了，Web層的東西嘛，就是要追求越簡潔越好，最好什麼都沒有才好維護。不需要專門處理JSON輸出，也不需要根據不同的數據庫寫一句SQL語句，更不需要計算頁碼多少、處理排序字段等等，一切交給Vifir提供的類庫來處理就OK了。

List方法的代碼看完了，我們接下來看看Remove方法，該方法就是簡單地根據前臺傳進來的參數id，調用業務邏輯層的delTopic方法來刪除指定日誌，代碼及註解如下：

public void Remove()

{

long id = long.Parse(Request.Params["id"]);//獲得前臺傳來參數id並轉換成long

service.delTopic(id);//調用業務層的delTopic方法刪除指定日誌　

extFormResult = true;//指定返回ExtJS表單能識別的數據

}

然後下面是Save及Update方法的源代碼，他們都是用來保存數據，Save是用來保存新增加的日誌，而Update用來保存修改的日誌。跟前面的方法一樣，這些方法都是簡單的調用業務邏輯層指定方法來實現日誌的保存、修改等功能。下面我們來看看Save方法的源碼及註釋：

public void Save()

{

Topic obj = new Topic();//新建一個Topic對象

ToPo(obj);//把表單中傳的內容保存到對象obj中，比如表單的title字段值或保存到obj的Title屬性中,content或Content字段值會保存到obj的Content屬性中，有多少保存多少。

string CategoryId = Request.Params["CategoryId"];//得到日誌分類ID

if (CategoryId != null && !"".Equals(CategoryId))

{

TopicCategory c = this.categoryService.getTopicCategory(long.Parse(CategoryId));//調用業務邏輯方法得到指定分類id對應的TopicCategory對象

obj.Category = c;//設置Topic對象的Category值，也就是設置日誌分類

}

if (!HasError())//如果沒有錯誤

service.addTopic(obj);//調用業務層的addTopic方法來實現添加日誌

extFormResult = true;//設置extFormResult的值爲true，返回ExtJS表單Action能識別的JSON數據

}

如果你不知道什麼是IOC，那麼你一定會疑惑，在上面的代碼中ITopicService只是一個接口，也就是service只是一個接口，而且我們在代碼中沒給其設置過值，他的實現類具體是什麼等。那麼請你打開bin目錄中的Web.xml這個文件，這是一個Spring.NET的配置文件，在該配置文件中可以配置各個類及業務組件之間的依賴關注，並給相關類注入依賴的對象。比如配置Topic.aspx.cs類的配置信息如下：

</object>

這使得在創建Topic.aspx對應的類實例時，會自動從容器找到名爲topicService及topicCategoryService的組件，並注入到Service及CategoryService兩個屬性中。

關於IOC及Spring.NET，請直接訪問Spring.NET的官方網站[url]www.springframework.net[/url]。

當然，本示例還引入了一些前沿的後臺技術，比如泛型DAO、ORM等。有興趣的朋友們可以通過vifir.com進一步深入瞭解或者繼續關注本博客。

.Net版的ExtJS單用戶Blog系統源碼解析

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

ext/ajax技術交流及學習活動免費門票大放送（博客園人人都有免費獲得門票的機會）

我的友情鏈接

Microsoft Silverlight Tools Beta 1 for Visual Studio 2008安裝失敗的解決方法之二

微軟IE最新XML漏洞利用代碼

.Net版的ExtJS單用戶Blog系統源碼解析

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結