本文目录一览:
- 1、如何评价淘宝 UED 的 Midway Framework 前后端分离
- 2、程序员分前端与后端,那么后端程序员都做些什么?看完就知道了
- 3、java工作流引擎中,哪个在市面上用得最多?
- 4、web前端需要掌握的哪些知识
- 5、renrenfast 怎么进入login页的
- 6、Web前端新手应该如何防御XSS攻击
如何评价淘宝 UED 的 Midway Framework 前后端分离
【贺师俊的回答(17票)】:
泻药。
1. 这系列文章写得很好。
【注意,熟悉我的同志应该知道,我极少给出“很好”的评价。】
2. 这系列文章以及其背后的实践重新树立了淘宝系前端工程水准的领先地位。
【在此之前的一段时间内,至少从外部来看,淘宝已经落后于狼系和企鹅系了。】
3. 这系列文章及其背后的实践也证明了nodejs对于前端来说不仅在工具链而且在架构层面的意义。
【注意,这系列文章中的思路其实并不新鲜,但是在淘宝这样规模而且业已非常成熟的产品中实施这样的转变,我认为是具有标志意义的。】
4. 具体细节上仍有许多改善空间,如此系列的第4篇《前后端分离的思考与实践(四)》在防御XSS时还是存在一些传统问题。这方面在参加杭JS的时候,我跟淘宝的herman同学有过沟通,具体就不在本问题展开了。因为这是局部问题,对整体架构影响不大。
5. 注意,以上评价的都是架构,或者说是思路。实施效果是不是好,我相信他们自己的说法。但Midway框架本身因为没有看到具体文档和代码,而且其开发的目的首要是满足淘宝的需求,因此其本身或其具体组件是否在普遍意义上适用和优秀,无法作出判断。
【徐飞的回答(19票)】:
早上看到贺老出马,也忍不住写了一篇来谈一下苏宁这样的公司对这方面的考虑。
近两年来,我一直在思考如何改进前端体系的开发模式,这里面最基础的一点就是前后端的分离。谈到前后端分离,也有一个误区,认为仅仅是以浏览器作分界,把这两部分的代码分离出来。但其实是,做这件事情的本意,是要解决开发模式的问题,也就是要分离前后端开发人员的职责。
针对不同类型的Web产品,这个分离方式是有所不同的。对于Web应用,因为它跟服务端的交互基本就是AJAX或者WebSocket接口,所以这个分离是天然的,整个前端基本都是静态HTML模板,JavaScript模块,以及CSS和相关静态资源,但是对于网购产品这样的形态,它的做法就不一样。
## 展示占主要部分的产品
网购产品的展示需求很重要,图片等资源载入非常多,但相对的操作却很少,基本只有搜索商品,加购物车,结算这样的环节。传统这样的产品,多半是这么个工作流程:
交互出高保真图,前端去切图,生成静态HTML加展示效果,然后,注意,他不是自己接着往下做,而是交给另外一群开发人员,把它转换成服务端模板,比如freemarker或者velocity之类,或者是smarty,为什么要这么做呢?因为这类产品讲究一个首屏优化,是首屏而不是首页,这就意味着对于首屏来说,经过的环节应当尽可能少,比如说,就不能先载入客户端模板,再AJAX一个数据,然后去渲染一下。这么做的性能肯定是不如服务端把HTML生成好,然后一次请求加载的。
这个过程肯定是有一些问题的,比如说,如果开发人员B在套模板的过程中,发现原先的静态HTML部分有问题,应该怎么办?大家知道,一个对HTML和CSS都很熟悉,同时又可以写业务逻辑的前端开发人员是很稀缺的,所以,多数情况下,这两边的技能是不同的,如果是简单的页面问题,这个开发人员可能自己也就解决了,如果他解决不了,怎么办?
如果B自己不改,把他已经搞成服务端模板的代码返回给前端人员A,A也没法下手,因为已经是服务端模板,A手里没有环境,改了之后不知道对不对,不能预览。那么,B把问题告诉A,A修改他的原始版本,然后再拿给B又怎样呢?这时候B又麻烦了,他要对比两次修改的部分,把自己前一阵的修改合并进去。
所以,不管怎么搞,这里面都很折腾。
Midway这个产品,他想要解决什么问题呢?既然说前端人员没法预览模板的原因是,后端在使用服务端模板,那么,我能不能找一种两边都可用的模板,你能在服务端渲染,我也能在客户端预览?服务端跟浏览器端同时都能运行的语言是什么?只有JavaScript。
所以,大家就往nodejs里面去发掘了,一个普通的JavaScript模板库,它在浏览器端也可以渲染,在nodejs端也可以输出成HTML,这时候,那些原来负责整合模板和逻辑的人员改用nodejs,是不是就解决这问题了?
想象一下这个场景多么美好:前端来决定某个模板是服务端渲染还是客户端渲染,当首屏的时候,就在nodejs里面生成HTML,不是首屏的时候,就AJAX过来在浏览器端渲染展示。
从技术方案上看,这么做很好了,工程上又带来另外一些问题,那就是对熟练JavaScript开发人员的需求量大增。对阿里这样的公司来说,前端有大几百人,别的公司只能仰望,所以他当然可以放手一搞,但对我们苏宁这样,前端人数不大的,就麻烦了。如果我们也引入这样的方案,就面临把很大一部分Java开发人员转化成JavaScript开发人员这么一个问题,这个事情短期内肯定是无法解决的,所以反过来会增加前端这边的压力。所以暂时还用不了阿里这样的方案,只能努力先提高人员水平再看情况。
服务端引入nodejs还有别的优势,比如说请求合并等等,这个也可以用其他方式变通解决,比如加一个专门的跟现有后端同构的Web服务器,在那边干这些事。
## 展示和业务逻辑较均衡的产品
对于另外一些场景,也有类似的问题,比如支付产品,展示相对没那么重,但是又算不上Web应用,它面临另外一种情况的前后端分离。这种场景下,前端的出静态HTML和DOM操作类的JavaScript,业务开发人员负责写后端,还有另外一部分业务逻辑的JS。
这里的问题是什么呢?是jQuery式代码造成的协作问题。比如说:
$(".okBtn").click(function() { $.ajax(url, data) .success(function(result) { $("someArea").html(_.template("tpl", result)); });});
因为前端人员的稀缺,所以他不可能帮你把业务逻辑写出来,所以说,这里面$.ajax往里的部分,要业务人员自己写。然后,数据得到之后,又要去处理界面部分。
很多场景下,处理界面远不是这么搞个模板放上去就完事的,所以业务开发人员感到很烦闷,为了这么一点小问题,反复去找前端的人来搞,很麻烦,自己搞又特别花时间,所以都很苦闷。
这同样是一种前后端的分离,只是这个分界线不在浏览器,而在于:是否写业务逻辑。对付这种场景,解决办法就是加强JavaScript代码的规划。现在流行那么多在前端做MV*的框架,不考虑Angular这类太重量级的,来看看Backbone这样的,它到底解决了什么问题?
很多人说,Backbone虽然小,但根本不解决问题。这句话有一定道理,但前提条件是你自己的JavaScript代码分层已经做得很好了。如果做得不好,它就可以协助你解决分层的问题。
刚才那段代码,它的问题在哪里呢,在于职责不清晰。一个函数只能做一件事,这是共识,但由于回调等方式,所以不经意就破坏了函数的单一性、完整性。我们试试来拆开它。
对于一个后端开发人员来说,他为什么常常害怕写前端代码?是因为JavaScript语言吗?其实不是,我们用来写业务逻辑的时候,只会使用JavaScript一个很小的子集,对于这个子集来说,它并不存在多大的学习困难,最麻烦的地方在于DOM、BOM等东西,对于一个后端开发人员来说,如果要求他在掌握服务端代码编写的同时,还要去学这些,那真是有些不容易,所以,我们来给他省点事。
现在我们的出发点是,把这段代码拆给两个不同的人写,一个人操作DOM,另外一个人只写逻辑,绝对不操作DOM。前面这个代码拆给前端维护,后面这个拆给业务开发人员。
最老圡的方式:
a.js
$(".okBtn").click(function() { b1(data);});function a1(result) { $("someArea").html(_.template("tpl", result));}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
现在大家是不是相安无事了?
如果这么做的话,AB双方要做很多约定,也就是说,这个过程仍然是一个螺旋链。比如说,A先写点击事件的绑定,然后想起来这里要调用一个请求,就去找B写b1方法。B在写b1的时候,又想到他要调用一个界面展示方法a1,然后又来找A写,来回也挺折腾。
况且,有这么一天,A在另外一个地方也想调用b1了,但是由于b1的回调已经写死了,比较蠢的办法就是在a1里面再判断,这是什么东西点击造成的,然后分别调用不同的回调。如果情况复杂,那这个代码写出来真是没法看。
如下:
a.js
var type = 0;$(".okBtn").click(function() { type = 1; b1(data);});$(".okBtn1").click(function() { type = 2; b1(data);});function a1(result) { if (type1) { $("someArea").html(_.template("tpl", result)); } else if (type2) { // ... } type = 0;}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
稍微好一些的办法是,在b1中,直接返回这个请求的promise,这样可以由调用方决定到底该干什么。
如下:
a.js
$(".okBtn").click(function() { b1(data).success(function(result) { $("someArea").html(_.template("tpl", result)); });});$(".okBtn1").click(function() { b1(data).success(function(result) { // ... });});
b.js
function b1(data) { return $.ajax(url, data);}
如果要对返回数据作统一处理,也可以很容易地在b1中,用promise重新封装了返回出来,只不过这样在a.js里面,直接调用的就不是success,而是then了。
注意到这样的代码还有问题,比如说大量的全局函数,不模块化,容易冲突。此外,没有一个地方可以缓存一些共享数据,比如说这么一个场景:
界面上两个块M和N,其中,M初始载入并加载数据,N在初始的时候不载入,而是在某个按钮点击的时候载入,而M和N中各有一个列表,数据来源于同一个服务端请求。
现在就有个问题,当N载入的时候,它的数据怎么来?比较老土的方式,肯定是载入N的时候,同时也再去请求一下数据,然后渲染到N上。
从一个角度看,如果说不重新请求,N的这个数据应当从哪里来?从另外一个角度看,如果重新请求了,发现数据跟之前的产生了变更,是否要同步给M,怎么同步给它?
我们看看类似Backbone这样的框架,它能提供怎样的机制呢?或者如果我们不用它,怎么自己把这个分层封装得更好一些?
首先,是建立一个数据模型,在它上面添加数据的缓存:
define("model", [], function() { var Model = { data: null, queryData : function(param, fromCache) { var defer = q.defer(); if (fromCache || this.data) { defer.resolve(this.data); } else { var self = this; this.ajax(url, param).success(function(result){ self.data = result; defer.resolve(result); }); } return defer.promise; } }; return Model;});
这么一来,我们在模型上作了数据的缓存,如果调用的时候加fromCache参数,就从缓存读取,否则就请求新的。为了在两种情况下,调用方接口能保持一致,把整个函数封装成promise,以便接着调用。这里的模型定义成单例了,假定是全局唯一的,可以根据需要调整成可实例化的。
这个时候,视图层就要封装DOM和事件的关联关系:
define("view", ["model"], function(Model) { function View(element) { this.element = element; this.element.selector(".okBtn").click(function() { var self = this; var fromCache = true; Model.queryData({}, false).then(function(result) { self.renderData(result); }); }); } View.prototype = { renderData: function(data) { this.element.selector("someArea").html(_.template("tpl", result)); } };});
这个时候,多个视图实例的情况下,数据也能够较好地利用。
这样,前端写这个View,后端写Model,可以作这么个分工。
这个只是很简陋的方式,在复杂场景下还有很多不足,在这里先不展开了。更复杂的场景也就是类似Web应用那种方式,稍后专门写一篇来展开。
## 小结
我们再来回顾前后端分离所要解决的问题,是分离前端和业务开发人员的职责,这个方案怎么定,是应当随着团队状况来确定的。比如阿里前端厉害,人多势众,他的前端就要往后推,去占领中间层。我们苏宁这样的公司,前端比较薄弱,只能在很多场景下,让出中间层,否则战线铺太广只能处处被动。
同一个中途岛,在不同的形势下,占还是不占,是很考验前端架构师的一个问题。
对阿里的这种实践,我们会持续围观,寻找并创造合适的出手时机。
【rank的回答(4票)】:
简单说下自己的看法。
前端不再继续「单纯」在 kissy 上下功夫,而可以考虑向后的延伸架构是一种前端的进步,这种前端架构将重定义阿里的前端工程师工作,很多互联网公司比阿里先行一步。
这个思路与与最早阿里很多前端没有碰后端(例如模板)有很大的关系,用 NodeJS 作中间层能解决现面临的问题,是一种不限于解决当前问题的长远解决方案。
具体是否能解决和解决得好,在于细节,不在新,而在过渡。如,如何过渡目前 NodeJS 与原来的数据交互,如何灰度过渡,工作量等。
平台化与接口化思路(后端数据接口以 Services 存在)让 amazon 收益非浅,现在后端平台化接口化在大公司趋势明显。
平台化需要更多更快的应用层开发选型,NodeJS 是不错的一种。NodeJS 虽然还是有些问题,但从信息面与我们自己的应用经验来看,已有慢慢成为后端 WebApplication 的一种很好的选型方案的趋势。
总的来说,是个趋势。
【Hex的回答(1票)】:
我认为这就是所谓的大前端开发模式。模式确实是好模式,但是真正实践起来,和后端工程师的沟通和协调也会遇到很多问题。
我做过的几个项目都是采用这种大前端的开发模式,前端基于Transformers框架+CodeIgniter组成大前端,这样确实可以很好的隔离前后端,项目可维护性大大提高。
【邓欣欣的回答(1票)】:
上周去杭州玩了下,和之前的阿里同事做了些技术交流,发现这一年,阿里的前端在流程改进上下了很大功夫; 题主所说的中途岛应该是 UDC 团队做的,应该说思路不是很新鲜,国外有 ebay 向 nodejs 的转型案例,国内之前也有百度音乐移动端的案例;
但对阿里前端来说,意义确是很重大,解决了合作流程中的一个很大问题:之前阿里的前端是只写静态 demo,写完给开发套模板,开发不太懂 html,漏写个标签,然后找前端调试,一来一去很折腾,是个必须干但又是个没啥技术含量的事; 中途岛可以很好的解决这类蛋疼事,但是请不要认为前端就因此会后端了,无非是之前浏览器用 ajax 请求接口,现在咱用 node http去请求呗,框架做得牛逼点,统一适配出前端的ajax 接口也不是不可能呀~~,想想嘛,为啥要用 node 呢? 牛逼直接写 java 啊。。哈哈哈~
其他的 F2E 团队也做些很不错的流程改进工具,同样不是很新鲜,但对阿里前端都是比较有意义的工具:
def: 项目构建与发布工具,与阿里的 gitlab, scm 整合,各种 脚手架,build,combo,发布,一条命令搞定,确实很方便;
dip:数据接口平台,定义业务线前后端数据格式的一个内部公共平台,基于 json-schema,好像也可以给你提供 mock 接口;
uitest:前端持续集成平台;之前这东西我是边做边吐槽的,似乎刚上线,类似 jenkis 这些,提交或者发布代码时,先帮你跑一次测试用例;目前通用测试库比较少。
Trace:好像是叫这个名字吧,监控平台,这个比较早就有了,用来监控各个业务线页面的运行状况并搜集各种用户数据,如分辨率,UA
我看来 def 和 dip 对阿里前端的作用会更大些,uitest 估计作用一般,阿里前端是不注重代码质量的,测试用例也仅在几个重要的直接影响交易的业务线会写。
【许文敏的回答(0票)】:
确实不错,从职责上来区分前后端分离才是王道,nodejs将成为前端工程师的基础技能
【猎人豆豆的回答(0票)】:
不要把简单的问题搞复杂,对于淘宝这样规模的公司,有些牵一发而动全身的改动,最好是在权衡风险和收益后再决定,我们是技术的使用者,而不要被技术牵着鼻子走.
【罗正烨的回答(2票)】:
前面前端的大牛们都说了,我换个角度聊聊。
这么讲吧,阿里的前端为什么比其它公司走的远,是因为他们有很多前端,还有很多不用写大量业务逻辑的前端大牛。大牛的作用,就是折腾。阿里的前端工程师水平在自身领域实践上已经跟得上后端。
但这个架构所谓的分离,其实是把很多原来前端不需要做的事揽到了自己的手上,增加前端架构师的KPI,让前端做了更多的事,周报好写。因为nodejs和前端都是js,所以学习成本并不算高,但是对一个技术人员的要求是比原来更高了。
但是,他们团队有很多HC,有很多钱。。所以像我这种一个产品线只有一二个前端的,要是这么玩儿,招人跟不上不说,然后还可以把自己累死。
所以技术选型和架构这种事,还是要根据自己团队的能力和招人啊。
程序员分前端与后端,那么后端程序员都做些什么?看完就知道了
我刚开始做Web开发的时候,根本没有前端,后端之说。
原因很简单,那个时候服务器端的代码就是一切: 接受浏览器的请求,实现业务逻辑,访问数据库,用JSP生成HTML,然后发送给浏览器。
即使后来Javascript在浏览器中添加了一些AJAX的效果,那也是锦上添花,绝对不敢造次。因为页面的HTML主要还是用所谓“ 套模板 ”的方式生成:美工生成HTML模板,程序员用JSP,Veloctiy,FreeMaker等技术把动态的内容添加上去,仅此而已。
那个时候最流行的图是这个样子:
在最初的J2EE体系中,这个 表示层 可不仅仅是浏览器中运行的页面,还包括Java写的桌面端,只是Java在桌面端太不争气, 没有发展起来。
每个程序员都是所谓 “全栈”工程师 ,不仅要搞定HTML, JavaScript, CSS,还要实现业务逻辑,编写访问数据库的代码。等到部署的时候,就把所有的代码打成一个WAR包,往Tomcat指定的目录一扔,测试一下没问题,收工回家!
不差钱的公司会把程序部署到Weblogic,Websphere这样的应用服务器中,还会用上高大上的EJB。
虽然看起来生活“简单”又“惬意”,但实际上也需要实现那些多变的、不讲逻辑的业务需求,苦逼的本质并没有改变。
随着大家对浏览器页面的 视觉和交互 要求越来越高,“套模板”的方式渐渐无法满足要求,这个所谓的表示层慢慢地迁移到浏览器当中去了,一大批像Angular, ReactJS之类的框架崛起,前后端分离了!
后端的工程师只负责提供接口和数据,专注于业务逻辑的实现,前端取到数据后在浏览器中展示,各司其职。
像Java这样的语言很适合去实现复杂的业务逻辑,尤其是一些MIS系统,行业软件如税务、电力、烟草、金融,通信等等。 所以剥离表示层,只做后端挺合适的。
但是如果仅仅是实现业务逻辑,那后端也不会需要这么多技术了,搞定SSH/SSM就行了。
互联网,尤其是移动互联网开始兴起以后,海量的用户呼啸而来,一个单机部署的小小War包肯定是撑不住了,必须得做分布式。
原来的单个Tomcat得变成Tomcat的 集群 ,前边弄个Web服务器做请求的 负载均衡, 不仅如此,还得考虑状态问题,session的一致性。
(注:参见文章《小白科普:分布式和集群》)
业务越来越复杂,我们不得不把某些业务放到一个机器(或集群)上,把另外一部分业务放到另外一个机器(或集群)上,虽然系统的计算能力,处理能力大大增强,但是这些系统之间的通信就变成了头疼的问题, 消息队列 (MQ), RPC框架 (如Dubbo)应运而生,为了提高通信效率,各种 序列化的工具 (如Protobuf)也争先空后地问世。
单个数据库也撑不住了,那就做数据库的 读写分离 ,如果还不行,就做 分库和分表 ,把原有的数据库垂直地切一切,或者水平地切一切, 但不管怎么切,都会让应用程序的访问非常麻烦,因为数据要跨库做Join/排序,还需要事务,为了解决这个问题,又有各种各样“ 数据访问中间件 ”的工具和产品诞生。
为了最大程度地提高性能,缓存肯定少不了,可以在本机做缓存(如Ehcache),也可以做 分布式缓存 (如Redis),如何搞 数据分片 ,数据迁移,失效转移,这又是一个超级大的主题了。
互联网用户喜欢上传图片和文件,还得搞一个 分布式的文件系统 (如FastDFS),要求高可用,高可靠。
数据量大了,搜索的需求就自然而然地浮出水面,你得弄一个支持全文索引的 搜索引擎 (如Elasticsearch ,Solr)出来。
林子大了,什么鸟都有,必须得考虑 安全 ,数据的加密/解密,签名、证书,防止SQL注入,XSS/CSRF等各种攻击。
前面提到了这么多的系统,还都是分布式的,每次上线,运维的同学说:把这么多系统协调好,把老子都累死了。
得把持续集成做好,能自动化地部署,自动化测试(其实前端也是如此),后来出现了一个革命化的技术 docker , 能够让开发、测试、生成环境保持一致,系统原来只是在环境(如Ngnix, JVM,Tomcat,MySQL等)上部署代码,现在把代码和环境一并打包, 运维的工作一下子就简化了。
公司自己购买服务器比较贵,维护也很麻烦,又难于弹性地增长,那就搞点虚拟的服务器吧,硬盘、内存都可以动态扩展(反正是虚拟的), 访问量大的时候多用点,没啥访问量了就释放一点,按需分配,很方便,这就是 云计算 的一个场景。
随着时间的推移,各个公司和系统收集的数据越来越多,都堆成一座大山了,难道就放在那里白白地浪费硬盘空间吗?
有人就惊奇地发现,咦,我们利用这些数据搞点事情啊, 比如把数据好好分析一下,预测一下这个用户的购买/阅读/浏览习惯,给他推荐一点东西嘛。
可是这么多数据,用传统的方式计算好几天甚至好几个月才能出个结果,到时候黄花菜都凉了,所以也得利用分布式的技术,想办法把计算分到各个计算机去,然后再把计算结果收回来, 时势造英雄, Hadoop 及其生态系统就应运而生了。
之前听说过一个大前端的概念,把移动端和网页端都归结为“前端”,我这里造个词“大后端”,把那些用户直接接触不到的、发生在服务器端的都归结进来。
现在无论是前端还是后端,技术领域多如牛毛,都严重地细分了,所以 我认为真正的全栈工程师根本不存在,因为一个人精力有限,不可能搞定这么多技术领域,太难了 。
培训机构所说的“全栈”,我认为就是前后端还在拉拉扯扯,藕断丝连,没有彻底分离的时候的“全栈”工程师。
那么问题来了, 后端这么多东西,我该怎么学?
之前写过一篇文章叫做《上天还是入地》,说了学习的广度和深度,在这里也是相通的。
往深度挖掘,可以成为某个技术领域的专家,如搜索方面的专家、安全方面的专家,分布式文件的专家等等,不管是哪个领域,重点都不是学会使用某个工具和框架, 而是保证你可以自己的知识和技术去搞定这个领域的顶尖问题。
往广度发展,各个技术领域都要了解,对于某种需求,能够选取合适的软件和技术架构来实现它,把需求转化成合适的技术组件,让这些组件以合适的方式连接、部署、运行,这也需要持续地学习和不断的经验积累。
最后,以一张漫画来结束吧!
C/C++高级工程师学习路线图:
java工作流引擎中,哪个在市面上用得最多?
一起来看看java快速开发框架工作流引擎快速开发平台。 希望您能从中找到适合您自己的流程引擎。
Activiti是由jBPM 的创建Tom Baeyen离JBoss之后建立的项目,构建在开发 jBPM 版本1到4时积累的多年经验的基础之上,旨在创建下一代的 BPM 解决方案。文档丰富,csdn有相应专栏,并且国人贡献了一本《activiti实战》详细地讲解了基于activiti的开发内容,网上教程资源丰富。Activiti上手比较快,界面也比较简洁、直观,学习周期相对较短。
官方提供webapp war包,部署在Tomcat下可快速操作和了解activiti,esclipse提供支持activiti项目的ide插件,总的来说环境支持良好。
代码量大,核心代码改动难度较大,但提供了完整的技术文档,架构良好,网上开发文档较多,一定上降低了二次开发的难度。
支持,用户体验好,但是流程设计器是英文版,还需要汉化。
支持多种表单:动态表单,外置表单,普通表单,但表单设计未集成,需要自己集成表单设计。
支持绝大部分工作流功能,符合中国国情的审批流程需要在此基础上进行开发。
JBPM(Java Business Process Management):JAVA业务流程管理,是一个可扩展、灵活、开源的流程引擎, 它可以运行在独立的服务器上或者嵌入任何Java应用中。
1、jBPM3是一个完整的工作流系统实现,面向开发人员,目的在于简化对组织核心流程进行支撑的软件创建,不支持标准。
2、jBPM4引入PVM,使其拥有更强大的扩展性,同时增加BPMS特性,这些特性包括了对BPMN的支持、面向业务人员的Web建模器和简单统计分析功能的加入。
3、jBPM5基于原先的Drools Flow,支持BPMN,通过与Drools的合并支持BAM,通过内容仓库增加对流程可视化的支持。由于放弃了jBPM4的PVM,引擎的可扩展性受到损害,并且不再支持jPDL。
JBoss Seam,算得上是Java开源框架里面最优秀的快速开发框架之一。
Seam是一个很棒的选择,作为程序员来说,要比用 Spring/Hibernate/Struts省心的多,更能够把精力放在业务逻辑的编写上面,开发效率也很不错,可能是Java开源框架里面最优秀的快速开发框架之一了。
Activti的学习价值比较高,是工作流入门的好教材,可以学习里面好的代码风格和思路。Activiti最大的优点就是免费开源,小项目中应用简单的串行并行流转基本能满足需求。现在很多开发人员会选择它。但是要拿Activiti做到中国式的企业级应用门槛和难度很高。想用Activiti来做符合中国国情的审批流程,其实还需要做大量的开发封装。接下来介绍一款基于Activiti扩展的工作流引擎。
XJR java快速开发框架工作流程引擎:采用主流的Activiti工作流引擎,遵循bpmn规范,可实现XML、Json一键导入导出,以及添加了人员动态选择、便捷式会签设置、便捷式任务委托设置、添加自定义表单、自定义节点按钮、动态变量选择(包括会签变量、按钮变量、表单变量)以及各节点属性优化,遵循以客户为中心的优化原则,将整个流程的操作变得简单、快捷,实现0基础客户短时间可自由编辑流程模板。
XJR快速开发平台可视化开发,高效快速,开发成本低。兼容强,支持多种数据库,基于B/S架构,纯浏览器应用,只需要拖拽组件,拼接流程,就能实现各层的审批。面向服务接口设计,容易整合企业现有的资源。前后端分离设计,采用shiro权限验证,通过简单配置就可以实现功能权限和数据权限。开源级代码,二次扩展强。
XJR快速开发平台技术选型
使用目前流行的多种web技术,包括springboot, JPA,Druid, Activiti,Lombok,swagger,poi,WebSocket,Jquery,BootStrap, maven,Jenkins 等等,支持多种数据库MySQL, Oracle, sqlserver等。 分层设计:使用分层设计,分为dao,service,Controller,view层,层次清楚,低耦合,高内聚。 安全考虑:严格遵循了web安全的规范,前后台双重验证,参数编码传输,密码md5加密存储,shiro权限验证,从根本上避免了SQL注入,XSS攻击,CSRF攻击等常见的web攻击手段。
模块功能
功能模块:开发向导、代码 生成器,商业智能、工作流、报表管理、移动端开发、作业计划、多语言、数据源管理、企业微信、钉钉、消息管理,菜单 管理,用户管理,机构管理,角色管理,区域管理,字典管理,日志查询等基础模块。
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术?
最基础的自然是JavaScript,HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架,比如你会发现当前页面分为左中右三个部分,其中还填充了不同的文字和图片;每个子部分还会继续细分,比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制,比如你会发现有的文字是红底白色,有的子部分占了页面的二分之一宽,有的只占六分之一,有些部分需要用户进行某些操作(如点击,滑动)才会出现等等,这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作,并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击,输入等操作的时候,会触动绑定了该动作的JavaScript脚本,然后JavaScript收集数据,调用后端的api接口,再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的,你可以直接按F12,就能看到下图右侧的模块,左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错,不妨点击F12,进行学习。
前端框架
然而,实际应用中,已经很少有正规的项目组直接用上述三种语言进行web 前端开发了,而是使用很多封装了这三种语言的框架,比如
Vue.js
,angular,react native等等。它们是来自谷歌和Facebook的大神项目组,基于自己的经验,封装了原生前端语言,实现了更多更复杂更酷炫的功能。因此,可以说,学会使用这些框架,能达到事半功倍的效果。
比如用了vue,它是自底向上增量开发的设计,其核心只关心图层,而且还可以与其他库或已存项目融合,学习门槛极其友好;另一方面,vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统,可以说,vue是处在一个不断壮大,不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势,前端还需要了解很多网络通信协议的知识,这里不局限于http协议,因为据我的经验,有时候我们还会用到websocket等协议。因此,前端需要简单了解不同协议的特点以及使用方式,但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻,只要学会如何用前端语言发送这种协议的请求就够了。
renrenfast 怎么进入login页的
renren-fast是一个轻量级的Spring Boot快速开发平台,能快速开发项目并交付.
完善的XSS防范及脚本过滤,彻底杜绝XSS攻击
实现前后端分离,通过token进行数据交互
Web前端新手应该如何防御XSS攻击
今天小编要跟大家分享的文章是关于Web前端新手应该如何防御XSS攻击。作为JS系工程师接触最多的漏洞我想就是XSS漏洞了,然而并不是所有的同学对其都有一个清晰的认识。今天我们分享一下XSS漏洞攻击,希望能帮助到大家。下面我们来一起看一看吧!
一、什么是XSS攻击
XSS(Cross-SiteScripting)又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞,是由于Web应用程序对用户的输入过滤不足而产生的。
常见的XSS攻击有三种:反射型、DOM-based型、存储型。其中反射型、DOM-based型可以归类为非持久型XSS攻击,存储型归类为持久型XSS攻击。
1、反射型
反射型XSS一般是攻击者通过特定手法(如电子邮件),诱使用户去访问一个包含恶意代码的URL,当受害者点击这些专门设计的链接的时候,恶意代码会直接在受害者主机上的浏览器执行。
对于访问者而言是一次性的,具体表现在我们把我们的恶意脚本通过URL的方式传递给了服务器,而服务器则只是不加处理的把脚本“反射”回访问者的浏览器而使访问者的浏览器执行相应的脚本。反射型XSS的触发有后端的参与,要避免反射性XSS,必须需要后端的协调,后端解析前端的数据时首先做相关的字串检测和转义处理。
此类XSS通常出现在网站的搜索栏、用户登录口等地方,常用来窃取客户端Cookies或进行钓鱼欺骗。
整个攻击过程大约如下:
2、DOM-based型
客户端的脚本程序可以动态地检查和修改页面内容,而不依赖于服务器端的数据。例如客户端如从URL中提取数据并在本地执行,如果用户在客户端输入的数据包含了恶意的JavaScript脚本,而这些脚本没有经过适当的过滤和消毒,那么应用程序就可能受到DOM-basedXSS攻击。需要特别注意以下的用户输入源document.URL、location.hash、location.search、document.referrer等。
整个攻击过程大约如下:
3、存储型
攻击者事先将恶意代码上传或储存到漏洞服务器中,只要受害者浏览包含此恶意代码的页面就会执行恶意代码。这就意味着只要访问了这个页面的访客,都有可能会执行这段恶意脚本,因此储存型XSS的危害会更大。
存储型XSS一般出现在网站留言、评论、博客日志等交互处,恶意脚本存储到客户端或者服务端的数据库中。
整个攻击过程大约如下:
二、XSS攻击的危害
XSS可以导致:
1、攻击劫持访问;
2、盗用cookie实现无密码登录;
3、配合csrf攻击完成恶意请求;
4、使用js或css破坏页面正常的结构与样式等;
三、防御方法
1、XSS防御之HTML编码
应用范围:将不可信数据放入到HTML标签内(例如div、span等)的时候进行HTML编码。
编码规则:将"'/转义为实体字符(或者十进制、十六进制)。
示例代码:
_unction_ncodeForHTML(str,_wargs){
__return(''+_tr)
___.replace(//g,'')
___.replace(/,'')__//_EC=_EX=_ntity=
___.replace(//g,'')
___.replace(/"/g,'"')
___.replace(/'/g,''')_//'_煌萍觯蛭辉_TML规范中
___.replace(/\//g,'/');
_};
HTML有三种编码表现方式:十进制、十六进制、命名实体。例如小于号(
2、XSS防御之HTMLAttribute编码
应用范围:将不可信数据放入HTML属性时(不含src、href、style和事件处理属性),进行HTMLAttribute编码
编码规则:除了字母数字字符以外,使用HH;(或者可用的命名实体)格式来转义ASCII值小于256所有的字符
示例代码:
_unction_ncodeForHTMLAttibute(str,_wargs){
__let_ncoded='';
__for(let_=0;____let_h=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])_tr.charCodeAt(i)____hex=''+_h.charCodeAt(0).toString(16)+';';
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
3、XSS防御之JavaScript编码
作用范围:将不可信数据放入事件处理属性、JavaScirpt值时进行JavaScript编码
编码规则:除字母数字字符外,请使用xHH格式转义ASCII码小于256的所有字符
示例代码:
_unction_ncodeForJavascript(str,_wargs)_
__let_ncoded='';
__for(let_=0;____let_c=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])_tr.charCodeAt(i)____hex='\\x'+_c.charCodeAt().toString(16);
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
4、XSS防御之URL编码
作用范围:将不可信数据作为URL参数值时需要对参数进行URL编码
编码规则:将参数值进行encodeURIComponent编码
示例代码:
_function_ncodeForURL(str,_wargs){
__return_ncodeURIComponent(str);
_};
5、XSS防御之CSS编码
作用范围:将不可信数据作为CSS时进行CSS编码
编码规则:除了字母数字字符以外,使用XXXXXX格式来转义ASCII值小于256的所有字符
示例代码:
_unction_ncodeForCSS(attr,_tr,_wargs){
__let_ncoded='';
__for(let_=0;____let_h=_tr.charAt(i);
___if(!ch.match(/[a-zA-Z0-9]/)_
____let_ex=_tr.charCodeAt(i).toString(16);
____let_ad='000000'.substr((hex.length));
____encoded+='\\'+_ad+_ex;
___}_lse_
____encoded+=_h;
___}
__}
__return_ncoded;
_};
后记
在任何时候用户的输入都是不可信的。对于HTTP参数,理论上都要进行验证,例如某个字段是枚举类型,其就不应该出现枚举以为的值;对于不可信数据的输出要进行相应的编码;此外httpOnly、CSP、X-XSS-Protection、SecureCookie等也可以起到有效的防护。
XSS漏洞有时比较难发现,所幸当下React、Vue等框架都从框架层面引入了XSS防御机制,一定程度上解放了我们的双手。
但是作为开发人员依然要了解XSS基本知识、于细节处避免制造XSS漏洞。框架是辅助,我们仍需以人为本,规范开发习惯,提高Web前端安全意识。
以上就是小编今天为大家分享的关于Web前端新手应该如何防御XSS攻击的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!
作者:公子
链接:#/a/1190000017057646