❶ 前端常用的框架有哪些
前端三大框架，是Angular、React、Vue，這三個框架現在是最為流行也是最多人用的框架。
React：
1.聲明式設計：React採用聲明範式，可以輕松描述應用。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1.速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2.跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的API，甚至在IE8中都是沒問題的。
3.模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4.單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構5.同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。6.兼容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點：React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。
Vue：
Vue是尤雨溪編寫的一個構建數據驅動的Web界面的庫，准確來說不是一個框架，它聚焦在V（view）視圖層。
它有以下的特性：
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
優點：
1.簡單：官方文檔很清晰，比Angular簡單易學。
2.快速：非同步批處理方式更新DOM。
3.組合：用解耦的、可復用的組件組合你的應用程序。
4.緊湊：~18kbmin+gzip，且無依賴。
5.強大：表達式無需聲明依賴的可推導屬性(computedproperties)。
6.對模塊友好：可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
缺點：
1.新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2.影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3.不支持IE8。
Angular：
Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
它有以下的特性：
1.良好的應用程序結構
2.雙向數據綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味著他有一個堅實的基礎和社區支持。
缺點：
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔例子非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7兼容不算特別好,就是可以用jQuery自己手寫代碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果代碼壓縮需要顯示聲明。
❷ 常用的前端框架有哪些
1. Twitter BootStrap （Apache v2.0；響應式）
時髦、直觀並且強大的前端框架，讓Web開發變得更加容易。
2. Foundation （MIT；響應式）
最先進的響應式前端框架。
3. 960gs（GPL&MIT；響應式）
960gs提供了一個簡單的網格系統，適合快速開發。
4. Skeleton（MIT；響應式）
非常漂亮的Web模板，適合響應式、移動友好的開發。
5. 99lime HTML KickStart（Free）
適合網站快速開發的極簡HTML構建模塊。
6. Kube（Free；響應式）
面向專業人員的CSS框架。
7. Less Framework（MIT；響應式）
自適應的CSS網格系統。
8. Flameinwork（Free）
適合懶人開發者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端開發框架。
10. Easy Framework（Free）
Easy Framework是一個一體化前端解決方案，分structural、 presentational、interactive三層。
11. Blueprint（Free）
一個旨在減少開發時間的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，適合開發現代化浮動布局。
13. BlueTrip（Free）
一個功能全面、並且美麗的CSS框架，適合於Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最著名的CSS框架之一，是由Yahoo開發小組開發而成。 YUI Grids CSS為開發者提供了預先設置的四種不同頁面寬度，六種不同的模板。
15. 52framework（Creative Commons）
對HTML5支持非常好，簡單易用。
16. elastiCSS（MIT）
一個基於Web介面和印刷布局的簡單CSS框架。
17. Emastic（Free）
一個與眾不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根據Nathan Smith之前的作品而創建的。即960 Grid System：傳承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一個面向對象的CSS框架，能讓你的工作流更加簡潔。xCSS基於CSS，可以在開發復雜樣式時，提供面向對象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一個960px寬 + 12 列網格系統 + CSS的通用樣式。
❸ 後台只提供json數據，頁面全靠前端渲染，交互，需要用到哪些框架，有
dojo可以做到，並且特別好用。希望採納。放一個例子給你看看。
使用很簡單：
<!-- 顯示待辦視圖 -->
<xsl:variable name="todoRequestUrl">http://xxxx.xxxx.xxxx.xxxx/public/tcwmain.nsf/AG_GetUndo_Mobile?OpenAgent&UserName=<xsl:value-of select="$DaiBanUserName"/>&temp</xsl:variable>
<div
data-dojo-type="moa/TodoScrollableView"
id="todoPage"
data-dojo-props="
requestData:'{$todoRequestUrl}',
labelName:'待辦文件',
heading:'todoHeading',
refresh:'todoRefresh',
fixedHeader:'todoHeading'
"
>
<!--
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'待辦工作',fixed:'top'" id="todoHeading">
<span data-dojo-type="dojox/mobile/ToolBarButton" style="float:left" data-dojo-props="moveTo:'homePage'">首 頁</span>
<span data-dojo-type="dojox/mobile/ToolBarButton" style="float:right" id="todoRefresh">刷 新</span>
</div>
-->
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'待辦文件',fixed:'top'" id="todoHeading">
<span
data-dojo-type="dojox/mobile/ToolBarButton"
style="float:left"
data-dojo-props="moveTo:'documentSystemPage',clickable:true,onClick:onHomeReturnClick"
>返 回</span>
<span data-dojo-type="dojox/mobile/ToolBarButton" style="float:right" id="todoRefresh">刷 新</span>
</div>
<xsl:call-template name="homeMainNavy"/>
</div>
/*
*可以自動載入數據列表的視圖
*數據結構與待辦相同的模塊使用這個視圖，非同步載入數據
*這事類對象，需要new關鍵字或直接用標簽調用
*/
define([
"dojo/_base/declare",
"dojo/request",
"dojo/store/Memory",
"dojo/_base/array",
"dojox/mobile/EdgeToEdgeStoreList",
"dojox/mobile/ScrollableView",
"dojox/mobile/ContentPane",
"./html5-session-store",
"dojo/dom",
"dojo/dom-attr",
"dojo/on",
"dojo/touch",
"./mdp-common",
"./dojo-ready-task",
"./rootUrl",
"dojo/string",
"./mdpServlet",
"dojo/date",
"dojo/date/stamp",
"dojo/topic",
"./dialog"
],function(
declare,
request,
Memory,
arrayUtil,
EdgeToEdgeStoreList,
ScrollableView,
ContentPane,
session,
dom,
domAttr,
on,
touch,
mdpCommon,
task,
rootUrl,
strUtil,
mdpServlet,
dojoDate,
dojoStamp,
topic,
dialog
){
var DataScrollView = declare([ScrollableView],{
count:0,
maxCount:100,
requestUrl:mdpServlet,
requestData:null,
labelName:"",
heading:"",
refresh:"",
progress:null,
list:null,
sessionName:function(){
var session = "globle."+this.get("id");
return session;
},
postCreate:function() {
this.inherited(arguments);
//給自定義view載入數據
this._loadData();
var self = this;
var refresh = dom.byId(this.refresh);
this.own(
on(refresh,touch.release,function(evt){
session.remove(self.sessionName());
self._loadData();
evt.preventDefault();
evt.stopPropagation();
})
);
},
//更新首頁待辦導航列表視圖數值
_publishInform:function(count)
{
topic.publish("moa/home/listcreated",{id:this.id,sessionName:this.sessionName()});
},
_loadData:function() {
//使用緩存
if(session.support()) {
var response = session.getJson(this.sessionName());
if(!!response) {
this._createList(response);
this._publishInform();
return;
}
}
//使用ajax載入
if(!this.requestUrl) {
return;
}
var self = this;
//發ajax請求,火狐會存在問題，初步估計問題是重定向造成的
request(this.requestUrl,{
method:"POST",
data:{url:this.requestData},
handleAs:"json"
}).then(function(response){
self._sort(response);
//使用session保存數據
if(session.support()) {
session.saveJson(self.sessionName(),response);
}
self._createList(response);
self._publishInform();
},function(ex){
});
},
_setHeading:function() {
var heading = dom.byId(this.heading);
if(!heading) {
return;
}
var label = this.labelName;
var style = "position:relative;top:-3px;margin-left:10px;color:red;border-radius:30px;border:1px solid #f9f9f9;padding:3px 6px;font-size:13px;";
var count = Math.min(this.count,this.maxCount);
label = label +"<span style='"+style+"'>共"+ count +"條</span>";
task.setHeadingLabel(label,this.heading);
},
//給列表排序
_sort:function(data)
{
if(!data || !data.data || data.data.length < 2) {
return;
}
//排序函數
var compare = function(a,b)
{
if(!a.rightText || !b.rightText)
{
return 0;
}
return dojoDate.difference(dojoStamp.fromISOString(a.rightText),dojoStamp.fromISOString(b.rightText),"day")
}
data.data.sort(compare);
},
_createList:function(data){
if(!!this.list){
this.list.destroy();
}
this.count = !data || !data.data?0:data.data.length;
if(this.count === 0 || !!data.data && data.data.length === 0) {
var pane = new ContentPane({content:"暫無數據",style:"width:100%;padding:15px 0;text-align:center;line-height:200%;color:red;font-weight:bold;"});
this.list = pane;
task.addViewChild(this,pane);
return;
}
var model = !data.data?{data:[],idProperty:this.label}:{data:data.data,idProperty:this.label};
var store = new Memory(model);
var self = this;
this._setHeading();
var list = new EdgeToEdgeStoreList({
store:store,
postCreate:function() {
var children = this.getChildren();
arrayUtil.forEach(children,function(item){
item.clickable=true;
item.onClick=function(evt){
evt.preventDefault();
evt.stopPropagation();
//loadadd 1028
//this.set("busy",true);
//self._requestTodo(this.moaUrl)
//console.log("loading1......");
/*
dialog.progressIndecator();
var OADocUrl = this.moaUrl;
//必須0.2s後
var timeout = window.setTimeout(function(){window.clearTimeout(timeout);self._showContent(OADocUrl);},1000);
*/
self._showContent(this.moaUrl);
//self._updateTodoList(this.moaUrl);
};
})
}
});
task.addViewChild(this,list);
this.list=list;
},
_showContent:function(url) {
//記錄一個臨時cookie,這是返回主頁的時候用的，需要定位到主頁特定視圖
var newUrl = strUtil.trim(url)+"&todo";
if(this.id === "inReadingPage") {
this._updateTodoList(newUrl);
}
session.saveString("homeShowId",this.id);
//調用眾望的介面直接打開html頁面
var ObjForm = mdpCommon.GetForm("frm");
mdpCommon.InputField("frm","url",newUrl);
mdpCommon.AccessURL(ObjForm);
ObjForm.submit();
},
//更新待辦列表
_updateTodoList:function(url) {
var regExp = /([0-9A-Za-z]{32})/gi;
var result = url.match(regExp);
var unid;
if(!!result) {
unid=result[0];
}
if(!unid) {
return;
}
var todoList = session.getJson("globle."+this.id);
var count = todoList.count;
var todoList = todoList.data;
for(var i=0,len=todoList.length;i<len;i++){
var moaUrl = todoList[i].moaUrl.toUpperCase();
if(moaUrl.indexOf(unid) > -1) {
todoList.splice(i,1);
count--;
break;
}
}
session.saveJson("globle."+this.id,{count:count,data:todoList});
},
_cacheDocUrl:function(todoUrl,docUrl) {
if(!session.support()) {
return;
}
var todoUnid = this._getTodoUnidFromUrl(todoUrl);
session.saveString(this.sessionName()+"."+todoUnid,docUrl);
},
_getDocUrl:function(todoUrl){
if(!session.support()) {
return;
}
var todoUnid = this._getTodoUnidFromUrl(todoUrl);
return session.getString(this.sessionName()+"."+todoUnid);
},
_getTodoUnidFromUrl:function(todoUrl){
//從todo url中解析todo unid
var reg = /([A-Fa-f0-9]{32})/;
var res = reg.exec(todoUrl);
if(!!res){
return res[0].toUpperCase();
}
},
_requestTodo:function(url) {
var docUrl = this._getDocUrl(url);
if(!!docUrl){
this._showContent(docUrl);
return;
}
var self = this;
request(this.requestUrl,{
method:"POST",
data:{url:url},
handleAs:"json"
}).then(function(response){
docUrl = rootUrl+"/"+response.dbname+"/0/"+response.unid+"?editdocument";
self._cacheDocUrl(url,docUrl);
self._showContent(docUrl);
},function(ex){
});
}
});
return DataScrollView;
});
❹ （一）基於 vue-element-admin 前端與後端框架搭建
通過 src/settings.js 進行全局配置：
get-page-title.js 在 src/permission.js 中被引用
修改 package.json
執行命令啟動
中間件是一個函數，請求和響應周期中被順序調用
寫一個中間函數
調用中間件注意事項：
應用如何響應請求的一種規則
響應 / 路徑的 get 請求
響應 / 路徑的 post 請求
規則主要分兩部分
通過自定義異常處理中間件處理請求中產生的異常
使用時需要注意兩點：
瀏覽器輸入 http://localhost:5000/user
安裝 boom 依賴，最大的好處是可以快速的幫我們生成一些異常信息
app.js
創建 router 文件夾，創建 router/index.js
創建 router/user.js
創建 router 文件夾，創建 router/constant.js
啟動，訪問根路徑 http://localhost:5000
這里指定的路由的前綴 /user 所有訪問路徑前要加 /user
訪問 http://localhost:5000/user/info
訪問一個不存在的路徑
自定義路由異常處理中間件
注意兩點:
訪問一個不存在的路徑時，會返回一個 json 的結果，方便前端做出處理
❺ 前端頁面顯示帶格式的json數據
首先後台返回數據格式形如下面：
var jsonData = '{↵↵ "reason": "成功",↵↵ "result": {↵↵ "realname": "董**",/*真實姓名*/↵↵ "idcard": "330329199******12",/*身份證號碼*/↵↵ "res": 1 /*1：匹配 2：不匹配*/↵↵ },↵↵ "error_code": 0↵↵ }';
然後JS處理如下：
jsonData = jsonData .replace(/↵/g,"").replace(/ /g," ");
或者下面這種
jsonData = jsonData .replace(/\n/g,"").replace(/ /g," ");
頁面上如果是框架的話 使用v-html 或者ng-html等，否則使用<pre></pre>也可以。
❻ 【JSON】JSON在前端和後端傳遞
後端：我們假定使用的是java語言
前端：毫無疑問是js
java語言：是一種強類型的語言，必須定義類型，然後生成實例；而js卻不是，雖然它也是面向對象的，但是它並沒有先定義類這一種概念（但是js也有類型），它是基於原型的一種模式，和java完全不同。很顯然，二者的原理，機制，語法並不能兼容。二者產生的對象並不能被對方解讀。再來看網路傳輸，通常就是http/tcp協議嘍，使用的其實是請求-響應，再說白了即使字元串，不論後台傳來的是什麼類型的數據，也不論前台傳回的什麼類型的數據，網路層統統當作字元串處理，它也沒有辦法來解析類型啊！說到這里，前後台傳數據也就只能用字元串了，那也就意味著它們各自都要完成一個轉換過程，把要發送的轉換成字元串，把要收到的字元串解析成自己的對象。因為傳輸的字元串會涉及前後台雙方的解析和處理，所以雙方都必須認識或者知道字元串該怎麼轉，也就是說，最好能有一種通用的規則來編輯，轉換字元串，這個標准或者協議就是JSON，JSON就是用來交換數據的，是一種string，一種獨立於平台的數據格式。
這樣一來，前台就需要把自己的數據類型轉成JSON，然後發給後台，後台在用JSON來解析數據，轉換成自己的類型。後台傳前台一樣。那麼，怎麼把自己的數據轉成JSON呢？
`JSON`對象可以通過JavaScript存取屬性！JSON對象封裝成JSON字元串經常用於前後台傳輸數據！
如果在前端使用，那麼JSON對象可以通過 對象.屬性名 來調用，如果是json字元串，那麼只是字元串了！
在數據傳輸過程中，JSON是以文本、即字元串的形式傳遞的，而JavaScript操作的是JSON對象，所以，JSON對象和JSON字元串之間的相互轉換是關鍵。
JSON字元串：var str = '{ name: 'xmt', sex: 'woman' }'；
JSON對象： var str = { name: 'xmt', sex: 'woman' }；
JSON字元串轉化為JSON對象：var obj = JSON.parse(str) ；
JSON對象轉化為JSON字元串：var str = JSON.stringify(obj)；