Web前后端分离填坑记    

前言：

   对于小项目采用springmvc框架前后端不用划分太细，用jsp页面开发即可，这样节约时间和成本。

（可以参照LP框架，下载地址 http://www.shinians.com）

然则：但是随着前端框架"火热"发展，用户也越来越重视体验和速度。毕竟后端开发人员精力也不够呀·~~~ 

前后端分离也算好事，但是需要一个好的架构才能逐步解决分离带来的那些“坑”....

================填坑走起【前后分离第七天】====================================

！！一旦决定，势在必行！！

开发很多项目，一直以来是前端开发好html页面后，然后就没有然后了.......

所以一个前端往往应对很对项目（毕竟一个页面开发也就1-2天搞定），接下来的工作全权由后端开发人员做，也因此算半个前端人士，了解些常用框架语言。

铺垫太多了······说正题了，开始说遇到哪些坑

小坑走起......

先了解了前后端分离用到的框架，有个初步认识，新技术太多如果贸然引用对整个项目进度不好把控，决定提前试试水，半分离开发

1、前端不再采用jsp页面开发，用html代替之

后端开始填坑：

   采用办分离说明html和jsp页面视图解析同时，后端如何解析呢？

    决定在springmvc.xml配置视图解析，支持html解析，具体配置如下 

<bean  id="viewResolver"
           class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="order" value="0"/>
        <property name="suffix" value=".jsp"/>
        <property name="prefix" value="/WEB-INF/content/limp/"/>
        <!-- 如果使用jstl的话，配置下面的属性 -->
        <property name="viewClass" value="com.limp.framework.boss.filter.HtmlResourceView" />
        <!--<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />-->
        <!--<property name="viewClass" value="org.springframework.web.servlet.view.InternalResourceView"/> <!– 不能用jstl的那个 –>-->
    </bean>
    <!--采用jsp和html相结合的方式-->
    <bean id="htmlviewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="order" value="1"/>
        <property name="suffix" value=".html"/>
        <!--<property name="prefix" value="/view/"/>-->
        <!-- 如果使用jstl的话，配置下面的属性 -->
        <!--<property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver" />-->
        <!--<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />-->
        <property name="viewClass" value="com.limp.framework.boss.filter.HtmlResourceView" />
        <property name="contentType" value="text/html;charset=UTF-8"/>
    </bean>

解析判断走的自定义类  HtmlResourceView 代码如下

/**

 * @author:shinians
 * @description:
 * @date:Created in 23:39 2018/4/28
 * @modified By:
 */
public class HtmlResourceView extends InternalResourceView {
    @Override
    public boolean checkResource(Locale locale) throws Exception {
        File file = new File(this.getServletContext().getRealPath("/") + getUrl());
        return file.exists();
    }
}

然则这才到什么地方，路还远着呢.......坑才刚开始...

[这是个坑，必填之]

2、前端已经用html开发，接下里如何开发？

之前的想法是html跳转是通过后台action转发，地址栏限制不可直接通过html地址访问（技术很好实现，此坑不填）

个人理解这么做 “坑”应该出现了，既然分离，既然以后彻底分离这种跳转不应该再有后端进行跳转，

不然分离的意义也就不存在了，前端还是需要后端去写action方法进行指定跳转页面(晕。。。图什么呀)

填坑：前端的跳转交给前端处理，后端不进行跳转转发，采用直接url跳转（暂时先采用这种，不知道有没有坑）

3、html页面路径以及head，footer公共部分引入，js、css引入，图片相对路径和绝对路径等问题

一旦用html这些问题是必须考虑到的。之前jsp开发用绝对路径，而且支持el表达式，可以获取上下文等等，都洒洒水木问题啦。

如何解决上面的问题呢？

首先要解决的是部署项目的上下文问题？在html中如何获取web项目的上下文。

暂时采用如下代码获取，不知道有没有坑，不过不管如何，决定采用新的模式，为了纪念下之前走的弯路，获取上下文代码如下：

	function getContextPath(){
				var pathName = document.location.pathname;
				alert(pathName)
				var index = pathName.substr(1).indexOf("/");
				var result = pathName.substr(0,index+1);
				return result;
	}                    //定义变量，引入js使用
			var get_root=getContextPath();

接下来如何引入js和css？代码如下

	<!--Title And Meta -->
		<title>LP框架 官网-LP旨在打造超速Web开发平台框架之利器,开发集成插件配套方案，免费技术支持服务，让框架"小白"3分钟超速搭建自己的专有服务</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="keywords" content="LP官网,LP,LP框架,LP协同办公,limp,Java应用开源框架, Java EE(J2EE)快速开发框架,JAVA开发框架,java" />
		<meta name="description" content="LP框架是一款极速 web开发框架平台（有3分钟速成之神速美称），由十年同学倾心打造,配有成熟的解决方案，以及相关插件供开发者使用，最重要的是免费，提供技术支持【QQ交流群：369022804 加群备注:LP官网】" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="author" content="十年,[email protected]">

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>

首先引入head.min.js文件，然后通过head加载css和js文件。加载代码如下

           head.load(get_root+"/view/lp/css/load-index.css");//加载css

	   head.load(get_root+"/view/lp/js/jquery-1.11.0.js");
	   head.load(get_root+"/view/lp/bootstrap/js/bootstrap.min.js");
	   head.load(get_root+"/systemsite/plug/layui-v2.2.6/layui.all.js");
	   head.load(get_root+"/systemsite/plug/js-utils/system-site.js");

	   head.load(get_root+"/view/lp/js/scrolling-nav.js");
	   head.load(get_root+"/view/lp/js/jquery.easing.min.js");
	   head.load(get_root+"/view/lp/js/wow.js");
	   head.load(get_root+"/view/lp/js/wow-id.js");
	   head.load(get_root+"/view/lp/js/jquery.nicescroll.js");
	   head.load(get_root+"/view/lp/js/lp-index.js");

load-index.css加载样式代码如下，只有这样才不会存在路径问题。

@import "../bootstrap/css/bootstrap.min.css";
@import "lp-style.css";
@import "font-awesome.css";
@import "animate.css";
@import "portfolio.css";
@import "lp-index.css";
@import "../../../systemsite/plug/layui-v2.2.6/css/layui.css";

4、直接进行html url地址跳转，不再进行转发

这样的话html不再存在路径的问题，可以直接用相对路径即可，暂时采用这种相对路径的方式，浏览器直接进行跳转

对于公共部分（head和footer）思路是用魔板语言渲染加载。 

5、前端框架采用vue+layui+nodejs

暂时采用这种技术，后面遇到坑在调整。

一周的坑 忐忐忑忑算是填个七七八八，接下来还有很多路要走.....

更多框架信息，请关注 www.shinians.com  官网，相互学习