JavaShuo
欄目
標籤
.Net版的ExtJS單用戶Blog系統源碼解析
時間 2020-01-31
標籤
extjs
用戶
blog
系統
源碼
解析
简体版
原文
原文鏈接
在講解源碼以前,這裏先簡單說說系統運行的幾個事項。雖然下載的壓縮包中已經包含了簡單的說明,但有一個重點沒有強調,也就是雖然這個系統會在啓動的時候自動建立數據庫表結構,但他是不能自動建立數據庫的,所以在啓動以前須要本身手動建立數據庫,好比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進一步深刻了解或者繼續關注本博客。
相關文章
1.
DotNet版的ExtJS單用戶Blog系統源碼解析
2.
.Net版的ExtJS單用戶Blog系統源碼解析2008-04-16 17:22
3.
基於.Net平臺的extjs單用戶Blog系統發佈
4.
.Net Core 認證系統源碼解析
5.
安卓系統源碼--DeskClock源碼解析(二)單例模式
6.
Redis源碼解析--NET
7.
.Net Core 認證系統之Cookie認證源碼解析
8.
源碼解析flask的路由系統
9.
解析大型.NET ERP系統 單據編碼功能實現
10.
ExtJS的class系統
更多相關文章...
•
系統定義的TypeHandler
-
MyBatis教程
•
互聯網系統應用架構基礎分析
-
紅包項目實戰
•
Docker容器實戰(七) - 容器眼光下的文件系統
•
互聯網組織的未來:剖析GitHub員工的任性之源
相關標籤/搜索
源碼解析
Dubbo 源碼解析
vue源碼解析
hibernate源碼解析
Android源碼解析
Flink 源碼解析
React源碼解析
Andorid源碼解析
extjs
解析 . PPT版
MySQL教程
SQLite教程
Spring教程
文件系統
應用
亂碼
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
resiprocate 之repro使用
2.
Ubuntu配置Github並且新建倉庫push代碼,從已有倉庫clone代碼,並且push
3.
設計模式9——模板方法模式
4.
avue crud form組件的快速配置使用方法詳細講解
5.
python基礎B
6.
從零開始···將工程上傳到github
7.
Eclipse插件篇
8.
Oracle網絡服務 獨立監聽的配置
9.
php7 fmp模式
10.
第5章 Linux文件及目錄管理命令基礎
本站公眾號
歡迎關注本站公眾號,獲取更多信息
相關文章
1.
DotNet版的ExtJS單用戶Blog系統源碼解析
2.
.Net版的ExtJS單用戶Blog系統源碼解析2008-04-16 17:22
3.
基於.Net平臺的extjs單用戶Blog系統發佈
4.
.Net Core 認證系統源碼解析
5.
安卓系統源碼--DeskClock源碼解析(二)單例模式
6.
Redis源碼解析--NET
7.
.Net Core 認證系統之Cookie認證源碼解析
8.
源碼解析flask的路由系統
9.
解析大型.NET ERP系統 單據編碼功能實現
10.
ExtJS的class系統
>>更多相關文章<<