Springboot

1. 创建springboot wep项目

   1. 创建controller 实现简单的展示数据

      <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n8" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">@RestController
      public class HelloController
      {
      @RestquestMapping("/hello")
      public String hello(){
      return "hello";
      }
      }</pre>

      <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n9" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">2. 创建项目框架</pre>

      config,dao,pojo,controller

   2. 建立POJO 部门Department id departmentName 员工Employee id ,lastname,Email ,gender,department,birthday, 在pom.xml 中引用lombok

      <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="java" cid="n15" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">@Data
      @AllArgConstructor
      @NoArgsConstructor
      public class Department{
      private Integer id;
      private String departmentName;

      }</pre>

      <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="java" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">@data
      @NoArgsConstructor
      public class Employee{
      private Integer id;
      private String lastName;
      private String email;
      private Integer gender;
      private Department department;
      private Date birthday ;
      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.birthday=new Date();//默认创建日期
      }
      }</pre>

   3. 手写测试数据 @Repository、@Service、@Controller，它们分别对应存储层Bean，业务层Bean，和展示层Bean。

      <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="java" cid="n21" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">@Repository
      public class DepartmentDao{
      //模拟数据库中的数据
      private static Map<Integer,Department> departments= null;
      static{
      departments=new HashMap<Integer,Department>();
      departments.put(1001,new Department(101,"B2B"));
      departments.put(1002,new Department(102,"SCF"));
      departments.put(1003,new Department(103,"WEP"));
      departments.put(1004,new Department(104,"SAP"));
      departments.put(1005,new Department(105,"DBA"));
      }
      //获取所有部门信息
      public Collection<Department> getDepartment(){
      return departments.values();
      }
      // 通过id得到部门
      public Department getDepartmentByid(Integer id){
      return departments.get(id);
      }

    }</pre>

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="java" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">@Repository
    public class  EmployeeDao{
     //模拟数据库中的数据
     private static Map<Employee> employees=null;
     @Autowired
     private DepartmentDao department;
     static{
     employees=new hashMap<Integer,Employee>();
     employees.put(1001,new Employee(1001,"AA","123@qq.com",1,new Department(1001,"B2B")));
     employees.put(1002,new Employee(1002,"AA","123@qq.com",1,new Department(1002,"SCF")));
     employees.put(1003,new Employee(1003,"AA","123@qq.com",1,new Department(1003,"WEP")));
     employees.put(1004,new Employee(1004,"AA","123@qq.com",1,new Department(1004,"SAP")));
     employees.put(1001,new Employee(1005,"AA","123@qq.com",1,new Department(1005,"DBA")));
     }
     public Collection<Employee> getAll(){
     return employees.values();
     }
     private  static Integer initId=1006;
     public void save(Employee employee){
     if (employee.getId()==null)
     {
     employee.setld(initId++);

     }
     employee.setDepartment(dapartmentDao.getDepartmentById(employee.getDepartment().getid()));
     employees.put(employee.getId(),employee);
     }

     public Employee getEmployeeByid(Integer id){
     employees.get(id);
     }
     public Employee deleteById(Integer id){
     employees.remove(id);
     }

    }</pre>

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n23" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">5\. 导入网页模板</pre>

    将HTML放入templates下

    静态文件放入static

    在pom.xml 导入 thymeleaf

    在html文件导入<html xmlns:th="http://www.thymeleaf.org">

    ### 六. 表达式

    下面我们再来对这些`th:xxx="yyy"`中`"yyy"`的部分进行讲解。这个yyy我们一般称之为表达式。  Thymeleaf里面表达式主要有以下几种。

    *   `${yyy}` 变量表达式，用来获取上下文对象里面的值（controller返回的model）。还是以上面的例子来说明，如果我想要取到`page`对象中的`number`属性，使用`${page.number}`即可。

    变量表达式

    *   `#{yyy}` 消息表达式，根据消息的key来获取消息内容。一般是用来做国际化用的。

    *   `*{yyy}` 选择表达式，跟变量表达式用法差不多，但变量表达式是获取上下文里的对象，选择表达式是获取一个选择的对象。  选择表达式一般和`th:object=`标签配合使用，还是以上面的例子来说明。  先用`th:object="${user}"`选择了上下文中的`user`对象，下面想使用`user`对象的`username`属性时，直接使用`*{username}`就可以了。  你可能想要问，我直接使用`${user.username}`不是一样可以找到`user`对象的`username`属性么，为什么还要再搞个选择表达式？  因为`${user.username}`是先从下上文找到`user`，对象，再从`user`对象里找到`username`属性；而`*{username}`是直接从`user`对象里找到`username`属性。当需要从一个对象里获取很多属性的时候，使用选择表达式可以提高效率。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n40" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">
    <body class="text-center">
     <form class="form-signin" th:action="@{/user/login}" method="post">
     <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
     <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
     <p style="color: red" th:text="${msg}"></p>
     <input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus="">
     <input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required="">
     <div class="checkbox mb-3">
     <label>
     <input type="checkbox" value="remember-me" > [[#{login.remember}]]
     </label>
     </div>
     <button class="btn btn-lg btn-primary btn-block" type="submit">[[#{login.btn}]]</button>
     <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
     <a class="btn btn-sm" th:href="@{/index.html(l='zh_cn')}">中文</a>
     <a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
     </form>
    
     </body></pre>

    选择表达式

    *   `@{yyy}` 链接表达式 设置超链接时用的表达式，一般和`th:action`、`th:href`配合使用。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n46" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><body class="text-center">
     <form class="form-signin" th:action="@{/user/login}" method="post">
     <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
     <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
     <p style="color: red" th:text="${msg}"></p>
     <input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus="">
     <input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required="">
     <div class="checkbox mb-3">
     <label>
     <input type="checkbox" value="remember-me" > [[#{login.remember}]]
     </label>
     </div>
     <button class="btn btn-lg btn-primary btn-block" type="submit">[[#{login.btn}]]</button>
     <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
     <a class="btn btn-sm" th:href="@{/index.html(l='zh_cn')}">中文</a>
     <a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
     </form>
    
     </body></pre>

    链接表达式

    *   `~{page :: fragment}` 分段表达式，主要用作公共模块的复用，一般和`th:insert`、`th:replace`搭配使用。以后讲模块复用的时候再细说。

    *   `yyy` 文字。可以为字符串、数字、布尔、null。如用户名渲染后为user。

    *   `_` 无操作。下划线是thymeleaf表达式的特殊字符，如果表达式就一个下划线，则什么也不做。例如用户名渲染后依然是用户名。

    ### 七. 迭代器

    我们在渲染页面时，经常需要对一个list进行循环处理，最典型的场景就是使用表格展示多条数据。这时，就需要使用到thymeleaf的迭代器`th:each`。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="xml" cid="n59" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><tr th:each="user : ${users}">
     <td th:text="${user.id}">id</td>
     <td th:text="${user.username}">用户名</td>
    </tr></pre>

    在这个例子中，`users`是一个list，通过迭代器`th:each`对其进行遍历，每次迭代获取到的对象为`user`。在`th:each`属性的对应的标签之间，为`user`对象的有效范围。

    有时候，我们还想要知道迭代器的一些状态属性，如总数，当前索引等。可以通过如下方法获取。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="xml" cid="n63" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><tr th:each="user,stat : ${users}">
    <td th:text="${stat.index}">index</td>  
    <td th:text="${user.id}">id</td>
     <td th:text="${user.username}">用户名</td>
    </tr></pre>

    `th:each=""`的第二个变量`stat`，就是迭代器的状态变量，从这个状态变量里面可以获取到很多我们想要的属性，主要有下面这些。

    *   `stat.index` 当前对象在list中的索引。从0开始。

    *   `stat.count` 和`index`差不多，也是当前对象在list中的索引，不过是从1开始。

    *   `stat.size` 迭代器中元素的总数。

    *   `stat.current` 当前迭代的对象。

    *   `stat.even` 当前迭代的索引是否是奇数，索引指`stat.index`

    *   `stat.odd` 当前迭代的索引是否是偶数，索引指`stat.index`

    *   `stat.first` 当前迭代的对象是否是迭代器中的第一个。

    *   `stat.last` 当前迭代的对象是否是迭代器中的最后一个。

    ### 八. 条件语句

    `th:if="boolean"`  `th:if`的表达式需为boolean值。如果为true，则标签显示，如果为false，则标签不显示。  `th:unless="boolean"`  `th:unless`和`th:if`相反，表达式也需为boolean值。如果为true，则标签不显示，如果为false，则标签显示。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="xml" cid="n85" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><span th:if="${stat.odd}">偶</span>
    <span th:unless="${stat.odd}">奇</span></pre>

    条件判断

    `th:swtich` 一般和 `th:case`结合使用 。和java语言中的`swtich case`语法用法类似。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="jsx" cid="n90" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><td th:switch="${user.enabled}">
     <span th:case="true">可用</span><span th:case="false">不可用</span>
    </td></pre>

    switch

    ### 九. 工具类

    Thymeleaf提供了一些工具类，这里举个简单的例子展示下用法，其他详细的可以查看[Thymeleaf工具类官方文档](https://link.jianshu.com?t=http%3A%2F%2Fwww.thymeleaf.org%2Fdoc%2Ftutorials%2F3.0%2Fusingthymeleaf.html%23expression-utility-objects)。

    `#lists` 数组工具类

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="xml" cid="n97" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">总共有<span th:text="${#lists.size(page.content)}">1</span>条记录</pre>

    作者：低调的微胖  链接：[https://www.jianshu.com/p/3426794a17cb](https://www.jianshu.com/p/3426794a17cb)  来源：简书  著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n100" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">6\. </pre>