前后端分离

前端之家收集整理的这篇文章主要介绍了前后端分离前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

为什么要分离

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

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

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的引用文件名,加上了正确的版本号:

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

  1. 添加.dev文件

    {
        "dev" : {
            "host" : "192.168.237.71","path": "/home/q/www/qunarzz.com/aa/"
         }
    }
  2. 配置pom.xml文件

        
        cesar
        
        r-160908-143044-yadan.liu
        
    

前端如何控制版本号

依靠verModifier.js文件
fekit.config中有:

"scripts":{
    "postpack": "./verModifier.js","postmin": "./verModifier.js"
}

目前这种前后端分离的方式存在什么问题

  • 前端改了vm重新发布后,后端同学依然要再次发布/部署。

  • SEO问题,因为vm模板文件其实就是个空壳,内容都是由js塞进去的

  • 渲染,取值都在客户端进行,性能问题

  • 资源到齐后才进行,短暂白屏闪动,低网速下更糟

  • 所以加个中间层nodejs

淘宝讲前后端分离

问题

原文链接:https://www.f2er.com/note/421558.html

猜你在找的程序笔记相关文章