#### **一、簡介** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EasyUI是一套開源的界面開發框架，它提供包括窗口、數據網格、按鈕、表單控件等一系列UI控件，非常適合后臺交互系統使用。EasyUI基于HTML5標準開發，以插件的形式提供組件，除了框架自帶的標準組件外，還附帶有擴展組件和主題。EasyUI目前有4個分類， EasyUI for jQuery, EasyUI for Angular， EasyUI for Vue，EasyUI for React，分別使用jQuery、Angular、Vue和Rect作為腳本來使用EasyUI，因EasyUI歷史上一直采用jQuery作為腳本語言，jQuery版本使用較廣，所以本文采用EasyUI for jQuery，如不做說明，EasyUI即指EasyUI for jQuery。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EasyUI既有免費版本，也有商業版本。商業版本需要購買，但允許用戶修改版權標識以及其他操作，并提供相應的服務。EasyUI于2010年面世，至今已有8年，現在最新的版本號為1.6.1，框架的內容也在不斷豐富。EasyUI省去了開發者關于界面的設計開發，而專注于業務邏輯的處理，無論是從審美角度還是從交互性等方面，EasyUI都是一款不可多得的前端框架。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EasyUI的下載地址： http://www.jeasyui.com/download/index.php #### **二、環境部署與配置** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本系列文檔以EasyUI為前端框架、PHP為Web開發語言、MySql為數據庫的方式重點介紹EasyUI的用法。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**Web服務器** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;web服務器我們采用集成式的WampServer（下稱wamp），版本為2.2d，當然也可以用2.4。wamp集成了apache、mysql和php三套軟件，安裝在windows系統下，省去了很多apache、php等配置問題，非常方便。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;官方網站：http://www.wampserver.com/。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wamp安裝非常簡單，根據提示一路next即可，除安裝路徑外，其余按照默認內容就可以了，默認安裝目錄為C:\wamp。需要注意的是，wamp中的php 5.3是通過VC++ 2008（VC9）編譯的，因此需要VC++ 2008(VC9)的運行庫，運行庫下載地址如下：https://www.microsoft.com/zh-CN/download/details.aspx?id=29 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**IDE** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程序開發平臺IDE可以根據個人喜好選定，本文使用了NetBeans IDE 8.1,下載時請注意選擇含有PHP和HTML5/JavaScript插件的下載包，不過這些插件也可以后續安裝。下載地址：https://netbeans.org/downloads/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;當然也可以使用其他IDE，例如Eclipse也是一種不錯的選擇。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**項目配置** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;開發項目前，需要對項目做一個規劃和配置。我們將D:\Project\作為所有項目的總目錄，在此目錄下建立各種項目。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**服務器配置** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先啟動wamp，并對wamp做一些必要的配置。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配置apache，點擊右下角托盤上wamp的圖標，在apache目錄下選擇httpd.conf文件，進行一些修改。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）將`DocumentRoot "c:/wamp/www/"`改成`DocumentRoot "D:/Project/"`。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）將這里寫代碼片`<Directory "c:/wamp/www/">`改成`<Directory "D:/Project/">`。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注意，路徑中的斜杠與windows系統的斜杠是相反的。完成后點擊右下角wamp綠色圖標，選擇啟動所有服務，直到圖標成為綠色，說明wamp工作正常。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**瀏覽器** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EasyUI是以HTML5為標準進行設計，并且以jQuery為基礎，因此建議使用谷歌的Chrome，FireFox等瀏覽器，IE瀏覽器請選用IE9以上，低版本的IE瀏覽器兼容性較差。 #### **三、EasyUI目錄結構** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以1.6.1版本為例，其目錄結構見下圖：  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo目錄存放了各種控件的樣例程序，開發者對部分控件不熟悉的，可以參考該目錄下的例子程序。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo-mobile目錄和demo目錄的功能是一樣的，只是demo-mobile目錄下的例子適用于手機等移動端設備。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locale目錄存放了語言包，EasyUI框架支持國際化，locale目錄放有中文、德文等23種語言包。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugins目錄最為核心，它存放了所有控件。在技術上，每個控件都以插件的形式實現，所以增刪控件也比較靈活，目錄下的每個js文件都是一個控件的描述與實現。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src目錄存放了控件的源代碼。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme目錄存放了EasyUI框架的主題和圖標，我個人比較喜歡bootstrap主題。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easyloader文件用于加載解析EasyUI框架內的模塊。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jquery.easyui.min.js是使用EasyUI的接口文件，必須在web頁面上引入該文件才能使用EasyUI。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jquery.easyui.mobile.js功能與jquery.easyui.min.js一樣，只是該文件用于移動設備。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jquery.min.js是jQuery的核心文件，EasyUI框架基于jQuery開發，必須要有jQuery的支持。