Spring Boot和thymeleaf ， freemarker , jsp三個前端模塊的運用

時間 2019-11-06

標籤 spring boot thymeleaf freemarker jsp 三個前端模塊運用欄目 Spring 简体版

原文原文鏈接

spring boot和三個前端模塊的運用javascript

一 .Thymeleafhtml

在idea上建立spring boot 工程，勾選Thymeleaf前端模塊，它會自動導入Thymeleaf的依賴前端

建立了spring boot工程後，勾選web和要用的前端模塊java

而後隨便建立一個bean類web

package com.liy.thymeleaf.bean;

public class User {
    private int id;
    private String name;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

而後直接寫個controller類把數據弄到thymeleaf前端模塊裏去spring

import com.liy.thymeleaf.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

@Controller
public class UserController {

    @GetMapping("/user")
    public String lists(Model m){
        List<User> users = new ArrayList<>();
        for (int i = 1;i < 10 ; i++){
            User user = new User();
            user.setId(i);
            user.setName("李四"+i);
            users.add(user);
        }
       m.addAttribute("users",users);
        m.addAttribute("username","hahahh");
        return "index";
    }
}

前端模塊寫個表格，把數據循環出來就行，thymeleaf也是html的後綴apache

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>編號</td>
            <td>姓名</td>
            <td>username</td>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${username}"></td>
        </tr>
    </table>
<script th:inline="javascript">
    var username = [[${username}]];
    console.log(username)
</script>
</body>
</html>

結果爲api

Thymeleaf 在書寫 <tr th:each="user : ${users}">時就能夠導入「th」 tomcat

若是導入的網站和下面的有異，則改爲下面那個網址app

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

導入spring boot裏的thymeleaf依賴，裏面有這個前端模塊的自動化配置

能夠在ThymeleafProperties和ThymeleafAutoConfiguration裏去看一些信息

Thymeleaf能夠直接獲取到controller類裏的保存到model裏的數據

在js裏用 [[${xxxx}]]

body裏面直接用 ${}

二. freemarker

freemarker和thymeleaf相似，也是直接在建立spring boot的工程師選擇freemarker做爲前端模塊，那樣會自動導入依賴

和thymeleaf只是在書寫的方式不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>freemarker</title>
</head>
<body>
<table border="1">
    <tr>
        <td>編號</td>
        <td>姓名</td>
    </tr>
    <#list users as user>
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
        </tr>
    </#list>
</table>

</body>
</html>

freemarker循環用法

<#list users as user>
<tr>
<td>${user.id}</td>
<td>${user.name}</td>
</tr>
</#list>

三.jsp

jsp是咱們java開發最基礎的前端模塊，但在spring boot裏倒是用法比較複雜的前端模塊

在建立spring boot工程裏的前端模塊裏沒有jsp的依賴

因此建立了工程後，得去pom.xml裏添加依賴，四個依賴

<dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

讓後得建立webapp，在webapp裏面再建立 xx.jsp (導入了jstl標籤庫)

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/28 0028
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>編號</td>
            <td>姓名</td>
        </tr>
        <c:forEach items="${users}" var="user">
            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

注意和jsp不一樣，thymeleaf和freemarker的頁面默認是要安裝到 resources 裏 /templates/ 目錄下，能夠本身去修改