spring boot和三个前端模块的运用

 

一 .Thymeleaf

在idea上创建spring boot 工程，勾选Thymeleaf前端模块，它会自动导入Thymeleaf的依赖

创建了spring boot工程后，勾选web和要用的前端模块

然后随便创建一个bean类

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前端模块里去

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;@Controllerpublic class UserController {    @GetMapping("/user")    public String lists(Model m){        List
    
      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的后缀

    
            
    
             
      
                   
编号
                   
姓名
                   
username
              
              
                   
                   
                   
              
         
    

 

结果为

 

Thymeleaf   在书写  <tr th:each="user : ${users}">时就可以导入“th”  

如果导入的网站和下面的有异 ， 则改成下面那个网址

 

导入spring boot里的thymeleaf依赖，里面有这个前端模块的自动化配置 

可以在ThymeleafProperties和ThymeleafAutoConfiguration里去看一些信息

Thymeleaf可以直接获取到controller类里的保存到model里的数据

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

body里面直接用 ${}

 

 

二. freemarker

freemarker和thymeleaf类似，也是直接在创建spring boot的工程师选择freemarker作为前端模块，那样会自动导入依赖

和thymeleaf只是在书写的方式不一样

    
        
    
    <#list users as user>        
         
      
               
编号
               
姓名
          
      
                   
${user.id}
                   
${user.name}
              
               
    

 

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里添加依赖，四个依赖

                
     
      jstl
                 
     
      jstl
                 
     
      1.2
             
            
                
     
      javax.servlet
                 
     
      javax.servlet-api
             
            
                
     
      javax.servlet.jsp
                 
     
      javax.servlet.jsp-api
                 
     
      2.3.1
             
            
                
     
      org.apache.tomcat.embed
                 
     
      tomcat-embed-jasper
             
    

 

让后得创建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"%>        
                
    
    
             
      
                   
编号
                   
姓名
              
              
                       
${user.id}
                       
${user.name}
                  
                 
    

 

 

注意和jsp不同，thymeleaf和freemarker的页面默认是要安装到 resources 里  /templates/  目录下   ，可以自己去修改