为什么要分离

后端同学分担着一部分前端工作，导致沟通成本很高。

所以，理想情况下前端同学负责页面维护，后端同学负责提供数据。二者唯一的关联就在于接口的制定，所以可以实现独立开发而不受限于对方的进度，提高各自的开发效率。

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文件

refs文件夹中又包含两个文件夹： ver和 vm

里面有个ver文件夹，跟外层的ver文件夹一样。。肯定是fekit发生了革新，外层的ver文件夹是老的，不必要的。

再来看看vm文件夹，它和一开始的vm文件夹中的文件也是一一对应的，只是内容不同，聪明的我已经想到发生变化的地方只是被引用的js和css文件名。
原始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的引用文件名，加上了正确的版本号：

sspath}/pages/sro/statistics/index@f3ff87b07266a7a4d45a0c5cc307def7.css" rel="stylesheet">

而这个文件，是位于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

执行了rsync命令，将代码上传到了nexus仓库。

重点内容分析

首选执行了 ‘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的？

前后端分离