❶ 前端常用的框架有哪些
前端三大框架，是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)；