Spring Boot与Restful和Thymeleaf应用

1、Restful风格简介

1.1 概念

一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

1.2 URL定义

• 资源：互联网所有的事物都可以被抽象为资源

  资源操作：使用POST、DELETE、PUT、GET，使用不同方法对资源进行操作。

  分别对应：添加、 删除、修改、查询。

• 传统方式操作资源

  • 查询GET：http://127.0.0.1/query.action?id=1
  • 新增POST：http://127.0.0.1/save.action
  • 更新POST：http://127.0.0.1/update.action
  • 删除GET或POST：http://127.0.0.1/delete.action?id=1

可以通过 GET、 POST、 PUT、 PATCH、 DELETE 等方式对服务端的资源进行操作。其中，GET 用于查询资源，POST 用于创建资源，PUT 用于更新服务端的资源的全部信息，PATCH 用于更新服务端的资源的部分信息，DELETE 用于删除服务端的资源。

• 使用RESTful操作资源
  • 查询用户信息列表GET：http://127.0.0.1/users
  • 查看某个用户信息GET：http://127.0.0.1/users/001
  • 新建用户信息POST：http://127.0.0.1/users
  • 更新用户信息（全部字段）PUT：http://127.0.0.1/users/001
  • 更新用户信息（部分字段）PATCH：http://127.0.0.1/users/001
  • 删除用户信息DELETE：http://127.0.0.1/users/001

1.3 API设计风格基本规则

• 使用名词而不是动词
  • /getAllUsers
  • /updateUser
  • /deleteUser/001
• 使用子资源表达关系（如果一个资源与另外一个资源有关系，使用子资源）
• 返回所有用户GET：/getUser/
• 返回001用户GET： /getUser/001

总而言之restful是一种旧技术新风格

2、RestfulCRUD

2.1 默认访问首页

@Configuration
public class SpringMVCConfig extends WebMvcConfigurerAdapter {
    //所有的WebMvcConfigurerAdapter组件都会一起起作用
    @Bean //将组件注册在容器
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
        WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("/index.html").setViewName("login");
            }
        };
        return adapter;
    }
}

2.2 国际化

• 编写国际化配置文件；
• 使用ResourceBundleMessageSource管理国际化资源文件
• 在页面使用fmt:message（JSP）取出国际化内容

Spring Boot都自动配置好了，唯一要做的就是编写国际化配置文件了

步骤

• 编写国际化配置文件，抽取页面需要显示的国际化消息

• SpringBoot自动配置好了管理国际化资源文件的组件；

Ctrl+N搜索MessageSourceAutoConfiguration类，查看源码

@Configuration
@ConditionalOnMissingBean(
    value = {MessageSource.class},
    search = SearchStrategy.CURRENT
)
@AutoConfigureOrder(-2147483648)
@Conditional({MessageSourceAutoConfiguration.ResourceBundleCondition.class})
@EnableConfigurationProperties
@ConfigurationProperties(
    prefix = "spring.messages"
)
public class MessageSourceAutoConfiguration {
    private static final Resource[] NO_RESOURCES = new Resource[0];
    private String basename = "messages"; //我们的配置文件可以直接放在类路径下叫messages.properties
    ...
    @Bean
    public MessageSource messageSource() {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        if (StringUtils.hasText(this.basename)) {
            // 设置国际化资源文件的基础名（去掉语言国家代码的）
            messageSource.setBasenames(
	StringUtils.commaDelimitedListToStringArray(
		StringUtils.trimAllWhitespace(this.basename)
	)
            );
        }

        if (this.encoding != null) {
            messageSource.setDefaultEncoding(this.encoding.name());
        }

        messageSource.setFallbackToSystemLocale(this.fallbackToSystemLocale);
        messageSource.setCacheSeconds(this.cacheSeconds);
        messageSource.setAlwaysUseMessageFormat(this.alwaysUseMessageFormat);
        return messageSource;
    }
}

• 去页面获取国际化的值；

Thymeleaf官方文档查看message

主配置文件：

#设置国际化资源路径
spring.messages.basename=i18n/login
#设置国际化编码格式
spring.messages.encoding=UTF-8

HTML文件：

<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}"
	src="asserts/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>
<label class="sr-only" th:text="#{login.username}">Username</label>
<input type="text" class="form-control" placeholder="Username" 
	th:placeholder="#{login.username}" required="" autofocus="">
<label class="sr-only" th:text="#{login.password}">Password</label>
<input type="password" class="form-control" placeholder="Password"
	th:placeholder="#{login.password}" required="">
<div class="checkbox mb-3">
  <label>
    <input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
  </label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.signin}">
  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>

效果：根据浏览器语言设置的信息切换了国际化；

原理：国际化Locale（区域信息对象）；LocaleResolver（获取区域信息对象）；

@Bean
@ConditionalOnMissingBean
@ConditionalOnProperty(
  prefix = "spring.mvc",
  name = {"locale"}
)
public LocaleResolver localeResolver() {
  if (this.mvcProperties.getLocaleResolver() == 
	org.springframework.boot.autoconfigure.web.WebMvcProperties.LocaleResolver.FIXED) {
    return new FixedLocaleResolver(this.mvcProperties.getLocale());
  } else {
    AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
    localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
    return localeResolver;
  }
}

默认的就是根据请求头带来的区域信息获取Locale进行国际化

• 点击链接切换国际化

自定义组件MyLocaleResolver类

/**
 * 可以在连接上携带区域信息
 */
public class MyLocaleResolver implements LocaleResolver {

    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        String l = httpServletRequest.getParameter("l");
        Locale locale = Locale.getDefault();
        // 是否携带语言信息
        if(!StringUtils.isEmpty(l)){
            String[] split = l.split("_");
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, 
		       HttpServletResponse httpServletResponse, 
		       Locale locale) {

    }
}

然后个组件添加进容器，在配置文件SpringMVCConfig类文件中：

// 区域信息解析器组件
@Bean
public LocaleResolver localeResolver(){
  return new MyLocaleResolver();
}

2.3 登录

开发期间模板引擎页面修改以后，要实时生效

• 禁用模板引擎的缓存

# 禁用缓存
spring.thymeleaf.cache=false 

• 页面修改完成以后ctrl+F9：重新编译；

• 登陆错误消息的显示

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

2.4 拦截器进行登陆检查

拦截器组件类：

/**
 * 登陆检查，
 */
public class LoginHandlerInterceptor implements HandlerInterceptor {

    //目标方法执行之前
    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, 
			HttpServletResponse httpServletResponse, 
			Object o) throws Exception {
        Object user = httpServletRequest.getSession().getAttribute("loginUser");
        if(user == null){
            //未登陆，返回登陆页面
            httpServletRequest.setAttribute("msg","没有权限请先登陆");
            httpServletRequest.getRequestDispatcher("/index.html").forward(
			httpServletRequest, 
			httpServletResponse
            );
            return false;
        }else{
            //已登陆，放行请求
            return true;
        }
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, 
                                       HttpServletResponse httpServletResponse, 
                                       Object o, 
                                       ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, 
                                              HttpServletResponse httpServletResponse, 
                                              Object o, Exception e) throws Exception {

    }
}

注册拦截器

//所有的WebMvcConfigurerAdapter组件都会一起起作用
@Bean //将组件注册在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
  WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
    ...
    // 注册拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
      //                super.addInterceptors(registry);
      // "/**"表示任意多层路径下的任意请求
      // 静态资源；  *.css , *.js
      // SpringBoot已经做好了静态资源映射
      registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
        .excludePathPatterns("/index.html", "/", "/login");
    }
  };
  return adapter;
}

3、CRUD-员工列表

3.1 RestfulCRUD：CRUD满足Rest风格；

URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作

	普通CRUD（uri来区分操作）	RestfulCRUD
查询	getEmp	emp—GET
添加	addEmp?xxx	emp—POST
修改	updateEmp?id=xxx&xxx=xx	emp/{id}—PUT
删除	deleteEmp?id=1	emp/{id}—DELETE

3.2 thymeleaf公共页面元素抽取

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

页面示例：

<div th:fragment="copy">
	&copy; 2011 The Good Thymes Virtual Grocery
</div>

其他页面使用方式：

<div th:insert="footer :: copy"></div>

<div th:replace="footer :: copy"></div>

<div th:include="footer :: copy"></div>

效果：

<div>
  <footer>
  	&copy; 2011 The Good Thymes Virtual Grocery
  </footer>
</div>
  <footer>
  	&copy; 2011 The Good Thymes Virtual Grocery
  </footer>
<div>
	&copy; 2011 The Good Thymes Virtual Grocery
</div>

3.3 引入片段的时候传入参数：

父页面：

<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

子页面：

<!-- sidebar -->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
  <div class="sidebar-sticky">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active"
           th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
           href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"
           th:href="@{main.html}">
          <svg xmlns="http://www.w3.org/2000/svg" 
               width="24" height="24" 
               viewBox="0 0 24 24" 
               fill="none" 
               stroke="currentColor" 
               stroke-width="2" s
               troke-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>
      ...
    </ul>
  </div>
</nav>

3.4 添加操作

添加页面：

<form th:action="@{addEmployee}" method="post">
  <div class="form-group">
    <label>LastName</label>
    <input name="lastName" type="text" class="form-control" placeholder="name">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input name="email" type="email" class="form-control" placeholder="name@163.com">
  </div>
  <div class="form-group">
    <label>Gender</label><br/>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender"  value="1">
      <label class="form-check-label">男</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender"  value="0">
      <label class="form-check-label">女</label>
    </div>
  </div>
  <div class="form-group">
    <label>department</label>
    <select class="form-control" name="department.id">
      <!-- 提交的是部门的id -->
      <option th:value="${dept.id}" th:each="dept: ${departments}" 
	th:text="${dept.departmentName}">
        1
      </option>
    </select>
  </div>
  <div class="form-group">
    <label>Birth</label>
    <input name="birth" type="text" class="form-control" placeholder="2020/01/01">
  </div>
  <button type="submit" class="btn btn-primary">添加</button>
</form>

提交的数据格式不对：生日：日期；

2017-12-12；2017/12/12；2017.12.12；

日期的格式化；SpringMVC将页面提交的值需要转换为指定的类型;

2017-12-12—Date； 类型转换，格式化;

默认日期是按照/的方式；

3.5 修改操作

修改添加二合一表单

<!-- 需要区分员工修改还是添加 -->
<form th:action="${employee!=null}?@{updateEmployee}:@{addEmployee}" method="post">
  <!-- 发送put请求修改原数据 -->
  <!--
1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
2、页面创建一个post表单
3、创建一个input项，name="_method";值就是我们指定的请求方式
-->
  <!-- th:if="${employee!=null}"修改页面采用put方式 -->
  <input type="hidden" name="_method" value="put" th:if="${employee!=null}"/>
  <input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">
  <div class="form-group">
    <label>LastName</label>
    <input name="lastName" type="text" class="form-control" placeholder="name" 
      th:value="${employee!=null}?${employee.lastName}">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input name="email" type="email" class="form-control" placeholder="name@163.com" 
      th:value="${employee!=null}?${employee.email}">
  </div>
  <div class="form-group">
    <label>Gender</label><br/>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender"  value="1" 
        th:checked="${employee!=null}?${employee.gender}==1">
      <label class="form-check-label">男</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender"  value="0" 
        th:checked="${employee!=null}?${employee.gender}==0">
      <label class="form-check-label">女</label>
    </div>
  </div>
  <div class="form-group">
    <label>department</label>
    <select class="form-control" name="department.id">
      <!-- 提交的是部门的id -->
      <option th:selected="${employee!=null}?${dept.id == employee.department.id}" 
        th:value="${dept.id}" th:each="dept: ${departments}" 
        th:text="${dept.departmentName}">1</option>
    </select>
  </div>
  <div class="form-group">
    <label>Birth</label>
    <input name="birth" type="text" class="form-control" placeholder="2020/01/01" 
      th:value="${employee!=null}?${#dates.format(employee.birth, 'yyyy-MM-dd HH:mm')}">
  </div>
  <button type="submit" class="btn btn-primary" th:text="${employee!=null}?'修改':'添加'">
  </button>
</form>

3.6 删除操作

<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="@{addEmployeePage}">添加员工</a></h2>
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      ...
      <tbody>
        <tr th:each="emp: ${employees}">
          <td th:text="${emp.id}"></td>
          <td>[[${emp.lastName}]]</td>
          <td th:text="${emp.email}"></td>
          <td th:text="${emp.gender}==0?'女':'男'"></td>
          <td th:text="${emp.department.departmentName}"></td>
          <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
          <td>
            <a class="btn btn-sm btn-primary" th:href="@{/employee/}+${emp.id}">编辑</a>
            <!-- <form th:action="@{/employee/}+${emp.id}" method="post">-->
            <!--   <input type="hidden" name="_method" value="delete"/>-->
            <!--   <button type="submit" class="btn btn-sm btn-danger">删除</button>-->
            <!-- </form>-->
            <!-- th:attr自定义标签属性 -->
            <button th:attr="del_uri=@{/employee/}+${emp.id}" 
	class="btn btn-sm btn-danger deleteBtn">
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</main>
<!-- 将表单放在里面，每个删除按钮就会有个表单，放在外面简洁 -->
<form id="deleteEmpForm" method="post">
  <input type="hidden" name="_method" value="delete"/>
</form>

<script>
  $(".deleteBtn").click(function(){
    //删除当前员工的
    $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
    return false;
  });
</script>

4、更多精彩

更多精彩，访问我的个人博客吧！