后台前端框架_前端开发框架有哪些

1. 做一个后台管理平台，前端最好选用什么框架

jquery,bootstrap,foundation(响应式)都比较简单易用。

ExtJS比较适合管理平台，虽然样式什么的比较老土，但是好在表格很多。

管理平台需要使用大量的数据，所以extjs也是必不可少的。（个人己见）

2. 后台只提供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:'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;
});

3. 关于后端程序员写前端用什么框架更好

各大前端框架可以按照“封装度”的标准来区分。设计刚出的一套网页皮肤，封装度为0。层层封装到可以直接用后台语言写页面，封装度为10。那么我是这样来区分前端框架的。
1级——纯html+css 放5年前，基本就是用Dreamweaver刚排出来的页面或者网页查看源代码扒下来的皮肤。不涉及到js，就是纯页面皮肤。
2级—— bootstrap系列 bootstrap的出现是一个里程碑事件。发源于twitter，引入了不少html5/css3的特性。由于它对响应式的支持以及良好的体验，给人一种耳目一新的感觉。其源码，不管是css还是js都值得学习一下，看后经常会有“原来还可以这样做”这种恍然大悟的感觉。不过归根结底是一套ui皮肤+少量js组成的框架，属于封装度偏低的框架。
3~4级—— metronic/adminLTE系列基于bootstrap或者其他1级框架，然后集成了各种jQuery插件、富文本编辑器等js库，组成的一个大杂烩工具包和案例库。皮肤基本是基于bootstrap自定义的一套主题。案例比较详尽，开发的时候找到需要的组件把前端代码复制粘贴，再稍微调试一下就能达到良好的视觉效果。根据集成的第三方库的多少，基本可以划分到3~4级封装度这样的范围。这个级别的框架的代码更多的是属于粘合剂，将各种不同的第三方库的前端代码粘合起来。
5级—— jQuery-ui 这里要单独把jQuery-ui拿出来讲，并不是因为它的封装度有多高，而是我认为它是一个分界点。jQuery以下级别的框架，代码以css为主，自身的js代码少，框架量级更轻，更灵活，更适合互联网web产品。jQuery以上级别的框架，属于前端的重度封装，通过框架暴露的接口进行开发，开发人员甚至不需要太多前端知识，只需要详细查看框架的开发文档即可。jQuery以上级别的框架更适合传统管理软件的开发。
6~7级—— easy-ui/DWZ easy-ui基于jQuery-ui，不过具有更丰富的组件库。貌似商业版收费很高。听说某大型国企花了大价钱购买下来使用。DWZ是国产框架中我认为综合表现还不错的，完全免费，有问题可以在他们的QQ群里提。其余的之前还用过金蝶的operamasks-ui，不过现在好像已经不更新了。这一类级别的框架还有一个另外的称呼——“富客户端框架”，意思就是重度js框架。使用起来开发效率很高，当年也是一度百花齐放，框架辈出。
8级—— extjs系列 extjs属于前端框架领域中的庞然大物，封装程度很高，具有自成体系的元素选择引擎和浏览器兼容方案，js写法上也有自己的方式。组件很多很全。只看extjs的官方文档和示例几乎不必学习任何其他的前端知识就可以做出“很漂亮”的前端页面。当然页面很容易“撞衫”。使用时间长了，会对其产生严重依赖，离开extjs，几乎不会写前端页面了。
9级——vaadin/GWT 最后一级，也是封装度最高的一级，也就是所谓的使用后台语言写前端。如果说之前的八级至少前端和后端还是相对分离的，后台程序在java中写，前台程序在html或者js中写；那么这一级别的框架简直会颠覆你的认知！只需在后台使用java写好了类和对象，并设置好相关的属性，网页的元素是自动通过后台对象生成的。这当然有好处，妈妈再也不用担心我不会写js和css了。然而就学一下html/css/js真的那么难吗？个人认为，尽管GWT有google的这么强悍的背书，但是这种9级封装的本质上把前后台耦合得更紧密。一个人做一个项目还可以考虑，但是一个团队前后台分离、模块化开发的时候，使用这种框架是一种灾难！所以我是极度不建议使用9级封装框架的。

4. 现在，前端框架、后端框架，主要有那些，详细且简略点的，有名就行

前端bootstrap
后台 spring struts springmvc hibernate mybatis

5. 微信端（后台管理系统）用什么前端框架比较合适

就是个后台管理系统，和是不是微信端没什么关系吧。bootstrap足矣，浮层等用layer.js。

6. 后台管理系统，前端框架用什么最好

还是要看你平时自己的操作习惯呢。从前端框架的流行度来排序，以下有几种都可以向你推荐~

希望以上的推荐建议能够帮到你呀~

7. web前端框架有哪些

对于想转行的小伙伴，小蜗这里整理了一份系统的学习路线，可按照这份大纲一步一步来学习，先将基础打好，再学习框架部分，希望可以帮到你~

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

web前端学习路线思维导图

8. 前端开发框架有哪些

前端框架好不好用还是要看具体情况分析，我这里给你推荐几个常用的框架，可以按需使用。

1、vue-element-admin

一个基于vue2.0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

2、AdminLTE

非常流行的基于Bootstrap 3.x的免费的后台UI框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手用来做项目。

3、ant-design-pro

这个就不多说了，选择react技术栈的童鞋们必然离不开这个优秀开箱即用的中台前端/设计解决方案，文档齐全，组件丰富，一键生成模板，更支持开启复制粘贴模式哦。

4、ng2-admin

这是基于Angular 2、Bootstrap 4和webpack的后台管理面板框架，要收前面已经有了React和vue技术栈的模板，那怎么能少了ng的？虽然在国外用的比较多，国内较少使用，但丝毫不影响ng作为前端框架三巨头之一的地位。

9：material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。Material Dashboard 是一个开源的 Material

Bootstrap Admin，其设计灵感来自谷歌的 Material Design 。

10：d2-admin

D2Admin 是一个完全开源免费的企业中后台产品前端集成方案，基于 vue.js 和 ElementUI 的管理系统前端解决方案，小于 60kb的本地首屏 js 加载,已经做好大部分项目前期准备工作

11：vuestic-admin

vuestic-admin管理台仪表盘是一个响应式的仪表盘模板，采用Bootstrap4和Vue.js构建。这个精美的管理台模板提供了自定义元素组件，如地图，聊天，个人资料卡，图标，进度条等，以及用于登录和注册的预建页面。

9. 后台管理系统，前端框架用什么最好

页面框架属于前端的内容，不属于后台。现在bootstrap比较流行，不过在ui层面一般的设计师也不太喜欢用现成的框架，太复杂改起来很累，有时候不如自己根据需求写。现成的页面框架比较适合对ui前端不太懂的程序员

后台前端框架

与后台前端框架相关的内容