Spring Boot第三篇-整合spring-boot-thymeleaf技术

已于 2022-01-29 08:42:46 修改
阅读量288 收藏
点赞数
分类专栏： spring boot 文章标签： spring boot spring java
于 2022-01-26 16:09:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdfxfff/article/details/122702541
版权

注：此文章依据跟做狂神说狂神说项目所写心得，此文档是便于我个人所写

1.项目结构与依赖

附： 

        <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.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<!-- lombok 相关依赖 -->
		<!-- lombok 相关依赖 -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.0</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>5.3.8</version>
		</dependency>

1-1. config包

1-1-1. LoginHanderIntertor类

package com.example.demo.config;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//拦截器部分
public class LoginHanderIntertor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {;
    //从Session中获取当前登录对象的信息    
    Object loginName = request.getSession ( ).getAttribute ( "LoginName" );
        if (loginName==null)
        {
            request.setAttribute ( "msg","没有权限，请先登录" );
            //forword转发技术
            request.getRequestDispatcher ( "/index.html" ).forward ( request,response );
            return false;
        }
         return true;
    }
}

1-1-2  MyMvcConfig类

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
//应为类型要求为WebMvcConfigurer，所以我们实现其接口
//可以使用自定义类扩展MVC的功能
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //增加拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //排除需要放行的界面
        registry.addInterceptor ( new LoginHanderIntertor () ).addPathPatterns ( "/**" ).excludePathPatterns (
                "/","/index.html","/css/**","/img/**","/js/**","/user/login"
        );
    }

    @Override //定义自己的视图
    public void addViewControllers(ViewControllerRegistry registry) {
              registry.addViewController ( "/" ).setViewName ( "index" );
        registry.addViewController ( "/index.html" ).setViewName ( "index" );

        registry.addViewController ( "/404.html" ).setViewName ( "404" );
        registry.addViewController ( "/main.html" ).setViewName ( "dashboard" );
        registry.addViewController ( "/list.html" ).setViewName ( "list" );
        
    }
}

1-2  controller包

1-2-1  EmployController类

package com.example.demo.controller;

import com.example.demo.dao.DepartmentDao;
import com.example.demo.dao.EmployeeDao;
import com.example.demo.pojo.Department;
import com.example.demo.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;

@Controller
public class EmployController {
    @Autowired
    EmployeeDao employeeDao;
    @Autowired
    DepartmentDao department;

    @RequestMapping("/emps")
    public String list(Model model){
        Collection <Employee> alls = employeeDao.getAll ( );
        model.addAttribute ( "emps",alls );
        return "emp/list";
    }
    @GetMapping("/emp")
    public String addpage(Model model){
        Collection <Department> departments = department.getDepartments ( );
        model.addAttribute ( "departments",departments );

        return "emp/add";
    }
    @PostMapping("/emp")
    public String addemp(Employee e){
        System.out.println (e);
        employeeDao.save ( e );
        return "redirect:/emps";
    }

    @GetMapping("/emp/{id}") //从路径中取参
    public String toUpdate(@PathVariable("id")Integer id, Model model){
        Employee employee = employeeDao.getEmployById ( id );
        Collection <Department> departments = department.getDepartments ( );
        model.addAttribute("emp",employee);
        model.addAttribute ( "departments",departments );
        return "emp/update";
    }

    @PostMapping("/toupdate")
    public String Update(Employee employee){
        employeeDao.save(employee);
        return  "redirect:/emps";
    }

    @GetMapping("/delemp/{id}")
    public  String todelete(@PathVariable("id")Integer id,Model model)
    {
        employeeDao.delete (id);
        return  "redirect:/emps"; //重定向到/emps
    }


}

1-2-2  LoginController类

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpSession;

@Controller

public class LoginController {

    @RequestMapping("/user/login")//获取前端参数，前提是需要有name属性
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model model,HttpSession session){
         //StringUtils.isEmpty 判断是否非空
        if (!StringUtils.isEmpty ( username )&&"123456".equals ( password ))
        {
            //将当前登录信息保存到session
            session.setAttribute ( "LoginName",username );
            return "redirect:/main.html";
        }
        else
        {
            model.addAttribute ( "msg","密码错误" );
            return "index";
        }

    }

}

1-3 dao包

1-3-1 DepartmentDao类

package com.example.demo.dao;

import com.example.demo.pojo.Department;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

@Component

public class DepartmentDao {
    @Autowired
    //模拟数据
    private static Map<Integer,Department> departments=null;
    static {
       departments = new HashMap <Integer,Department>( );
       departments.put ( 101,new Department (101,"后勤部") );

        departments.put ( 102,new Department (102,"技术部") );

    }
    public Collection<Department> getDepartments()
    {
        return departments.values ();
    }
    public  Department getDepartmentById(Integer id)
    {
        return departments.get ( id );
    }

}

 1-3-2 EmployeeDao类

package com.example.demo.dao;

import com.example.demo.pojo.Department;
import com.example.demo.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

@Component
public class EmployeeDao {

    private  static Map<Integer,Employee> employees=null;
    @Autowired
    private  DepartmentDao departmentDao;
    static {
        employees=new HashMap <Integer, Employee> (  );
        employees.put (1002,new Employee (1002, "BB","2864483641@qq.com",2,new Department ( 101,"后勤部" )));
        employees.put (1001,new Employee (1001, "AA","2864483641@qq.com",1,new Department ( 101,"后勤部" )));
        employees.put (1003,new Employee (1003, "CC","2864483641@qq.com",2,new Department ( 102,"技术部" )));
        employees.put (1004,new Employee (1004, "DD","2864483641@qq.com",1,new Department ( 102,"技术部" )));
    }
    private static Integer initId=1005;
    public  void  save(Employee employee)
    {
        if (employee.getId ()==null)
        {
            //模拟实现底层数据库自增
            employee.setId ( initId++ );
        }
        employee.setDepartment ( departmentDao.getDepartmentById ( employee.getDepartment ().getId () ) );
        employees.put ( employee.getId (),employee );
    }
    public Collection<Employee> getAll(){
        return employees.values ();
    }
    public Employee getEmployById(Integer id){
        return employees.get ( id );
    }

    public  void delete(Integer id){
        employees.remove ( id );
    }
}

1-4 pojo包

1-4-1  Department类

package com.example.demo.pojo;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Department {
    private Integer id;
    private String departName;
}

 1-4-2 Employee类

package com.example.demo.pojo;

import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

@Data
@NoArgsConstructor
public class Employee {

    private  Integer id;
    private String lastName;
    private String email;
    private Integer gender;
    private Department department;
    private Date birth;

    public Employee(Integer id, String lastName, String email, Integer gender, Department department) {
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        this.birth = new Date ( );
    }

}

2 静态资源

2-1 commons.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Company name</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
        </li>
    </ul>
</nav>
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                        <polyline points="13 2 13 9 20 9"></polyline>
                    </svg>
                    Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                    Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/emps}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">
                        <line x1="18" y1="20" x2="18" y2="10"></line>
                        <line x1="12" y1="20" x2="12" y2="4"></line>
                        <line x1="6" y1="20" x2="6" y2="14"></line>
                    </svg>
                    Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                        <polyline points="2 17 12 22 22 17"></polyline>
                        <polyline points="2 12 12 17 22 12"></polyline>
                    </svg>
                    Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
            </a>
        </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>

</html>

 可以将多个界面都共有大部分抽取出来，单独保存，格式：th:fragment

详细技术请参考文档P27页

th:text="${session.usernames}" 从session中取用户名

2-2 add.html 

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Dashboard Template for Bootstrap</title>
	<!-- Bootstrap core CSS -->
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */

		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
	</style>
</head>

<body>


<div th:replace="~{commons/commons::topbar}"></div>

<div class="container-fluid">
	<div class="row">

		<!--				侧边栏-->
		<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>



		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<form class="form-horizontal" th:action="@{/emp}" method="post">
				<div class="form-group">
					<label class="col-sm-2 control-label">名字</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" placeholder="张三" name="lastName">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">邮件</label>
					<div class="col-sm-10">
						<input type="email" class="form-control" placeholder="1234567456@qq.com" name="email">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">性别</label>
					<div class="col-sm-offset-2 col-sm-10">
						<label>
							<input type="radio" name="gender" checked value="1">&nbsp;男
						</label>
						&nbsp;&nbsp;&nbsp;
						<label>
							<input type="radio" name="gender" value="0">&nbsp;女
						</label>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">部门</label>
					<div class="col-sm-10">
						<select class="form-control" name="department.id">
							<option th:each="dept:${departments}" th:text="${dept.getDepartName()}"
									th:value="${dept.getId()}"></option>
						</select>
					</div>

				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">生日</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" placeholder="2000/11/11" name="birth">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button class="btn btn-sm btn-success" type="submit">添加</button>
					</div>
				</div>
			</form>
		</main>
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="../../static/asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="../../static/asserts/js/popper.min.js"></script>
<script type="text/javascript" src="../../static/asserts/js/bootstrap.min.js"></script>

<!-- Icons -->
<script type="text/javascript" src="../../static/asserts/js/feather.min.js"></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" src="../../static/asserts/js/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                lineTension: 0,
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                borderWidth: 4,
                pointBackgroundColor: '#007bff'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false
                    }
                }]
            },
            legend: {
                display: false,
            }
        }
    });
</script>

</body>

</html>

引用css/js样式等渲染效果，需要先导入xmlns:th="http://www.thymeleaf.org"命名空间，之后通过

 th:href="@{/css/bootstrap.min.css}"格式引入。文档P22

绑定动作格式：th:action="@{/emp}   P17

each循环取数据：P37

<option th:each="dept:${departments}" th:text="${dept.getDepartName()}"
      th:value="${dept.getId()}"></option>

2-3 list.html

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="@{/css/dashboard.css}" rel="stylesheet">
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>
	<div th:replace=" ~{commons/commons :: topbar}"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace=" ~{commons/commons :: sidebar}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a> </h2>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>id</th>
									<th>LastName</th>
									<th>email</th>
									<th>gender</th>
									<th>department</th>
									<th>birth</th>
								</tr>
							</thead>
							<tbody>

								<tr th:each="emp:${emps}">
									<td th:text="${emp.getId()}"></td>
									<td th:text="${emp.getLastName()}"></td>
									<td th:text="${emp.getEmail()}"></td>
									<td th:text="${emp.getGender()==1?'女':'男'}"></td>
									<td th:text="${emp.getDepartment().getDepartName()}"></td>
									<td th:text="${emp.getBirth()}"></td>
									<td >
										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>
										<a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除</a>
									</td>
								</tr>

							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
		<script type="text/javascript" src="asserts/js/popper.min.js"></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>

		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js"></script>
		<script>
			feather.replace()
		</script>

		<!-- Graphs -->
		<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
		<script>
			var ctx = document.getElementById("myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
					datasets: [{
						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
						lineTension: 0,
						backgroundColor: 'transparent',
						borderColor: '#007bff',
						borderWidth: 4,
						pointBackgroundColor: '#007bff'
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: false
							}
						}]
					},
					legend: {
						display: false,
					}
				}
			});
		</script>

	</body>

</html>
<tr th:each="emp:${emps}">
   <td th:text="${emp.getId()}"></td>
   <td th:text="${emp.getLastName()}"></td>
   <td th:text="${emp.getEmail()}"></td>
   <td th:text="${emp.getGender()==1?'女':'男'}"></td>
   <td th:text="${emp.getDepartment().getDepartName()}"></td>
   <td th:text="${emp.getBirth()}"></td>
   <td >

可以根据后端数据信息判断而进行赋值

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>
<a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除</a>

根据不同的id而进入不同的动作，可能会出现语句报错，但可以运行

2-4 update.html

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>


	<div th:replace="~{commons/commons::topbar}"></div>

		<div class="container-fluid">
			<div class="row">

<!--				侧边栏-->
				<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>



				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form class="form-horizontal" th:action="@{/toupdate}" method="post">
						<input type="hidden" name="id" th:value="${emp.getId()}">
						<div class="form-group">
							<label class="col-sm-2 control-label">名字</label>
							<div class="col-sm-10">
								<input th:value="${emp.getLastName()}" type="text" class="form-control" placeholder="张三" name="lastName">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">邮件</label>
							<div class="col-sm-10">
								<input th:value="${emp.getEmail()}" type="email" class="form-control" placeholder="1234567456@qq.com" name="email">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别</label>
							<div class="col-sm-offset-2 col-sm-10">
								<label>
									<input th:checked="${emp.getGender()==1}" type="radio" name="gender" checked value="1">&nbsp;男
								</label>
								&nbsp;&nbsp;&nbsp;
								<label>
									<input th:checked="${emp.getGender()==0}" type="radio" name="gender" value="0">&nbsp;女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">部门</label>
							<div class="col-sm-10">
								<select class="form-control" name="department.id">
									<option  th:each="dept:${departments}" th:text="${dept.getDepartName()}"
											th:value="${dept.getId()}"></option>
								</select>
							</div>

						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">生日</label>
							<div class="col-sm-10">
								<input th:value="${emp.getBirth()}" type="text" class="form-control" placeholder="2000/11/11" name="birth">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button class="btn btn-sm btn-success" type="submit">修改</button>
							</div>
						</div>
					</form>
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="../../static/asserts/js/jquery-3.2.1.slim.min.js"></script>
		<script type="text/javascript" src="../../static/asserts/js/popper.min.js"></script>
		<script type="text/javascript" src="../../static/asserts/js/bootstrap.min.js"></script>

		<!-- Icons -->
		<script type="text/javascript" src="../../static/asserts/js/feather.min.js"></script>
		<script>
			feather.replace()
		</script>

		<!-- Graphs -->
		<script type="text/javascript" src="../../static/asserts/js/Chart.min.js"></script>
		<script>
			var ctx = document.getElementById("myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
					datasets: [{
						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
						lineTension: 0,
						backgroundColor: 'transparent',
						borderColor: '#007bff',
						borderWidth: 4,
						pointBackgroundColor: '#007bff'
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: false
							}
						}]
					},
					legend: {
						display: false,
					}
				}
			});
		</script>

	</body>

</html>
<input type="hidden" name="id" th:value="${emp.getId()}">
<input th:value="${emp.getLastName()}" type="text" class="form-control" placeholder="张三" name="lastName">
<input th:value="${emp.getEmail()}" type="email" class="form-control" placeholder="1234567456@qq.com" name="email">
<label>
   <input th:checked="${emp.getGender()==1}" type="radio" name="gender" checked value="1">&nbsp;男
</label>
&nbsp;&nbsp;&nbsp;
<label>
   <input th:checked="${emp.getGender()==0}" type="radio" name="gender" value="0">&nbsp;女
</label>
<option  th:each="dept:${departments}" th:text="${dept.getDepartName()}"
      th:value="${dept.getId()}"></option>

2-5dashboard.html

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>
	            <div th:replace=" ~{commons/commons :: topbar}"></div>

		<div class="container-fluid">
			<div class="row">

				<div th:replace=" ~{commons/commons :: sidebar}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
						<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
						</div>
						<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
						</div>
					</div>
					<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
						<h1 class="h2">Dashboard</h1>
						<div class="btn-toolbar mb-2 mb-md-0">
							<div class="btn-group mr-2">
								<button class="btn btn-sm btn-outline-secondary">Share</button>
								<button class="btn btn-sm btn-outline-secondary">Export</button>
							</div>
							<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                This week
              </button>
						</div>
					</div>

					<canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas>

					
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" ></script>
		<script type="text/javascript" src="asserts/js/popper.min.js" ></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js" ></script>

		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js" ></script>
		<script>
			feather.replace()
		</script>

		<!-- Graphs -->
		<script type="text/javascript" src="asserts/js/Chart.min.js" ></script>
		<script>
			var ctx = document.getElementById("myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
					datasets: [{
						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
						lineTension: 0,
						backgroundColor: 'transparent',
						borderColor: '#007bff',
						borderWidth: 4,
						pointBackgroundColor: '#007bff'
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: false
							}
						}]
					},
					legend: {
						display: false,
					}
				}
			});
		</script>

	</body>

</html>

2-6 index.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link th:href="@{/css/signin.css}" rel="stylesheet">
	</head>

	<body class="text-center">
		<form class="form-signin" th:action="@{/user/login}">
			<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" >Please sign in</h1>

			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

			<label class="sr-only">Username</label>
			<input type="text" th:name="username" class="form-control" placeholder="Username" required="" autofocus="">
			<label class="sr-only">Password</label>
			<input type="password" th:name="password" class="form-control" placeholder="Password" required="">
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm">中文</a>
			<a class="btn btn-sm">English</a>
		</form>

	</body>

</html>
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

文档P97

Amo@骄纵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Demo project for Spring Boot 【1】spring-boot-starter【2】spring-boot-starter-thymeleaf
BLOG域名:programb.blog.csdn.net
07-31 176
使用spring-boot-starter-thymeleaf可以快速搭建基于Thymeleaf的Web应用程序，并且可以与其他Spring Boot组件无缝集成，提供了更好的开发体验和效率。它支持动态内容的插入，例如用户信息、订单详情等，可以方便地生成个性化的邮件内容。自然模板：Thymeleaf模板可以直接在浏览器中预览，因为它们是基于标准的HTML语法编写的，不需要特殊的编辑器或工具支持。强大的表达式：Thymeleaf提供了丰富的表达式语言，可以在模板中使用这些表达式来访问和操作数据模型中的属性。
【学习笔记 - Spring Boot】03 - Spring Boot整合Thymeleaf
AlanLee97的博客
11-18 144
【学习笔记 - Spring Boot】03 - Spring Boot整合Thymeleaf 目录 1. 整合Thymeleaf 创建项目 配置Thymeleaf # 开启缓存 spring.thymeleaf.cache=true # 检查模板是否是否存在 spring.thymeleaf.check-template=true # 检查模板文件位置是否存在 spring.thym...
Spring Boot干货系列：（四）Thymeleaf篇
AndyLizh的专栏
04-11 4840
后端编程嘟 2017-03-13 07:44 前言 Web开发是我们平时开发中至关重要的，这里就来介绍一下Spring Boot对Web开发的支持。 正文 Spring Boot提供了spring-boot-starter-web为Web开发予以支持，spring-boot-starter-web为我们提供了嵌入的Tomcat以及Spring MVC的依赖。 项目
SpringBoot入门：SpringBoot的thymeleaf模板的使用：spring-boot-starter-thymeleaf
南北极之间
05-15 6965
首先在pom文件里面加入thymeleaf的jar包： &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt; &lt;/dependency&gt;然后...
【SpringBoot整合系列】SpringBoot整合Thymeleaf
最新发布
低调做人，低调编码，神码都是浮云
05-06 976
SpringBoot整合Thymeleaf以及Thymeleaf的一些用法
Spring Boot——Thymeleaf
热门推荐
一心同学的博客
12-25 2万+
通俗易懂地讲解Thymeleaf的基本语法以及其使用规则，用通俗易懂的文笔讲解Thymeleaf的使用。
SpringBoot 整合Thymeleaf教程及使用
大新软件老杨
11-27 9458
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。
SpringBoot——SpringBoot集成Thymeleaf
★★光亭★★
05-19 8041
SpringBoot——SpringBoot集成Thymeleaf
spring-boot-starter-thymeleaf-2.1.0.RELEASE.jar
02-27
java运行依赖jar包
spring-boot-starter-thymeleaf
11-27
spring-boot-starter-thymeleaf 1.5.8 需要其他jar可以留言 jar包齐全
spring-boot-thymeleaf-sample.zip
05-20
Thymeleaf高级语法：构建复杂表格 文章中所用到的代码实例，使用SpringBoot + Thymeleaf，构建复杂表格的实例代码。使用SpringBoot构建，包含后端代码和前端HTML模板
spring-boot-starter-thymeleaf-2.0.3.RELEASE.jar
02-27
java运行依赖jar包
spring-boot-features-demo:Spring Boot太棒了！
05-15
以下是目前本工程展示的所有Spring Boot特性列表：Spring框架Thymeleaf集成基于AOP的分页组件Spring Security集成@Async支持@Retry支持Jackson定制数据绑定（包含类型转换，格式化，校验）Mock测试（Mo
SpringBoot与Thymeleaf模板入门整合篇
java1527的博客
09-12 512
11.1 认识 ThymeleafThymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境下。
SpringBoot整合Thymeleaf模板引擎
qq_42681787的博客
01-13 417
背景：springboot引入tomact时，并非完整的tomcat,而是一个嵌入式的tomact,因此使用springboot默认配置是无法支持jsp(但并非不能在SpringBoot中使用jsp),那么我们使用jsp时，怎么办呢? 这时我们可以使用模板引擎。其实jsp就是一个模板引擎。 模板引擎工作流程图如下: 市面上有很多模板引擎，这里介绍Thymeleaf模板引擎。Spring...
【SpringBoot新手篇】SpringBoot集成thymeleaf模板引擎
输入技术、输出想法
05-03 7695
SpringBoot整合thymeleaf1.Thymeleaf 简介1.1 概述2. 为什么使用 Thymeleaf3. 第一个 Thymeleaf 模板页3.1 引入依赖3.2 pom.xml3.3 在 application.yml 中配置 Thymeleaf3.4 创建测试用 JavaBean3.5 创建测试用 Controller3.6 创建测试页面3.7 测试访问4 语法4.1 标签使用th:text 基础信息输出th:utext html内容输出th:if, th:unless 条件判断th:
Spring-boot 结合Thymeleaf--拦截器--文件上传
业精于勤，荒于嬉
05-16 1140
1. Thymeleaf 是一个跟Velocity、FreeMarker 类似的模板引擎，可完全替代JSP2. Thymeleaf 是一个java 类库，他是一个xml/xhtml/html5 的模板引擎，可以作为mvc 的web 应用的view 层1. 在Spring Boot 项目中， 拦截器是开发中常用手段，要来做登陆验证、性能检查、日志记录等。2. 基本步骤:√ 编写一个拦截器实现HandlerInterceptor 接口。
spring-boot-starter-thymeleaf 常用标签，页面复用，SpringBoot集成thymeleaf模板
weixin_51715424的博客
04-04 882
Thymeleaf 的简单使用
springboot 整合Thymeleaf
虾米大王的学习历程
08-02 1198
ThymeleafSpring Boot为Thymeleaf提供了自动化配置类ThymeleafAutoConfiguration，相关的配置属性在ThymeleafProperties类中，由此配置可以看到，默认的模板位置在classpath:/templates/，默认的模板后缀为.html。与传统Java模板引擎不同的是，Thymeleaf支持HTML原型，既可以让前端工程师在浏览器中直接打开查看样式，也可以让后端工程师结合真实数据查看显示效果。
spring-boot-starter-Thymeleaf
08-30
Spring Boot Starter Thymeleaf是一个用于使用Thymeleaf模板引擎的Spring Boot起步依赖。 Thymeleaf是一种基于Java的模板引擎，用于在Web应用程序中呈现动态内容。它允许开发人员使用HTML模板来创建可重用的视图，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Amo@骄纵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值