Springboot+Thymeleaf+Jpa实现登录功能(附源码)

前言

最近有学习到关于Springboot+Thymeleaf+Jpa的综合运用知识,因此想写一个简单的登录界面来尝试一下,以下将展示具体流程

具体实现

首先要创建一个springboot项目

添加以下依赖项

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo1</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo1</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <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.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </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.yml的代码

在mysql://localhost:3306/后更改为自己的数据库名字,另外username和password同样更改为自己数据库的用户名和密码

spring:
  thymeleaf:
    mode: HTML

  datasource:
    url: jdbc:mysql://localhost:3306/demo1?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: root

  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

Po(实体)层代码(User.java)

建立一个简单的用户类,里面包含id主键(用jpa写po层必须要有主键用@id注解)

@Entity
public class User {
    @Id
    private Integer id;
    private String name;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

Dao(数据库操作)层代码(UserDao.java)

创建一个接口继承jpa的数据库操作<>里第一个参数,代表要操作的具体哪一个Po层,第二个参数代表这个Po层的主键类型
写了一个方法(也就是JPA最香的地方,可以通过简单的名字对应关系进行sql的查找)通过name和password查找一个用户

public interface UserDao extends JpaRepository<User,Integer> {

    User findByNameAndPassword(String name,String password);
}

Service(服务)层代码

Service层接口(Userservice.java)

public interface UserService {

    User finduser(String name,String password);
}

Service层具体实现(UserServiceimpl.java)

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserDao userDao;
    @Override
    public User finduser(String name, String password) {
        return userDao.findByNameAndPassword(name,password);
    }
}

验证码功能

因为要用到了验证码的实现功能,所以采取了一位大佬的验证码生成的操作进行集成
它的工具类 VerifyCode.java以及CaptchaController.java本博客就不贴了,移步大佬博客进行使用即可
参考文章(关于验证码)

Controller(控制)层代码(LoginController.java)

@Controller
public class LoginController {
    @Autowired
    UserService userService;
    @RequestMapping("/")
    public String login()
    {
        return "login";
    }
    @RequestMapping("/dologin")
    public String dologin(User user, HttpSession session, String verifycode, Model model)
    {
        User user1=userService.finduser(user.getName(), user.getPassword());

        String code= (String) session.getAttribute("verifyCode");

        if(user1!=null&&code.equalsIgnoreCase(verifycode))
        {
            model.addAttribute("message","成功");
            return "enter";
        }
        else
        {
            model.addAttribute("message","失败");
            return "enter";
        }
    }
}

Html页面代码

注意三个input里面的name属性,很多初学者(包括我)会好奇Controller是怎么获取网页上输入的具体的值?
实际上就是通过name属性比如说第一个参数user,因为它里面有user.name和user.password属性,因此可以通过在html里进行对name属性的更改来实现数据的寻找,第二个参数verifycode也是一样的道理注意验证码后的input框的name属性是verifycode,第三个属性model也是常用属性,此处是为了在页面上进行具体的消息显示

 public String dologin(User user, HttpSession session, String verifycode, Model model)

登录页面(login.html)

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <form action="/dologin">
          <div>
              <span>
                  名字:
              </span>
              <input type="text" name="name" >
          </div>
            <div>
                <span>
                    密码:
                </span>
                <input type="password" name="password" >
            </div>
            <div>
                <span>
                    验证码
                </span>
                <input type="text" name="verifycode">

            </div>
            <div>
                <a href="javascript:void(0);" rel="external nofollow"  title="点击更换验证码">
                    <img th:src="@{getVerifyCode}" onclick="changeCode()" class="verifyCode"/>
                </a>
            </div>
          <div>
          <button type="submit">登录</button>
          </div>
      </form>
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
      function changeCode() {
          const src = "/getVerifyCode?" + new Date().getTime(); //加时间戳,防止浏览器利用缓存
          $('.verifyCode').attr("src", src);
      }
  </script>
</body>
</html>

判断登录是否成功的页面(enter.html)

通过Thymeleaf的表达式,对message进行取值,来反应登录是否成功

model.addAttribute("message","成功");
model.addAttribute("message","失败");
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h2 th:text="${message}">
    登录成功
  </h2>
</body>
</html>

最后的项目目录结构

到此这篇关于Springboot+Thymeleaf+Jpa实现登录功能(附源码)的文章就介绍到这了,更多相关Springboot Thymeleaf Jpa登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • IDEA+maven+SpringBoot+JPA+Thymeleaf实现Crud及分页

    一.开发环境: 1.windows 7 企业版 2.IDEA 14 3.JDK 1.8 4.Maven 3.5.2 5.MariaDB 6.SQLYog 二.Maven设置: Maven目录下的conf目录下的settings.xml做如下内容的添加: 1.使用阿里云的仓库,比官网访问速度快很多 <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorOf> <name>Nexu

  • springboot+thymeleaf+druid+mybatis 多模块实现用户登录功能

    项目代码:https://github.com/bruceq/supermarket 项目结构: 依赖关系: common:公共层,无依赖 dao:数据层,依赖common service:服务层,依赖dao.common web:应用层,依赖dao.common.service 注:启动类在web层中 父依赖pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/

  • SpringBoot+mybatis+thymeleaf实现登录功能示例

    1.项目文件目录一栏 2.开始工作 先按照上图建立好相应的controller,mapper等文件. 接着进行一个配置 首先是application.properties server.port=8080#启动端口 #加载Mybatis配置文件 mybatis.mapper-locations = classpath:mapper/*.xml #数据源必填项 spring.datasource.driver-class-name= com.mysql.cj.jdbc.Driver spring.

  • Springboot+Thymeleaf+Jpa实现登录功能(附源码)

    前言 最近有学习到关于Springboot+Thymeleaf+Jpa的综合运用知识,因此想写一个简单的登录界面来尝试一下,以下将展示具体流程 具体实现 首先要创建一个springboot项目 添加以下依赖项 pom.xml代码 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&

  • python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码

    最近学了python爬虫,本着学以致用的态度去应用在生活中.突然发现算法的考试要来了,范围就是PTA刷过的题.让我一个个复制粘贴?不可能,必须爬它! 先开页面,人傻了,PTA的题目是异步加载的,爬了个寂寞(空数据).AJAX我又不熟,突然想到了selenium. selenium可以模拟人的操作让浏览器自动执行动作,具体的自己去了解,不多说了.干货来了: 登录界面有个图片的滑动验证码 破解它的最好方式就是用opencv,opencv巨强,自己了解. 思路开始: 1.将背景图片和可滑动的图片下载

  • 微信小程序实现天气预报功能(附源码)

    前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图 天气API获取 这里我用的是和风天气的API,打开官网注册或者登陆你的账号 进入控制台,新建应用 这是刚刚我们创建好的应用,点击添加KEY 选择WebAPI 这注册好我们的API了 微信小程序后台域名配置 登陆小程序后台,分别点击开发和开发设置 点击修改,将我们API的域名添加到request合法域名里面https://free-api.heweather.net 页面代码 .wxml <view class=&quo

  • jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经"喜欢过了".  源码下载地址:http://xiazai.jb51.net/201509/yuanma/loveit(jb51.net).rar 实现过程 本文基于

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • jQuery实现产品对比功能附源码下载

    产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示     下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时

  • C++ Opengl图形颜色功能附源码下载

    项目开发环境: 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1,三方库:OpenGL. 项目功能: 创建一个有颜色的图形. 项目源码如下: /*********************包含链接的库文件*******************************************************************************************/ #pragma comment( lib, "opengl32.l

  • C++ Opengl旋转功能附源码下载

    项目开发环境: 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1,三方库:OpenGL. 项目功能: 是图形旋转起来. 项目源码如下: /*********************包含链接的库文件*******************************************************************************************/ #pragma comment( lib, "opengl32.lib&

  • Java 3D入门之基本图形功能 附源码

    目录 坐标系 基本体组合的显示实例 三角面图形 三角扇图形 四边面图形 坐标系 1.原点O在显示器的中间. 2.Z轴是指向屏幕之外的,也就是观察者. 3.由于观察者眼睛,即观察方向是指向Z轴的反方向,所以当定义好图形之后,光源的方向一定不能是指向Z轴的正方向,否则无法观察到图形.(根据光的反射) 基本体组合的显示实例 import java.applet.Applet; import java.awt.BorderLayout; import java.awt.GraphicsConfigura

  • 使用Python实现简单的人脸识别功能(附源码)

    目录 前言 一.首先 二.接下来 1.对照人脸获取 2. 通过算法建立对照模型 3.识别 前言 今天,我们用Python实现简单的人脸识别技术! Python里,简单的人脸识别有很多种方法可以实现,依赖于python胶水语言的特性,我们通过调用包可以快速准确的达成这一目的.这里介绍的是准确性比较高的一种. 一.首先 梳理一下实现人脸识别需要进行的步骤: 流程大致如此,在此之前,要先让人脸被准确的找出来,也就是能准确区分人脸的分类器,在这里我们可以用已经训练好的分类器,网上种类较全,分类准确度也比

随机推荐