springboot 快速实现登录、注册功能(附Demo源码)

登录注册功能是一个经常需要又适合入门的功能。 从这里你将跟随我从0开始搞一个登录、注册的简单版功能。
本文章非常适合有java基础,第一次使用springboot。

两种实现方式:
1.直接跑通Demo,修改配置文件。导入数据库sql文件即可。
2.跟着一步一步实现。
当然你也可以先跑通Demo,在尝试自己跟着来一遍

1.跑通Demo

Demo地址: https://github.com/wangzhifengroot/login
只需要两步
1.修改这里的IP地址、数据库名称、用户和密码
在这里插入图片描述
2.创建数据库和表
导入下面sql文件
user.sql

2. 一步一步实现。

环境

需要安装一下开发工具
1.IDEA https://www.jetbrains.com/zh-cn/idea/
2.mysql https://www.mysql.com/downloads/
3.maven
4.Navicat mysql

选择spring initializr

选择1.8的JDK,当然你可以选择更高的。(推荐使用和我一样的)
选default 点击net
在这里插入图片描述
修改artifact 为login、type修改为maven 、语言选择java、版本依然选8,点击net
在这里插入图片描述
这一步我们可以直接跳过,后面添加就行.
在这里插入图片描述
下一步直接finish

完善代码

找到pom.xml 文件
在这里插入图片描述
修改pom.xml

<dependencies>
        <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- myBatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

    </dependencies>

完整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.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example.login</groupId>
    <artifactId>login</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>login</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- myBatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

找到下面的application文件, 修改后缀为.yml和图一样

在这里插入图片描述

修改yml 替换你的mysql地址+username、密码

server:
  port: 9090
spring:
  datasource:
    url: jdbc:mysql://mysql地址/sanguo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
    username: 用户
    password: 密码

新增4个包
bean 为数据类、controller 对外提供调用、dao 数据库操作、serivce 对数据操作
在这里插入图片描述
在bean包下创建User 数据类


/**
 * 用户Data类
 */
public class User {
    
    
    // 用于数据库主键
    private long id;
    // 用户名,不能重复
    private String account_number;
    // 用户密码
    private String password;
    // 手机号
    private String phone;

    public long getId() {
    
    
        return id;
    }

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

    public String getAccount_number() {
    
    
        return account_number;
    }

    public void setAccount_number(String account_number) {
    
    
        this.account_number = account_number;
    }

    public String getPhone() {
    
    
        return phone;
    }

    public void setPhone(String phone) {
    
    
        this.phone = phone;
    }

    public String getPassword() {
    
    
        return password;
    }

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


创建数据库的表,如果有mysql基础的可以直接按上面的User类创建。

没有基础的可以使用Navicat mysql 来创建,避免深陷sql语句中。
下载sql文件,在Navicat mysql 点击数据库选择运行sql文件。

在这里插入图片描述

或者复制我这个sql到mysql中

CREATE TABLE `user` (
  `id` bigint(32) NOT NULL AUTO_INCREMENT,
  `account_number` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `phone` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;

创建Result类,用于规范数据返回。方便前端和Android同学。(很重要)

public class Result<T> {
    
    

    // 返回信息
    private String msg;

    // 返回code -1等于失败 200成功
    private int code;

    // 具体返回的数据
    private T detail;

    public String getMsg() {
    
    
        return msg;
    }

    public void setMsg(String msg) {
    
    
        this.msg = msg;
    }


    public T getDetail() {
    
    
        return detail;
    }

    public void setDetail(T detail) {
    
    
        this.detail = detail;
    }

    public void setCode(int code) {
    
    
        this.code = code;
    }

    public int getCode() {
    
    
        return code;
    }

    @Override
    public String toString() {
    
    
        return "Result{" +
                "msg='" + msg + '\'' +
                ", code=" + code +
                ", detail=" + detail +
                '}';
    }
}

创建UserController类


// 相当于@Controller+@RequestBody
@RestController
// 访问目录
@RequestMapping("/user")
public class UserController {
    
    


    @Autowired
    private UserService userService;

    /**
     * 注册
     *
     * @param user 参数封装
     * @return Result
     */
    @PostMapping(value = "/register")
    public Result register(User user) {
    
    
        Result regist = userService.register(user);
        return regist;
    }

    /**
     * 登录
     *
     * @param user 参数封装
     * @return Result
     */
    @PostMapping(value = "/login")
    public Result login(User user) {
    
    
        return userService.login(user);
    }

}

创建HelloController 这个可以不创建,只是为了test使用的。

@RestController
public class HelloController {
    
    
    @GetMapping(value = "/hello")
    public String hello() {
    
    
        return "hello";
    }
}

创建UserMapper 这个是操作数据库的

@Mapper
@Repository
public interface UserMapper {
    
    

    /**
     * 查询用户名是否存在,若存在,不允许注册
     * 注解@Param(value) 若value与可变参数相同,注解可省略
     * 注解@Results  列名和字段名相同,注解可省略
     *
     * @param account_number
     * @return
     */
    @Select(value = "select u.account_number,u.password from user u where u.account_number=#{account_number}")
    @Results({
    
    @Result(property = "account_number", column = "account_number"),
            @Result(property = "password", column = "password")})
    User findUserByName(@Param("account_number") String account_number);

    /**
     * 注册  插入一条user记录
     *
     * @param user
     * @return
     */

    @Insert("insert into user values(#{id},#{account_number},#{password},#{phone})")
    // 加入该注解可以保存对象后,查看对象插入id
    @Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")
    void register(User user);

    /**
     * 登录
     *
     * @param user
     * @return
     */
    @Select("select u.id from user u where u.account_number = #{account_number} and password = #{password}")
    Long login(User user);
}

创建UserService用于逻辑操作


@Service
@Transactional(rollbackFor = RuntimeException.class)
public class UserService {
    
    

    @Autowired
    private UserMapper userMapper;

    /**
     * 注册
     *
     * @param user 参数封装
     * @return Result
     */
    public Result register(User user) {
    
    
        Result result = new Result();
        result.setCode(-1);
        result.setDetail(null);
        try {
    
    
            User existUser = userMapper.findUserByName(user.getAccount_number());
            if (existUser != null) {
    
    
                //如果用户名已存在
                result.setCode(-1);
                result.setMsg("用户名已存在");
            } else {
    
    
                userMapper.register(user);
                result.setMsg("注册成功");
                result.setCode(200);
                result.setDetail(user);
            }
        } catch (Exception e) {
    
    
            result.setMsg(e.getMessage());
            e.printStackTrace();
        }
        return result;
    }

    /**
     * 登录
     *
     * @param user 用户名和密码
     * @return Result
     */
    public Result login(User user) {
    
    
        Result result = new Result();
        result.setCode(-1);
        result.setDetail(null);
        try {
    
    
            Long userId = userMapper.login(user);
            if (userId == null) {
    
    
                result.setCode(-1);
                result.setMsg("用户名或密码错误");
            } else {
    
    
                result.setCode(200);
                result.setMsg("登录成功");
                user.setId(userId);
                result.setDetail(user);
            }
        } catch (Exception e) {
    
    
            result.setMsg(e.getMessage());
            e.printStackTrace();
        }
        return result;
    }
}

在resources创建resources文件
在这里插入图片描述

复制html
登录 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<form action="/user/login" method="post">
    账 号:<input name="account_number" type="text"/><br>
    密 码:<input name="password" type="password"> <br>
    <input type="submit" value="登录">
</form>
</body>
</html>

注册 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form action="/user/register" method="post">
    账 号:<input name="account_number" type="text"/><br>
    密 码:<input name="password" type="password"> <br>
    <input type="submit" value="注册">
</form>
</body>
</html>

一切准备就绪了
运行项目
在这里插入图片描述
访问 http://localhost:9090/regist.html
试试能否注册成功
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41346910/article/details/109813201
今日推荐