请选择 进入手机版 | 继续访问电脑版
查看: 714|回复: 0

前后端分离开发工具

[复制链接]

353

主题

373

帖子

9万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
99935
发表于 2017-11-23 17:00:28 | 显示全部楼层 |阅读模式
概览


   本文将逐一介绍以下工具:
  • tomcat server + ftl.jar
  • FMPP/FMtoll
  • freemarker.js
  • gulp-freemarker
  • ftl-server
  • nei

1.1 解决问题思路




  上图是ftl文件解析的过程,输入ftl模板和对应java对象,经过freemarker.jar包解析后,得到输出文本;这个是我们在前后端分离前,运行java web服务执行的过程;那么,我们想脱离java web端逻辑来执行这个过程,该如何实现?关键点在这个java对象,下面给出两种实现:
  • java web容器定制,抛弃后端逻辑;(tomcat server + ftl.jar)

  通常情况下, 我们的请求与ftl的实际路径是没有关联的,我们需要在controller中定义url与ftl实际路径的关系,这样我们就需要维护这个关系,不利于抽象复用;由于我们是本地测试开发环境,不需要通过对应的url访问页面,直接通过实际的路径去访问,这样只需要一个controller统一处理,将url中路径的部分解析出来,处理对应的ftl即可;
  • 实现一个java类, 拦截所有*.ftl请求,拦截到后解析url路径,找到对应的ftl模板文件让freemarker处理后返回给浏览器;
  • 每个页面的同步假数据通过assign在ftl模板中定义;

  以tomcat server + ftl.jar为例, tomcat配置web.xml如下:将所有*.ftl交给com.cjx.ftl.Ftl这个类去处理,ftl.jar是自己写的一个包,里面的只实现了上面说的统一处理请求,解析路径的功能;



  • 不依赖于java web容器,将ftl依赖的同步数据提取出来;

  再次回到最开始的ftl模板解析流程图,脱离了java web环境,数据就不能存放在java对象中,既然前后端分离了,我们最希望它能维护在json文件中,但是json文件,如何才能解析替换ftl模板中的freemarker变量?接下来,就引出了Fmpp工具,它可以替我们完成这个工作;


FMPP
  • freemarker文本解析工具
  • 使用


  FMToll 与Fmpp功能类似,实现不同,FMToll没有文档,如果感兴趣,可以研究下源码;


基于Fmpp的工具


  有了fmpp,我们就可以使用fmpp命令将ftl模板与json文件结合生成解析文件;但是在实际工程应用中,我们不可能手动对分布在各个目录下的ftl模板文件,执行解析命令;这时候就需要一些工具帮我们实现解析的自动化;


freemarker.js


  主要就是一个方法render;




上面代码的内部实现:根据参数和dataObject生成config文件,对tpl路径模板执行fmpp -c configfile命令;


gulp-freemarker


  上面的freemarker.js只是简单的使用node封装了fmpp,并没有实现批量处理,gulp-freemarker就是使用gulp实现批量执行解析任务;gulp-freemarker就是基于freemarker.js实现的gulp插件,可以方便集成其他gulp任务;


ftl-server


  到目前为止,我们已经解决了ftl模板的批量解析处理;但前后端分离做到这里还不能满足我们的开发需要;对于异步接口,我们还需要自己维护接口和mock数据;ftl-server集成了异步接口的服务,还提供一些其他的特性:
  • 解析freemarker模板
  • 静态资源服务
  • mock请求
  • 代理请求
  • livereload
  • weinre


nei



  上面的ftl-server解决了我们开发过程中的全部问题,但是实际开发前,我们要与服务端定义接口,并根据接口mock数据,这个过程,使用上面的工具都要手动完成,定义的接口也不容易在文档中管理,那么我们就需要一套接口管理服务,帮助我们管理接口,并根据接口自动化的帮我们生成需要mock的数据供我们使用;


nei实际使用中的问题


  • stringify不支持,基于fmpp的工具都有这个问题;ftl-server是基于fmtoll实现的,可以使用stringify;nei mock list的临时解决办法:
  • 在ftl模板中重新assign对应的list,不使用生成的mock list数据;
  • 把mock数据中的list改成对象字符串


  • 扩展fmpp, fmpp可以通过DataLoader对ftl模板访问的数据类型进行扩展;参见Stackoverflow


  • 在同一工程维护多个同时进行中的任务接口时,合并代码会冲突;没有一种可以按照标签或者pageId更新接口的功能,每次更新都是全局的,这样就把别人还没开发好的接口也拉下来了;
  • 没有一个可以对全工程配置通用数据的地方,要对每个页面都加一次,例如侧栏导航数据;
  • 针对具体工程, 需要对nei配置进行修改



总结
  本文从工具使用介绍的角度出发,介绍了前后端分离开发的发展,到目前为止,前后端分离开发都还处于发展探索阶段,还有很长的路要走。



作者:哈乐
转载请注明作者和出处
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表