㈠ 如何選擇最為合適的Web開發框架
具體如下:
一、使用框架的必然性
框架，即framework。其實就是某種應用的半成品，把不同應用程序中有共性的一些東西抽取出來，做成一個半成品程序，這樣的半成品就是所謂的程序框架。
軟體系統發展到今天已經很復雜了，特別是伺服器端軟體，涉及到的知識，內容，問題太多。在某些方面使用別人成熟的框架，就相當於讓別人幫你完成一些基礎工作，你只需要集中精力完成系統的業務邏輯設計。這樣每次開發就不用白手起家，而是可以在這個基礎上開始搭建。
使用框架的最大好處：減少重復開發工作量、縮短開發時間、降低開發成本。同時還有其它的好處，如：使程序設計更合理、程序運行更穩定等。基於這些原因，基本上現在在開發中，都會選用某些合適的開發框架，來幫助快速高效的開發應用系統。
了解了使用框架的必然性，下面來看看如何選擇，當然我們的話題集中在Web層的開發框架。在談這個問題之前，先來看看我們在Web開發中究竟需要做些什麼工作：
二、Web層開發的工作
在J2EE開發中，分層是基本的思想，3層架構或者多層架構早已深入人心，在這里我們就把目光集中到Web層，看看到底Web層開發做了那些工作：
1：數據展示
Web層需要從邏輯層獲取需要展示的數據，然後以合理的方式在頁面進行展示
2：人機交互
用戶需要從界面上輸入數據，在界面上進行按鈕點擊，進而觸發事件，標準的事件驅動模型，然後跟後台進行數據交換，出現新的界面。
3：收集數據，調用邏輯層介面
Web層收到用戶的事件請求，需要調用相應的邏輯層介面來進行處理，Web層是不會有任何邏輯處理的。調用邏輯層介面，需要傳遞參數，這時需要收集用戶在界面上輸入的數據，然後進行組織，組織成為邏輯層介面需要的數據封裝形式(通常都是ValueObject)。
4：根據邏輯層的數據來重新展示頁面
邏輯層處理完了，需要返回數據或信息到界面上。這個時候Web層需要根據返回的值選擇合適的頁面，然後展示這些數據或者信息。
從上面可以看出，Web層開發的主要工作集中在展示上，也就是圖形用戶界面。這一部分是用戶直觀感受應用程序的窗口，也是用戶要求最多的地方，其表現形式也是最豐富的。
三、Web層開發的步驟
下面再來總結一下Web層開發的大致步驟(也就是需要開發人員做的工作)：
注意：這里討論的Web層開發，是不使用任何開發框架時候的開發。
1：寫頁面Html，到底有哪些數據需要在界面上表現
2：每個數據的具體表現形式，如：有的需要表現成為下拉列表，有的需要表現成為單選按鈕等。
3：界面表現形式的邏輯布局，所謂邏輯布局是指某些數據的表現形式應該放在前面，某些應該放在後面;某些放在上面，某些放在下面。如：某個請假申請 的業務，有請假開始時間和結束時間，很明顯開始時間的表現就應該排在結束時間的前面。而美工是負責最後頁面的美觀，一般美工不能動界面的邏輯布局。
4：完成前面3步，頁面的表現形式的大致模樣就有了，下面需要來做功能性的開發。第一個就是這些表現形式的值的來源，如：下拉列表顯示的值從什麼地方來。值的來源方式很多，有資料庫中來、固定值、某斷程序運行的中間結果、前面頁面傳遞過來等等，當然典型的還是來自資料庫。
好了，確定了值的來源，開發人員就要寫代碼來獲取這些值，然後把這些值賦值到對應的表現形式裡面。
5：還有一些比較特殊，也就是真實操作的是一類值，但是在界面上顯示的是另一類值，比如：資料庫中有用戶編號，到了界面上就得顯示用戶姓名，但是所 有的操作都是要操作用戶編號的。我們把這種情況分做：真實值和表現值，他們有一定的內在聯系。這些都是要開發人員去轉化和維護的。
6：接下來就應該開發功能性的事件響應了。用戶點擊了某個按鈕或者觸發了某個事件，首先是客戶端：數據檢測、客戶端事件處理;然後提交到服務端，服務端要獲取到客戶端提交的數據，然後調用相應的邏輯層介面來響應。當然如何寫邏輯層的實現這里就不去談論了。
7：邏輯層執行完過後，返回數據和信息到Web層，開發人員還需要寫代碼去處理，選擇哪個頁面來顯示，如何顯示這些數據和信息等。
8：在整個交互的過程中，還必須考慮到如何控制許可權，如：某些數據不能顯示，某些數據不能編輯等等;同樣還需要考慮到消息的配置和國際化等等。這些功能起源於邏輯層，但是實際的控制要到Web層，這些都需要開發人員來控制。
9：完成了上面的開發步驟，頁面基本的功能開發就告一段落，接下來開發人員需要考慮頁面美觀的問題了。大家可能會說：「不是有美工嗎，還需要開發人 員干什麼?」。事實上美工多半隻能出一個靜態頁面的美化模版，美工對於一推Java代碼和Html的混雜物，多半是沒有辦法的，更不要說還有一些內容是動 態生成的，美工就更不可能搞定了。還是得開發人員上陣，按照美工給的模版，開始添加Css：class、id、style……
10：完成上面的開發，基本頁面的開發工作就完成了，最後的一個步驟就是把各個頁面有機的組織起來，開發應用程序的整體應用導航框架，通常就是菜單，然後把各個功能頁面跟菜單結合起來，形成一個完整的應用。
㈡ Web前端工程師喜歡的高質量Web前端框架有哪些
今天小編要跟大家分享的文章是關於高質量Web前端框架，相信很多Web前端工程師都會對此感興趣的。Web前端框架就是為了節約開發成本和時間，一般開發一個項目都會用到前端框架(除非自己有前端開發團隊)。今天小編就為大家分享一些高質量的前端框架希望能夠對大家有所幫助。
一、QUICKUI
QUICK
UI是一套完整的企業級web前端開發解決方案，由基礎框架、UI組件庫、皮膚包、示例工程和文檔等組成。使用QUICKUI開發者可以極大地減少工作量，提高開發效率，快速構建功能強大、美觀、兼容的web應用系統。
QUICKUI優勢：
①功能最為強大
QUICKUI經歷了7年的迭代更新，不斷從客戶的各種業務中對組件的需求進行歸納和抽離，從而打造新的組件和功能。現在最新的4.0版本框架包含了一百多種組件，一千多個應用場景示例。可以說在前端框架領域中，QUICKUI擁有功能最強大組件庫。
②運行最為穩定
很多其他的第三方UI控制項在簡單場合使用OK，到了復雜的場景中就會出現很多問題，這種現象很常見，因為在組件設計時無法預料到所有的應用場合。而QUICKUI在皮兆7年間經歷了數千個項目實際檢驗，在各種復雜場景都應用過，並根據客戶的反饋不斷完善和調整。目前的第四代可以說是最穩定、最完美的版本。
③豐富精美的界麵皮膚
跟其他web前端框架僅僅是一套組件庫不同，QUICKUI是一整套前端解決方案，擁有豐富的外觀界面解決方案。採用現今流行的扁平化設計理念，推出了包括登錄、響應式web、工作桌面、地圖類、門戶風格、大屏展示風格等等幾百套製作精美、用戶體驗優秀的界面。這些界面是以QUICKUI皮膚包的形式發布，使用和更換都非常方便。
④事無巨細的開發文檔
QUICKUI擁有16萬字+的開發文檔，框架和組件的每一個功能點都有詳細的講解和代碼示例，用於開發過程中隨時查閱。除了框架機制講解和組件仿歷使用教程，文檔還涉及web前端開發的很多知識。仔細閱讀並結合框架使用的話，你很快就能成為web開發的高手。
⑤上手開發非常容易
QUICKUI採用組件化思想來構建組件，一個組件就是一兩句html的標簽，使用起來非常簡單。將開發人員從繁瑣的JS編碼中解脫出來，很大程度減少前台編碼的出錯率;保留了HTML的布局方式，從而快速進行頁面布局。對開發者前台技術要求也非常低，只需要了解html語法和一些簡單的JS即可，從而把更多精力放在業務功能的實現上，極大地提高開發效率。
⑥瀏覽器兼容性非常好
QUICKUI4.0使用了很多HTML5，CSS3技術用於提高表現力和用戶體驗，這些新的特性在現代瀏覽器中會有很好的效果。但是，國內依然有大量的用戶在使用IE7、IE8等舊時代的瀏覽器，為照顧這部分用戶，框架採用了漸進式思想，確保低版本瀏覽器也能正常使用。所以，QUICKUI兼容IE7以上所有主流瀏覽器。
二、flex
Apache基金會今天發布了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本。
需要注意的是，Flex目前還在孵化階段，還不是Apache的正式項目，Flex4.8也不是一個正式的Apache版本。
Apache稱，該版本標志燃大租著Flex新時代的開始，Flex的未來將由社區來驅動，而不是由一個公司驅動。開發者可以通過貢獻代碼，來幫助改進Flex，如修復bug、增加功能等。
從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了!
三、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢!
四、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩!不過一個比較大的優勢是開源免費，並且界面做的還說的過去!
五、jQueryUI
jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs(如本站首頁右上角部分)、拉簾效果(本站首頁左上角)、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源!
六、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQueryMiniUI_快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源!基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級!
七、DWZ
DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下!不過性能怎麼樣不敢確定!
八、YUI
Yahoo!UILibrary
(YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為
BSD許可證，基本上沒怎麼研究過!YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣!
九、Sencha
Sencha是由ExtJS、jQTouch以及Raphael三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦!
十、OperaMasks-UI
OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發!而且是國產的喲!
以上排序是整理時的排序，一起整理分析一下，下次用的時候就不用到處找了，我想同樣的問題應該也存在在很多程序員身上，任何一款UI框架，只要能夠容易入手就行。
以上就是小編今天為大家分享的關於高質量web前端框架有哪些?的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端知識的小夥伴們記得關注北大青鳥web培訓官網哦。
作者：qianankuangjia，來源：CSDN
原文：https://blog.csdn.net/qianankuangjia/article/details/78042944
㈢ 什麼是web開發、web開發框架
WEB開發就比較好理解了，就是開發網頁程序，不需要安裝桌面程序直接通過瀏覽器進行操作的程序，而WIN程序是桌面程序，需要安裝桌面程序進行操作。WEB框架是指哪些為了提高WEB程序開發效率而開發出來的中間件基礎平台，開發人員不需要從0開始寫代碼，而是框架已做好了一些模板類的東西，開發人員通過調用框架來開發程序，以節省時間和成本。前端WEB框架比較有名的如Bootstrap、extjs、easyui、flex、MiniUI、jQuery UI等。現在也有一些包含了前後端的WEB開發框架，稱為快速開發平台，可以更方便也開發WEB程序。
㈣ Web前端開發框架有哪些
目前常用的一些前端的框架如下：
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2、flex
Apache基金會發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日，Apache Flex技術社區發布了全新的Apache Flex 4.12.0版本，該版本是Apache Flex 4.11.0的升級版本，改進的功能包括：
◆支持最新版本的Flash Player
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex 4.12.1，新版本加入對全新Flash Player及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。
3、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
5、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQuery MiniUI – 快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
6、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
7、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
8、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！
9、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫，為了能建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證，基本上沒怎麼研究過！
YUI Compressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦！
11、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！
12、ZK
ZK是 一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以 及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！
13、OperaMasks-UI
OperaMasks- UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前，該團隊已將這一產品以LGPL 開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
14、JavaFX
Sun 公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用Java API的能力。因為 JavaFX Script是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序 變為可能。
㈤ 當前java web 開發用得一般都是哪些框架
1.S2SH(struts2+spring+hibernate)
基於Struts2+Spring3+Hibernate4開發java Web企業應用開源框架s2jh源碼分享
spring+hibernate+struts2開發OA企業辦公管理系統源碼分享
Struts2+Hibernate3+Spring三大框架技術實現Mysql數據分頁
Spring+struts2+hibernate+easyui基礎許可權管理框架
Spring+Struts2+Hibernate三大框架開發企業人力資源管理系統源代碼下載
Spring mvc+struts2+Hibernate整合實例代碼(註解詳解)
2.S2SM(struts2+spring+mybatis)
Spring+Struts2+mybatis手動配置三大框架整合源代碼下載
Struts2+mybatis開發音樂分享系統
3.SSH(spring mvc+spring+hibernate或struts+spring+hibernate)
Spring MVC+Spring+Hibrenarte實現的簡單的CRUD項目實例
springMVC註解與hibernate完美結合完成基本的增刪改查demo源碼下載
springmvc+hibernate+spring+easyui開發bsalse進銷存後台管理系統源代碼下載
spring 3.0+spring MVC+Hibernate框架搭建教程(附：springMVC文件上傳功能)
spring+struts2+Hibernate三大框架開發某制葯廠管理系統源代碼下載
Spring mvc+struts2+Hibernate整合實例代碼(註解詳解)
4.SSM(spring mvc+spring+mybatis)
SpringMVC+Mybatis整合實現簡單許可權控制系統代碼
㈥ web框架是什麼，有什麼作用
其實框架類似於模板的意思，不同的人用同一模板，其模板的大體功能無需修改，只需要針對不同的人修改不同的地方即可！
WEB框架主要作用是提高WEB前端開發效率，降低開發難度。目前常用的一些前端的框架如下：bootstrap、easyui、miniui、jqueryUI等。
㈦ 如何使用jQuery EasyUI打造Web程序
1
在網路搜索引擎中搜索「jQuery EasyUI」關鍵詞，如下圖所示。
2
訪問JQuery EasyUI中文網，如下圖所示。
3
點擊導航欄上的【JQuery EasyUI下載】超鏈接，訪問JQuery EasyUI下載頁面，如下圖所示。
4
選擇GPL 版本，點擊下方的【官方下載】按鈕，如下圖所示。
5
解壓JQuery EasyUI GPL 版本，工程目錄如下圖所示。
6
以下用一個Basic CRUD Application（基本增刪改查應用程序）為例，來介紹JQuery EasyUI的用法。、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" onclick="newUser()">New
User</a>
<a href="javascript:void(0)"
class="easyui-linkbutton" iconCls="icon-edit" plain="true"
onclick="editUser()">Edit User</a>
<a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
User</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone" class="easyui-textbox">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-textbox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6"
iconCls="icon-ok" onclick="saveUser()"
style="width:90px">Save</a>
<a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"
style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
.fitem input{
width:160px;
}
</style>
</body>
</html>
7
該案例運行效果，如下圖所示。
8
在該案例中，需要引入以下CSS和js文件，如下所示：
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
㈧ web前端開發框架有哪些
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
國內首個開源HTML5跨屏前端框架產品系列，中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(8)easyui的web開發框架擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
參考資料來源：網路-前端開發