前后端分离的项目中springboot项目和前端项目的整合

整合的思路有两种：

一：把前端的资源打包放入到springboot项目中，打成jar包或者war包进行部署。

二：把前端资源放到NGINX代理服务器上，后端项目文件打成jar包或者war包启动。

具体采用哪种方式，看公司中已有的部署方式，在者就是根据自己的喜好进行整合部署。

方式一：

第一步是选择模板引擎，springboot官方推荐是Thymeleaf 。在application.properties文件中进行如下的配置：

pom中添加如下的依赖

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

##thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
spring.thymeleaf.cache=false 

上面指定了 把HTML页面都放在templates目录下面，css和Js文件都放在static目录下面。

这里要解释一下，static目录下的文件是默认可以访问到的，而templates目录下的文件是不能直接访问到的，这想到与JSP模板开发下的WEB-INF。

写一个contoller来映射访问首页文件，然后用maven打成JAR 包。在安装jdk的本地环境中可以使用java -jar xxxx.jar 来启动。

这里要注意： 直接打成jar包运行，会出现别名不能识别的问题，据说是mybatisVF的bug，手动设置成这个即可。

最后的静态文件目录如下：

方式二：通过反向代理的模式

这里我是在本地进行搭建的。

首先安装nginx然后，并对配置文件进行修改：

    #前端页面服务器
    server {
        #监听端口和域名
        listen       8000; 
        server_name  localhost;
 
        #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #添加拦截路径和代理地址
        location /t/ {          
               proxy_pass http://localhost:8888/t/;  #注意：使用代理地址时末尾记得加上斜杠"/"。      
        }   

       首页访问地址
         location / {          
                root   html/;  #注意：使用"/"拦截全路径的时候记得放在最后。
                index  index.html index.htm;  #index表示首页       
        } 
    }

静态文件所在的目录：