IDEA+Springboot搭建登陆注册项目

最新推荐文章于 2024-05-16 19:09:41 发布
最新推荐文章于 2024-05-16 19:09:41 发布
阅读量2.2k 收藏 47
点赞数 2
分类专栏： 前后端分类 登陆注册 Springdata-jpa 文章标签： spring boot spring javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39554644/article/details/109451182
版权

IDEA+Springboot+maven+springdata-jpa 实现简单的登陆注册

我的第一个项目

前期准备

请确保电脑上已经装了以下软件。

  1. IDEA ，这是JAVA编辑器，我用的版本是2018专业版；
  2. JDK8 这部分不要用新的版本，不然到时候会有很多不兼容问题，记得配置环境，这部分不会的请百度；
  3. apache-maven-3.6.0 跟JAVA一项配置一下环境。
  4. mysql 作为数据库；
  5. navicat for mysql这是一个可视化的数据库编辑器；

功能构思

  1. 首先我们需要一个数据库，来保存登陆注册要用的账号和密码对吧。数据库应该有三个属性，id，account，password
  2. 前端，3个界面，分别是index，welcome和error
    index用来输入账号密码，welcome表示登陆成功，error表示账号或密码错误。
  3. 后端，主要是进行逻辑判断，即判断前端传过来的账号和密码是否正确，或者判断账号是否已经注册过了。

基本架构编写

1.我们先按照“功能构思”上面所需的界面构建一下整个登陆注册的框架
如下图所示。（新建一个项目随便取名字，注意新建项目是选择spring-Initializr）
在这里插入图片描述

这里建议大家CSS和JS跟HTML都是一样的名字，这样后期比较好区分,还有最好文件夹跟我的一样，也方便后期加功能。
这里说一下这几个东西的作用，LoginControllers用来放跟登陆控制相关的控制类，ReturnControllers用来存放返回页面的控制类，OtherControllers用来放其他东西，比如后面如果加传图片的功能就放在这里面。

UserRepository里面是连接JPA的内容，注意我们这个方法没有Dao层之类的东西，因为我也是初学者，按我的来应该不会出错。
接下来的static里面就是放前端三板斧的东西啦HTML、CSS、JS。

2.下面配置一下pom.xml和application.properties

首先是pom.xml 这里大家复制dependencies里面的代码就可以，其他的不要复制切记。

<?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.3.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>myfirstproject</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>myfirstproject</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-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

            <dependency>
                <groupId>net.sourceforge.nekohtml</groupId>
                <artifactId>nekohtml</artifactId>
                <version>1.9.22</version>
            </dependency>
            <!--配置热部署-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
            <!--使用JPA-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
            <!--连接数据库-->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                    <exclusion>
                        <groupId>com.vaadin.external.google</groupId>
                        <artifactId>android-json</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>

            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-freemarker</artifactId>
            </dependency>

            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </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的内容，这里大家可以直接复制就OK，但是注意把下方的端口号换成你安装mysql中的端口号以及把你的数据库名字和密码改一下。



#配置文件

#配置端口

server.port=5200
#配置变量 不需要管类型
name = B

#属性配置
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML

spring.datasource.url=jdbc:mysql://localhost:你的端口名称/你的数据库名?serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=这里改成你的数据库的密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.tomcat.max-idle=10
spring.datasource.tomcat.max-active=50
spring.datasource.tomcat.max-wait=10000
spring.datasource.tomcat.initial-size=5
spring.datasource.tomcat.default-transaction-isolation=2

spring.jpa.hibernate.ddl-auto = update

spring.jpa.show-sql=true
spring.jpa.open-in-view=false

#spring.servlet.multipart.max-file-size=500MB
#spring.servlet.multipart.max-request-size=2048MB

spring.mvc.static-path-pattern=/static/**

3.下面就开始写其他的代码。

首先，我们在User里写代码，我们在这里写代码mysql就会自动生成表，是不是很神奇。
下面直接贴代码了，有注释大家自己看哈

User里面的代码

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity//
public class User {
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Id//这两行@是让id为逐渐并递增
    private Integer id;
    private String account;
    private String password;

    public Integer getId() {
        return id;
    }

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

    public String getAccount() {
        return account;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public String getPassword() {
        return password;
    }

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

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

然后，数据库这样就算建好了，但是得等运行了才能建起来哈，接下来我们就先写一下三个html，老规矩贴代码:

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <title>登录</title>
</head>
<body>
<div class="register">
    <div class="loginandregister">
        <form>
            <div class="form-group">
                <lable for="account">账号</lable>
                <input type="text" class="form-control" id="account">
            </div>
            <div class="form-group">
                <lable for="password">密码</lable>
                <input type="text" class="form-control" id="password">
            </div>
            <button type="button" class="btn btn-outline-light" id="btn1" onclick="register()">注册</button>

            <button type="button" class="btn btn-outline-light" id="btn2" onclick="login()">登录</button>

        </form>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="/static/js/index.js"></script>
</body>
</html>

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>账号或密码错误</h1>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎登陆</h1>
</body>
</html>

5. 接下来就是写后端页面了。

先写UserRepository的代码这里用的是Springdata-jpa的内容

import com.example.myfirstproject.OtherControllers.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User,Integer> {
    
    //下面这个函数是用来验证登陆账号和密码的
    public User findByAccountAndPassword(String account,String password);
    //findByAccountAndPassword相当于
    //@Query(value = "select account from User where account=?1 and password=?2")
    //public String findByAccountAndPassword(String account,String password);
    
    //下面这个函数是用开看账号是否已经注册过用的
    public User findByAccount(String account);
}

然后是MainController

import com.example.myfirstproject.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;


@Controller
public class MainController {

    @Autowired
    private UserRepository userRepository;
    //获取index页面
    @GetMapping("index")
    public String index(){
        return "index";
    }

    //获取error页面
    @GetMapping("error")
    public String error(){
        return "error";
    }

    //获取welcome页面
    @GetMapping("welcome")
    public String welcome(){
        return "welcome";
    }


}

接下来是LoginAndRegisterController

import com.example.myfirstproject.OtherControllers.User;
import com.example.myfirstproject.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;



@RestController
public class LoginAndRegisterController {
    @Autowired
    private UserRepository userRepository;
	//判断账号密码是否正确
    @PostMapping("login")
    public String login(String account,String password){
        User user = userRepository.findByAccountAndPassword(account,password);
        //下面的逻辑就是通过上面这条语句，如果再数据库查到了账号和密码，那么就返回yes证明账号密码正确，否则就返回no
        if(user!=null){
            return "yes";
        }else{
            return "not";
        }
    }
	//判断是否注册过
    @PostMapping("register")
    public String register(User u){
        User user = userRepository.findByAccount(u.getAccount());
        //注册的原理跟登陆的原理差不多，只不过这里仅用一个参数就行啦
        if(user!=null){
            return "not";
        }else{
            userRepository.save(u);
            return "yes";
        }
    }
}

后台基本写好了，现在写前端JS代码：
index.js




function register(){
	//下面两个参数用来传到后台
    var account = $("#account").val();
    var password = $("#password").val();

    $.ajax({
        type:"POST",
        url:"register",
        data:{
            account:account,
            password:password

        },

        success:function (data) {
		//如果后台返回的是not证明账号已经注册过了
            if(data=="not"){
                alert("该账号已注册过");
                location.reload();
            }else{
                alert("注册成功，请登录")
                location.reload();
            }

        }
    })

}



function login() {
    var account = $("#account").val();
    var password = $("#password").val();

    $.ajax({
        type:"POST",
        url:"login",
        data:{
            account:account,
            password:password
        },
        success:function (data) {

            if(data=="not"){
                alert("账号或密码错误");
                location.href="error";
            }else{
                location.href="welcome";
            }

        }
    })

}

测试

现在登陆注册的例子已经完成，接下来要对其进行测试。
1.启动项目
在地址栏输入http://localhost:5200/index出现登陆界面

在这里插入图片描述
2.注册
接下来注册一个账号，并在数据库中能够看到该账号，我这里注册账号名1，密码也是1，我这里ID是8因为之前做过测试了，我把记录删了
在这里插入图片描述
3.登陆
输入账号：1 密码：1.点击登陆将跳转到welcome页面
在这里插入图片描述

4.后续改进
后续可以对前端页面进行美化，慢慢加一点功能。
我们现在是前后端分离的写法，后面有机会分享前后端不分离的写法。
下一个分享应该是实现修改密码的功能。
谢谢耐心的你，我也是初学者，不足之处请多多指教。

老高爱吃猪油
关注
  • 2
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
idea+springBoot+maven 搭建项目
04-25
idea+springBoot+maven 搭建项目 配置Oracle mybatis简易配置及数据查询
idea+springboot+MySQL+jdk1.8实现简单的注册登录功能
02-06
idea+springboot+MySQL+jdk1.8实现简单的注册登录功能，本代码从最简单的spring boot架构实现登录注册，适合新手拿去练手！
（IDEA）Spring MVC（拦截器）案例---用户登录系统实现
最新发布
qq_74329022的博客
05-16 2093
本文细致解析spring mvc第一个项目实现---用户登录，每一句都是精华！
利用IDEA搭建SpringBoot+Mybatis，实现注册登录功能，适合初学者
03-25
利用SpringBoot+Mybatis+Maven+Mysql实现了简单的中注册登录功能 文件内包含数据库文件 项目创建参考文章为：https://blog.csdn.net/weixin_42685022/article/details/82215893 项目与文章有少许改动
spring boot + 漂亮的登陆界面
08-21
idea spring boot + 漂亮的登陆界面 spring boot ，thymeleaf
使用Idea搭建基于SpringBoot的登陆注册系统（附源码）
热门推荐
Java鱼仔的博客
09-14 2万+
在之前的博客中我写了一篇基于SSM框架的登陆系统，SSM框架虽然让开发变得更加简单，但是太多的配置文件使得整体结构依旧不太简洁。在学习了SpringBoot之后，我想实现在尽可能不改变原来代码的情况下使用SpringBoot框架开发登陆注册系统，如果大家有兴趣也可以综合两篇博客看看SSM框架开发和SpingBoot框架开发出来的系统有什么样的区别。 第一步：创建SpringBoot项目： ...
使用IDEA搭建一个SpringBoot的简单登录项目
老树的技术博客
02-18 4502
本文对象是第一次搭建springboot项目的初学人员。介绍了spring boot简单的登录服务的搭建过程
idea+springboot+oracle+mybatis
06-27
标题 "idea+springboot+oracle+mybatis" 暗示了这个项目是基于IntelliJ IDEA的一个集成开发环境，使用Spring Boot框架，配合Oracle数据库和MyBatis持久层框架来构建的应用。以下是对这些技术栈的详细解释： 1. **...
idea+springboot+jsp+mybatis+mapper注解
08-30
标题 "idea+springboot+jsp+mybatis+mapper注解" 涉及到的是一个基于IntelliJ IDEA（简称Idea）开发的Spring Boot项目，其中整合了JSP（JavaServer Pages）、MyBatis以及Mapper注解。下面将详细阐述这些技术及其整合...
springboot+springMVC+mybatis+mysql搭建项目
07-17
本文章通过idea搭建项目，使用springboot+springmvc+mybatis+mysql，并使用mybatis逆向工程生成java实体类和mapper的xml文件，其中有很多地方需要优化调整，后续持续补充，但是基本功能可用，留存方便自己后续参考...
idea 新建spring clound 项目_手把手教你spring源码搭建
weixin_39709367的博客
11-20 121
一 Spiring源码搭建1.1 gradle安装官网下载：https://gradle.org/install/; 加速版：https://services.gradle.org/distributions/添加 GRADLE_HOME 环境变量，指向Gradle解压目录；配置Path环境变量: %GRADLE_HOME%bin；打开命令行 输入命令： gradle -v，显示版本号等信息说明...
IDEA搭建SSM实现登录、注册，增删改查功能
04-18
IDEA搭建SSM实现登录、注册，增删改查功能.IDEA搭建SSM实现登录、注册，增删改查功能
spring security thymeleaf 自定义登录页面
qq_21344887的博客
09-11 1249
引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.
idea登录页面ajax验证,IDEA如何实现登录注册页面 IDEA实现登录注册页面代码示例...
weixin_42374930的博客
08-06 5283
IDEA如何实现登录注册页面？本篇文章小编给大家分享一下IDEA实现登录注册页面代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。application.ymlspring:datasource:username: rootpassword: 123456url: jdbc:mysql://localhost:3306/bd1906?serve...
完成一个IDEA web项目（二）登录功能实现
u012161251的博客
05-31 1万+
（二）登录功能实现 1. 编写前端页面 若jsp页面中文乱码：在jsp中指定页面显示的编码为GBK 添加page命令 <%@ page language="java" contentType="text/html; charset=GBK" %> 参考：https://www.cnblogs.com/beijiguangyong/archive/2012/03/31/24...
一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper，servlet+Tomcat
weixin_53472112的博客
01-08 1万+
一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper，servlet+Tomcat
SSM实现的一套用户登录注册系统,附带验证等功能(使用idea开发)
文戌
03-26 5131
未登录时的界面: 登录和注册界面,有动态效果: 登陆之后的界面 源码链接
idea完成用户的注册，登录系统(暑假java复习one)
giaogege666的博客
07-07 3554
idea完成用户的登录和注册
lombok的使用
weixin_44795196的博客
02-06 533
作用：通过用简单的注释集代替众多的代码。 常用注解： @Setter ：注解在类或字段，注解在类时为所有字段生成setter方法，注解在字段上时只为该字段生成setter方法。 @Getter ：使用方法同上，区别在于生成的是getter方法。 @ToString ：注解在类，添加toString方法。 @EqualsAndHashCode： 注解在类，生成hashCode和equals方法。 @...
idea+maven+springboot
01-26
Idea 是一款由 JetBrains 开发的集成开发环境，拥有丰富的插件和强大的功能，可以提高开发效率。Maven 是一个项目管理工具，可以帮助我们进行项目的构建、依赖管理和发布。Spring Boot 是一个用于创建基于 Spring 框架的应用程序的工具，可以快速地搭建和部署应用。 在实际的开发过程中，我们可以使用 Idea 来进行代码的编写、调试和测试，在项目开发过程中使用 Maven 来管理项目的依赖和进行构建，然后使用 Spring Boot 来创建基于 Spring 的应用程序。Idea 的强大功能可以帮助我们更快地进行开发，Maven 可以帮助我们统一管理项目的依赖和构建过程，Spring Boot 则可以帮助我们更加快速地创建和部署应用，大大提高了开发的效率。 通过整合使用这三种工具，我们可以更加高效地进行软件开发，节省时间和精力，提高软件的质量和稳定性。同时，这三种工具在开发社区都有着广泛的应用和支持，可以获得丰富的资料和资源，帮助我们更好地解决开发过程中的各种问题。因此，Idea Maven Spring Boot 的组合可以帮助我们更加轻松地完成项目开发，并且是目前比较流行和实用的开发工具组合之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值