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自定義標簽，這都是環環相扣的，多熟悉熟悉就搞清楚了；