一、建立目录

我使用过的是idea的编辑器

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

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

填写pom的信息

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

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

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

选择目录和填写项目名称-》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>

目录结构

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

登陆控制器

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下面的

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP



<!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里面

三、运行

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

 

 

现在在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页面

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

<!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>

如何搭建一个springboot+thymeleaf+jpa的登陆案例-LMLPHP

10-04 17:28