分类目录归档:B/S架构

Web技术文章,起源自大学的积累!

APP后台架构设计

项目背景&前期铺垫

2018年金融组织结构大调整,新的组织结构是中台研发。期初我对这个名称也感觉新鲜,了解后就发现,是连接前端部门与各业务部门桥接与提供公共服务的部门。
新组织架构调整伊始,开始对接各种项目,最繁琐的或许就是重前端的活动页搭建项目,也许因为这个原因吧,领导把我安排到了接收这个项目的“营销与权益”组。接手别人的项目总是痛苦的,以至于最后我们打算自己做一套。虽然很复杂,但是慢慢来应该不成问题。所以我决定全新用Spring boot2+,管理界面界面采用ElementUI做SPA,搭了一套还算比较完整的项目。总觉得以往的项目还是太过于陈旧,新项目就全部用最新的技术和框架重新搭建。小组成员们边了解需求边尝试,用了几周的时间做好了基础版的拖拽生成页面的Demo。当然没有专业前端的加入,界面还是比较丑陋的。

突然降临的挑战

上层领导决定公司APP大改版,时间很紧迫,任务非常重。原先交接过来的系统不能够支持新版APP的页面数据结构。虽然时间非常紧迫,从接到任务到上线预计也就一个月的时间,但考虑的需求比较简单还是决定全部重新做(后来发现,先期了解的需求并不全面,真是把自己给坑了)!有了上面“活动搭建”项目的后台,新项目进展还是比较迅速的。经过了解需求,思考了一下午,我大致想做一套基于领域模型驱动的架构(虽然由于自己才疏学浅,并没有在项目中把领域模型驱动设计发挥出来,但初衷还是有的),也就有了第一次小组会议我在墙上画下的初步架构设想图如图1:

第一次会议架构设想图

当然我想表达的是这样子的:

整体系统设计图

项目分析

作为APP后台的管理系统,主要就是操作APP每个原生页面的具体数据结构。要求各种数据动态配置,各种属性随意修改,APP在不进行版本升级的前提下,即时生效。简言之,也就是项目负责APP页面数据的下发,内容动态配置管理。而为了应对内容数据的可随意更改,可随时生效这个需求,我觉得Spring Express Language(后面统一称为SpEL)特别适合这个业务场景。所以,在系统里大量应用在页面数据调用接口动态取数据所需配置的地方,也成了整套系统的核心价值所在。

架构思考

这是一个典型的重读操作的系统,所以我就把项目分成了上面的两部分,一个后台管理,一个负责响应APP的接口请求返回页面结构数据。
因为Spring Boot2+是基于Spring5上集成而来的,Spring5是目前非常优秀且最新的Java应用框架,这个大版本增加了很多新的特性。比如:

  • JDK 基线更新
  • 核心框架修正
  • 核心容器更新
  • 含 Kotlin 在内的函数式编程
  • 响应式编程模型(重点)
  • 测试改进
  • 库支持
  • 中止支持

而基于Spring5上构建全新的系统,肯定会事半功倍的。具体详细架构如图

APP请求响应系统架构图(不包含配置后台)

整套系统有如下几个特点:

  1. 整个应对APP访问的CMS系统,不依赖于MySQL数据源,所有页面基础数据均读Redis缓存数据。
  2. 可封装或不封装业务接口,根绝业务场景复杂度而定。一切以页面配置简易化为主。所有所需要动态配置数据结构的模板元素配置项,都用EL表达式来代替。当然这个方式大大提高了动态灵活性,但是加大了运维人员的门槛高度,所以,目前为止,第一版上线的所有表达式配置项,均有我们研发自己配上去的。
  3. 业务接口熔断处理,基于Hystrix的熔断器与方法降级处理,做页面请求接口托底方案。另一个托底方案,是运营可以配置多个相同页面模板,根据用EL表达式描述的显示规则来做模板托底方案。
  4. 为了提升系统性能,主要做了如下几点优化处理:
    1. 页面全局接口基于正则匹配的表达式抽取,相同方法参数统一请求处理,将请求结果保存在Spring EL渲染模板的上下文中作为结果变量,将原先配置的表达式替换为从结果变量中提取结果数据。这样就可做到:一个接口相同的方法,只要参数一致,无论你在页面中配置了多少处表达式,在单次渲染整个页面周期时,只做一次调用。大大提升了性能,降低了延迟。
    2. 异步结果请求。上面所有需要调用接口取数据的表达式,均被分配到了单独一个线程去请求结果,其实保存在上下文中的环境变量就是封装结果的Future。页面渲染时,会先分配N个线程去请求数据,等到后续真正组装结果时,才会去调用get阻塞获取结果。当然这样做,提升速度的代价就是极大消耗CPU性能,因为线程池需要设置的比较大,而具体设置为多大,还要在不断试验的基础上不断优化调整,以达到服务器最优效能和最大并发支持。
    3. 基于Actor模型Reactor响应式处理页面数据。页面数据是有规则的,也就是多个模板集合而组合起来的,而每个模板里又是一个元素集合,每个元素里又是一个属性集合,是个比较规范的数据结构,虽然最大的坑在于层级深度不固定,但是已经用JSON去填了这个坑。而针对这个相对规范的数据层级结构,用响应式编程(流式处理)再合适不过了。So,一堆Flux使用和Subscriber飘过…
    4. 数据读取走JVM。速度还不到极致,虽然不读MySQL,但是每次构建页面数据,读多次Redis的网络开销,我也是不想耗费的。So,基于Guava的LoadingCache构建Jvm本地缓存方案就在优化系统的路上走马上任了!至于有人问为什么不基于HashMap的本地静态变量做?仅仅是为了实现的更加优雅!当然用HashMap也是完全可以做的,只是我却是一定程度上喜欢用牛刀。

项目开发

项目的研发进度还是很快的,由于时间紧迫,各业务方提供的接口参差不齐,千奇百怪。这也是我们没有上来就做接口规范所挖的坑。

  1. 我们有一个很大的工作量就是重新封装各业务方接口,包装成自己所负责页面方面用表达式SpEL描述的样子。而这些工作的确本不该有我们部门的研发去做的。
  2. 其次有个很大的工作量就是SpEL表达式在各业务页上面的配置,原本我以为这是最简单快捷的工作。但是由于其他成员没有了解过,导致出错不断。再就是验证表达式正确性,需要到预发环境验证,因为没有测试环境,对工作效率造成了很大的影响。后来,为了应对这个SpEL验证表达式正确与否的问题,专门开发了一个测试接口,才一定程度上解决了这个问题。其实这个验证接口确实该早些准备好的,的确是我的失职。

回归分析

为了应对需求的动态可配置,采取了页面配置里各种SpEL表达式。造成最大的一个问题就是,运营不爽了!
    – “这都是啥呀?完全看不懂!”
    – “稍微一改,页面就崩了”
    – “完全不敢动啊,一动就坏!”
各式各样的的吐槽声接憧而至。表现了运营对我们系统易用性的各种不满,我也是一脸无奈。的确,表达式就是代码,把最抽象的东西摆在他们眼前,看不懂都是次要的,他们稍微改动一个标点符号的确就会造成异常!
可是,他们是用户,无论如何得满足啊!为此,我也时常反思,系统还能怎么优化?如果再让我重新实现一遍呢?
对此列举系统优化点:

  1. 表达式配置,改为用户选择方法,让SpEL表达式在用户看不到的地方动态生成。(这点,组里优秀的小伙伴已经基本实现。是先配置在系统专门维护的方法表里,然后供页面选择)当然,我也在思考,如何通过注解,反射等机制把这个事情自动化,不要要挨个去录入。我觉得如果有机会,可以这样去做吧!
  2. 规则进一步抽象独立出来,用来适应更复杂的场景和更复杂度规则执行。
  3. 尽量剥离系统中业务接口的直接引用,保持系统轻量化。完善RPC动态注册配置,避免jar包引入方式。

其实还有好多需要优化的点,却有难以一时总结清晰,后续更新吧…

系统已经灰度发布,截至目前为止,报警全部来自业务方接口调用失败,异常。当然,后续的大流量能否抗住,还要持续观测与优化,也是对我最大的考验。

未完…待续…

基于WebSocket的实时动态图表

本文介绍一下基于WebSocket的实时数据双向通讯的小范畴应用,来实现实时动态图表的展示功能。其实实现图表动态更新又岂止是只有这一种方法。用户页面端的js心跳轮询一样可以获取来自后台的最新数据,只是我感觉那是伪实时。

首先介绍一下什么是WebSocket?

WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议。 WebSocket通讯协议定于2011年被IETF定为标准RFC 6455,WebSocketAPI被W3C定为标准。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。 两者之间就直接可以数据互相传送。或者看一下来自国内知乎上的解释:https://www.zhihu.com/question/20215561

项目需求:

其实标题说的很清晰了,就是要实现图标的实时动态更新,当时我的第一感觉就是要采用WebSocket去解决这个问题。而我的数据来源是来自MQ(消息队列),也就是触发数据推送就是在消息消费的地方。

继续阅读

Spring Batch与MyBatis结合案例

看了一下博客,好几个月没写什么文章了。再不写,估计Google再也不来了!^_^闲话少说,这次的主题就讲一下Spring Batch。Spring Batch是Spring与Accenture的合作产物。作为前Accenture员工,感觉还是很亲切的。当然这是不是我在工作中技术选型的主要原因,更重要的是看中他的强大!
业务背景:
金融系统中有一种表叫台账表,这也是在接触这个领域后才知道的。而针对这张表,每天会进行定时全表遍历进行计算利息,费用等相关操作,也就是俗称的跑批。而跑批无非就是遍历循环表中数据再进行运算而已,可是一旦数据量上去了,很多看似简单的事情往往实现起来就不再是原先的逻辑了。一张上亿行数的表,查询出来,放到内存?那肯定是不明智的做法。当然应该采用游标或者分页的查询方式去实现更好的性能。而自己去写这类方法,其实并不难,如果只是简单地为了分页查询,确实可以自己去写一个。而之所以此处选择Spring Batch,是因为它不仅仅支持这一点特性,它能做的还有很多很多。
系统背景:
系统是典型的Java Web系统架构,Spring MVC与MyBatis。当然其他诸如服务治理,消息消费等就不赘述了,此处跟那些没有太大关系。而之所以有这篇文章的出现,正是因为MyBatis。因为在我使用过程中,查询大量资料,唯独与MyBatis集成的相关资料特别少。官方的jar包里也是针对ibatis做的封装(并且已经标注为废弃状态),而MyBatis自身针对Spring Batch做了分页Writer和Reader,此次我们主要就是用这两个类。外加用Java Config自动生成Step与Job方式,避免使用xml配置,对于有代码洁癖的人来讲,过多的配置文件感觉很乱很脏。 继续阅读

Activiti生成动态流程图

最近又开始忙活工作流的相关工作了,第一次接触工作流也就是我在埃森哲的第一个项目,也是最后一个项目。那时候用的是日本的一整套解决方案好像叫-iMart。而进入金山工作后第二个项目也是和工作流密切相关的项目,那时候才接触到了这个开源工作流引擎-Activiti。那时候也是第一次真正了解这些东西。只是从金山离职后回到现在的公司,没想到还要用这些东西,好像又回到了去年的这个时间。
这一次需要重新集成这个引擎,以插件包的方式。其实工作量不大,因为Activiti已经自己封装的很好了,完全可以在日常开发中直接引用它的Service。闲话少说,这次解决工作流流程图问题。简而言之,在任何一条已启动的流程实例查看流程状态,用流程图片的形式展示一下。
提供的Service方法如下:

继续阅读

中国提速WordPress

竟然这么长时间没有写点什么了?来济南都忙活什么了?哦,遇到很多好事,坏事,恶心事。真是该碰上的碰上了,不该遇到的也遇到了。总归善恶终有一报。

近段时间一直挂念着VPS的事,前几周一下买了两台,一台是从淘宝上选的,一台是在美国一家VPS服务商直接购买的。价格都在25-30元/月。配置也都差不多的事儿,1G的RAM。身为Java程序员平时可能少不了跑点Java程序,所以512MB的内存在吃内存太厉害的Java手下显得有点捉急。

配置不在话下,那问题就来到访问速度上了。因为我大天朝“威严”,空间只能买美国的(无需备案)。所以在服务器地点上选择美国西海岸机房对中国用户的访问速度是最快的。所以两台都是洛杉矶的机房。

然而购买VPS的供应商不同,各方面也会出现一些差异。 继续阅读

Java模拟Http访问

Java模拟Http访问将返回的JSON解析为Bean对象

应用场景:某系统访问另一个系统获取一些数据,其中这些返回数据类型必须是JSON格式,接受系统可以将结果转换为简单的Bean对象,也可以将返回的是集合数据转换成List。这就需要我们模拟一个Http访问,然后处理返回的JSON数据。

方案选型:看了看网上的很多Demo,都是比较老的。其中应用的apache的框架现在也已经找不到了。所以决定亲自去apache官网去看看。发现以前的httpclient包已经独立出来命名为Apache HttpComponents。当前最新包为4.3.3。我采用的是OSChinaMaven源,还不错,已经有资源了。而JSON解析才用了最为流行的Jackson

Demo示例:

Test.java 返回的JSON数据将要被解析成为的对象类 继续阅读

Annotation与SpEL实现系统记录操作日志

先说几句废话吧。最近工作比较混乱,一遍研究着Hadoop,一遍搞着另外一个系统的开发。这段时间,一心想写点技术文章却迟迟没能提笔。今天终于,打开音乐播放器,戴上耳机。享受着宁静的夜晚与指尖跃起的文字。甚至于还想着,什么时候才能有合适的机会回到山东,守在爸妈身边。好了,废话不多说了,开始记录正文。

需求:

系统中的一个模块属于关键区,它所有的操作主要针对修改与删除是要求记录下日志来的。而这个记录的日志并不是像我们把它们打印在log文件里,而是需要标准的记录到数据库中。以便于后来专门日志操作模块的查询。

思考: 继续阅读

jQuery选择器使用集锦

一个面向B/S架构的软件工程师必须要面对的几点:CSS,Html,JavaScript。而JavaScript中让人耳熟能详的jQuery大家肯定是不会陌生的。
而面对jQuery,要想了解他使用它肯定是要从选择器开始了。下面来自摘文,总结得很不错:

先来几个稍微复杂的应用:

选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text() 
 
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^=’S_’]“).not(”[@ name $=’_R’]“) 
 
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();   继续阅读

jQuery与扫码器

总是想找时间写点什么,却总是拖拖拉拉一直没能写些。今天要写的这点东西是后补在4月份的。
前段时间工作中接触了我们常见的超市扫码器,我接手了这块的开发,除了后台的验证等操作,感觉新奇的就是前台html接受扫码器所输入的条形码值。
没接触过的时候或许觉得挺难以理解的,也不知道他的实现原理。真正接手试验后才发现,并没有想象的那么麻烦,因为读取条形码的过程不需要我们参与,那些已经嵌入到了扫码器中。我们可以简单的将扫码过程理解成:连续按下了键盘上对应的键盘,输入了一串对应键盘的一别编码,然后最后跟着一个13,代表着回车结束输入。
逻辑分析:
<1> 14位条形码(读取过程中会自动添加回车符1位),也就是网页需要监听扫码器输入的每一个值,将其累加起来,当达到15位时,判断第15位是否为13,即回车。
<2> 当然还要屏蔽人为输入行为,怎么判断人为和扫码器的输入呢?最终在输入速度上作为判断依据。认为输入的速度必定是慢的,机器输入的速度还是比极快的。所以采用定义setInterval(),来进行对字符串的间断性清空。 继续阅读

jQuery监听事件全选Select选项

2013年一月份,从博客的日志更新上就可以看得出,这个月真的很忙。正式上项目着手开发,天天都在进行着有意思或者无聊的Coding。而这些对于我来说都是工作经验的积累。不想让2013年的一月留下空白,特此才会忙中偷闲,在公司写下此篇博客。有这样一个需求,当然后来证实是我理解错了。在一个可以多选的select下拉列表中,选择第一个名为“全选”选项后,要求其他选项都要成为selected状态。
因为此列表为页面加载的时候从数据库中查询并动态加载到此页面的,所以没法使用简单的onclick事件去获取用户的点击动作。所以我想到的是用jQuery去监听用户对此列表的点击事件。 继续阅读