一、提纲

1、Previously前情提要

1. 已经把Thymeleaf部署到项目中；

2. 把前端开发的静态资源成功引入到项目中；

3. 完成登录验证功能，登录成功跳转到success.html页面，登录失败跳转到failed.html页面

2、本节内容

1. 从数据库获取用户信息；

2. 从Controller中把用户信息传递到页面，让模板引擎加载合成后的html页面。

二、实现过程

1.数据库中用户表增加密码字段

（略）

2.Model层：实体类User追加pwd属性

与数据库t_user表对应，增加pwd属性

 package com.zhbit.demo.domain;
  ​
  import org.springframework.stereotype.Component;
  import org.springframework.stereotype.Service;
  ​
  @Component
  public class User {
      private Long id;
      private String name;
      private String pwd;
  ​
      public Long getId() {
          return id;
      }
      public String getName() {
          return name;
      }
      public String getPwd() {
          return pwd;
      }
  ​
      public void setId(Long id) {
          this.id = id;
      }
      public void setName(String name) {
          this.name = name;
      }
      public void setPwd(String pwd) {
          this.pwd = pwd;
      }
  ​
      public User() {
          super();
      }
      public User(String name) {
          this.name = name;
      }
  ​
      @Override
      public String toString() {
          return "User{" +
                  "id=" + id +
                  ", name='" + name + '\'' +
                  '}';
      }
  }

３.数据访问层：增加通过用户名检索用户的方法

  package com.zhbit.demo.dao;
  ​
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.jdbc.core.BeanPropertyRowMapper;
  import org.springframework.jdbc.core.JdbcTemplate;
  import org.springframework.jdbc.core.RowMapper;
  import org.springframework.stereotype.Repository;
  ​
  import com.zhbit.demo.domain.User;
  ​
  @Repository
  public class UserDao {
      @Autowired
      private JdbcTemplate jdbcTemplate;
  ​
      public User getByName(String name){
          RowMapper<User> rowMapper = new BeanPropertyRowMapper<User>(User.class);
          User user = jdbcTemplate.queryForObject("select * from t_user where name like ?", rowMapper,name);
          return user;
      }
  }

4.业务接口层：增加验证用户登录的接口

• 接口名称：login

• 输入参数：用户名（字符串），密码（字符串）

• 输出类型：User对象实例

  package com.zhbit.demo.IService;
  ​
  import com.zhbit.demo.domain.User;
  ​
  import java.util.List;
  ​
  public interface IUserService {
  ​
      /**
       * 用户登录验证
       */
      User login(String name,String password);
  }

5.业务逻辑层：实现接口

  package com.zhbit.demo.service;
  ​
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Service;
  ​
  import com.zhbit.demo.domain.User;
  import com.zhbit.demo.IService.IUserService;
  import com.zhbit.demo.dao.UserDao;
  ​
  import java.util.List;
  ​
  @Service
  public class UserServiceImpl implements IUserService {
      @Autowired
      private UserDao dao;
  ​
      @Override
      public void save(User user)
      {
          dao.insert(user);
      }
  ​
      @Override
      public User get(Long id){
          return dao.get(id);
      }
  ​
      @Override
      public User login(String name, String password){
          return dao.getByName(name);
      }
  ​
  }

6.Web层：控制器中增加用于验证用户信息的功能

常用的Spring MVC注解包括：

• @Controller：修饰class，用来创建处理http请求的对象，返回html页面。

（需引入import org.springframework.stereotype.Controller;）

• @RestController：Spring4之后加入的注解，表示返回json格式的内容。

（需引入import org.springframework.web.bind.annotation.RestController;）

• @RequestMapping：配置url访问映射。

（需引入import org.springframework.web.bind.annotation.RequestMapping;）

  package com.zhbit.demo.controller;
  ​
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.*;
  import org.springframework.stereotype.Controller;
  ​
  import com.zhbit.demo.domain.User;
  import com.zhbit.demo.IService.IUserService;
  ​
  @Controller
  public class UserController {
  ​
      @Autowired
      private IUserService userService;
      private User user;
  ​
      @RequestMapping(value = "/user/logon", method = RequestMethod.POST)
      public String login(Model model,
                          @RequestParam("username") String username,
                          @RequestParam("password") String password){
          user = userService.login(username,password);
          if (user != null) {
              model.addAttribute("user",user);
              return "loginSucess";
          } else {
              return "loginFailed";
          }
      }
  ​
      @RequestMapping("/user/loginSucess")
      public String login_sucess(){
          return "loginSucess";
      }
  }

值得注意：使用@Controller注解控制器时，该控制器的所有方法都以页面内容形式返回；因为模板引擎实现把数据和页面模板进行融合，渲染成一个html文件，因此，此处需要使用@Controller注解修饰。

7.View层：用户登录页面以静态资源形式存在

7.1.让IDEA加载thymeleaf的语法提示

为了让IDEA加载thymeleaf的语法提示，需要在所有的html文件头部都加入xmlns:th="http://www.thymeleaf.org".

7.2.把css、js等静态资源库的引用修改为本地的路径

由于项目此前通过pom.xml的形式把Bootstrap框架以webjars包的形式引入进来，因此在项目的外部库中就会自动下载有bootstrap相应的资源文件。

使用thymeleaf标签的形式引入：th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}"

同理，js和images都以同样的方式进行设置

  <!--web：Bootstrap框架-->
          <dependency>
              <groupId>org.webjars</groupId>
              <artifactId>bootstrap</artifactId>
              <version>4.1.3</version>
          </dependency>

以webjars的形式引入bootstrap框架.png

7.3.把处理Request的action设置为指定的控制器

  <form class="form-horizontal" role="form" action="/user/logon" th:action="@{/user/logon}" method="post">

login.html完整代码如下：

  <!doctype html>
  <!--1.xmlns:th="http://www.thymeleaf.org"的目的是为了让IDEA加载thymeleaf的语法提示-->
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
  ​
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">
  <meta name="keywords" content="Login form web Site, Sign up Web Site" />
  <!--2.由于pom.xml中引入了Bootstrap框架，此处修改为加载本地的bootstrap框架文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  ​
  <!--引入低于IE9的兼容性设置 -->
    <!--[if lt IE 9]>
           <script src="lib/html5shiv/html5shiv.js"></script>
           <script src="lib/respond/respond.min.js"></script>
        <![endif]-->
  ​
  <title>登录页</title>
  </head>
  ​
  <body>
  <div class="bg">
    <h2>欢迎登录***系统</h2>
      <div class="login-top">
       <h1>LOGIN FORM</h1>
          <form class="form-horizontal" role="form" action="/user/logon" th:action="@{/user/logon}" method="post">
           <!--第1行：账号-->
              <div class="form-group">
               <label for="name" class="col-sm-3 control-label">User Name：</label>
                  <div class="col-sm-8">
                   <input type="text" id="name" name="username" class="form-control" placeholder="请输入用户名">
                  </div>
              </div>
              <!--第2行：密码-->
              <div class="form-group">
               <label for="password" class="col-sm-3 control-label">Password：</label>
                  <div class="col-sm-8">
                   <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
                  </div>
              </div>
              <div class="form-group">
               <div class="col-sm-offset-3 col-sm-5">
                   <div class="checkbox">
                           <label>
                               <input type="checkbox">请记住我
                              </label>
                      </div>
                  </div>
              </div>
              <div class="form-group">
               <div class="forgot col-sm-offset-2 col-sm-10">
                   <a href="#">forgot Password</a>
                      <input type="submit">
                      <!--<button type="submit" class="btn btn-success">登录</button>-->
                  </div>
              </div>
          </form>
      </div>
      <div class="login-bottom">
       <h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>
      </div>

      <div class="copyright">
       <p>Copyright &copy; 2017.ZHBIT 肖sir All rights reserved.</p>
      </div>

  </div>
  ​
        <script src="lib/jquery/jquery-1.11.0.min.js"></script>
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
      <!--规范提醒：css的载入放到head中，js的载入放到body中。-->
  </body>
  </html>

8.用户登录成功页面loginSuccess.html

页面中使用Thymeleaf的语法要求，获取控制器传过来的用户信息

  <!DOCTYPE html>
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Sucess Page</title>
  </head>
  <body>
      <h1>恭喜，您登录成功！</h1>
      <hr/>
      <div>
          <label text="用户Id:"/>
          <span th:text="${user}"></span>
      </div>
      <hr/>
      <div>
          <label>当前用户ID：</label>
          <span th:text="${user.getId()}"></span>
      </div>
      <div>
          <label>用户名：</label>
          <span th:text="${user.getName()}"></span>
      </div>
      <div>
          <label>密 码：</label>
          <span th:text="${user.getPwd()}"></span>
      </div>
  </body>
  </html>

9.用户登录失败页面loginFailed.html

  <!DOCTYPE html>
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Error Page</title>
  </head>
  <body>
      您输入的信息有误，请重新登录！
  </body>
  </html>

10.测试

1. 通过url请求访问login.html静态资源：http://localhost/login.html

2. 输入用户名admin和密码123，点击提交登录。

3. 若登录成功，跳转到loginSuccess.html，并显示当前用户信息；

4. 若登录失败，跳转到loginFailed.html，并提示用户重新登录。