SpringBoot学习之实现登录注册功能

19 篇文章 3 订阅
11 篇文章 0 订阅

1、系统目录结构

 

2、创建数据库

数据库名称:student,数据表:user,创建命令如下:

//创建数据库
create database student;

//选择创建好的数据库,建立user表
use student;

create table user(
    id int primary key auto_increment,
    username varchar(32) unique not null,
    password varchar(32) not null
);


//想创建好的数据库中添加数据
insert into user values(1,"xioming","000");

//查看自己添加的数据
select * from user;

 3、创建前端页面

3.1 登录页面:login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <form method="post" action="/user/login">
        用户名:<input name="username" type="text"/>
        密码:<input name="password" type="password"/>
        <input type="submit" value="登录验证"/>
        <input type="button" onclick="javascript:window.location.href='register.html'" value="去注册页面"/>
    </form>
</body>
</html>

3.2 注册页面:register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
    <form method="post" action="/user/register">
        用户名:<input name="username" type="text"/>
        密码:<input name="password" type="password"/>
        <input type="submit" value="注册">
        <input type="button" onclick="javascript:window.location.href='login.html'" value="去登录页面">
    </form>
</body>
</html>

 4、Java代码

4.1 pom树

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>student_sys</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>14</maven.compiler.source>
        <maven.compiler.target>14</maven.compiler.target>
    </properties>

    <dependencies>
        <!--数据库依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
            <version>2.4.3</version>
        </dependency>

        <!--启动项-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.4.3</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>2.4.3</version>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

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

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

    </dependencies>

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

</project>

4.2 数据配置信息:application.properties

# 配置数据库连接信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/student?characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root

mybatis.type-aliases-package=com.example.studentsys.entity
mybatis.mapper-locations=classpath:mapper/*.xml

 4.3 实体类:User.java

package com.example.studentsys.entity;


public class User {
    private Integer id;
    private String username;
    private String password;


    public void setId(Integer id){
        this.id = id;
    }
    public Integer getId(){
        return id;
    }
    public void setUsername(String username){
        this.username = username;
    }
    public String getUsername(){
        return username;
    }
    public void setPassword(String password){
        this.password = password;
    }
    public String getPassword(){
        return password;
    }
}

4.4  mapper接口:UserMapper.java

package com.example.studentsys.mapper;

import com.example.studentsys.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

// 将类标识为bean
@Repository
@Mapper
public interface UserMapper {
    List<User> findAll();
    User findByName(String username);
    String findPswByName(String userName);
    void save(User user);
}

4.5  UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--xmlns="http://mybatis.org/schema/mybatis-mapper"-->
<mapper namespace="com.example.studentsys.mapper.UserMapper">
    <select id="findAll" resultType="User">
        select * from User
    </select>
    <select id="findByName" resultType="User">
        select * from User where username=#{name}
    </select>
    <select id="findPswByName" resultType="String">
        select password from user where username = #{username}
    </select>
    <insert id="save">
        insert into user(username,password) value (#{username},#{password})
    </insert>
</mapper>

4.6 service类:UserService.java

package com.example.studentsys.service;

import com.example.studentsys.entity.User;
import com.example.studentsys.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {

    //autowire:可以对类成员变量、方法以及构造函数进行标注,完成自动装配工作
    @Autowired
    UserMapper userMapper;

    // 登录操作
    public String login(User user) {
        try {
            User userExistN = userMapper.findByName(user.getUsername());
            if (userExistN != null) {
                String userExistP = userMapper.findPswByName(user.getUsername());
                if (userExistP.equals(user.getPassword())) {
                    return user.getUsername()+"登录成功,欢迎您!";
                }else{
                    return "登录失败,密码错误!";
                }
            }else {
                return "登录失败,用户不存在!";
            }
        }catch (Exception e) {
            e.printStackTrace();
            return e.getMessage();
        }
    }

    // 注册操作
    public String register(User user) {
        try {
            User userExist = userMapper.findByName(user.getUsername());
            if (user.getUsername().equals("")) {
                return "用户名不能为空";
            }else if (user.getPassword().equals("")) {
                return "密码不能为空";
            }else if (userExist != null) {
                return "账号已经存在";
            }else {
                userMapper.save(user);
                return "注册成功";
            }
        }catch (Exception e) {
            e.printStackTrace();
            return e.getMessage();
        }
    }

    // 获取所有用户
    public List<User> findAll() {
        List<User> list = userMapper.findAll();
        return list;
    }
}

4.7  控制类:UserController.java

package com.example.studentsys.controller;

import com.example.studentsys.entity.User;
import com.example.studentsys.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

    // 登录
    @RequestMapping("/login")
    public String login(User user) {
        return userService.login(user);
    }

    // 注册
    @PostMapping("/register")
    public String register(User user) {
        return userService.register(user);
    }

    // 解决查询数据库中文出现乱码问题
    @RequestMapping(value = "/alluser", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
    public List<User> findAll() {
        return userService.findAll();
    }
}

4.8  启动类:StudentsysApplication

package com.example.studentsys;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class StudentsysApplication {
    public static void main(String[] args) {
        SpringApplication.run(StudentsysApplication.class, args);
    }
}

5、运行项目

http://localhost:8080/login.html 进入到登录页面

http://localhost:8080/register.html 进入注册页面

 http://localhost:8080/user/alluser 查看当前所有用户信息

6、总结

MySQL常见管理命令

@RestController注解

业务逻辑:

Mapper负责连接数据并进行相关的CRUD操作

Service借助Mapper来完成登录注册的业务逻辑

Controller接待浏览器访问,借助Service提供登录注册服务

  • 50
    点赞
  • 517
    收藏
    觉得还不错? 一键收藏
  • 41
    评论
### 回答1: 要使用 Spring Boot 和 Vue 实现登录注册功能,您需要执行以下步骤: 1. 在 Spring Boot 中创建 RESTful API 接口,实现用户登录和注册功能。 2. 使用 Vue 前端框架创建登录和注册页面。 3. 在 Vue 中使用 axios 库发送 HTTP 请求到 Spring Boot 接口,以实现用户的登录和注册功能。 4. 在 Spring Boot 中使用数据库存储用户的注册信息,并在登录时验证用户的身份。 5. 在登录成功后,在 Vue 前端保存用户的登录状态,以便允许用户访问需要登录的页面。 这些步骤的详细实现方法将因您的具体需求和环境而异,建议您在网上查找相关教程学习。 ### 回答2: 使用Spring Boot和Vue实现登录注册功能,可以通过以下步骤实现: 1. 后端使用Spring Boot搭建一个RESTful API,处理用户的登录和注册请求。可以使用Spring Security来实现用户认证和授权功能,确保只有经过认证的用户才能登录。可以使用Spring Data JPA来管理数据库连接和操作。 2. 前端使用Vue搭建用户界面,通过Vue Router来管理页面的跳转。可以通过Vue的单文件组件(.vue)来定义登录和注册页面的布局和交互。可以使用Element UI或者其他UI库来美化界面,并提供用户友好的输入框、按钮等组件。 3. 在登录页面,用户输入用户名和密码,点击登录按钮。前端通过Axios或者Fetch等工具发送POST请求到后端的登录API,携带用户名和密码。后端验证用户名和密码的正确性,如果验证通过,返回一个包含用户信息和一个身份验证令牌(token)的响应。 4. 前端接收到登录响应后,可以将用户信息保存到浏览器的本地存储(LocalStorage或SessionStorage),同时将身份验证令牌保存到浏览器的Cookie中,以便后续的请求可以携带该令牌进行身份验证。 5. 在注册页面,用户输入用户名和密码,并确认密码,点击注册按钮。前端通过Axios或者Fetch等工具发送POST请求到后端的注册API,携带用户名和密码。后端验证用户名的唯一性,如果用户名可用,将用户信息保存到数据库,并返回一个注册成功的响应。 6. 前端接收到注册响应后,可以跳转到登录页面,提示用户注册成功并自动填充用户名到登录表单中,以方便用户直接登录。 通过以上步骤,就可以实现使用Spring Boot和Vue来实现登录注册功能。该方案既保证了后端的安全性和可扩展性,又提供了良好的用户界面和交互体验。 ### 回答3: 使用Spring Boot和Vue实现登录注册功能可以分为以下几个步骤: 第一步是搭建后端框架,使用Spring Boot来构建后端应用。可以使用Spring Security来处理用户认证和授权的相关功能。在Spring Boot中配置数据库连接和数据表,用于存储用户的账号和密码等信息。 第二步是搭建前端框架,使用Vue来构建前端应用。可以使用Vue Router来处理不同页面之间的路由跳转。在前端页面上设计登录和注册的表单,并通过Ajax或者axios等工具将用户的输入发送给后端进行处理。 第三步是定义后端的API接口,用于处理前端页面发送的请求。可以使用Spring Boot的@RestController注解来定义Controller层,并通过@RequestMapping注解来定义接口的URL地址。在登录接口中,将用户输入的账号和密码进行校验,并返回登录成功或者失败的结果。在注册接口中,将用户输入的账号和密码保存到数据库中。 第四步是在前端页面中调用后端的API接口,发送登录和注册的请求。可以使用Axios或者Vue Resource等HTTP库来发送请求,并处理返回的结果。在登录成功后,可以将用户信息保存到本地的LocalStorage中,并跳转到登录后的页面。在注册成功后,可以跳转到登录页面。 第五步是对登录状态进行管理,可以使用Vuex或者LocalStorage来保存用户的登录状态。在页面刷新时,可以通过从LocalStorage中读取用户信息,并更新到Vuex中来保持用户的登录状态。 综上所述,通过使用Spring Boot和Vue,可以实现一个简单的登录注册功能。后端处理用户的登录和注册请求,并将结果返回给前端。前端页面通过调用后端的API接口来发送请求,并根据返回的结果进行相应的处理。这样就实现了基本的登录注册功能
评论 41
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值