基于模版的前后端分离

1. 需求

        在使用模板（如Freemarker）进行web开发的时候，经常会遇到这种情况：前端UI改变了对应的样式或静态文件内容，也需要将后端进行对应的修改；但是前端改变了很多，而且并没有标记出对应的改动点，则需要后端开发人员人肉查找前端对应的改动点，一点一点进行调试修改（实现上前端已经进行了一次调试修改，重复劳动），费时费力，而且还容易出错。因此急需一种机制来解决这种解决模板开发的进行前后端分离的方法，即是如果仅仅是改变样式和静态内容则后端开发人员可能并不需要感知，只需要前端开发人员进行相应的修改就可以了。

2. 想法

        想法目前有以下几种：

（1）提供一个工具，使的前端也能够自动运行后端程序的代码，并且能够快速的将前端对应的修改在页面上显示。

（2）提供一个工具，能够将对应前端的代码和后端写的模板代码进行merge，动态生成对应的结果代码，这样前端在自己对应的文件中开发，后端也在自己对应的文件中开发，互不影响，通过工具来将两者合并，但是这需要前端和后端在对应的标签上加上对应的标识，以便工具识别和merge。缺点是需要前后端都要对对应的内容加上相同的标签。

3. 实现

目前仅仅实现想法（1），提供一段bat脚本，能够给前端机器动态配置相应的环境变量和编译指定的工程，并运行起来；同时，为了能够满足前端修改的内容能够快速的在页面上得到响应，则可以开发对应模板的动态加载功能；还有就是运行的程序默认加载对应target目录中的网站静态文件（html、css），但是前端开发是在对应的项目目录进行开发的，而不是在对应的target下进行开发，因此还需要提供一个功能，能够动态定时的将项目目录下的修改拷贝到对应的target目录下面；实现的时候采用了简化版本，就是定时重新编译项目，这样前端开发人员在对应项目目录下的修改就能被拷贝到对应的target目录下面，对应的脚本代码如下所示start.bat 

@echo off
@echo off
@echo off
@echo off

rem 当前bat执行的路径
set batPath=%~dp0
set curCdPath=%cd%
cd %~dp0
rem jdk 安装，如果已经存在则不进行安装
java -version 2>java_version.txt 
set /p result=<java_version.txt
set javaVersion=%result:~14,-2%

rem 判断jdk是否已经存在
if   %errorlevel% == 0 (
	echo jdk already exist version %javaVersion% 
	goto endJDK
	) 

rem jdk安装和环境变量配置
echo.
echo intalling jdk,please don't do otherings
echo.
echo please wait,this operation may be need 3 or 4 minutes
echo.
start /WAIT jdk-8u141-windows-i586.exe /qn INSTALLDIR=C:\\Java\\jdk1.8
echo jdk install complete

set JAVA_HOME=C:\\Java\\jdk1.8
set PATH=%PATH%;%JAVA_HOME%\\bin;%JAVA_HOME%\\jre\\bin
set CLASSPATH=.;%JAVA_HOME%\\lib\\dt.jar;%JAVA_HOME%\\lib\\tools.jar

:endJDK
rem 删除 java version 对应的文件
del java_version.txt


rem maven 安装，如果已经安装则跳过
rem (mvn -version) ^| find "Apache Maven" >maven_version.txt
rem set /p mavenVersion=<maven_version.txt
rem set mavenVersionNum=%mavenVersion:~0,18%
rem if not "%result1%" == "" (
rem 	echo maven already exist version %mavenVersionNum% 
rem 	goto endMaven
rem 	)

rem maven安装和环境变量配置
echo.
echo configuring maven,please wait
echo.
set maven_home=%cd%\\apache-maven-3.2.5
echo maven_home=%maven_home%
set PATH=%PATH%;%maven_home%\\bin

rem :endMaven
rem del maven_version.txt


rem 下载代码使用工程代码进行下载-下载到指定目录
rem java -jar gitCodeController.jar  config.properties

set localPrjPath=""
set webDir=""
set port=""
set profile=""
set mainClass=""
set interval=600
rem 读取配置文件中的cloneLocalPath对应的值
for /F  "tokens=1,2 delims==" %%i in (config.properties) do (
    if "%%i"=="cloneLocalPath" (
	set localPrjPath=%%j
	)
   if "%%i"=="webDir" (
	set webDir=%%j
       )
   if "%%i"=="port" (
	set port=%%j
      )
   if "%%i"=="profile" (
	set profile=%%j
        )
   if "%%i"=="mainClass" (
	set mainClass=%%j
       )
   if "%%i"=="interval" (
	set interval=%%j
       )
)

echo localPrjPath=%localPrjPath%
if %localPrjPath% == "" (
	echo 'ERROR:project name is null'
	goto END
	)
echo port=%portr%
if %port% == "" (
	echo 'ERROR:port is null'
	goto END
	)
echo webDir=%webDir%
if %webDir% == "" (
	echo 'ERROR:web dir is null'
	goto END
	)
echo profiler="%profile%"
if "%profile%" == "" (
	echo 'ERROR:profile is null'
	goto END
	)
echo mainClass=%mainClass%
if %mainClass% == "" (
	echo 'ERROR:mainClass is null'
	goto END
	)
echo interval=%interval%
if %interval% == "" (
	echo 'ERROR:interval is null'
	goto END
	)

set mainPath=%cd%


rem maven编译和执行对应的主类
rem 主目录
cd %localPrjPath%
rem mvn compile >compile_result.txt
rem del compile_result.txt
rem mvn package
set mvnSettingPath=%maven_home%\\conf\\settings.xml
echo mvnSettingPath=%mvnSettingPath%
call mvn clean install -Dmaven.test.skip=true -s %mvnSettingPath%

set projectDIR=%cd%
:LOOP_BUILD
rem web目录
cd %webDir%
call mvn package dependency:copy-dependencies -Dmaven.test.skip=true -s %mvnSettingPath%

rem 运行java命令
rem 启动类
set MAIN_CLASS=%mainClass%
rem jvm参数
set JAVA_OPTS=-Xmx512M -Xms256M -XX:PermSize=64M -XX:MaxPermSize=512M -XX:+HeapDumpOnOutOfMemoryError -Dspring.profiles.active=%profile% -Dserver.port=%port%
rem 代码路径地址
rem set CODE_HOME="target"
cd target/classes
set CLASSPATH=%cd%;%cd%/../dependency/*
rem java可执行文件位置
rem set _EXECJAVA=%JAVA_HOME%/bin/java
set _EXECJAVA=java
rem 执行java程序之前，先删除
taskkill /F /IM java.exe
echo "%_EXECJAVA% %JAVA_OPTS% -classpath %CLASSPATH% %MAIN_CLASS%"
start %_EXECJAVA% %JAVA_OPTS% -classpath %CLASSPATH% %MAIN_CLASS% 

rem 间隔是负数
if %interval% LEQ 0 (
	goto END
	)

rem echo "use ping to delay"
rem 使用ping来延迟指定时间，单位是秒
set SLEEP=ping 127.0.0.1 /n
rem 延迟4秒
%SLEEP% %interval% > nul

cd %projectDIR%
goto LOOP_BUILD

:END
rem 回退到原来运行的目录
cd %curCdPath%

脚本对应的配置文件config.properties：

# clone 下来代码的局部地址
cloneLocalPath=D:\WorkProject\CTFIN-KCCF
# web 目录
webDir=kccf-pc
# port 端口
port=8902
#profile 
profile=dev,user,message,content,order
# 运行主类
mainClass=com.kccf.pc.KccfApplication
# 多长时间重新编译一次，单位是秒，默认是10分钟编译一次
interval=600