为什么要分离
后端同学分担着一部分前端工作,导致沟通成本很高。
所以,理想情况下前端同学负责页面维护,后端同学负责提供数据。二者唯一的关联就在于接口的制定,所以可以实现独立开发而不受限于对方的进度,提高各自的开发效率。
velocity的实现方式
前后端统一使用velocity渲染引擎。 利用fekit整合的velocityJS模板渲染引擎,前端同学可以在本地环境下渲染vm文件,开启fekit server,愉快的修改模板,修改js和css~ 不跟后端一起玩好吗好的
在发beta时,vm文件会被放入maven中,后端根据版本(ver吗)获取最新的vm文件,置入后端工程内,使用后端的velocity引擎渲染数据。
fekit pack干了什么
直观来看,多了这么几个文件夹:dev、ver、refs。内部还执行了“自动脚本postpack” 干嘛的?
实质内容:
dev 解决require,生成被浏览器理解的js和css文件
依据fekit.config文件中的export属性,指定了哪些文件是需要被导出的文件:
"export": [
{
"path": "scripts/common/base.js","no_version": false
},{
"path": "scripts/pages/account/login/index.js",{
"path": "scripts/pages/anonymousAccount/index.js","no_version": false
}
]
依次处理这些文件的require问题,我们以某个path为例:
/*[export]*/
require('styles/libs/bootstrap-datepicker3');
require('index.scss');
首选文件的开头是个注释,它的作用是在执行fekit export时,可以自动添加到fekit.config的export数组中。
接着就是require的东西了,fekit在检测到require后,会把被require的东西加载进来(就是文件内容的拼接),组合成一个新的文件,按照和src同样的目录结构把最后生成的这个index.css文件放入dev文件夹中。不过,这个新的文件名被追加了@dev, 如index@dev.css。 总结,执行了fekit pack后,src里面只要指定了export的文件,都会在dev文件夹中有个合成后的对应@dev文件。
ver
src文件夹中有的文件,dev不一定有(看export),但是在ver文件夹中,则是和dev一一对应的。都是些index.css.ver和index.js.ver,内容是‘dev’三个字符。其实是用来对应dev里文件的版本号呢。只是开发环境版本号用‘dev’就ok。
refs 汇总版本号和vm文件
里面有个ver文件夹,跟外层的ver文件夹一样。。肯定是fekit发生了革新,外层的ver文件夹是老的,不必要的。
再来看看vm文件夹,它和一开始的vm文件夹中的文件也是一一对应的,只是内容不同,聪明的我已经想到发生变化的地方只是被引用的js和css文件名。
原始vm文件:
fekit pack后的refs中的vm文件:
其他地方别无二致。
fekit min干了什么
内部还执行了“自动脚本postmin” 干嘛的?
很简单,pack是针对开发环境的,而min是针对生产环境的。
fekit min之后依然多了三个文件夹,或者干脆说两个吧,ver不算数。
prd
prd文件夹中的文件来自src中带export注释且解决require依赖的文件,文件名是index@79fyfd9yf9773w23fdhfsk.js 内容被压缩成单行以减小体积。
refs
refs文件夹中依然包含ver和vm文件夹。但和fekit pack命令稍有不同:ver文件夹中多了一个versions.mapping的文件,文件内容长这样:
styles/pages/report/membersConsumeRank/index.css#f394d1eb6bc4abf0ab26431d114f9240
scripts/pages/sro/statistics/index.js#0e5228ba6284fec2c0a9afb956c6729f
styles/pages/sro/statistics/index.css#f3ff87b07266a7a4d45a0c5cc307def7
styles/pages/report/membersscoreDetail/index.css#f394d1eb6bc4abf0ab26431d114f9240
scripts/pages/print/customAccountBill/index.js#76fb93b67f97ec7e989f6384e73e7383
styles/pages/print/customAccountBill/index.css#ae1e0374f3c02812aa29fba7f629ebea
‘#’后面的数字就是版本号,感觉这个文件的作用就是汇总ver中的各个文件的版本号。文件内容改变,则版本号也变化,否则版本号不变。
vm文件夹中是vm文件,里面也只是改了css和js的引用文件名,加上了正确的版本号:
而这个文件,是位于prd中的。
fekit sync干了什么
执行fekit sync时,要在dev文件中写明自己的姓名,否则会提示输入密码,且要修改pom文件中的version字段,加上snapshot
fekit sync 会先把代码上传到指定开发机,然后执行开发机中的/home/q/tools/bin/fekit_common_shell.sh。
开发机上会执行deploy_qzz_nexus.sh脚本, 可以把打包好的文件放进maven仓库,但是需要修改pom.xml :
例如:r-150512-113939-zhuo.wu-SNAPSHOT
后面加上
-SNAPSHOT
重点内容分析
首选执行了 ‘send incremental file list’,不知道是干嘛的
然后ssh mingyan.yu@192.168.237.75 ,执行了/home/q/tools/bin/fekit_common_shell.sh脚本 指定的目录为.dev中的path。
接着执行了/home/q/tools/bin/deploy_qzz_nexus.sh脚本,把打包好的文件放进maven仓库。
之后的日志都是下载和上传了。。。
Uploading:
前端文件如何传给后端
前端将文件通过fekit sync发送到nexus仓库里,后端再通过 mvn clean package -Dmaven.test.skip=true -U 来去nexus仓库获取前端的文件。
执行 mvn clean package -Dmaven.test.skip=true -U
仔细观查 src/main/webapp/WEB-INF/refs/vm 中的内容,就是前端项目的内容
前端将文件上传至nexus
-
添加.dev文件
{ "dev" : { "host" : "192.168.237.71","path": "/home/q/www/qunarzz.com/aa/" } }
-
配置pom.xml文件
cesar r-160908-143044-yadan.liu
前端如何控制版本号
依靠verModifier.js文件
fekit.config中有:
"scripts":{
"postpack": "./verModifier.js","postmin": "./verModifier.js"
}
目前这种前后端分离的方式存在什么问题
前端改了vm重新发布后,后端同学依然要再次发布/部署。
SEO问题,因为vm模板文件其实就是个空壳,内容都是由js塞进去的
渲染,取值都在客户端进行,性能问题
资源到齐后才进行,短暂白屏闪动,低网速下更糟
所以加个中间层nodejs
淘宝讲前后端分离
问题
maven和nexus仓库的联系: fekit sync到nexus里,后端把前端模板mvn clean package...到maven中。 nexus是maven的上游仓库。
本地开发 和 发到beta dev等有啥区别: 本地临时编译,beta先编译好
后端通过哪些东西和nexus仓库联系起来 : pom.xml/settings.xml中的version属性关联。
fekit sync时干了什么?调rsync,同步到远程服务器,之后又调用服务器的某个shell脚本,把当前的东西放到maven仓库里。告诉后端tagname是啥,后端一改,就好。qdr上也有fekit的一套命令,pack min sync
生成md5是verModifier.js干的事吗?不是。 verMidifier.js做的事情:把ver内容加到vm中。
怎么计算md5的 ?