（舊）springboot 快速實現登入、註冊功能（附Demo原始碼）

阿新 • • 發佈：2022-12-02

1.直接跑通Demo，修改配置檔案。匯入資料庫sql檔案即可。
2.跟著一步一步實現。
當然你也可以先跑通Demo，在嘗試自己跟著來一遍

1.跑通Demo

需要原始碼和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
試試能否註冊成功