SpringBoot整合Jsp和Thymeleaf (附工程)

虛無境發表於2018-07-11
Spring BootJS

前言

本篇文章主要講述SpringBoot整合Jsp以及SpringBoot整合Thymeleaf，實現一個簡單的使用者增刪改查示例工程。事先說明，有三個專案，兩個是單獨整合的，一個是將它們整合在一起的。如需其中一個，只需看相應部分的介紹即可。若需工程原始碼，可以直接跳到底部，通過連結下載工程程式碼。

SpringBoot整合Jsp

開發準備

環境要求 JDK: 1.7或以上 SQL: MySql

這裡我們需要在mysql中建立一張使用者表，用於儲存使用者的資訊。 資料庫指令碼如下:

CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增id',
  `name` varchar(10) DEFAULT NULL COMMENT '姓名',
  `age` int(2) DEFAULT NULL COMMENT '年齡',
  `password` varchar(24) NOT NULL COMMENT '密碼',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8
複製程式碼

新建好表之後，我們再來建立工程。 我們的這個工程是通過maven建立一個普通的web工程。 建立好工程之後，我們需要下載相應的jar包，然後再來進行相關的開發。 這些jar包我們在pom.xml檔案中新增springBoot和Jsp相關的jar即可。 相關的註釋以及寫在其中了，這裡就不在過多講述了。 Maven依賴如下:

 <dependencies>
  		<!-- Spring Boot Web 依賴 核心 -->
		<dependency>
			<groupId>org.springframework.boot</groupId> 
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- Spring Boot 熱部署 class檔案之後會自動重啟 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- Spring Boot Test 依賴 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
  		
  		<!-- Spring Boot JPA -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
  		
  		  <!-- Spring Boot Mybatis 依賴 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis-spring-boot}</version>
        </dependency>
        
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        
  		<!--fastjson 相關jar -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>${fastjson}</version>
		</dependency>
  		
  				<!--JSP 依賴  -->
  		<!-- servlet依賴. -->  
  		<dependency>  
            <groupId>javax.servlet</groupId>  
            <artifactId>jstl</artifactId>
        </dependency>  
        
        <dependency>  
            <groupId>javax.servlet</groupId>  
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>  
        </dependency>  
       
        <!-- tomcat的支援.-->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>    
  </dependencies>
複製程式碼

相關的Jar包下載完畢之後，我們再來確認專案的工程結構。 首先是後臺相關包說明:

src/main/java
com.pancm.web - Controller 層
com.pancm.dao - 資料操作層 DAO
com.pancm.pojo- 實體類
com.pancm.service - 業務邏輯層
Application - 應用啟動類

src/main/resources
application.properties - 應用配置檔案，應用啟動會自動讀取配置
複製程式碼

前端的相關檔案存放說明:

src/main/webapp
WEB-INF - web.xml web相關的核心配置
WEB-INF/jsp - JSP檔案的存放路徑
複製程式碼

整體工程結構圖:

SpringBoot整合Jsp和Thymeleaf (附工程)

工程結構確認之後，我們再來新增相應的配置。 只需在application.properties 新增相應的配置即可。 資料來源的配置和之前的差不多，需要注意的是Jsp的相關配置。 由於springBoot預設的支援的模版是Thymeleaf，所以這裡我們需要進行相應的更改。

配置如下:

## 編碼
banner.charset=UTF-8
server.tomcat.uri-encoding=UTF-8
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true
spring.messages.encoding=UTF-8
## 埠
server.port=8088

## 資料來源
spring.datasource.url=jdbc:mysql://localhost:3306/springBoot?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

## JSP配置
# 頁面預設字首
spring.mvc.view.prefix=/WEB-INF/jsp/
# 響應頁面預設字尾
spring.mvc.view.suffix=.jsp
複製程式碼

程式碼編寫

其實這裡的程式碼和之前文章講述的基本一致，唯一有點區別的是，這裡我是用JPA實現對資料庫進行操作的(也就是順便說下JPA這個框架的使用)。

首先是實體類，這裡因為用了JPA，所以和之前的有點不同，新增了一些註解。 Entity：表示這是個實體類。 Table：該實體類對映的資料表名。 Column：指定該欄位的屬性，nullable 表示是否非空，unique 表示是否是唯一。

那麼實體類的程式碼如下:

@Entity
@Table(name = "t_user")
public class User {
	
	 /** 編號 */
	 @Id
	 @GeneratedValue
	 private Long id;
	 /** 姓名 */
	 @Column(nullable = false, unique = true)
	 private String name;
	 /** 密碼*/
	 @Column(nullable = false)
	 private String password;
	 /** 年齡 */
	 @Column(nullable = false)
	 private Integer age;
	
	//getter和setter略
}	 

複製程式碼

由於用的是JPA，dao層這塊只需繼承JpaRepository該類即可，需要指定實體類和主鍵型別。 dao層程式碼如下:

@Mapper
public interface UserDao extends JpaRepository<User, Long>{
	
}
複製程式碼

業務層這塊和之前一樣呼叫即可，雖然用的是JPA，但是方法也是很簡單的，新增和修改就用save，刪除就是delete，findOne就是通過ID查詢，findAll就是查詢所有等等。

services程式碼如下:

@Service
public class UserServiceImpl implements UserService {

	@Autowired
    private UserDao userDao;
	
	
	@Override
	public boolean addUser(User user) {
		boolean flag=false;
		try{
			userDao.save(user);
			flag=true;
		}catch(Exception e){
			System.out.println("新增失敗!");
			e.printStackTrace();
		}
		return flag;
	}

	@Override
	public boolean updateUser(User user) {
		boolean flag=false;
		try{
			userDao.save(user);
			flag=true;
		}catch(Exception e){
			System.out.println("修改失敗!");
			e.printStackTrace();
		}
		return flag;
	}

	@Override
	public boolean deleteUser(Long id) {
		boolean flag=false;
		try{
			userDao.delete(id);
			flag=true;
		}catch(Exception e){
			System.out.println("刪除失敗!");
			e.printStackTrace();
		}
		return flag;
	}

	@Override
	public User findUserById(Long id) {
		return userDao.findOne(id);
	}

	@Override
	public List<User> findAll() {
		return userDao.findAll();
	}
}
複製程式碼

到了控制層這塊，這裡提供還是提供介面給Jsp進行呼叫，不過這裡類的註解就不能用之前的RestController這個註解，這個註解以json的格式返回資料，但是我們有時返回的時候需要跳轉介面，所以應該使用Controller這個註解。如果想在某個方法中返回的資料格式是json的話，在該方法上加上ResponseBody這個註解即可。

控制層程式碼如下:

@Controller
public class UserRestController {
		@Autowired
		private UserService userService;
 
		@RequestMapping("/hello")
	    public String hello() {
	        return "hello";
	    }
		
		@RequestMapping("/")
	    public String index() {
	        return "redirect:/list";
	    }
		
		
	    @RequestMapping("/list")
	    public String list(Model model) {
	    	System.out.println("查詢所有");
	        List<User> users=userService.findAll();
	        model.addAttribute("users", users);
	        return "user/list";
	    }

	    @RequestMapping("/toAdd")
	    public String toAdd() {
	        return "user/userAdd";
	    }

	    @RequestMapping("/add")
	    public String add(User user) {
	        userService.addUser(user);
	        return "redirect:/list";
	    }

	    @RequestMapping("/toEdit")
	    public String toEdit(Model model,Long id) {
	        User user=userService.findUserById(id);
	        model.addAttribute("user", user);
	        return "user/userEdit";
	    }

	    @RequestMapping("/edit")
	    public String edit(User user) {
	        userService.updateUser(user);
	        return "redirect:/list";
	    }


	    @RequestMapping("/toDelete")
	    public String delete(Long id) {
	        userService.deleteUser(id);
	        return "redirect:/list";
	    }
}
複製程式碼

功能測試

後端程式碼介紹就到這裡了，至於前端JSP的程式碼就不在多說了(主要原因是介面寫得太醜了...），我們直接啟動專案，檢視效果。 啟動專案，在瀏覽器上輸入:http://localhost:8088/list 主介面:

SpringBoot整合Jsp和Thymeleaf (附工程)

新增一條資料之後的介面:

SpringBoot整合Jsp和Thymeleaf (附工程)

SpringBoot整合Jsp和Thymeleaf (附工程)

其它的修改和刪除也能實現，這裡就在一一不貼圖了。 springBoot整合 Jsp到這就結束了。

SringBoot整合Thymeleaf

該工程參考:http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html

Thymeleaf介紹

Thymeleaf是個模板引擎，可以用於Web與非Web應用，它可以XML/XHTML/HTML5， JavaScript, CSS ,甚至文字檔案。

Thymeleaf的使用

Thymeleaf這塊個人使用不太熟練，這個也不是本篇文章主要講述的內容，詳細的可以檢視官方文件。 https://www.thymeleaf.org/documentation.html

開發準備

基本和上面的SringBoot整合Jsp差不多，這裡就不再贅述了。

由於SpringBoot預設的模版引擎就是Thymeleaf，所以Maven 依賴這塊只需要在原先的springBoot專案新增Thymeleaf的依賴就行。

  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
複製程式碼

application.properties 配置這塊，可以和之前的專案基本一致，需要注意的也只有spring.thymeleaf.cache配置，為false的時候是關閉Thymeleaf的快取，更改介面之後會自動重啟然後生效。

SringBoot整合Thymeleaf和SringBoot整合Jsp有個比較大的不同是，Thymeleaf的資原始檔是放在src/main/resources目錄下，Jsp的是放在src/main/webapp目錄下。其中resources目錄下的的static目錄用於放置靜態內容，比如css、js、jpg圖片等。templates目錄用於放置專案使用的頁面模板，也就是**.html**檔案。

它的專案結構圖如下:

SpringBoot整合Jsp和Thymeleaf (附工程)

程式碼基本和SringBoot整合Jsp一致，這裡就不在贅述了。

功能測試

啟動該專案，在瀏覽器輸入:http://localhost:8085 主介面:

SpringBoot整合Jsp和Thymeleaf (附工程)

修改使用者資料之後的:

SpringBoot整合Jsp和Thymeleaf (附工程)

SpringBoot整合Jsp和Thymeleaf (附工程)

其它的功能也是可以實現的，這裡就不再過多貼圖了。 springBoot整合 Thymeleaf到這就結束了。

SpringBoot整合Jsp和Thymeleaf

注:這個是後來新加的一個專案。 SpringBoot單獨整合Jsp和Thymeleaf都還好，沒出現什麼問題。但是在一起之後，就有了改變，因為SpringBoot預設的模板引擎是Thymeleaf，加上JSP之後，JSP的模板引擎並不會生效。但是如果想用JSP模板，此時的禁用到Thymeleaf，雖然可以通過多型更改配置實現，但是感覺太過麻煩了。於是研究了一下，找到了共存的方法。

和前面來兩個專案區別如下：

  1. 之前的Jsp和Thymeleaf配置都是在application.properties 檔案中，這裡我將它們的配置改到程式碼中獲取。

2.之前Thymeleaf相關檔案是放在 src/main/resources 目錄下，這裡移動到WEB-INF目錄下，和之前的jsp資料夾同級。

3.增加一個控制層，嚴格區分訪問Jsp和Thymeleaf的路徑。訪問Jsp的路徑字首加上jsp，訪問Thymeleaf字首加上templates。

那麼新增的配置程式碼如下:

@Configuration
@EnableWebMvc
@ComponentScan
public class WebConfig extends WebMvcConfigurerAdapter {
	
	   @Bean
       public ViewResolver viewResolver() {
           InternalResourceViewResolver resolver = new InternalResourceViewResolver();
           resolver.setPrefix("/WEB-INF/");
           resolver.setSuffix(".jsp");
           resolver.setViewNames("jsp/*");
           resolver.setOrder(2);
           return resolver;
       }

       @Bean
       public ITemplateResolver templateResolver() {
           SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
           templateResolver.setTemplateMode("HTML5");
           templateResolver.setPrefix("/WEB-INF/");
           templateResolver.setSuffix(".html");
           templateResolver.setCharacterEncoding("utf-8");
           templateResolver.setCacheable(false);
           return templateResolver;
       }

       @Bean
       public SpringTemplateEngine templateEngine() {
           SpringTemplateEngine templateEngine = new SpringTemplateEngine();
           templateEngine.setTemplateResolver(templateResolver());
           return templateEngine;
       }

       @Bean
       public ThymeleafViewResolver viewResolverThymeLeaf() {
           ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
           viewResolver.setTemplateEngine(templateEngine());
           viewResolver.setCharacterEncoding("utf-8");
           viewResolver.setViewNames(new String[]{"thymeleaf/*"});
           viewResolver.setOrder(1);
           return viewResolver;
       }

       @Override
       public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
           configurer.enable();
       }

       @Override
       public void addResourceHandlers(ResourceHandlerRegistry registry) {
           super.addResourceHandlers(registry);
       }
}
複製程式碼

專案的結構圖如下:

SpringBoot整合Jsp和Thymeleaf (附工程)

功能測試

在瀏覽器輸入:http://localhost:8089/list 檢視Thymeleaf模板的介面

SpringBoot整合Jsp和Thymeleaf (附工程)

在瀏覽器輸入:http://localhost:8089/list2 檢視JSP模板的介面

SpringBoot整合Jsp和Thymeleaf (附工程)

可以看到已經成功整合了

其它

關於SpringBoot整合Jsp和Thymeleaf 到這裡就結束了。 SpringBoot整合Jsp的專案工程地址: https://github.com/xuwujing/springBoot-study/tree/master/springboot-jsp-jpa SpringBoot整合Thymeleaf的專案工程地址: https://github.com/xuwujing/springBoot-study/tree/master/springboot-thymeleaf SpringBoot整合Jsp和Thymeleaf的專案工程地址: https://github.com/xuwujing/springBoot-study/tree/master/springboot-jsp-thymeleaf

原創不易，如果感覺不錯，希望給個推薦！您的支援是我寫作的最大動力！ 版權宣告: 作者：虛無境 部落格園出處：http://www.cnblogs.com/xuwujing CSDN出處：http://blog.csdn.net/qazwsxpcm     個人部落格出處：http://www.panchengming.com

相關文章