springboot與thymeleaf搭建項目,同時訪問html頁面和jsp


springboot與thymeleaf搭建項目

一、springboot跳轉html的項目搭建

參考:

springboot項目創建教程 https://blog.csdn.net/q18771811872/article/details/88126835

springboot2.0 跳轉html教程 https://blog.csdn.net/q18771811872/article/details/88312862

springboot2.0 跳轉jsp教程 https://blog.csdn.net/q18771811872/article/details/88342298
————————————————
版權聲明:本文為CSDN博主「築基始,仙魔終」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/q18771811872/article/details/88343672

建議:在新建項目的時候,直接選擇thymeleaf,就可以不用下邊這些配置和添加依賴等的操作的了。

1、使用Spring initializer初始化項目

image-20200520214420215

2、添加pom.xml文件依賴

① web的starter

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

② thymeleaf

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

③ 此時thymeleaf無法正常訪問到頁面,需要指定版本

<thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
<!-- 布局功能的支持程序  thymeleaf3主程序  layout2以上版本 -->
<!-- thymeleaf2   layout1-->
<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>

在properties中添加如上:

image-20200520214658063

3、添加application.xml配置thymeleaf,實現頁面跳轉html

application.xml

server.port=8081
        
# ====thymeleaf相關====
#<!-- 關閉thymeleaf緩存 開發時使用 否則沒有實時畫面-->
spring.thymeleaf.cache=false
## 檢查模板是否存在,然后再呈現
spring.thymeleaf.check-template-location=true
#Content-Type值
spring.thymeleaf.servlet.content-type=text/html
#啟用MVC Thymeleaf視圖分辨率
spring.thymeleaf.enabled=true
# 應該從解決方案中排除的視圖名稱的逗號分隔列表
##spring.thymeleaf.excluded-view-names=
#模板編碼
spring.thymeleaf.mode=LEGACYHTML5
# 在構建URL時預先查看名稱的前綴
spring.thymeleaf.prefix=classpath:/templates/
# 構建URL時附加查看名稱的后綴.
spring.thymeleaf.suffix=.html
# 鏈中模板解析器的順序
#spring.thymeleaf.template-resolver-order= o
# 可以解析的視圖名稱的逗號分隔列表
#spring.thymeleaf.view-names=
#thymeleaf end

可以參照ThymeleafProperties類進行配置文件的配置(不配的話會默認配置為如下)

image-20200520223310179

4、添加Controller

在main下創建controller包,寫controller控制類

package com.ims.xiaokeai.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author jiyongjia
 * @create 2020/5/20 - 13:08
 * @descp:
 */
@Controller
@RequestMapping("/xiaokeai2")
public class MainController {
    @RequestMapping("/index")
    public String get1(){
        return "my520/index";
    }

    @RequestMapping("/show")
    public String show(){
        return "my520/show";
    }

    @RequestMapping("/result")
    public String result(){
        return "my520/result";
    }

    @RequestMapping("/biubiu")
    public String biubiu(){
        return "biubiu";
    }

    @RequestMapping("/qinqin")
    public String qinqin(){
        return "qinqin";
    }
}

5、在resources文件夾下的templates目錄,新建html頁面

該處用於存放HTML等模板文件,在這新增hello.html,添加如下代碼。

image-20200520224240300

切記:使用Thymeleaf模板引擎時,必須在html文件上方添加該行代碼使用支持Thymeleaf。不然引起識別不了html模板。

<html lang="en" xmlns:th="http://www.thymeleaf.org"> 

image-20200520231717524

使用外部的css文件

在static下創建css目錄結構

image-20200520234613966

在html中引用這個css

image-20200520234640455

6、測試

此時,啟動項目,請求url映射地址,就可以完成請求啦~

訪問:http://xx.xx.xx.65:8081/xiaokeai2/index

結果:

image-20200520224337935

7、部署存在的問題

image-20200520230520499

二、實現Springboot整合SpringMvc跳轉jsp(無html)

問題提出

參考:

springboot項目創建教程 https://blog.csdn.net/q18771811872/article/details/88126835

springboot2.0 跳轉html教程 https://blog.csdn.net/q18771811872/article/details/88312862

springboot2.0 跳轉jsp教程 https://blog.csdn.net/q18771811872/article/details/88342298
————————————————
版權聲明:本文為CSDN博主「築基始,仙魔終」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/q18771811872/article/details/88343672

1、使用Spring initializer初始化項目

image-20200520214420215

2、需要導入的jar包

記得去掉thymeleaf依賴后,添加如下,再訪問jsp才能成功

<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
    <scope>provided</scope>
</dependency>

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

3、完善項目的結構

默認的springboot項目是沒有webapp/WEB-INF的,我們需要建立出這個。

方法:

步驟1:新建如下的目錄結構信息

image-20200521100637130

步驟2:添加webapp為web文件夾

(復制webapp的路徑到此處即可)

image-20200521100557601

成功后顯示有綠點在webapp上。

4、添加配置

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

此時,配置文件中就不要如下

#spring.thymeleaf.prefix=classpath:/templates/
# 構建URL時附加查看名稱的后綴.
#spring.thymeleaf.suffix=.html

5、controller

@Controller
public class HelloController {
 	//index.jsp
    @RequestMapping("test03")
    public String test03(){
        return "index";
    }
}

6、測試輸出:

image-20200521102030634

三、springboot同時跳轉jsp和html

1、方案1:getRequestDispatcher

1、pom.xml文件同時放入thymeleaf 架包和jsp支持后, springboot的return模版會默認跳轉到html ,那怕是你並沒有配置thymeleaf的屬性。

解決方案, 使用getRequestDispatcher方法來跳轉到jsp頁面, 就同時支持html和jsp了 request.getRequestDispatcher("/WEB-INF/views/testJsp.jsp").forward(request, response);

步驟1:依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ims</groupId>
    <artifactId>springbootandmvc</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springbootandmvc</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

步驟2:配置文件

我們通過搭建好thymeleaf引擎后,配置文件如下:

image-20200521103307699

步驟3:controller層轉發到jsp

package com.ims.springbootandmvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author jiyongjia
 * @create 2020/5/20 - 23:32
 * @descp:
 */
@Controller
public class HelloController {
    //跳轉html
    @RequestMapping("test01")
    public String test01(){
        return "hello";
    }

    //跳轉html加css
    @RequestMapping("test02")
    public String test02(){
        return "hello2";
    }

    //跳轉jsp
    @RequestMapping("test03")
    public String test03(){
        return "index";
    }

    //跳轉jsp和html
    @RequestMapping("test04")
    public void test04(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/WEB-INF/jsp/index.jsp").forward(request,response);
    }
}

步驟4:測試

image-20200521103749153

步驟5:使用css的兩種方式

方式1:jsp和html使用統一的靜態css文件路徑,無法區分開jsp的css和html的css

image-20200521104424478

我們需要在jsp頁面引入css如下:

 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css">

方式2:使用絕對路徑的方式把jsp的css都放在webapp/static/css下

此時,我們關於html的模板和靜態文件都在resources下,

關於jsp的都在webapp下,如下:

image-20200521105225900

jsp中使用的css如下。

<link rel="stylesheet" type="text/css" href="../../../static/css/index2.css">

image-20200521105013403


參考方法2:

2、另外 使用getRequestDispatcher跳轉到html頁面的時候,thymeleaf 模版接收參數可能會出現問題。

解決方案1:html放棄使用thymeleaf 模版,然后在頁面主動請求接口數據(AJAX POST等)

解決方案2:html繼續使用thymeleaf 模版,用return模版 返回來跳轉頁面


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM