Springboot 模板頁面

Springboot 模板渲染 

     在之前所見到的信息顯示發現都是以Rest風格進行顯示,但是在實際開發之中, 所有數據的顯示最終都應該交由頁面去處理完成。在Springboot 中這個頁面並不是我之前的jsp ,FM 這些 而是普通的html頁面,而且最爲重要的是 此處所使用的渲染頁面採用的是模板方式的顯示 而在java開發之中 前臺顯示模板爲三類 FreeMarker Velocity thymeleaf (官方推薦使用) 

 1.0 如果要使用 thymeleaf 那麼應該首先進行相關支出依賴庫導入 修改pom.xml 配置文件

<dependency>

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

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

</dependency>

記住改完Maven配置文件要刷新一下哈!

 2.0 本次開發需要一個控制層跳到頁面進行信心處理,在SpirngMvc 的時候使用的是ModelAndView 傳遞,而現在Springboot 裏面如果要傳遞直接在方法中定義一個Model 參數就可以了。

3.0 控制層代碼 

package com.fabu.demo4.controller;





import com.fabu.demo4.service.IMessage;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.servlet.ModelAndView;





import java.util.HashMap;





/****

* 控制層 用來測試模板渲染處理

*/

@Controller

@RequestMapping("/Message")

public class MessageController  {









    @Autowired

    private IMessage  iMessage;





    @RequestMapping(value = "/info",method = RequestMethod.GET)

    public  String  info(String user, Model model){

        model.addAttribute("url",iMessage.info()); //request 屬性傳遞包裝

        model.addAttribute("username",user);  

        return "message/index";  //返回一個路徑 後綴是默認.html

    }





    /*****

     * 老的方式  進行操作

     * @param user

     * @param map

     * @return

     */

    @RequestMapping(value = "/msg",method = RequestMethod.GET)

    public ModelAndView msg(String user, HashMap<String,Object> map){

        map.put("url",iMessage.info());

        map.put("username",user);

        return new ModelAndView("message/index",map);

    }





}

3.1 service 層的代碼如下

package com.fabu.demo4.service;



public interface IMessage {

    /*****

     * 按照真實開發 數據全部要去數據庫查詢出來 我這裏爲方便就不建立 數據庫操作層了

     */

     public  String  info();

}

3.2 service 層實現類代碼如下

package com.fabu.demo4.service;



public class IMessageImpl implements IMessage {

    /*****

     * 按照真實開發 數據全部要去數據庫查詢出來 我這裏爲方便就不建立 數據庫操作層了

     */

    @Override

    public String info() {

        return "測試模板渲染 zw";

    }

}

3.4 使用Springboot 構建Bean 方式注入 

package com.fabu.demo4.config;



import com.fabu.demo4.service.IMessageImpl;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;



/****

* 使用配置向的方式來配置Bean

*/

@Configuration



public class IMessageService {





    @Bean //構建一個Bean 進行處理

    public IMessageImpl getIMessageImpl(){



        return  new IMessageImpl();

    }





}

項目目錄結果如下 

'

4.0 現在控制層使用的是@Controller 註解 所以執行該控制器的方法後會進行跳轉處理 如果要進行跳轉頁面的定義 有嚴格要求 在classpath 路徑下 src/main/resources src/main/view 必須建立有一個templates 的目錄 在這個目錄裏面保存有thymeleaf的所有相關頁面

 5.0 在 templates 裏面編寫index頁面

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <title>Springboot thymeleaf 模板渲染</title>

    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

</head>

<body>

      <p th:text=" '數據'+ ${url} "></p>

      <p th:text=" '用戶名' +${username} "></p>



</body>

</html>

頁面編寫 所有元素必須要有完結標籤 6.0 運行服務  而後輸入訪問路徑 

http://localhost:8080/Message/msg?user=springboot

結果如下 

 

7.0  如果現在我們所定義的要訪問的頁面不是通過控制器跳轉的該怎麼辦? 可以考慮在thymeleaf 所在父路徑裏面建一個static 的子目錄,該目錄保存的是所有靜態頁面

在以後的實際開發之中 像js .css  images 等信息文件都要求放在static 目錄裏面

8.0 thymeleaf  默認的訪問的頁面路徑的後綴爲*.html 那麼可以通過application.yml 配置文件進行變更 

server:

  port: 8080

spring:

  thymeleaf:

    suffix: .htm

   這個時候你需要修改index 頁面後綴爲 .htm

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章