二、后端基于freemarker
后端端技术栈：
- java
- freemarker...
这里后端的项目结构我这边只截取跟我们前端相关的目录来说明
后端端项目结构：
├──templates项目模版 │├──home ├──layouts页面布局 ├──views业务代码（ftl） ├──widgets项目依赖 |
layouts
default.ftl <!DOCTYPEHTML> <html> <head> <linkrel="dns-prefetch"href="${staticServer}"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> ${widget("headInner",page.bodyAttributes)} <#listpage.stylesasstyle> <#if(style?index_of('http')>-1)> <linkhref="${style}?v=${version}"rel="stylesheet"type="text/css"/> <#else> <linkhref="${staticServer}/phip_ehr/css/${style}?v=${version}"rel="stylesheet"type="text/css"/> </#if> </#list> </head> <body> ${widget("header",page.bodyAttributes)} <divid='gc'> ${placeholder} </div> ${widget("footerJs")} </body> </html> |
上述代码是整个项目页面的布局结构
${widget("headInner",page.bodyAttributes)}
这个方法意思是引入一些我们前端静态的公共样式和一些公共的meta标签。
headInner.ftl <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <metaproperty="wb:webmaster"content="3b0138a4c935e0f6"/> <metaproperty="qc:admins"content="341606771467510176375"/> <metahttp-equiv="Cache-Control"content="no-cache,no-store,must-revalidate"/> <metahttp-equiv="Pragma"content="no-cache"/> <metahttp-equiv="Expires"content="0"/> <linkrel="stylesheet"href="${staticServer}/phip_ehr/css/reset.css?v=${version}"type="text/css"/> <linkrel="stylesheet"href="${staticServer}/phip_ehr/css/common.css?v=${version}"type="text/css"/> |
这里提一下${staticServer}这个当然指的就是我们静态域名了，需要在后端项目的配置文件config中来声明，即指向我们前端的静态服务
**.mursi.attributesMap.staticServer=http://192.168.128.68:9091 **.mursi.attributesMap.imgServer=http://192.168.128.68:9091 |
引入完我们的公共样式以后，那接下来我们业务样式怎么引入呢？
<#listpage.stylesasstyle> <#if(style?index_of('http')>-1)> <linkhref="${style}?v=${version}"rel="stylesheet"type="text/css"/> <#else> <linkhref="${staticServer}/phip_ehr/css/${style}?v=${version}"rel="stylesheet"type="text/css"/> </#if> </#list> |
这段代码就是用来引入我们的业务样式的，意思是利用后端框架封装的page这个对象中style属性，然后对所有页面的style标签进行遍历
然后在我们业务代码（ftl）中将可以通过addstyle这个方法来引入我们的业务样式了
${page.addStyle("audit.css")}
${widget("header",page.bodyAttributes)}
这个方法的意思是引入我们页面中公共的头部
${placeholder}
这个意思是引入我们页面主体内容部分
${widget("footerJs")}
这个意思是引入我们页面中js文件
footerJS.ftl
<scripttype="text/javascript"> $GC={ debug:${isDev!"false"}, isLogined:${isLogin!"false"}, staticServer:'${staticServer}', imageServer:'${imageServer}', kanoServer:'${kanoServer}', version:"${version}", jspath:"${staticServer}"+"/phip_ehr/js" }; //$GS{Array}-theinitparametersforstartup $GS=[$GC.jspath+"/plugins/jquery-1.8.1.min.js", $GC.jspath+"/GH.js?_=${version}", $GC.jspath+'/plugins/validator.js',function(){ //loadcommonmodule GL.load([GH.adaptModule("common")]); //loadthemodulesdefinedinpage varmoduleName=$("#g-cfg").data("module"); if(moduleName){ varmodule=GH.modules[moduleName]; if(!module){ module=GH.adaptModule(moduleName); } if(module){ GL.load([module]); } } }]; </script> <!--引入js模块加载器--> <scripttype="text/javascript"src="${staticServer}/phip_ehr/js/GL.js?_=${version}"></script> <scriptsrc="http://127.0.0.1:35729/livereload.js"></script> |
这段代码中$GC就指的是初始化一些变量，然后$GS中就是引入我们项目中依赖的公共js，如jquery、common.js等。其次是通过GL.js这个模块加载器来加载我们的业务js
这样我们就可以在我们的业务ftl中通过data-moduls来引入每个页面中的业务js了
a.ftl
<divclass="g-containergp-user-infoJ_UserInfo"id="g-cfg"data-module="a"data-fo-appcode="1"data-header-fixed="1"data-page="infirmary"></div>
a.js
GH.run(function(){ GH.dispatcher('.J_Home',function(){ return{ init:function(){ this.switchPatient(); }, /** * *切换就诊人档案 */ switchPatient:function(){ console.log(1); } } }) },[GH.modules['validator'],GH.modules['datepicker']]); |
dispatcher就是相当于页面的分发器，当然每个页面只能拥有一个独立的分发器，run()方法就是我们封装在GH.js的公共调用方法
那么我们项目中引入一些公用的插件要怎么引入呢？
那么我们就在GH.js里封装了GH.modules()方法来引入插件，这里就不详细的说明了。
这里顺带也提一下ftl，什么是ftl？ftl就是类似于我们的html一样，但是它不同的地方就是它是基于freemarker语法来进行编写的一种后端模版引擎。我们项目中一些可以同步加载的数据都可以利用freemarker的语法在ftl中直接进行操作
小结：
这种前后端不分离的模式有哪些优缺点呢？
优点：虽然在开发效率上比不上纯前后端分离的模式（vue+webpack，react+webpack），但是针对一些对于兼容性要求很高的多页项目，这种开发模式也是可取的。
缺点：对后端服务依赖太强，往往后端服务一旦出现报错或者挂掉后，前端的工作就没有办法开展下去了，从而加大了前后端的开发成本。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
