二11、【.Net開源框架】EFW框架Web前端開發之目錄結構和使用FireBug調試方法

回《【開源】EFW框架系列文章索引》       

EFW框架源代碼下載V1.2：http://pan.baidu.com/s/1hcnuA

EFW框架實例源代碼下載：http://pan.baidu.com/s/1o6MAKCa

 

       前言：前面多章對EFW框架的核心類庫做了詳細說明，接下來幾章將對框架中的前端及界面層功能進一步講解，前端分爲兩個部分Web前端和Winform前端，Web前端主要是在Web系統中使用，就是編寫Html代碼和JS代碼開發網頁界面，框架推薦的是JqueryEasyUI做爲界面框架；Winform前端在Winform（C/S）系統與WCF(C/S/S)系統中使用，使用DotNetBar2控件開發界面，後來爲了知足業務功能需求在此基礎上開發了一套本身的自定義控件；

本章從Web界面項目開始入手，包括項目的目錄結構與JS代碼利用firebug如何進行調試；會詳細分析項目中的每一個目錄包括的代碼文件以及爲何這麼劃分，有什麼好處；

本文要點：

1.系統的完整目錄結構說明

2.Conifg配置文件目錄

3.ModulePlugin業務功能模塊目錄

4.WebPlugin界面組件目錄

5.利用firebug如何調試系統

1.系統的完整目錄結構說明

 

開發一個Web系統只須要兩個項目便可，包括Books項目（邏輯層代碼）與EFWWeb項目（界面層代碼），Web控制器、ObjectModel、Entity和Dao的代碼都放在Books項目中，並不單獨拆分紅項目；EFWWeb項目主要兩部份內容，ModelPlugin業務模塊插件和WebPlugin組件插件；

業務界面代碼都放在ModelPlugin目錄中，按模塊劃分，模塊中的代碼文件又分爲aspx文件盒js文件，ModelPlugin目錄中內置了框架中的基礎功能，分爲權限管理、報表管理、消息管理和基礎數據；

Web組件功能都放在WebPlugin目錄中，按組件劃分，框架內置了一些經常使用的組件有Jquery、JqueryEasyUI、FusionCharts、ReportAll、JqueryMobile等；能夠把你收集的web組件或本身開發的放在此目錄便可；業務模塊要使用的直接引用web組件的js文件就能夠了；

總的來講爲何要把項目結構與文件目錄都設計得這麼少，都是爲了讓咱們看了系統源代碼第一印象就以爲很是簡單、清晰，不會有那種打開解決方案就加載幾十個項目，看着就怕了；

2.Conifg配置文件目錄

Web系統的配置文件除了Web.Config，其餘的都放在Config目錄中；爲了在開發中方便在解決方案中另外建了一個Config文件夾，並把Web系統的全部配置文件都添加到此文件夾中，這樣咱們就很方便找到配置文件做出修改配置；

其中：

1）Web.Config全部web系統中都有的一個配置文件，在這裏有幾個地方值得注意；

 

2）EntLib.config微軟企業庫的配置文件，這個文件通常不須要修改，只有其中的數據庫鏈接字符串須要配置一下；

 

3）EFWUnity.config企業庫中依賴注入的配置，根據具體的業務對象來配置；

 

3.ModulePlugin業務功能模塊目錄

EFW框架中內置了四個業務模塊包括：

1）權限管理模塊，UserLogin與RightManager

2）基礎數據模塊，BaseDataManager

3）報表管理模塊，ReportManager

4）消息管理模塊，SysMessage

有了這些模塊以後，咱們立刻就能搭建一個成形的新系統，集中力量開發業務功能就好了；咱們再看一個業務模塊中aspx文件和js文件，通常來講都是一個界面文件aspx對應一個腳本文件js，aspx文件內容都是html標籤實現界面的編寫，js文件都是javascript代碼使用Jquery做爲主要開發方式，主要是實現向後臺請求數據和展現數據；

 

4.WebPlugin界面組件目錄

EFW框架中內置了一些經常使用的Web組件，有Jquery、JqueryEasyUI、FusionCharts、ReportAll、JqueryMobile等，下面的文章會詳細講解這些組件的使用；也能夠先學習一下網上的資料：

1）JqueryEasyUI：http://www.jeasyui.com/

2）FunsionCharts：http://www.fusioncharts.com/

3）ReportAll：http://www.reportall.com.cn/

4）JqueryMobile;http://jquerymobile.com/

 

5.利用firebug如何調試系統

最後來介紹一些用firebug工具調試javascript代碼和利用Ajax向後臺控制器請求數據碰到的問題；

1）firebug介紹，我的一直以爲用firefox瀏覽器作web開發調試起來很方便，特別是firebug很是強大，讓我感受跟VS調試工具同樣；怎麼安裝就不講了，很簡單網上搜索一下就知道了；安裝好了以後就會出現一個蟲子同樣的圖標，點擊它就能夠啓用firebug進行調試；以下圖：

 

 

 

見上面三張圖，使咱們在調試過程當中用得最多的三個功能，

第一張圖：控制檯，會列出每一次向後臺的請求操做，你能夠查看請求發送的參數與接收的結果；查看代碼有沒有向後臺發送請求看此處就能找到問題；

第二張圖：HTML，查看頁面運行後的HTML代碼，通常代碼寫得很簡單，但調試的時候看到的很複雜，不少標籤都是動態生成的，由界面框架生成，如JqueryeasyUI；當編寫了一個界面代碼，可是顯示的效果不是你想象中的那樣，那麼你就須要利用此功能查看生成的HTML查找緣由，是因爲哪一個標籤沒寫對了，仍是樣式調用得不對等；

第三張圖：腳本，頁面須要的js文件均可以在此功能中找到，調試就是在此處打斷點，一步步運行查看變量的值與執行的過程；調試的操做跟VS工具差很少；

2）下面我就針對Books實例演示一下調試修改書籍這個功能

咱們先在firebug中的Book.js文件的保存書籍的btn_save()方法中打上一個斷點，再在後臺VS工具中的Books項目中bookController文件中的SaveBook()方法也打上斷點；

 

啓動項目點擊界面上的書籍保存按鈕，斷點先在firebug中執行，按F10單步執行，運行至formSubmit方法中向後臺發送Http請求，這時候斷點就跑到VS工具的SaveBook方法中了，按F5執行完後臺SaveBook方法，斷點又跑到firebug中的formSubmit方法中了，說明Http請求完成，保存數據成功；

 

注意：若是出現進入不了後臺SaveBook斷點，就必定要覈對好Http請求的地址是否正確，項目有麼有正常啓動加載WebController，WebController上有沒有加WebMethod自定義標籤，這都是環環相扣的，多熟悉熟悉就搞清楚了；