一、建立目录

我使用过的是idea的编辑器

首先新建一个spring项目-》选择spring initializr -》next

填写pom的信息

选择组件，我选择的是jpa和thymeleaf，web要选择web核心组件

选择目录和填写项目名称-》finish

二、项目搭建

pom.xml

 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">     <modelVersion>4.0.0</modelVersion>      <groupId>com.lili</groupId>     <artifactId>news</artifactId>     <version>0.0.1-SNAPSHOT</version>     <packaging>jar</packaging>      <name>news</name>     <description>Demo project for Spring Boot</description>      <parent>         <groupId>org.springframework.boot</groupId>         <artifactId>spring-boot-starter-parent</artifactId>         <version>2.0.5.RELEASE</version>         <relativePath/> <!-- lookup parent from repository -->     </parent>      <properties>         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>         <java.version>1.8</java.version>     </properties>      <dependencies>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-cache</artifactId>         </dependency>         <dependency>             <groupId>mysql</groupId>             <artifactId>mysql-connector-java</artifactId>         </dependency>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-data-jpa</artifactId>         </dependency>          <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-jdbc</artifactId>         </dependency>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-thymeleaf</artifactId>         </dependency>         <dependency>             <groupId>org.mybatis.spring.boot</groupId>             <artifactId>mybatis-spring-boot-starter</artifactId>             <version>1.3.2</version>         </dependency>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-web</artifactId>         </dependency>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-devtools</artifactId>             <optional>true</optional>         </dependency>           <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-test</artifactId>             <scope>test</scope>         </dependency>     </dependencies>      <build>         <plugins>             <plugin>                 <groupId>org.springframework.boot</groupId>                 <artifactId>spring-boot-maven-plugin</artifactId>             </plugin>         </plugins>     </build>   </project> 

目录结构

application.properties

   ############################################ ##  MySQL数据库连接 ############################################ spring.datasource.url = jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&useSSL=false spring.datasource.username = root spring.datasource.password = 123456 spring.datasource.driverClassName = com.mysql.jdbc.Driver ############################################ ##  配置自动建表：updata:没有表新建，有表更新操作,控制台显示建表语句 ############################################ spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true    #thymelea模板配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 #热部署文件，页面不产生缓存，及时更新 spring.thymeleaf.cache=false spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**  #热部署生效 spring.devtools.restart.enabled: true #设置重启的目录 #spring.devtools.restart.additional-paths: src/main/java #classpath目录下的WEB-INF文件夹内容修改不重启 spring.devtools.restart.exclude: WEB-INF/**   

登陆控制器

 package com.lili.news.controller;    import com.lili.news.entity.User; import com.lili.news.result.CommonResult; import com.lili.news.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;  import java.util.ArrayList; import java.util.List; import java.util.Map;  @Controller //@RestController public class Login {      @Autowired     private UserService usi;      /*     * 登陆页面     *     * */     @RequestMapping("/login")     public String login(Map<String,Object> map){          map.put("test","123456");         map.put("userinfo" ,new User("lili","123456",22));          List<User> list = new ArrayList<>();          for (int i=0 ; i<=5; i++){             User u = new User("lili","123456",(22+i) );             list.add(u);         }         map.put("userlist",list);           return "login/login";     }      @RequestMapping("/dologin")     @ResponseBody     public Object dologin(User user){         System.out.printf(user.toString());         CommonResult cr =  usi.checkUser(user.getUsername(),user.getPassword());         return cr;     }     } 

dao层jpa接口

 package com.lili.news.dao;  import com.lili.news.entity.User; import org.springframework.data.jpa.repository.JpaRepository;  import java.util.List;  public interface UserRepository extends JpaRepository<User,Long> {      /**      * 查询用户名为username,密码为password的用户      * @param username      * @param password      * @return      */     List<User> findUserByUsernameAndPassword(String username , String password );    } 

实体类user

 package com.lili.news.entity;      import javax.persistence.*;   @Entity public class User {          @Id         @GeneratedValue(strategy = GenerationType.IDENTITY)         private long id;          @Column(length = 100)         private String username;          @Column(length = 255)         private String password;          @Column(length = 10)         private Integer age;          public User(String username, String password, Integer age) {                 this.username = username;                 this.password = password;                 this.age = age;         }          public User(){          }          public long getId() {                 return id;         }          public void setId(long id) {                 this.id = id;         }          public String getUsername() {                 return username;         }          public void setUsername(String username) {                 this.username = username;         }          public String getPassword() {                 return password;         }          public void setPassword(String password) {                 this.password = password;         }          public Integer getAge() {                 return age;         }          public void setAge(Integer age) {                 this.age = age;         }           @Override         public String toString() {                 return "User{" +                         "id=" + id +                         ", username='" + username + ''' +                         ", password='" + password + ''' +                         ", age=" + age +                         '}';         } } 

result类返回json使用

 package com.lili.news.result;  public class CommonResult {      private Integer code;      private String msg;      private Object jsonObj;       public CommonResult(Integer code, String msg, Object jsonObj) {         this.code = code;         this.msg = msg;         this.jsonObj = jsonObj;     }      public Integer getCode() {         return code;     }      public void setCode(Integer code) {         this.code = code;     }      public String getMsg() {         return msg;     }      public void setMsg(String msg) {         this.msg = msg;     }      public Object getJsonObj() {         return jsonObj;     }      public void setJsonObj(Object jsonObj) {         this.jsonObj = jsonObj;     } } 

service服务层接口

 package com.lili.news.service;  import com.lili.news.entity.User; import com.lili.news.result.CommonResult;  public interface UserService {      /*     * 通过id获得user数据     * @param  int  id  主键     * @return User user对象     * */     User getUser(Integer id);      /*     * 检查登陆的账户信息是否匹配，用户名和密码是否存在、正误     * @param  string username 用户名     * @param  string password 密码     * @return bool 正确返回true 否则返回false     * */     CommonResult checkUser(String username, String password);    } 

serviceimpl实现类

 package com.lili.news.service.serviceImpl;  import com.lili.news.dao.UserRepository; import com.lili.news.entity.User; import com.lili.news.result.CommonResult; import com.lili.news.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;  import java.util.List;  @Service public class UserServiceImpl implements UserService {       private final UserRepository  ur ;      @Autowired     UserServiceImpl(UserRepository ur){         this.ur = ur;     }      @Override     public User getUser(Integer id) {          return null;     }      @Override     public CommonResult checkUser(String username, String password) {         List<User> users = this.ur.findUserByUsernameAndPassword(username,password);         if(users.isEmpty()){             return new CommonResult(101,"没有这个用户或者用户名字错误",null);         }else {             return new CommonResult(100,"登陆成功",users);         }     } } 

视图的目录在resource下面的

   <!DOCTYPE html> <html lang="en" class="no-js">  <head>      <meta charset="utf-8">     <title>Fullscreen Login</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="description" content="">     <meta name="author" content="">      <!-- CSS -->     <link rel="stylesheet" th:href="@{/login/assets/css/reset.css}">     <link rel="stylesheet" th:href="@{/login/assets/css/supersized.css}">     <link rel="stylesheet" th:href="@{/login/assets/css/style.css}">      <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->     <!--[if lt IE 9]>     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>     <![endif]-->  </head>  <body>  <div class="page-container">     <h1>Login</h1>     <span th:text="'用户名：' +${userinfo.username}">aaa</span>     <form action="#" th:action="@{/dologin}" th:object="${userinfo}" method="post">          <input type="text" name="username" class="username" th:value="*{username}">         <input type="password" name="password" class="password" th:value="*{password}">         <span th:text="'用户名：' +*{username}">aaa</span>         <span th:text="'密码：' +*{password}">aaa</span>         <button type="submit">登陆</button>     </form>  </div>   <!-- Javascript --> <script th:src="@{/login/assets/js/jquery-1.8.2.min.js}"></script> <script th:src="@{/login/assets/js/supersized.3.2.7.min.js}"></script> <script th:src="@{/login/assets/js/supersized-init.js}"></script> <script th:src="@{/login/assets/js/scripts.js}"></script>  </body>  </html>  

thymeleaf的语法链接使用@，普通的变量使用${},或者*{}

静态资源如图所示默认在resource下面的static里面

三、运行

现在在login控制器加一个控制方法，作为跳转页面使用

 @RequestMapping("/weblogin")     public String weblogin(Map<String,Object> map, User user){         System.out.printf(user.toString());         CommonResult cr =  usi.checkUser(user.getUsername(),user.getPassword());         if (cr.getCode() == 100 ){             //登陆成功             map.put("userinfo",user);             return "main/main";         }else {             return "redirect:login/login";         }        }

我也加了一个main页面

 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">     <title>layout 后台大布局 - Layui</title>     <link rel="stylesheet" th:href="@{/layui/css/layui.css}"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin">     <div class="layui-header">         <div class="layui-logo">layui 后台布局</div>         <!-- 头部区域（可配合layui已有的水平导航） -->         <ul class="layui-nav layui-layout-left">             <li class="layui-nav-item"><a href="">控制台</a></li>             <li class="layui-nav-item"><a href="">商品管理</a></li>             <li class="layui-nav-item"><a href="">用户</a></li>             <li class="layui-nav-item">                 <a href="javascript:;">其它系统</a>                 <dl class="layui-nav-child">                     <dd><a href="">邮件管理</a></dd>                     <dd><a href="">消息管理</a></dd>                     <dd><a href="">授权管理</a></dd>                 </dl>             </li>         </ul>         <ul class="layui-nav layui-layout-right">             <li class="layui-nav-item">                 <a href="javascript:;">                     <img src="http://t.cn/RCzsdCq" class="layui-nav-img">                     <span th:text="${userinfo.username}"></span>                 </a>                 <dl class="layui-nav-child">                     <dd><a href="">基本资料</a></dd>                     <dd><a href="">安全设置</a></dd>                 </dl>             </li>             <li class="layui-nav-item"><a href="">退了</a></li>         </ul>     </div>      <div class="layui-side layui-bg-black">         <div class="layui-side-scroll">             <!-- 左侧导航区域（可配合layui已有的垂直导航） -->             <ul class="layui-nav layui-nav-tree"  lay-filter="test">                 <li class="layui-nav-item layui-nav-itemed">                     <a class="" href="javascript:;">所有商品</a>                     <dl class="layui-nav-child">                         <dd><a href="javascript:;">列表一</a></dd>                         <dd><a href="javascript:;">列表二</a></dd>                         <dd><a href="javascript:;">列表三</a></dd>                         <dd><a href="">超链接</a></dd>                     </dl>                 </li>                 <li class="layui-nav-item">                     <a href="javascript:;">解决方案</a>                     <dl class="layui-nav-child">                         <dd><a href="javascript:;">列表一</a></dd>                         <dd><a href="javascript:;">列表二</a></dd>                         <dd><a href="">超链接</a></dd>                     </dl>                 </li>                 <li class="layui-nav-item"><a href="">云市场</a></li>                 <li class="layui-nav-item"><a href="">发布商品</a></li>             </ul>         </div>     </div>      <div class="layui-body">         <!-- 内容主体区域 -->         <div style="padding: 15px;">内容主体区域</div>     </div>      <div class="layui-footer">         <!-- 底部固定区域 -->         © layui.com - 底部固定区域     </div> </div> <script th:src="@{/layui/layui.js}"></script> <script>     //JavaScript代码区域     layui.use('element', function(){         var element = layui.element;      }); </script> </body> </html>