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+oracle+mybatis
06-27
标题 "idea+springboot+oracle+mybatis" 暗示了这个项目是基于IntelliJ IDEA的一个集成开发环境，使用Spring Boot框架，配合Oracle数据库和MyBatis持久层框架来构建的应用。以下是对这些技术栈的详细解释： 1. **...
使用IDEA完成登录与注册
weixin_59973239的博客
02-20 8254
dao包用来放Java代码（注册部分的JDBC代码，分层方法：构建成一个方法，在Servlet中直接调用）分层思想：创建一些包将一大堆代码分散到各个包中，可以使代码简洁，容易后期维护。bean包用来放属性的构造方法。登录和注册servlet部分代码。JDBC工具类构造方法用来调用。注：注意文件创建地方。
（IDEA）Spring MVC（拦截器）案例---用户登录系统实现
最新发布
qq_74329022的博客
05-16 2111
本文细致解析spring mvc第一个项目实现---用户登录，每一句都是精华！
一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper，servlet+Tomcat
weixin_53472112的博客
01-08 1万+
一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper，servlet+Tomcat
IDEA实现前端页面登录，注册、增、删、改、查操作-完整版
热门推荐
weixin_53748496的博客
10-29 2万+
分层思想：entity层：存放实体类vo层：消息模型（重复使用的一些属性）mapper层：接口（写方法的）mapper.xml:MyBatis与数据库相关的一些内容controller(web)层：接收前端传回的参数调用service层，返回结果转发、响应结果（跳转页面）service层：业务逻辑判断，写方法的.utils层：工具类：写通用的方法、类。test包:测试类、测试方法（测试代码）连接数据库的pom.xml: 导入相关依赖。
idea实现简单的用户登录注册跳转
Rocky balboa
01-12 2万+
一.首先--------用户登录案例需求： 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表 3.使用JdbcTemplate技术封装JDBC 4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您 5.登录失败跳转到FailServlet展示：登录失败，用户名或密码错误 1.首先是login.html,简单的登录页面 <!DOCTYPE html&g
使用IDEA基于MVC和分层模式完成登录和注册
weixin_65824274的博客
02-19 3819
JSP是Servlet的扩展，在没有JSP之前，就已经出现了Servlet技术。Servlet是利用输出流动态生成HTML页面，包括每一个HTML标签和每个在HTML页面中出现的内容。JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。MVC模式中，M是指业务模型，V是指用户界面，C则是控制器。其中，View的定义比较清晰，就是用户界面。完成具体的业务操作，e.g：查询数据库，封装对象。
利用IDEA搭建SpringBoot+Mybatis，实现注册登录功能，适合初学者
03-25
利用SpringBoot+Mybatis+Maven+Mysql实现了简单的中注册登录功能 文件内包含数据库文件 项目创建参考文章为：https://blog.csdn.net/weixin_42685022/article/details/82215893 项目与文章有少许改动
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文件，其中有很多地方需要优化调整，后续持续补充，但是基本功能可用，留存方便自己后续参考...
Servlet登录注册（IDEA）
m0_72636322的博客
07-31 1631
IDEA的Servlet的注册登录
idea完成用户的注册，登录系统(暑假java复习one)
giaogege666的博客
07-07 3559
idea完成用户的登录和注册
lombok的使用
weixin_44795196的博客
02-06 535
作用：通过用简单的注释集代替众多的代码。 常用注解： @Setter ：注解在类或字段，注解在类时为所有字段生成setter方法，注解在字段上时只为该字段生成setter方法。 @Getter ：使用方法同上，区别在于生成的是getter方法。 @ToString ：注解在类，添加toString方法。 @EqualsAndHashCode： 注解在类，生成hashCode和equals方法。 @...
使用IDEA基于Maven搭建SSM（Spring+SpringMVC+MyBatis）框架并完成登录注册案例（附源码）
代码星辰的博客
09-23 8499
一、环境准备 开发工具：IntelliJ IDEA 2017.3.1 x64 数据库：MySQL 5.5，其中MySQL的管理工具为Navicat JDK版本：JDK1.8 Maven版本：apache-maven-3.2.2 当然了，以上只是我个人电脑上的开发环境，只要版本不过于老旧，应该是没有什么问题的。 二、框架搭建 ...
创建一个最简单的登录项目
qq_33543227的博客
08-08 540
1：利用idea编程工具创建springboot+springMVC+Mybatis架构的项目 （1）第一步:打开idea创建新项目 （2）第二步：选择spring Initializr，然后next （3）第三步：修改项目名和打包类型 （4）先选择springboot的版本，2.1.6。再选择项目类型web->spring web starter。 选择数据...
IDEA搭建JavaWeb项目，JDBC和Servlet-JSP技术实现注册功能
Java学习博客
08-24 5147
本篇主要讲怎么使用IDEA搭建JavaWeb项目，并且使用JDBC和JSP-Servlet实现一个简单的注册功能。这里以idea2021.3.2版本为例。idea是不可以直接创建一个JavaWeb项目的，我们需要新建一个普通的java项目，然后手动修改。 "> （1）. 建表，根据业务需求，我们需要在数据建设一个存储用户信息的数据表 （2）. 编写实体类 （3）. 编写dao接口 （4）. 编写daoimpl实现类 （5）. 编写servlet （6）. 修改web.xml文件配置ser
java实验：数据库应用（idea+mysql+php)设计用户注册和登录
m0_75017568的博客
12-02 2258
代码是在idea中编写，首先要下载驱动文件mysql-connector-j-8.2.0.jar，根据提示填写，我这里的数据库名称是student,用户名ly，密码123456，最后点击确认。找到刚刚导入的mysql-connector-j-8.2.0.jar，双击点ok就可以了。下载之后，把mysql-connector-j-8.2.0.jar复制到项目中。就依次按刚创建的数据库填写连接名，用户名，密码，其他不用改动，点击确定。这两个建议一起下，接着是配置环境，可以搜一下配置教程。接着转到mysql,
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、付费专栏及课程。

余额充值