spring boot 和 Thymeleaf 静态资源前后端分离

spring boot 和 Thymeleaf 前后端分离

1. 问题：公司有个主域名为 www.thingjs.com ，现在要做个新网站 域名为 dix.thingjs.com ，需要新网站可以直接登录，或者在主域名下登录后，点击 www.thingjs.com/dix 可以直接登录 新网站，(要求域名不能变化为dix.thingjs.com)本来一级域名相同，可以直接读取cookie，但是主域名cookie限制子域名不能读取cookis，所以只能换一种方案。

2. 这里借用了在公司主域名下服务器配置nginx

   #访问后台	
   location /dix {
       # 实际配置ip地址
     	 proxy_pass http://dix.thingjs.com;
    }
    #访问前台资源,跳转以dixss开头的静态资源
    location /dixss {
        # 实际配置ip地址
     	proxy_pass http://dix.thingjs.com/dixss/;
    }
   

3. 项目中静态资源放在 src/main/resources/static/dixss/css/bootstrap.min.css 目录下。就可以本地运行项目访问了

4. 拆分 resources 文件夹下 static下的静态资源 ，放到服务器随意目录，使用nginx服务器配置路由映射

   1. 我这里把静态资源全部放在 /app/modules/ru/dixss/ 目录下，使用下列配置映射

   server {
           listen       80;
     	  # 实际配置ip地址
           server_name  localhost /dix.thingjs.com ;
   
           #转发dix用户权限管理界面
           location  / {
           	#后台项目监听8085
               proxy_pass http://127.0.0.1:8085/;
           }
           location  /dix/ {
               proxy_pass http://127.0.0.1:8085/;
           }
   		# nginx监听80端口，访问 host:port/dixss/css/bootstrap.min.css 自动访问此文件夹下路径
           location /dixss/ {
                   add_header Cache-Control no-cache;
                   alias /app/modules/ru/dixss/;
                   expires 7d;
           }
   
   }
   
   

5. Thymeleaf 内部可以这样引用资源文件

    <link href="@{/dixss/css/bootstrap.min.css}"  rel="stylesheet"/>
   

6. 这里有个问题就是 请求host的问题，在html中因为ctx变量

   <script th:inline="javascript">
       // 部署线上使用
       var ctx = [[@{http:\/\/dix.thingjs.com\/}]];  
       // 本地测试使用              
       // var ctx = [[@{http:\/\/127.0.0.1:8085\/}]];
   </script>
   

7. 在js中ajax请求可以直接引用 ctx变量

   function login() {
       $.modal.loading($("#btnSubmit").data("loading"));
       var username = $.common.trim($("input[name='username']").val());
       var password = $.common.trim($("input[name='password']").val());
       var validateCode = $("input[name='validateCode']").val();
       var rememberMe = $("input[name='rememberme']").is(':checked');
       $.ajax({
           type: "post",
           url: ctx + "login",//这里可以直接用ctx = html中声明的变量
           data: {
               "username": username,
               "password": password,
               "validateCode": validateCode,
               "rememberMe": rememberMe
           },
           success: function (r) {
               console.log(r)
               if (r.code == 0) {
                   location.href = ctx + 'index'; //这里请求成功后可以直接用ctx = html中声明的变量
               } else {
                   $.modal.closeLoading();
                   $('.imgcode').click();
                   $(".code").val("");
                   $.modal.msg(r.msg);
               }
           }
       });
   }
   

8. 这些配置好了之后，需要在后台把两个网站直接的cookie协调好，第二个网站还要嵌入第三个网站，所以也要注意在第三个网站写入cookie，以便于识别登录信息，这里注意在dix下直接登录和www登录跳转时cookie的不同