SpringBoot实现登陆注册(附源码)

此项目前端由html+css+vue(发送请求)组成，后端由springboot进行处理请求,相关数据库操作语句选用的是mybatis-plus

        先看看我的项目总结吧：

先说完美的吧，因为前端登陆注册界面是之前的，这次就复制了一下，在前端部分仅书写了一些vue，使用v-model绑定username以及password，发送axios请求，后端那部分因为使用的是mybatis-plus，也没有编写一些sql语句，当然，这些sql语句也不是很复杂的，有时间的小伙伴可以直接试着编写，或在我这基础上进行修改，controller层的话，就是一些逻辑语句，例如：登陆时先判断数据库中是否存在该用户，若存在再进行密码比对，注册时则是先判断用户是否已经注册，存在数据库中，若不存在再让其进行注册。总而言之，此项目花费不到四十分钟，总体还是不错对于新手小白来说，我认为困难的部分则是在前后端交互那个地方，存在一些差异，二者的数据格式不统一。

        不足的地方，就是界面过于简单，没有啥js效果，效果非常直接，以及vue发送请求需要多加练习。

先看项目运行后主界面效果：

登陆界面如下：

注册界面如下：

项目目录结构如下：

1.数据库中表的设计

1.1 创建一个表其中有两个字段一个用户名(varcahr类型,primary key)一个密码(varchar类型)

1.2 表结构如下所示

2.需要导入的jar包(pom.xml文件)以及相关配置设置(数据库信息以及端口)

2.1文件具体相关代码如下

<?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.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wz</groupId>
    <artifactId>LogAndRegister</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>LogAndRegister</name>
    <description>LogAndRegister</description>

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

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

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

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>
    </dependencies>

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

</project>

2.2数据库信息以及端口

server:
  port: 81
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/logandregister
      username: root
      password: 111111

3.后端相关代码的编写

 3.1 后端返回给前端的信息封装在R类中

@Data
public class R<T> {

    private Integer code; //编码：1成功，0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }

}

3.2 User实体类(即用户的信息(账号密码))

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

3.3 Controller(控制层相关代码，处理前端发送的请求)

@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public R<String> login(@RequestBody User user){
        log.info("user:{}",user);
        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
        lqw.eq(User::getUsername,user.getUsername());
        User one = userService.getOne(lqw);
        System.out.println(one);
        // 查询不到用户
        if (one == null){
            return R.error("用户账号不存在");
        }
        // 密码错误
        if(!one.getPassword().equals(user.getPassword())){
            return R.error("密码错误");
        }
        return R.success("登陆成功");
    }
    @PostMapping("/register")
    public R<String> register(@RequestBody User user){
        log.info("user:{}",user);
        // 判断前端传来的数据是否正常
        if (user==null){
            return R.error("请输入注册信息");
        }
        // 判断账号是否存在
        String username = user.getUsername();
        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(User::getUsername,username);
        User one = userService.getOne(lambdaQueryWrapper);
        if (one!=null){
            return R.error("用户账号已注册");
        }
        // 二者都满足则以下
        userService.save(user);
        return R.success("注册成功");

    }

}

3.4 Mapper层相关代码

@Mapper
public interface UserMapper extends BaseMapper<User> {
}

3.5 定义的Service接口代码

public interface UserService extends IService<User> {
}

3.6实现Service接口的实现类

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

4.前端相关代码

4.1 登陆界面login.html(包含vue发送请求)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form  id="form" >
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text" v-model="userName"></p>
        <p>Password:<input id="password" name="password" type="password" v-model="passWord"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up" @click="login">
            <input type="reset" class="button" value="reset" >
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#loginDiv",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            login:function (){
                console.log(this.userName,this.passWord);
                axios.post('http://localhost:81/user/login',
                    {
                    username: this.userName,
                    password: this.passWord,
                }).then( resp=> {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        window.location.href = 'loginSuccess.html';
                    }else {
                        alert("账号或密码错误");
                        this.userName='';
                        this.passWord='';
                        }
                    })
                }
        }
    })
</script>
</body>
</html>

4.2 注册界面register.html(包含vue发送请求)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" v-model="userName">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" v-model="passWord">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn" @click="register">
        </div>
        <br class="clear">
    </form>

</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#reg-form",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            register: function () {
                console.log(this.userName, this.passWord);
                axios.post('http://localhost:81/user/register',
                    {
                        username: this.userName,
                        password: this.passWord,
                    }).then(resp => {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        alert(resp.data.data);
                        window.location.href = 'login.html';
                    } else {
                        console.log(resp.data.data);
                        alert(resp.data.data);
                        this.userName = '';
                        this.passWord = '';
                    }
                })
            }
        }
    })
</script>
</body>
</html>

5.项目完毕总结

        先说完美的吧，因为前端登陆注册界面是之前的，这次就复制了一下，在前端部分仅书写了一些vue，使用v-model绑定username以及password，发送axios请求，后端那部分因为使用的是mybatis-plus，也没有编写一些sql语句，当然，这些sql语句也不是很复杂的，有时间的小伙伴可以直接试着编写，或在我这基础上进行修改，controller层的话，就是一些逻辑语句，例如：登陆时先判断数据库中是否存在该用户，若存在再进行密码比对，注册时则是先判断用户是否已经注册，存在数据库中，若不存在再让其进行注册。总而言之，此项目花费不到四十分钟，总体还是不错对于新手小白来说，我认为困难的部分则是在前后端交互那个地方，存在一些差异，二者的数据格式不统一。

        不足的地方，就是界面过于简单，没有啥js效果，效果非常直接，以及vue发送请求需要多加练习。

有需要的小伙伴可以后台私信我发源码哦，码文不易，小伙伴可以点个赞哦！！！