① HTML5技術分享 淺談前端安全以及如何防範
隨著互聯網的發達，各種WEB應用也變得越來越復雜，滿足了用戶的各種需求，但是隨之而來的就是各種網路安全的問題。作為前端開發行業的我們也逃不開這個問題。所以今天我就簡單聊一聊WEB前端安全以及如何防範。
首先前端攻擊都有哪些形式，我們該如何防範?
一、XSS攻擊
XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植 入到提供給其它用戶使用的頁面中。比如這些代碼包括HTML代碼和客戶端腳本。攻 擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型 的漏洞由於被黑客用來編寫危害性更大的網路釣魚(Phishing)攻擊而變得廣為人知。
XSS攻擊的危害包括：
1、盜取各類用戶帳號，如機器登錄帳號、用戶網銀帳號、各類管理員帳號
2、控制企業數據，包括讀取、篡改、添加、刪除企業敏感數據的能力
3、盜竊企業重要的具有商業價值的資料
4、非法轉賬
5、強制發送電子郵件
6、網站掛馬
7、控制受害者機器向其它網站發起攻擊
XSS攻擊的具體表現：
1、JavaScript代碼注入
下面是代碼的頁面
2 接著，我們在cheat.php這個網站上面，將跳轉過來的源網頁地址悄悄的進行修改。
於是，在用戶訪問了我們的欺騙網站後，之前的tab已經悄然發生了變化，我們將其悄悄的替換為了釣魚的網站，欺騙用戶輸入用戶名、密碼等。
3 我們的釣魚網站，偽裝成XX空間，讓用戶輸入用戶名與密碼
這種釣魚方式比較有意思，重點在於我們比較難防住這種攻擊，我們並不能將所有的頁面鏈接都使用js打開。所以，要麼就將外鏈跳轉的連接改為當前頁面跳轉，要麼就在頁面unload的時候給用戶加以提示，要麼就將頁面所有的跳轉均改為window.open，在打開時，跟大多數釣魚防治殊途同歸的一點是，我們需要網民們的安全意識提高。
六、我們平時開發要注意些什麼?
開發時要提防用戶產生的內容，要對用戶輸入的信息進行層層檢測要注意對用戶的輸出內容進行過濾(進行轉義等)重要的內容記得要加密傳輸(無論是利用https也好，自己加密也好)
get與post請求，要嚴格遵守規范，不要混用，不要將一些危險的提交使用jsonp完成。
對於URL上攜帶的信息，要謹慎使用。心中時刻記著，自己的網站哪裡可能有危險。
② 目前常用的一些前端的框架
目前常用的一些前端的框架如下：
1.Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（buttongroups），導航面板（navigationcontrol）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁升激碼（pagination），縮略圖(thumbnails)，進度條（progressbars），媒體對象（mediaobjects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tooltips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示核枯(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的Web界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的改笑洞一部分工具和資源。
jQueryUIBootstrap——對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把Bootstrap的清爽界面組件引入到jQueryUI中。
jQueryMobileBootstrapTheme——和上面提到的jQueryUI主題類似，這是一個為jQuerymobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
FuelUX——它為Bootstrap添加了一些輕量的JavaScript控制項。FuelUI安裝，修改，更新以及優化都很簡單方便。
info——Bootstrap提供了自己的幾種界面風格，提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr——利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch——提供大量免費的Bootstrap主題。
Bootsnipp——在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於BootstrapHTML/CSS/JavaScript架構的免費元素。
LayoutIt——通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2、flex
Apache基金會發布了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日，ApacheFlex技術社區發布了全新的ApacheFlex4.12.0版本，該版本是ApacheFlex4.11.0的升級版本，改進的功能包括：
◆支持最新版本的FlashPlayer
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex4.12.1，新版本加入對全新FlashPlayer及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。
3、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
5、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQueryMiniUI_快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
6、jQueryUI
jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
7、DWZ
DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
8、GWT
Google網頁工具包——GWT提供了一組基於Java語言的開發包，這個開發包的設計參考JavaAWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉JavaAWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！
9、YUI
Yahoo!UILibrary(YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為BSD許可證，基本上沒怎麼研究過！
YUICompressor倒是挺出名的，這套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為基礎的使用介面設計語言ZKUser-interfacesMarkupLanguage(ZUML)。
功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！
13、OperaMasks-UI
OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
14、JavaFX
Sun公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用JavaFX編程語言開發富互聯網應用程序(RIA)。JavaFXScript編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative,staticallytyped(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用JavaAPI的能力。因為JavaFXScript是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序變為可能。
③ 前端開發框架是什麼_前端開發框架有哪些
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap是基於HTML、CSS、JavaScript的，它簡潔靈活，使得Web開發更加快捷。
2、html5-boilerplate：
該框架含碧可以快速構建健壯，且適應力強的webapp或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、AmazeUI：
首個開源HTML5跨屏前端框架產品系列培拍，中文排版前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人談中舉一起學習可以來這個扣裙，首先是132中間是667最後是127都是零基礎的同學，大家相互鼓勵共同努力只是學著玩就不建議來了!!!支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架AmazeUITouch以及針對跨屏HTML5網頁開發的AmazeUIWeb。
④ 前端安全防範
CSRF（Cross-Site Request Forgery）的意思是跨站點請求偽造，也被稱作一鍵攻擊或會話控制。其原理是攻擊者構造網站後台某個功能介面的請求地址，誘導用戶去點擊或使用特殊方法讓該請求地址自動載入。用戶在登錄狀態下這個請求被伺服器接收後會被誤以為是用戶合法的操作。對於GET形式的介面地址可輕易被攻擊。對於POST形式的介面地址也不是百分百安全，攻擊者可以誘導用戶進入帶Form表單並且可用POST方式提交參數的頁面。
一個典型的CSRF有著如下的流程：
受害者訪問包含這個img的頁面後，瀏覽器會自動向發出一次http請求，網站會收到包含受害者登錄信息的一次跨域請求。
這種類型的CSRF利用起來通常使用的是一個自動提交的表單，訪問該頁面後，表單會自動提交，相當於模擬盯桐用戶完成了一次POST操作。
POST類型的攻擊通常比GET要求更嚴格一些，但不能將安全寄託在僅允許POST上面。
鏈接類型的CSRF並不常見，比起其他兩種用戶打開頁面就中招的情況，這種需要用戶點擊鏈接才會觸發。這種類型通常是在論壇中發布的圖片里嵌入惡意鏈接，或者以廣告的形式誘導用戶中招。
上文中講了CSRF的嫌磨兩個特點：
針對這兩點，可以專門制定防護策略：
在http協議中，每一個非同步請求都會攜帶兩個Header，用於標記來源域名：
這兩個Header在瀏覽器發起請求時，大多數情況會自動帶上，並且不能由前端自定義內容，伺服器可以通過解析這兩個Header中的域名，確定請求的來源。
如果origin存在，那麼直接使用origin中的值來確定凱者坦來源域名就可以。但是origin在一下兩種情況並不存在：
根據http協議，在http頭中有一個欄位叫referer，記錄了該http請求的來源地址。
對於Ajax請求，圖片和script等資源的請求，referer為發起請求的頁面地址。
對於頁面跳轉，referer為打開頁面歷史記錄的前一個頁面地址。
因此我們使用referer中鏈接的origin部分可以得知請求的來源域名。
將referer policy的策略設置成same-origin，對於同源的鏈接和引用，會發送referer，referer的值為host不帶path；跨域訪問則不攜帶referer。
設置referer policy的方法有三種：
在以下情況里referer沒有被攜帶或者不可信：
⑤ 網站前端，如何保證密碼安全
一般情況下保證不了
比如京東、小米、網易之類的網站
當你登錄的時候，你如果看發送的內容
會發現發送的也都是明文內容，所以很容易被截獲
支付寶不一樣，支付寶是有插件的
你輸入後會一系列加密，然後發送給後台
不過這個技術上比較麻煩
一般情況下不用擔心這個
希望能幫助到你
⑥ 怎樣使用避孕套詳細圖解
1、從安全套內包裝邊緣小心撕開以免扯裂安全套；避免用剪刀一類的利器，確保安全套不破裂。 2、在陰/莖勃起時帶上安全套，謹記在陰/莖插/入對方身體前戴上安全套。在陰/莖勃起前期所產生的分泌物可能含有精液與導致性病的病菌，能引起懷孕和性病的傳播。 3、安全套內殘留的空氣會導致安全套破裂，為避免破裂的可能性，用拇指及食指輕輕擠出安全套前端小袋內的空氣，然後將安全套戴在勃起的陰/莖上。確定安全套末端捲曲部分露在外側。 4、在擠壓住安全套前端的同時，以另一隻手將安全套輕輕伸展包覆整個陰/莖。確定安全套於性/交過程中緊套於陰/莖上；如果安全套部分滑脫，立即將其套回原位。若是安全套滑落掉出，立即將陰/莖抽/出，並在繼續性/交前戴上新的安全套。 5、射精後，在陰/莖仍勃起時應立即以手按住安全套底部，在陰/莖完全抽離後再將安全套脫下。避免陰/莖與安全套接觸到對方的身體。每片安全套只能使用一次。用過的安全套用紙巾包好並放入垃圾箱內。
⑦ 3大Web安全漏洞防禦詳解：XSS、CSRF、以及sql注入解決方案
隨著互聯網的普及，網路安全變得越來越重要。Java等程序員需要掌握基本的web安全知識，防患於未然，下面列舉一些常見的安全漏洞，以及對應的防禦解決方案。
1.前端安全
2.後端安全
1.XSS簡介
跨站腳本（cross site script）簡稱為XSS，是一種經常出現在web應用中的計算機安全漏洞，也是web中最主流的攻擊方式。
XSS是指惡意攻擊者利用網站沒有對用戶提交數據進行轉義處理或者過濾不足的缺點，進而添加一些代碼，嵌入到web頁面中去，使別的用戶訪問都會執行相應的嵌入代碼。
2.XSS攻擊的危害
1、盜取用戶資料，比如：登錄帳號、網銀帳號等
2、利用用戶身份，讀取、篡改、添加、刪除企業敏感數據等
3、盜竊企業重要的具有商業價值的資料
4、非法轉賬
5、強制發送電子郵件
6、網站掛馬
7、控制受害者機器向其它網站發起攻擊
3.防止XSS解決方案
XSS的根源主要是沒完全過濾客戶端提交的數據 ，所以重點是要過濾用戶提交的信息。
1.CSRF簡介
CSRF（Cross-site request forgery）跨站請求偽造，也被稱為「One Click Attack」或者Session Riding，通常縮寫為CSRF或者XSRF，是一種對網站的惡意利用。
XSS利用站點內的信任用戶，而CSRF則通過偽裝來自受信任用戶的請求來利用受信任的網站。與XSS攻擊相比，CSRF更具危險性。
2.CSRF攻擊的危害
主要的危害來自於，攻擊者盜用了用戶身份，發送惡意請求。比如：模擬用戶的行為發送郵件，發消息，以及支付、轉賬等財產安全。
3.防止CSRF的解決方案
1.簡介
SQL注入是比較常見的網路攻擊方式之一，主要是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字元串，實現無帳號登錄，甚至篡改資料庫。
2.SQL注入的危害
3.防止SQL注入的方式
通常情況下，SQL注入的位置包括：
（1）表單提交，主要是POST請求，也包括GET請求；
（2）URL參數提交，主要為GET請求參數；
（3）Cookie參數提交；
（4）HTTP請求頭部的一些可修改的值，比如Referer、User_Agent等；
4.簡要舉例
舉一個簡單的例子,select * from user where id=100 ,表示查詢id為100的用戶信息，如果id=100變為 id=100 or 2=2,sql將變為：select * from user where id=100 or 2=2，將把所有user表的信息查詢出來，這就是典型的sql注入。
5.防止SQL注入的解決方案
1）對用戶的輸入進行校驗，使用正則表達式過濾傳入的參數
2）使用參數化語句，不要拼接sql，也可以使用安全的存儲過程
3）不要使用管理員許可權的資料庫連接，為每個應用使用許可權有限的資料庫連接
4）檢查數據存儲類型
5）重要的信息一定要加密
總之就是既要做好過濾與編碼並使用參數化語句，也要把重要的信息進行加密處理，這樣sql注入漏洞才能更好的解決。
以上就是Web安全介紹，更多Redis系列、Spring Cloud、Dubbo等微服務、MySQL資料庫分庫分表等架構設計，具體請參考：
回復關鍵詞 【高並發】即可獲取！
⑧ 自學前端,誰有前端學習路線圖嗎
前端自學的話比較辛苦，因為需要強大的自製力抵制各種誘惑，還有有努力學習的上進心、耐心斗蔽堅持學下去；現在網上很多培訓機構都有免費的視頻教程進行學習，結合視頻，自己多練、多想、不懂就問才是制勝關鍵。
前端完整學習路線
第一階段:
HTML CSS:HTML進階、CSS進階、div css布局、HTML css整站開發。
第二階段:HTML5和移動Web開發
HTML5:HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas。
CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架空消州、元素進場、出場策略、炫酷CSS3網頁製作。
移動Web開發:跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。
第三階段:HTTP服務和AJAX編程
WEB伺服器基礎:伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。
AJAX上篇:Ajax簡介和非同步的概念、Ajax框架的封裝、對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。
AJAX下篇:JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。
第四階段:面向對象進階
面向對象終極篇:從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。
面向對象三大特徵:繼承性、多態性、封裝性、介面。
設計模式:面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段:封裝一個屬於自己的框架
框架封裝基礎:事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
框架封裝中級:運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
框架封裝高級和補充:JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。
第六階段:模塊化組件開發
面向組件編程:面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。
面向模塊編程:AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段:主流的流行框架
Web開發工作流:GIT/SVN、Yeoman腳手架、NPMer依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。
常用庫:React.js、Vue.js、Zepto.js。
第八階段:HTML5原生移動應用開發
Cordova:WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。
Ionic:Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。
React Native:React Native簡介、React Native環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。
HTML5 :HTML5 中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5 開發和部署。
第九階段: Node.js全棧開發:
快速入門:Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。
核心模塊和對象:全局對象global，process，console，util、事件驅動，事件發射器、加密解密，橋者路徑操做。
⑨ 前端開發框架有哪些_前端架構有哪些
前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。
1、vue-element-admin
一個基於vue2.0和Element的控制面板UI框架，這是並納簡使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。
2、AdminLTE
非常流行的基於Bootstrap3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。
3、ant-design-pro
這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。
4、ng2-admin
這是基於Angular2、Bootstrap4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。
5：Gentelella
Gentelella是一個可免費使用的Bootstrap管理界面模版，使用群體比較廣泛。這個模版使用默認的Bootstrap3的樣式，還有一系列茄宴功能強大的jQuery插件和工具，可快速創建管理界面模版或者後台的Dashboard。
6：iview-admin
iViewadmin是基於iView的Vue2.0控制面板。搭配使用iViewUI組件庫形成的一套後台集成解決方案。
7：blur-admin
BlurAdmin是一款使用AngularJsBootstrap實現的單頁管理端模版，視覺沖擊極強的管理後台，各種動畫效果。
8：vue-manage-system
vue-manage-system，一個基於Vue.js和element-ui的後台管理系統模板，挺喜歡這個界面的UI，簡約清晰不累贅，多功能的後台框架模板，適用於絕大部分的後台管理系統開發。
9：material-dashboard
基於Bootstrap4和Material風格的控制面板。MaterialDashboard是一個開源的Material
BootstrapAdmin，其設計靈感來自谷歌的MaterialDesign。
10：d2-admin
D2Admin是一個完全開源免費的企業中後台產品前端集成方案，基於vue.js和ElementUI的管理系統前端解決方案，小於60kb的本地首屏js載入,已經做好大部分項目前期准備工作
11：vuestic-admin
vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於絕褲登錄和注冊的預建頁面。