.Net版的ExtJS單用戶Blog系統源碼解析2008-04-16 17:22

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

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

< databaseSettings >
     < add  key ="db.datasource"  value ="(local);Integrated Security=true" />
     < add  key ="db.user"  value ="sa" />
     < add  key ="db.password"  value ="sa" />
     < add  key ="db.database"  value ="vifirblog" />
     < add  key ="db.generateDdl"  value ="true" />
  </ databaseSettings >
  < appSettings >

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] " >
< html xmlns = " [url]http://www.w3.org/1999/xhtml[/url] " >
< head >
< meta http - equiv = " content-type "  content = " text/html; charset=UTF-8 "   />
< link rel = " stylesheet "  type = " text/css "  href = " ../plugins/extjs/ext-2.0/resources/css/ext-all.css "   />

< style type = " text/css " >
a {} { text-decoration:none; color:#000033 }
.link {} {
font-weight:bold;
padding:6px 0 0 -2px;
line-height:25px;
}
</ style >
< title > Blog後臺管理 </ title >
</ head >
< body style = " font-size:12px " >
   < div id = " loading-mask "  style = "" ></ div >
   < div id = " loading " >
     < div style = " text-align:center;padding-top:25% " >< img src = " ../p_w_picpaths/extanim32.gif "  width = " 32 "  height = " 32 "  style = " margin-right:8px; "  align = " absmiddle " /> Loading </ div >
   </ div >
< script type = " text/javascript "  src = " ../plugins/extjs/ext-2.0/adapter/ext/ext-base.js " ></ script >
< script type = " text/javascript "  src = " ../plugins/extjs/ext-2.0/ext-all.js " ></ script >
< script type = " text/javascript "  src = " manage.js " ></ script >
< script type = " text/javascript "  src = " core.js " ></ script >
< script type = " text/javascript "  src = " topic.js " ></ script >
< script type = " text/javascript "  src = " album.js " ></ script >
</ 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  type ="manage/Topic.aspx" >
     < property  name ="Service"  ref ="topicService"   />
     < property  name ="CategoryService"  ref ="topicCategoryService"   />
   </ object >

 

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

 

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

 

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