目录

介绍

此 Demo 是为了熟悉 Spring Boot 和 thymeleaf 的使用，所以适用于刚接触 Spring Boot 不久的新手，此项目是一个简单的 Web 版的员工 CRUD，项目内容来源于尚硅谷谷粒学院 Spring Boot 核心技术篇，我根据自己的理解，又重新地动手做了一些，其中也发现了一些自己的薄弱点，并针对这些薄弱点进行巩固，以便尽快掌握 Spring Boot。

零、项目素材

restful-crud-experiment

说明：关于链接无效问题，是因为文件、图片等我是上传到 GitHub上的，详情进入我的GitHub

一、 创建 Spring Boot 项目

  • 开发工具：IDEA

  • 创建方式：使用 Spring Initializr 方式创建

  • 项目结构目录示意图：

    1. ├─src
    2. │  ├─main
    3. │  │  ├─java
    4. │  │  │  └─com
    5. │  │  │      └─yunche
    6. │  │  │          └─controller
    7. │  │  └─resources
    8. │  │      ├─public
    9. │  │      ├─static
    10. │  │      │  └─asserts
    11. │  │      │      ├─css
    12. │  │      │      ├─img
    13. │  │      │      └─js
    14. │  │      └─templates

二、定制首页

1、修改 pom.xml

添加 jquery webjars 、bootstrap webjars、thymeleaf 依赖

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.1.1.RELEASE</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.yunche</groupId>
  12.     <artifactId>springboot-sample-restfulcrud</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>springboot-sample-restfulcrud</name>
  15.     <description>Demo project for Spring Boot</description>
  17.     <properties>
  18.         <java.version>1.8</java.version>
  19.     </properties>
  21.     <dependencies>
  22.         <dependency>
  23.             <groupId>org.springframework.boot</groupId>
  24.             <artifactId>spring-boot-starter-web</artifactId>
  25.         </dependency>
  27.         <!--引入 jquery webjars-->
  28.         <!--使用时：路径 webjars/jquery/3.3.1/jquery.js-->
  29.         <dependency>
  30.             <groupId>org.webjars</groupId>
  31.             <artifactId>jquery</artifactId>
  32.             <version>3.3.1</version>
  33.         </dependency>
  35.         <!--引入 bootstrap webjars-->
  36.         <dependency>
  37.             <groupId>org.webjars</groupId>
  38.             <artifactId>bootstrap</artifactId>
  39.             <version>4.2.1</version>
  40.         </dependency>
  42.         <!--引入 thymeleaf3-->
  43.         <dependency>
  44.             <groupId>org.springframework.boot</groupId>
  45.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  46.         </dependency>
  48.         <dependency>
  49.             <groupId>org.springframework.boot</groupId>
  50.             <artifactId>spring-boot-starter-test</artifactId>
  51.             <scope>test</scope>
  52.         </dependency>
  53.     </dependencies>
  55.     <build>
  56.         <plugins>
  57.             <plugin>
  58.                 <groupId>org.springframework.boot</groupId>
  59.                 <artifactId>spring-boot-maven-plugin</artifactId>
  60.             </plugin>
  61.         </plugins>
  62.     </build>
  64. </project>

2、引入相应的本地 css、js 文件

将对应的文件引入到相应的位置

  1. │  │      ├─static
  2. │  │      │  └─asserts
  3. │  │      │      ├─css
  4. │  │      │      │      bootstrap.min.css
  5. │  │      │      │      dashboard.css
  6. │  │      │      │      signin.css
  7. │  │      │      │
  8. │  │      │      ├─img
  9. │  │      │      │      bootstrap-solid.svg
  10. │  │      │      │
  11. │  │      │      └─js
  12. │  │      │              bootstrap.min.js
  13. │  │      │              Chart.min.js
  14. │  │      │              feather.min.js
  15. │  │      │              jquery-3.2.1.slim.min.js
  16. │  │      │              popper.min.js

3、编辑 login.html

  1. │  │      └─templates
  2. │  │              login.html

使用 thymeleaf 对 login.html 完成 css、js 、form 等链接的修改

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. 		<meta name="description" content="">
  7. 		<meta name="author" content="">
  8. 		<title>Signin Template for Bootstrap</title>
  9. 		<!-- Bootstrap core CSS -->
  10. 		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.css}">
  11. 		<!-- Custom styles for this template -->
  12. 		<link href="asserts/css/signin.css" rel="stylesheet" th:href="@{/asserts/css/signin.css}">
  13. 	</head>
  15. 	<body class="text-center">
  16. 		<form class="form-signin" action="dashboard.html" method="post" th:action="@{/user/login}">
  17. 			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
  18. 			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please Sign In</h1>
  19. 			<label class="sr-only" th:text="#{login.username}">Username</label>
  20. 			<input type="text" name="username" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
  21. 			<label class="sr-only" th:text="#{login.password}">Password</label>
  22. 			<input type="password" name="password" class="form-control" placeholder="Password" required="" th:placeholder="#{login.password}">
  23. 			<div class="checkbox mb-3">
  24. 				<label>
  25.           <input type="checkbox" value="remember-me" > [[#{login.remember}]]
  26.         </label>
  27. 			</div>
  28. 			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
  29. 			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
  30. 			<a class="btn btn-sm" > 中文 </a>
  31. 			<a class="btn btn-sm" >English</a>
  32. 		</form>
  34. 	</body>
  36. </html>

4、处理对 login 页面请求的映射

  1. │  │  │          ├─config
  2. │  │  │          │      MyMvcConfig.java
  3. │  │  │          │
  4. │  │  │          └─controller

扩展 Spring MVC，添加视图控制器，完成我们自己的路径的映射规则

  1. package com.yunche.config;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. /**
  8.  * @ClassName: MyMvcConfig
  9.  * @Description: 练习：使用 WebMvcConfigurer 扩展 SpringMVC 的功能
  10.  * @author: yunche
  11.  * @date: 2019/01/01
  12.  */
  14. @Configuration
  15. public class MyMvcConfig implements WebMvcConfigurer {
  16.     @Override
  17.     public void addViewControllers(ViewControllerRegistry registry) {
  18.         registry.addViewController("/").setViewName("login");
  19.         registry.addViewController("/index.html").setViewName("login");
  20.         registry.addViewController("/index").setViewName("login");
  21.     }
  22. }

5、国际化登录页面

  • 编写国际化文件

    1. │  │  └─resources
    2. │  │      │  application.properties
    3. │  │      │
    4. │  │      ├─i18n
    5. │  │      │      login.en_US.properties
    6. │  │      │      login.properties
    7. │  │      │      login.zh_CN.properties

    • login_en_US.properties:

      1. login.btn=Sign In
      2. login.password=Password
      3. login.remember=Remember Me
      4. login.tip=Please Sign In
      5. login.username=Username

    • login.properties:

      1. login.btn=登录
      2. login.password=密码
      3. login.remember=记住我
      4. login.tip=请登录
      5. login.username=用户名

    • login_zh_CN.properties:

      1. login.btn=登录
      2. login.password=密码
      3. login.remember=记住我
      4. login.tip=请登录
      5. login.username=用户名

  • 绑定编写的国际化配置文件到 Message Source

    1. │  │  └─resources
    2. │  │      │  application.properties

    application.properties:

    1. spring.messages.basename=i18n.login

  • 实现按钮手动转换语言

    • 国际化有效的原理：

      Locale 对象存储区域信息， 根据 Locale 来自适应语言配置，默认的LocaleResolver就是根据请求头带来的区域信息（Accept-Language）获取 Locale 对象。如果需要手动转换语言只需要手动构造LocaleResolver来自定义生成 Locale 对象的规则。

    • 定制 LocaleResolver：

      1. │  │  │          ├─component
      2. │  │  │          │      MyLocaleResolver.java

      MyLocaleResolver.java:

      1. package com.yunche.component;
      3. import org.springframework.stereotype.Component;
      4. import org.springframework.web.servlet.LocaleResolver;
      5. import org.thymeleaf.util.StringUtils;
      7. import javax.servlet.http.HttpServletRequest;
      8. import javax.servlet.http.HttpServletResponse;
      9. import java.util.Locale;
      11. /**
      12.  * @ClassName: MyLocaleResolver
      13.  * @Description:
      14.  * @author: yunche
      15.  * @date: 2019/01/01
      16.  */
      17. @Component
      18. public class MyLocaleResolver implements LocaleResolver {
      19.     @Override
      20.     public Locale resolveLocale(HttpServletRequest request) {
      21.         String l = request.getParameter("l");
      22.         Locale locale = Locale.getDefault();
      23.         if (!StringUtils.isEmpty(l)) {
      24.             String[] split = l.split("_");
      25.             //根据 Language、Country 生成 locale
      26.             locale = new Locale(split[0], split[1]);
      27.         }
      28.         return locale;
      29.     }
      31.     @Override
      32.     public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
      34.     }
      35. }

    • 将定制的组件加入容器中

      此时默认的 LocaleResolver 将不再生效，将使用我们定制的 LocaleResolver。

      1. │  │  │          ├─config
      2. │  │  │          │      MyMvcConfig.java

      MyMvcConfig.java:

      1. /**
      2.  * 注册定制组件
      3.  */
      4. @Bean
      5. public LocaleResolver localeResolver() {
      6.     return new MyLocaleResolver();
      7. }

    • 添加相应的链接参数

      login.html:

      1. <a class="btn btn-sm" th:href="@{/index(l='zh_CN')}"> 中文 </a>
      2. <a class="btn btn-sm" th:href="@{/index(l='en_US')}">English</a>

6、阶段演示效果

三、完成 login 操作

1、添加控制器用于处理请求

  1. package com.yunche.controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.util.StringUtils;
  5. import org.springframework.web.bind.annotation.PostMapping;
  7. /**
  8.  * @ClassName: LoginController
  9.  * @Description:
  10.  * @author: yunche
  11.  * @date: 2019/01/02
  12.  */
  13. @Controller
  14. public class LoginController {
  16.     @PostMapping("/user/login")
  17.     public String login(String username, String password) {
  18.         if ("admin".equals(username) && !StringUtils.isEmpty(password)) {
  19.             return "redirect:/main.html";
  20.         }
  21.         return "login";
  22.     }
  23. }

当用户登录成功后，重定向到后台首页。添加对 /main.html 请求的处理：在 MyMvcConfig 下的 addViewControllers 方法中加入：

  1.  registry.addViewController("/main.html").setViewName("dashboard");

2、添加后台首页 dashboard.html

  1. │  │      └─templates
  2. │  │              dashboard.html

dashboard.html:

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
  3. <html lang="en">
  4.    <head>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.       <meta name="description" content="">
  8.       <meta name="author" content="">
  10.       <title>Dashboard Template for Bootstrap</title>
  11.       <!-- Bootstrap core CSS -->
  12.       <link href="asserts/css/bootstrap.min.css" rel="stylesheet">
  14.       <!-- Custom styles for this template -->
  15.       <link href="asserts/css/dashboard.css" rel="stylesheet">
  16.       <style type="text/css">
  17.          /* Chart.js */
  19.          @-webkit-keyframes chartjs-render-animation {
  20.             from {
  21.                opacity: 0.99
  22.             }
  23.             to {
  24.                opacity: 1
  25.             }
  26.          }
  28.          @keyframes chartjs-render-animation {
  29.             from {
  30.                opacity: 0.99
  31.             }
  32.             to {
  33.                opacity: 1
  34.             }
  35.          }
  37.          .chartjs-render-monitor {
  38.             -webkit-animation: chartjs-render-animation 0.001s;
  39.             animation: chartjs-render-animation 0.001s;
  40.          }
  41.       </style>
  42.    </head>
  44.    <body>
  45.       <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  46.          <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Company name</a>
  47.          <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  48.          <ul class="navbar-nav px-3">
  49.             <li class="nav-item text-nowrap">
  50.                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
  51.             </li>
  52.          </ul>
  53.       </nav>
  55.       <div class="container-fluid">
  56.          <div class="row">
  57.             <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  58.                <div class="sidebar-sticky">
  59.                   <ul class="nav flex-column">
  60.                      <li class="nav-item">
  61.                         <a class="nav-link active" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  62.                            <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">
  63.                               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  64.                               <polyline points="9 22 9 12 15 12 15 22"></polyline>
  65.                            </svg>
  66.                            Dashboard <span class="sr-only">(current)</span>
  67.                         </a>
  68.                      </li>
  69.                      <li class="nav-item">
  70.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  71.                            <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">
  72.                               <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
  73.                               <polyline points="13 2 13 9 20 9"></polyline>
  74.                            </svg>
  75.                            Orders
  76.                         </a>
  77.                      </li>
  78.                      <li class="nav-item">
  79.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  80.                            <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">
  81.                               <circle cx="9" cy="21" r="1"></circle>
  82.                               <circle cx="20" cy="21" r="1"></circle>
  83.                               <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
  84.                            </svg>
  85.                            Products
  86.                         </a>
  87.                      </li>
  88.                      <li class="nav-item">
  89.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  90.                            <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">
  91.                               <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
  92.                               <circle cx="9" cy="7" r="4"></circle>
  93.                               <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
  94.                               <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  95.                            </svg>
  96.                            Customers
  97.                         </a>
  98.                      </li>
  99.                      <li class="nav-item">
  100.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  101.                            <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">
  102.                               <line x1="18" y1="20" x2="18" y2="10"></line>
  103.                               <line x1="12" y1="20" x2="12" y2="4"></line>
  104.                               <line x1="6" y1="20" x2="6" y2="14"></line>
  105.                            </svg>
  106.                            Reports
  107.                         </a>
  108.                      </li>
  109.                      <li class="nav-item">
  110.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  111.                            <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">
  112.                               <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
  113.                               <polyline points="2 17 12 22 22 17"></polyline>
  114.                               <polyline points="2 12 12 17 22 12"></polyline>
  115.                            </svg>
  116.                            Integrations
  117.                         </a>
  118.                      </li>
  119.                   </ul>
  121.                   <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
  122.               <span>Saved reports</span>
  123.               <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  124.                 <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>
  125.               </a>
  126.             </h6>
  127.                   <ul class="nav flex-column mb-2">
  128.                      <li class="nav-item">
  129.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  130.                            <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">
  131.                               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  132.                               <polyline points="14 2 14 8 20 8"></polyline>
  133.                               <line x1="16" y1="13" x2="8" y2="13"></line>
  134.                               <line x1="16" y1="17" x2="8" y2="17"></line>
  135.                               <polyline points="10 9 9 9 8 9"></polyline>
  136.                            </svg>
  137.                            Current month
  138.                         </a>
  139.                      </li>
  140.                      <li class="nav-item">
  141.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  142.                            <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">
  143.                               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  144.                               <polyline points="14 2 14 8 20 8"></polyline>
  145.                               <line x1="16" y1="13" x2="8" y2="13"></line>
  146.                               <line x1="16" y1="17" x2="8" y2="17"></line>
  147.                               <polyline points="10 9 9 9 8 9"></polyline>
  148.                            </svg>
  149.                            Last quarter
  150.                         </a>
  151.                      </li>
  152.                      <li class="nav-item">
  153.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  154.                            <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">
  155.                               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  156.                               <polyline points="14 2 14 8 20 8"></polyline>
  157.                               <line x1="16" y1="13" x2="8" y2="13"></line>
  158.                               <line x1="16" y1="17" x2="8" y2="17"></line>
  159.                               <polyline points="10 9 9 9 8 9"></polyline>
  160.                            </svg>
  161.                            Social engagement
  162.                         </a>
  163.                      </li>
  164.                      <li class="nav-item">
  165.                         <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  166.                            <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">
  167.                               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  168.                               <polyline points="14 2 14 8 20 8"></polyline>
  169.                               <line x1="16" y1="13" x2="8" y2="13"></line>
  170.                               <line x1="16" y1="17" x2="8" y2="17"></line>
  171.                               <polyline points="10 9 9 9 8 9"></polyline>
  172.                            </svg>
  173.                            Year-end sale
  174.                         </a>
  175.                      </li>
  176.                   </ul>
  177.                </div>
  178.             </nav>
  180.             <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  181.                <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;">
  182.                   <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;">
  183.                      <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
  184.                   </div>
  185.                   <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;">
  186.                      <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
  187.                   </div>
  188.                </div>
  189.                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
  190.                   <h1 class="h2">Dashboard</h1>
  191.                   <div class="btn-toolbar mb-2 mb-md-0">
  192.                      <div class="btn-group mr-2">
  193.                         <button class="btn btn-sm btn-outline-secondary">Share</button>
  194.                         <button class="btn btn-sm btn-outline-secondary">Export</button>
  195.                      </div>
  196.                      <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
  197.                 <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>
  198.                 This week
  199.               </button>
  200.                   </div>
  201.                </div>
  203.                <canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas>
  205.             </main>
  206.          </div>
  207.       </div>
  209.       <!-- Bootstrap core JavaScript
  210.     ================================================== -->
  211.       <!-- Placed at the end of the document so the pages load faster -->
  212.       <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" ></script>
  213.       <script type="text/javascript" src="asserts/js/popper.min.js" ></script>
  214.       <script type="text/javascript" src="asserts/js/bootstrap.min.js" ></script>
  216.       <!-- Icons -->
  217.       <script type="text/javascript" src="asserts/js/feather.min.js" ></script>
  218.       <script>
  219.          feather.replace()
  220.       </script>
  222.       <!-- Graphs -->
  223.       <script type="text/javascript" src="asserts/js/Chart.min.js" ></script>
  224.       <script>
  225.          var ctx = document.getElementById("myChart");
  226.          var myChart = new Chart(ctx, {
  227.             type: 'line',
  228.             data: {
  229.                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  230.                datasets: [{
  231.                   data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
  232.                   lineTension: 0,
  233.                   backgroundColor: 'transparent',
  234.                   borderColor: '#007bff',
  235.                   borderWidth: 4,
  236.                   pointBackgroundColor: '#007bff'
  237.                }]
  238.             },
  239.             options: {
  240.                scales: {
  241.                   yAxes: [{
  242.                      ticks: {
  243.                         beginAtZero: false
  244.                      }
  245.                   }]
  246.                },
  247.                legend: {
  248.                   display: false,
  249.                }
  250.             }
  251.          });
  252.       </script>
  254.    </body>
  256. </html>

3、添加登录错误消息展示

LoginController：

  1. @Controller
  2. public class LoginController {
  4.     @PostMapping("/user/login")
  5.     public String login(String username, String password, Map<String, Object> map, HttpSession session) {
  6.         if ("admin".equals(username) && "123".equals(password)) {
  7.             session.setAttribute("user", username);
  8.             return "redirect:/main.html";
  9.         }
  10.         map.put("loginState", "login fail");
  11.         return "login";
  12.     }
  13. }

login.html:

  1. <!--lead into js-->
  2. 		<script src="../static/asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/asserts/js/jquery-3.2.1.slim.min.js}"></script>
  3. 		<script src="../static/asserts/js/popper.min.js" th:src="@{/asserts/js/popper.min.js}"></script>
  4. 		<script src="../static/asserts/js/bootstrap.min.js" th:src="@{/asserts/js/bootstrap.min.js}"></script>
  6. ......
  7. <div th:switch="${loginState}">
  8.    <div class="alert alert-danger alert-dismissible fade show" role="alert" th:case="'login fail'">
  9.       [[#{login.result}]]
  10.       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  11.          <span aria-hidden="true">&times;</span>
  12.       </button>
  13.    </div>
  14.    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}" th:case="*">Please Sign In</h1>
  15. </div>

在国际化文件添加 login.result 及相应的值。

4、定制拦截器

  • LoginHandlerInterceptor:
  1. package com.yunche.component;
  3. import org.springframework.web.servlet.HandlerInterceptor;
  4. import org.springframework.web.servlet.ModelAndView;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  9. /**
  10.  * @ClassName: LoginHandlerInterceptor
  11.  * @Description:
  12.  * @author: yunche
  13.  * @date: 2019/01/03
  14.  */
  15. public class LoginHandlerInterceptor implements HandlerInterceptor {
  17.     /**
  18.      * 目标方法执行前
  19.      * @param request
  20.      * @param response
  21.      * @param handler
  22.      * @return
  23.      * @throws Exception
  24.      */
  25.     @Override
  26.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  27.         Object user = request.getSession().getAttribute("user");
  28.         if (user == null) {
  29.             //未登录，返回登录页面
  30.             //request.setAttribute("msg", "没有权限请先登录");
  31.             request.getRequestDispatcher("/index.html").forward(request, response);
  32.             return false;
  33.         }
  34.         return true;
  35.     }
  37.     @Override
  38.     public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
  40.     }
  42.     @Override
  43.     public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
  45.     }
  46. }

四、员工的 CRUD

未与数据库进行连接，仅作模拟操作。

1、引入相应的 dao 和 entity 类

  1. │  ├─dao
  2. │  │      DepartmentDao.java
  3. │  │      EmployeeDao.java
  4. │  │
  5. │  └─entities
  6. │          Department.java
  7. │          Employee.java

  • DepartmentDao.java:

    1. package com.yunche.dao;
    3. import java.util.Collection;
    4. import java.util.HashMap;
    5. import java.util.Map;
    7. import com.yunche.entities.Department;
    8. import org.springframework.stereotype.Repository;
    10. @Repository
    11. public class DepartmentDao {
    13. 	private static Map<Integer, Department> departments = null;
    15. 	static{
    16. 		departments = new HashMap<Integer, Department>();
    18. 		departments.put(101, new Department(101, "D-AA"));
    19. 		departments.put(102, new Department(102, "D-BB"));
    20. 		departments.put(103, new Department(103, "D-CC"));
    21. 		departments.put(104, new Department(104, "D-DD"));
    22. 		departments.put(105, new Department(105, "D-EE"));
    23. 	}
    25. 	public Collection<Department> getDepartments(){
    26. 		return departments.values();
    27. 	}
    29. 	public Department getDepartment(Integer id){
    30. 		return departments.get(id);
    31. 	}
    33. }

  • EmployeeDao.java:

    1. package com.yunche.dao;
    3. import java.util.Collection;
    4. import java.util.HashMap;
    5. import java.util.Map;
    7. import com.yunche.entities.Department;
    8. import com.yunche.entities.Employee;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Repository;
    12. @Repository
    13. public class EmployeeDao {
    15. 	private static Map<Integer, Employee> employees = null;
    17. 	@Autowired
    18. 	private DepartmentDao departmentDao;
    20. 	static{
    21. 		employees = new HashMap<Integer, Employee>();
    23. 		employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
    24. 		employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
    25. 		employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
    26. 		employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
    27. 		employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
    28. 	}
    30. 	private static Integer initId = 1006;
    32. 	public void save(Employee employee){
    33. 		if(employee.getId() == null){
    34. 			employee.setId(initId++);
    35. 		}
    37. 		employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
    38. 		employees.put(employee.getId(), employee);
    39. 	}
    41. 	public Collection<Employee> getAll(){
    42. 		return employees.values();
    43. 	}
    45. 	public Employee get(Integer id){
    46. 		return employees.get(id);
    47. 	}
    49. 	public void delete(Integer id){
    50. 		employees.remove(id);
    51. 	}
    52. }

  • Department.java:

    1. package com.yunche.entities;
    3. public class Department {
    5. 	private Integer id;
    6. 	private String departmentName;
    8. 	public Department() {
    9. 	}
    11. 	public Department(int i, String string) {
    12. 		this.id = i;
    13. 		this.departmentName = string;
    14. 	}
    16. 	public Integer getId() {
    17. 		return id;
    18. 	}
    20. 	public void setId(Integer id) {
    21. 		this.id = id;
    22. 	}
    24. 	public String getDepartmentName() {
    25. 		return departmentName;
    26. 	}
    28. 	public void setDepartmentName(String departmentName) {
    29. 		this.departmentName = departmentName;
    30. 	}
    32. 	@Override
    33. 	public String toString() {
    34. 		return "Department [id=" + id + ", departmentName=" + departmentName + "]";
    35. 	}
    37. }

  • Employee.java：

    1. 	package com.yunche.entities;
    3. import java.util.Date;
    5. public class Employee {
    7. 	private Integer id;
    8.     private String lastName;
    10.     private String email;
    11.     //1 male, 0 female
    12.     private Integer gender;
    13.     private Department department;
    14.     private Date birth;
    16.     public Integer getId() {
    17.         return id;
    18.     }
    20.     public void setId(Integer id) {
    21.         this.id = id;
    22.     }
    24.     public String getLastName() {
    25.         return lastName;
    26.     }
    28.     public void setLastName(String lastName) {
    29.         this.lastName = lastName;
    30.     }
    32.     public String getEmail() {
    33.         return email;
    34.     }
    36.     public void setEmail(String email) {
    37.         this.email = email;
    38.     }
    40.     public Integer getGender() {
    41.         return gender;
    42.     }
    44.     public void setGender(Integer gender) {
    45.         this.gender = gender;
    46.     }
    48.     public Department getDepartment() {
    49.         return department;
    50.     }
    52.     public void setDepartment(Department department) {
    53.         this.department = department;
    54.     }
    56.     public Date getBirth() {
    57.         return birth;
    58.     }
    60.     public void setBirth(Date birth) {
    61.         this.birth = birth;
    62.     }
    63.     public Employee(Integer id, String lastName, String email, Integer gender,
    64.                     Department department) {
    65.         super();
    66.         this.id = id;
    67.         this.lastName = lastName;
    68.         this.email = email;
    69.         this.gender = gender;
    70.         this.department = department;
    71.         this.birth = new Date();
    72.     }
    74.     public Employee() {
    75.     }
    77.     @Override
    78.     public String toString() {
    79.         return "Employee{" +
    80.                 "id=" + id +
    81.                 ", lastName='" + lastName + '\'' +
    82.                 ", email='" + email + '\'' +
    83.                 ", gender=" + gender +
    84.                 ", department=" + department +
    85.                 ", birth=" + birth +
    86.                 '}';
    87.     }
    88. }

2、Restful 风格的 URL

实验功能 请求 URI 请求方式
查询所有员工 emps GET
查询某个员工 (来到修改页面) emp/1 GET
来到添加页面 emp GET
添加员工 emp POST
来到修改页面（查出员工进行信息回显） emp/1 GET
修改员工 emp PUT
删除员工 emp/1 DELETE

3、模板布局

考虑到员工的 CRUD 的页面会有许多公共的元素，所以将公共元素抽取出来作为模板。

  1. │  │      └─templates
  2. │  │          │  dashboard.html
  3. │  │          │  login.html
  4. │  │          │
  5. │  │          ├─commons
  6. │  │          │      sidebar.html
  7. │  │          │      topbar.html
  8. │  │          │
  9. │  │          ├─emps
  10. │  │          │      add.html
  11. │  │          │      list.html

注意下面的 html 页面都是最终修改后的页面（省略了繁琐的优化过程），页面里面的一些细节，后面会介绍一些。

1、dashboard.html（后台首页）

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
  3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.    <meta name="description" content="">
  8.    <meta name="author" content="">
  10.    <title>Dashboard Template for Bootstrap</title>
  11.    <!-- Bootstrap core CSS -->
  12.    <link href="/asserts/css/bootstrap.min.css" rel="stylesheet">
  14.    <!-- Custom styles for this template -->
  15.    <link href="/asserts/css/dashboard.css" rel="stylesheet">
  16.    <style type="text/css">
  17.       /* Chart.js */
  19.       @-webkit-keyframes chartjs-render-animation {
  20.          from {
  21.             opacity: 0.99
  22.          }
  23.          to {
  24.             opacity: 1
  25.          }
  26.       }
  28.       @keyframes chartjs-render-animation {
  29.          from {
  30.             opacity: 0.99
  31.          }
  32.          to {
  33.             opacity: 1
  34.          }
  35.       }
  37.       .chartjs-render-monitor {
  38.          -webkit-animation: chartjs-render-animation 0.001s;
  39.          animation: chartjs-render-animation 0.001s;
  40.       }
  41.    </style>
  42. </head>
  44. <body>
  45. <!--引入 top bar-->
  46. <div th:replace="commons/topbar::topbar">
  48. </div>
  50. <div class="container-fluid">
  51.    <div class="row">
  53.       <!--引入 side bar-->
  54.       <div th:replace="commons/sidebar::sidebar(activeUrl='main.html')">
  56.       </div>
  58.       <!--Content-->
  59.       <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  60.          <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;">
  61.             <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;">
  62.                <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
  63.             </div>
  64.             <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;">
  65.                <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
  66.             </div>
  67.          </div>
  68.          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
  69.             <h1 class="h2">Dashboard</h1>
  70.             <div class="btn-toolbar mb-2 mb-md-0">
  71.                <div class="btn-group mr-2">
  72.                   <button class="btn btn-sm btn-outline-secondary">Share</button>
  73.                   <button class="btn btn-sm btn-outline-secondary">Export</button>
  74.                </div>
  75.                <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
  76.                   <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>
  77.                   This week
  78.                </button>
  79.             </div>
  80.          </div>
  82.          <canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas>
  84.       </main>
  86.    </div>
  87. </div>
  89. <!-- Bootstrap core JavaScript
  90. ================================================== -->
  91. <!-- Placed at the end of the document so the pages load faster -->
  92. <script type="text/javascript" src="/asserts/js/jquery-3.2.1.slim.min.js" ></script>
  93. <script type="text/javascript" src="/asserts/js/popper.min.js" ></script>
  94. <script type="text/javascript" src="/asserts/js/bootstrap.min.js" ></script>
  96. <!-- Icons -->
  97. <script type="text/javascript" src="/asserts/js/feather.min.js" ></script>
  98. <script>
  99.     feather.replace()
  100. </script>
  102. <!-- Graphs -->
  103. <script type="text/javascript" src="/asserts/js/Chart.min.js" ></script>
  104. <script>
  105.     var ctx = document.getElementById("myChart");
  106.     var myChart = new Chart(ctx, {
  107.         type: 'line',
  108.         data: {
  109.             labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  110.             datasets: [{
  111.                 data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
  112.                 lineTension: 0,
  113.                 backgroundColor: 'transparent',
  114.                 borderColor: '#007bff',
  115.                 borderWidth: 4,
  116.                 pointBackgroundColor: '#007bff'
  117.             }]
  118.         },
  119.         options: {
  120.             scales: {
  121.                 yAxes: [{
  122.                     ticks: {
  123.                         beginAtZero: false
  124.                     }
  125.                 }]
  126.             },
  127.             legend: {
  128.                 display: false,
  129.             }
  130.         }
  131.     });
  132. </script>
  134. </body>
  136. </html>

2、sidebar.html（侧边栏模板）

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--side bar-->
  9. <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
  10.     <div class="sidebar-sticky">
  11.         <ul class="nav flex-column">
  12.             <li class="nav-item">
  13.                 <a class="nav-link active" href="#" th:href="@{/main.html}" th:class="${activeUrl}=='main.html'?'nav-link active':'nav-link'">
  14.                     <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">
  15.                         <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  16.                         <polyline points="9 22 9 12 15 12 15 22"></polyline>
  17.                     </svg>
  18.                     Dashboard <span class="sr-only">(current)</span>
  19.                 </a>
  20.             </li>
  21.             <li class="nav-item">
  22.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  23.                     <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">
  24.                         <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
  25.                         <polyline points="13 2 13 9 20 9"></polyline>
  26.                     </svg>
  27.                     Orders
  28.                 </a>
  29.             </li>
  30.             <li class="nav-item">
  31.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
  32.                     <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">
  33.                         <circle cx="9" cy="21" r="1"></circle>
  34.                         <circle cx="20" cy="21" r="1"></circle>
  35.                         <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
  36.                     </svg>
  37.                     Products
  38.                 </a>
  39.             </li>
  40.             <li class="nav-item">
  41.                 <a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUrl}=='emps'?'nav-link active':'nav-link'">
  42.                     <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">
  43.                         <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
  44.                         <circle cx="9" cy="7" r="4"></circle>
  45.                         <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
  46.                         <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  47.                     </svg>
  48.                     员工管理
  49.                 </a>
  50.             </li>
  51.             <li class="nav-item">
  52.                 <a class="nav-link" href="#">
  53.                     <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">
  54.                         <line x1="18" y1="20" x2="18" y2="10"></line>
  55.                         <line x1="12" y1="20" x2="12" y2="4"></line>
  56.                         <line x1="6" y1="20" x2="6" y2="14"></line>
  57.                     </svg>
  58.                     Reports
  59.                 </a>
  60.             </li>
  61.             <li class="nav-item">
  62.                 <a class="nav-link" href="#">
  63.                     <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">
  64.                         <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
  65.                         <polyline points="2 17 12 22 22 17"></polyline>
  66.                         <polyline points="2 12 12 17 22 12"></polyline>
  67.                     </svg>
  68.                     Integrations
  69.                 </a>
  70.             </li>
  71.         </ul>
  73.         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
  74.             <span>Saved reports</span>
  75.             <a class="d-flex align-items-center text-muted" href="#">
  76.                 <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>
  77.             </a>
  78.         </h6>
  79.         <ul class="nav flex-column mb-2">
  80.             <li class="nav-item">
  81.                 <a class="nav-link" href="#">
  82.                     <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">
  83.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  84.                         <polyline points="14 2 14 8 20 8"></polyline>
  85.                         <line x1="16" y1="13" x2="8" y2="13"></line>
  86.                         <line x1="16" y1="17" x2="8" y2="17"></line>
  87.                         <polyline points="10 9 9 9 8 9"></polyline>
  88.                     </svg>
  89.                     Current month
  90.                 </a>
  91.             </li>
  92.             <li class="nav-item">
  93.                 <a class="nav-link" href="#">
  94.                     <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">
  95.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  96.                         <polyline points="14 2 14 8 20 8"></polyline>
  97.                         <line x1="16" y1="13" x2="8" y2="13"></line>
  98.                         <line x1="16" y1="17" x2="8" y2="17"></line>
  99.                         <polyline points="10 9 9 9 8 9"></polyline>
  100.                     </svg>
  101.                     Last quarter
  102.                 </a>
  103.             </li>
  104.             <li class="nav-item">
  105.                 <a class="nav-link" href="#">
  106.                     <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">
  107.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  108.                         <polyline points="14 2 14 8 20 8"></polyline>
  109.                         <line x1="16" y1="13" x2="8" y2="13"></line>
  110.                         <line x1="16" y1="17" x2="8" y2="17"></line>
  111.                         <polyline points="10 9 9 9 8 9"></polyline>
  112.                     </svg>
  113.                     Social engagement
  114.                 </a>
  115.             </li>
  116.             <li class="nav-item">
  117.                 <a class="nav-link" href="#">
  118.                     <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">
  119.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  120.                         <polyline points="14 2 14 8 20 8"></polyline>
  121.                         <line x1="16" y1="13" x2="8" y2="13"></line>
  122.                         <line x1="16" y1="17" x2="8" y2="17"></line>
  123.                         <polyline points="10 9 9 9 8 9"></polyline>
  124.                     </svg>
  125.                     Year-end sale
  126.                 </a>
  127.             </li>
  128.         </ul>
  129.     </div>
  130. </nav>
  131. </body>
  132. </html>

3、topbar.html（顶部栏模板）

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--top bar-->
  9. <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment = "topbar">
  10.     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">[[${session.user}]]</a>
  11.     <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  12.     <ul class="navbar-nav px-3">
  13.         <li class="nav-item text-nowrap">
  14.             <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
  15.         </li>
  16.     </ul>
  17. </nav>
  18. </body>
  19. </html>

4、list.html（员工列表页面）

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
  3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  10.     <title>Dashboard Template for Bootstrap</title>
  11.     <!-- Bootstrap core CSS -->
  12.     <link href="/asserts/css/bootstrap.min.css" rel="stylesheet">
  14.     <!-- Custom styles for this template -->
  15.     <link href="/asserts/css/dashboard.css" rel="stylesheet">
  16.     <style type="text/css">
  17.         /* Chart.js */
  19.         @-webkit-keyframes chartjs-render-animation {
  20.             from {
  21.                 opacity: 0.99
  22.             }
  23.             to {
  24.                 opacity: 1
  25.             }
  26.         }
  28.         @keyframes chartjs-render-animation {
  29.             from {
  30.                 opacity: 0.99
  31.             }
  32.             to {
  33.                 opacity: 1
  34.             }
  35.         }
  37.         .chartjs-render-monitor {
  38.             -webkit-animation: chartjs-render-animation 0.001s;
  39.             animation: chartjs-render-animation 0.001s;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45. <!--引入 top bar-->
  46. <div th:replace="commons/topbar::topbar">
  48. </div>
  50. <div class="container-fluid">
  51.     <div class="row">
  53.         <!--引入 side bar-->
  54.         <div th:replace="commons/sidebar::sidebar(activeUrl='emps')">
  56.         </div>
  58.         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  59.             <h2><a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}"> 员工添加 </a></h2>
  60.             <div class="table-responsive">
  61.                 <table class="table table-striped table-sm">
  62.                     <thead>
  63.                     <tr>
  64.                         <th>#</th>
  65.                         <th>lastName</th>
  66.                         <th>email</th>
  67.                         <th>gender</th>
  68.                         <th>department</th>
  69.                         <th>birth</th>
  70.                         <th> 操作 </th>
  71.                     </tr>
  72.                     </thead>
  73.                     <tbody>
  74.                     <tr th:each="emp:${emps}">
  75.                         <td th:text="${emp.id}"></td>
  76.                         <td th:text="${emp.lastName}"></td>
  77.                         <td th:text="${emp.email}"></td>
  78.                         <td th:text="${emp.gender}=='0'?' 女 ':' 男 '"></td>
  79.                         <td th:text="${emp.department.departmentName}"></td>
  80.                         <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
  81.                         <td>
  82.                             <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}"> 编辑 </a>
  83.                             <!-- Button trigger modal -->
  84.                             <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" th:attr="data-target=@{#del}+${emp.id}">
  85.                                 删除
  86.                             </button>
  87.                             <!-- Modal -->
  88.                             <div class="modal fade" th:id="@{del}+${emp.id}" tabindex="-1" role="dialog"th:attr="aria-labelledby=@{delLabe}+${emp.id}" aria-hidden="true">
  89.                                 <div class="modal-dialog" role="document">
  90.                                     <div class="modal-content">
  91.                                         <div class="modal-header">
  92.                                             <h5 class="modal-title" th:id="@{delLabe}+${emp.id}"> 删除员工 </h5>
  93.                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  94.                                                 <span aria-hidden="true">&times;</span>
  95.                                             </button>
  96.                                         </div>
  97.                                         <div class="modal-body">
  98.                                             <p class="text-danger"> 确定要删除？该操作不可撤销！</p>
  99.                                         </div>
  100.                                         <div class="modal-footer">
  101.                                             <button type="button" class="btn btn-secondary" data-dismiss="modal"> 取消 </button>
  102.                                             <button type="button" class="btn btn-primary deleteBtn" th:attr="delurl=@{/emp/}+${emp.id}"> 确定 </button>
  103.                                         </div>
  104.                                     </div>
  105.                                 </div>
  106.                             </div>
  107.                         </td>
  108.                     </tr>
  109.                     </tbody>
  110.                 </table>
  111.             </div>
  112.         </main>
  113.         <form id="delForm" method="post">
  114.             <input type="hidden" name="_method" value="delete">
  115.         </form>
  117.     </div>
  118. </div>
  120. <!-- Bootstrap core JavaScript
  121. ================================================== -->
  122. <!-- Placed at the end of the document so the pages load faster -->
  123. <script type="text/javascript" src="/asserts/js/jquery-3.2.1.slim.min.js"></script>
  124. <script type="text/javascript" src="/asserts/js/popper.min.js"></script>
  125. <script type="text/javascript" src="/asserts/js/bootstrap.min.js"></script>
  127. <!-- Icons -->
  128. <script type="text/javascript" src="/asserts/js/feather.min.js"></script>
  129. <script>
  130.     feather.replace();
  131. </script>
  132. <script>
  133.     $(document).ready(function () {
  134.         $(".deleteBtn").click(function () {
  135.             $("#delForm").attr("action",$(this).attr("delurl")).submit();
  136.         });
  137.     });
  139. </script>
  141. </body>
  143. </html>

5、add.html（员工的添加、修改二合一页面）

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
  3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  10.     <title>Dashboard Template for Bootstrap</title>
  11.     <!-- Bootstrap core CSS -->
  12.     <link href="/asserts/css/bootstrap.min.css" rel="stylesheet">
  14.     <!-- Custom styles for this template -->
  15.     <link href="/asserts/css/dashboard.css" rel="stylesheet">
  16.     <style type="text/css">
  17.         /* Chart.js */
  19.         @-webkit-keyframes chartjs-render-animation {
  20.             from {
  21.                 opacity: 0.99
  22.             }
  23.             to {
  24.                 opacity: 1
  25.             }
  26.         }
  28.         @keyframes chartjs-render-animation {
  29.             from {
  30.                 opacity: 0.99
  31.             }
  32.             to {
  33.                 opacity: 1
  34.             }
  35.         }
  37.         .chartjs-render-monitor {
  38.             -webkit-animation: chartjs-render-animation 0.001s;
  39.             animation: chartjs-render-animation 0.001s;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45. <!--引入 top bar-->
  46. <div th:replace="commons/topbar::topbar">
  48. </div>
  50. <div class="container-fluid">
  51.     <div class="row">
  53.         <!--引入 side bar-->
  54.         <div th:replace="commons/sidebar::sidebar(activeUrl='emps')">
  56.         </div>
  58.         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  59.             <!--需要区分是员工修改还是添加；-->
  60.             <form th:action="@{/emp}" method="post">
  61.                 <!--添加隐藏域，用于发送 put 请求修改表单-->
  62.                 <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
  63.                 <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
  64.                 <div class="form-group">
  65.                     <label>LastName</label>
  66.                     <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp}!=null?${emp.lastName}:''">
  67.                 </div>
  69.                 <div class="form-group">
  70.                     <label>Email</label>
  71.                     <input name="email" type="text" class="form-control" placeholder="xxx@qq.com"
  72.                     th:value="${emp}!=null?${emp.email}:''">
  73.                 </div>
  75.                 <div class="form-group">
  76.                     <label>Gender</label>
  77.                     <div class="form-check form-check-inline">
  78.                         <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp}!=null?(${emp.gender}==1):false">
  79.                         <label class="form-check-label"> 男 </label>
  80.                     </div>
  81.                     <div class="form-check form-check-inline">
  82.                         <input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp}!=null?(${emp.gender}==0):false">
  83.                         <label class="form-check-label"> 女 </label>
  84.                     </div>
  85.                 </div>
  87.                 <div class="form-group">
  88.                     <label>Department</label>
  89.                     <select class="form-control" name="department.id">
  90.                         <option th:selected="${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:if="${emp!=null}"></option>
  91.                         <option th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:if="${emp==null}"></option>
  92.                     </select>
  93.                 </div>
  95.                 <div class="form-group">
  96.                     <label>Birth</label>
  97.                     <input name="birth" type="text" class="form-control" placeholder="2017/01/01 12:23" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy/MM/dd HH:mm')}">
  98.                 </div>
  99.                 <button type="submit" class="btn btn-primary" th:text="${emp==null}?' 添加 ':' 修改 '"> 添加 </button>
  100.             </form>
  101.         </main>
  103.     </div>
  104. </div>
  106. <!-- Bootstrap core JavaScript
  107. ================================================== -->
  108. <!-- Placed at the end of the document so the pages load faster -->
  109. <script type="text/javascript" src="/asserts/js/jquery-3.2.1.slim.min.js" ></script>
  110. <script type="text/javascript" src="/asserts/js/popper.min.js" ></script>
  111. <script type="text/javascript" src="/asserts/js/bootstrap.min.js" ></script>
  113. <!-- Icons -->
  114. <script type="text/javascript" src="/asserts/js/feather.min.js" ></script>
  115. <script>
  116.     feather.replace()
  117. </script>
  119. </body>
  121. </html>

4、EmployeeController（处理员工请求控制器）

  1. package com.yunche.controller;
  3. import com.yunche.dao.DepartmentDao;
  4. import com.yunche.dao.EmployeeDao;
  5. import com.yunche.entities.Employee;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.ui.Model;
  9. import org.springframework.web.bind.annotation.*;
  11. /**
  12.  * @ClassName: EmployeeController
  13.  * @Description:
  14.  * @author: yunche
  15.  * @date: 2019/01/03
  16.  */
  17. @Controller
  18. public class EmployeeController {
  20.     @Autowired
  21.     EmployeeDao employeeDao;
  23.     @Autowired
  24.     DepartmentDao departmentDao;
  25.     @GetMapping("/emps")
  26.     public String list(Model model) {
  27.         model.addAttribute("emps", employeeDao.getAll());
  28.         return "emps/list";
  29.     }
  31.     /**
  32.      * 来到添加页面
  33.      *
  34.      * @return
  35.      */
  36.     @GetMapping("/emp")
  37.     public String toAddPage(Model model) {
  38.         model.addAttribute("departments", departmentDao.getDepartments());
  39.         return "emps/add";
  40.     }
  42.     /**
  43.      * 添加员工
  44.      * SpringMVC 自动将请求参数和入参对象的属性进行一一绑定；
  45.      * 要求请求参数的名字和 javaBean 入参的对象里面的属性名是一样的
  46.      * @return
  47.      */
  48.     @PostMapping("/emp")
  49.     public String addEmployee(Employee employee) {
  50.         employeeDao.save(employee);
  51.         return "redirect:/emps";
  52.     }
  54.     /**
  55.      * 来到修改页面
  56.      *
  57.      * @return
  58.      */
  59.     @GetMapping("/emp/{id}")
  60.     public String toEditPage(@PathVariable("id") Integer id, Model model) {
  61.         Employee employee = employeeDao.get(id);
  62.         model.addAttribute("emp", employee);
  63.         model.addAttribute("departments", departmentDao.getDepartments());
  64.         return "emps/add";
  65.     }
  67.     /**
  68.      * 修改员工
  69.      * @param employee
  70.      * @return
  71.      */
  72.     @PutMapping("/emp")
  73.     public String editEmployee(Employee employee) {
  74.         employeeDao.save(employee);
  75.         return "redirect:/emps";
  76.     }
  78.     /**
  79.      * 删除员工
  80.      * @param id
  81.      * @return
  82.      */
  83.     @DeleteMapping("/emp/{id}")
  84.     public String removeEmployee(@PathVariable("id") Integer id) {
  85.         employeeDao.delete(id);
  86.         return "redirect:/emps";
  87.     }
  88. }

5、细节讲解

1、PUT、DELTE 请求

由于 form 表单只允许使用 POST 请求，那么怎么以 PUT、DELETE 请求提交表单呢？可以在表单中添加一个隐藏域（Spring Boot 中 的 WebMvcAutoConfiguration 中有相应处理隐藏域的方法），使用隐藏域来达到以 PUT、DELETE 请求提交表单的效果。如：

  1.    <!--添加隐藏域，用于发送 put 请求修改表单-->
  2.                 <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>

2、给模板页面传参

在这里的例子是我们要实现当进入后台首页时，侧边栏上的 dashboard 高亮；当进入员工管理时，侧边栏的员工管理高亮。要实现这样的效果，我们可以使用给模板页面传参的方式，用来区别到底进入了哪个页面，然后根据参数的不同，来实现相应的效果。

比如给模板页面传入参数：

  1.  <!--引入 side bar-->
  2.         <div th:replace="commons/sidebar::sidebar(activeUrl='emps')">
  4.         </div>

根据参数的值实现相应的效果：

  1.          <li class="nav-item">
  3.                 <a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUrl}=='emps'?'nav-link active':'nav-link'">
  5.                     <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">
  6.                         <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
  7.                         <circle cx="9" cy="7" r="4"></circle>
  8.                         <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
  9.                         <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  10.                     </svg>
  11.                     员工管理
  12.                 </a>
  13.             </li>

3、添加、修改页面共用

我们添加、修改是共用一个页面的，所以应该根据某个变量来区分，到底该显示添加页面的效果还是修改页面的效果。在这里是通过 emp 变量, 如果页面能够获取到 emp 变量的值，说明应该进行修改操作；否则，进行添加操作。

  1.      model.addAttribute("emp", employee);
  1. <button type="submit" class="btn btn-primary" th:text="${emp==null}?' 添加 ':' 修改 '"> 添加 </button>

6、定制错误页面

重新修改拦截器，便于演示。

MyMvcConfig：

  1.   @Override
  2.     public void addInterceptors(InterceptorRegistry registry) {
  3. //        //排除静态资源的拦截：*.css , *.js
  4. //        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**").excludePathPatterns("/index.html", "/index", "/user/login", "/asserts/**","/webjars/**");
  6.         registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/main.html", "/emps", "/emp/*");
  7.     }

默认的处理方法是根据相应状态码的值，在 templates/error 中的文件夹中寻找相应匹配的 html 页面，可以

编写 4xx.html, 5xx.html，也可编写 404.html，精确优先。

404.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>404 NOT FOUND</title>
  6. </head>
  7. <body>
  8. <img src="/asserts/img/very_sorry.png">
  9. </body>
  10. </html>

7、阶段演示效果

一个小demo熟悉Spring Boot 和 thymeleaf 的基本使用的更多相关文章

  1. Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

    Spring Boot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提 ...

  2. java线程间通信：一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...

  3. spring boot 与 thymeleaf (2): 常用表达式

    在asp.net mvc 中, 有一个视图解析器, 可以支持Razor语法. 使用起来, 是非常的方便, 并且, 写在前台页面的后台方法, 是可调试的. 但是在java中, 目前我还没有接触到, 像. ...

  4. 小代学Spring Boot之数据源

    想要获取更多文章可以访问我的博客 - 代码无止境. 经过一天对Spring Boot的研究,小代同学已经对Spring Boot框架有了一个大概的认识.并且还创建了一个简单的Spring Boot的W ...

  5. 小代学Spring Boot之集成MyBatis

    想要获取更多文章可以访问我的博客 - 代码无止境. 上一篇小代同学在Spring Boot项目中配置了数据源,但是通常来讲我们访问数据库都会通过一个ORM框架,很少会直接使用JDBC来执行数据库操作的 ...

  6. 小代学Spring Boot之自定义Starter

    想要获取更多文章可以访问我的博客 - 代码无止境. 上一篇小代同学在Spring Boot项目中配置了数据源,但是通常来讲我们访问数据库都会通过一个ORM框架,很少会直接使用JDBC来执行数据库操作的 ...

  7. Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  8. Spring Boot 2 + Thymeleaf：服务器端表单验证

    表单验证分为前端验证和服务器端验证.服务器端验证方面,Java提供了主要用于数据验证的JSR 303规范,而Hibernate Validator实现了JSR 303规范.项目依赖加入spring-b ...

  9. 极简 Spring Boot 整合 Thymeleaf 页面模板

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

随机推荐

  1. YTU 2677: 韩信点兵

    2677: 韩信点兵 时间限制: 1 Sec  内存限制: 128 MB 提交: 61  解决: 38 题目描述 刘邦问韩信:"你觉得我可以带兵多少?"韩信:"最多十万. ...

  2. [noip模拟赛]跑跑步

    https://www.zybuluo.com/ysner/note/1298652 题面 小胡同学是个热爱运动的好孩子. 每天晚上,小胡都会去操场上跑步,学校的操场可以看成一个由\(n\)个格子排成 ...

  3. Face alignment at 3000FPS via Regressing Local Binrary features 理解

    这篇是Ren Shaoqing发表在cvpr2014上的paper,论文是在CPR框架下做的,想了解CPR的同学可以参见我之前的博客,网上有同学给出了code,该code部分实现了LBF,链接为htt ...

  4. java笔记线程方式1优先级

    * 我们的线程没有设置优先级,肯定有默认优先级. * 那么,默认优先级是多少呢? * 如何获取线程对象的优先级? *   public final int getPriority():返回线程对象的优 ...

  5. 给网站添加免费Https SSL证书

    基于阿里云的云盾证书服务,系统是centos6.8,web服务器是nginx1.8.0,简单记录下踩坑情况. 申请证书 登录阿里云控制台→安全(云盾)→证书服务→购买证书(https://common ...

  6. Builder Design pattern

    string assemblyName = ConfigurationSettings["BuilderAssembly"]; string builderName = Confi ...

  7. bzoj 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课【spfa】

    洛谷的数据毒啊 把(i,j,k)作为一个点spfa,表示点(i,j)朝向k方向,然后向四个方向转移即可 #include<iostream> #include<cstdio> ...

  8. bzoj 1741: [Usaco2005 nov]Asteroids 穿越小行星群【最大点覆盖】

    二分图最大点覆盖模型,因为对于一个点(x,y)显然只要选x或者y就好了,于是连边,跑最大匹配=最大点覆盖(不会证) #include<iostream> #include<cstdi ...

  9. GG_Model 类库与数据库表对应建立实体类

    3.4.GG_Model 类库与数据库表对应建立实体类 我这里不教大家写代码,直接用TT模板自动生成,省去写代码的麻烦. A. 三个文件MysqlDbhelper.ttinclude .mysqlMa ...

  10. javascript实现继承的4种方法，以及它们的优缺点

    1. 原型链继承(有缺陷): 缺陷1:切断了Zi.prototype.constructor与Zi的关系 缺陷2:原型链上的引用类型的数据会被所有实例共享 2. 构造函数继承(有缺陷): 缺陷1:Fu ...