springboot結(jié)合mybatis-plus基于session模擬短信注冊功能

更新時間：2023年11月16日 09:02:01 作者：freedomSTUDENT

本文主要介紹了springboot結(jié)合mybatis-plus基于session模擬短信注冊功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.創(chuàng)建user表

注意： phone這個字段設(shè)置的時候最好大于11位

2. mybatis-plus插件

安裝了mybatis-plus插件后，可以根據(jù)數(shù)據(jù)庫生成代碼

首先連接數(shù)據(jù)庫

然后

3.導(dǎo)入相關(guān)依賴

<strong>muybatis-plus依賴</strong>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.2</version>
</dependency>

4.配置文件

server.port=8001
spring.datasource.url=jdbc:mysql://localhost:3306/test2?serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=1234

5.前端代碼

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" rel="external nofollow" />
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">注冊</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <form action="/user/register" method="post">
                <p>請輸入手機(jī)號</p>
                <input type="tel" placeholder="請輸入手機(jī)號" name="phone" id="phone"/>

                <input type="text" placeholder="請輸入驗證碼" name="code"/>


                <button type="button">獲取驗證碼</button>

                <p>請輸入密碼</p>
                <input type="password" placeholder="請輸入密碼" name="password"/>
                <br/>
                <input type="submit" value="注冊"/>
            </form>
            <p>已注冊，<a href="/user/login" rel="external nofollow"  target="top">去登錄</a></p>
        </div>
    </div>
</div>


<script>
    var btn = document.querySelector('button');
    var phoneDom = document.getElementById("phone")
    // 全局變量，定義剩下的秒數(shù)
    var time = 59;
    // 注冊單擊事件  X     這里是獲取驗證碼按鈕事件
    btn.addEventListener('click', function () {

        // btn.send('post',"/user/code")
        //判斷手機(jī)號為空
        if (phoneDom.value !== null && phoneDom.value !== '') {

            //發(fā)送請求，生成二維碼
            let xhr = new XMLHttpRequest();
            // methods：GET/POST請求方式等，url：請求地址，true異步（可為false同步）
            xhr.open("GET", "/user/code?phone=" + phoneDom.value, true);
            xhr.send();                                            // 發(fā)送
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {   // 成功，接收到數(shù)據(jù)
                    console.log(xhr.response);                 // 查看返回的數(shù)據(jù)(可輸出 xhr 哈)
                    // 禁用按鈕
                    btn.disabled = true;
                    // 開啟定時器
                    var timer = setInterval(function () {
                        // 判斷剩余秒數(shù)
                        if (time == 0) {
                            // 清除定時器和復(fù)原按鈕
                            clearInterval(timer);
                            btn.disabled = false;
                            btn.innerHTML = '獲取驗證碼';
                        } else {
                            btn.innerHTML = time + '秒';
                            time--;
                        }
                    }, 1000);

                } else if (xhr.status == 404) {
                    // 失敗，頁面未找到

                }
            }
        } else {
            alert("請輸入手機(jī)號！")
        }
    });
</script>


</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
body{
    background:#65cea7 ;
}
.control{
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
.item{
    width: 340px;
    height: 60px;
    background: #eeeeee;
}
.item div{
    width: 340px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.content{
    width: 100%;
}
.content div{

    margin: 20px 30px;
    text-align: left;
}
p{
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}

.content input[type="tel"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content  input[type="text"]{
    width: 55%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}

.content input[type="password"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content button{
    margin-top: 40px;
    width: 40%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: cyan;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;


}


.content input[type="submit"]{
    margin-top: 40px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: cyan;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}
.active{

    background: white;
}
.item div:hover{
    background: #f6f6f6;
}

6.后端代碼

entity層

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("user")
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    private String phone;

    private String password;

    private String  code;

mapper層

@Mapper
public interface UserMapper extends BaseMapper<User> {


}

sevice層

業(yè)務(wù)層接口

public interface IUserService extends IService<User> {



    String register(User user, HttpSession session);

    String sendCode(String phone, HttpSession session);
}

業(yè)務(wù)層實現(xiàn)類

@Slf4j
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {


    @Autowired
    private UserMapper userMapper;


    @Override
    public String sendCode(String phone, HttpSession session) {
        //這里手機(jī)號碼為空則報空指針，判斷不嚴(yán)謹(jǐn)
        if (StringUtils.hasText(phone) && RegexUtil.isMobile(phone)) {
            //生成驗證碼
            String yzmCode = RandomUtil.randomNumbers(6);

            //保存驗證碼到session
            session.setAttribute("yzmCode", yzmCode);

            System.out.println("發(fā)送短信驗證碼成功" + yzmCode);
            return "發(fā)送短信驗證碼成功!驗證碼是：" + yzmCode;
        } else {
            return "手機(jī)號格式錯誤";
        }
    }


    @Override
    public String register(User user, HttpSession session) {
        //判斷輸入手機(jī)號的格式
        if (StringUtils.hasText(user.getPhone()) && RegexUtil.isMobile(user.getPhone())) {
            //從session拿出緩存的驗證碼
            Object cacheCode = session.getAttribute("yzmCode");
            String code = user.getCode();
            if (cacheCode == null || !cacheCode.equals(code)) {
                return "html/register";
            }
            //3.根據(jù)手機(jī)號查詢用戶
            User user1 = query().eq("phone", user.getPhone()).one();
            if (user1 == null) {
                userMapper.insert(user);
                return "html/login";
            }
            session.setAttribute("user1", user1);
            return "html/register";
        }
        return "html/register";
    }
}

controller層

@Controller
@RequestMapping("user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/code")
    @ResponseBody
    public String sendCode(String phone, HttpSession session) {
        return userService.sendCode(phone, session);
    }

    @RequestMapping("/register")
    public String register(User user, HttpSession session) {
        return userService.register(user, session);
    }
}

工具類（utils)

public class RegexUtil {


    public static boolean isMobile(String str) {
        Pattern p = null;
        Matcher m = null;
        boolean b = false;
        p = Pattern.compile("^[1][3,4,5,8][0-9]{9}$"); // 驗證手機(jī)號
        m = p.matcher(str);
        b = m.matches();
        return b;
    }
}

7.調(diào)試

前端頁面

1. 未輸入手機(jī)號的時候，直接點擊獲取驗證碼按鈕

2.輸入手機(jī)號,但是格式錯誤

3.輸入手機(jī)號，并且格式正確

驗證碼是模擬生成的

 String yzmCode = RandomUtil.randomNumbers(6);

4.調(diào)試的時候驗證碼錯誤或者手機(jī)重復(fù)注冊都是還在注冊頁面

8.代碼解析

實體類

實體類的屬性對應(yīng)數(shù)據(jù)user表字段

控制層主要寫了兩個接口

一個是發(fā)送驗證碼接口，當(dāng)我們點擊前端頁面獲取驗證碼按鈕的時候，這個接口響應(yīng)

獲取驗證碼事件

這里主要使用了ajax技術(shù)

<script>
    var btn = document.querySelector('button');
    var phoneDom = document.getElementById("phone")
    // 全局變量，定義剩下的秒數(shù)
    var time = 59;
    // 注冊單擊事件  X     這里是獲取驗證碼按鈕事件
    btn.addEventListener('click', function () {

        // btn.send('post',"/user/code")
        //判斷手機(jī)號為空
        if (phoneDom.value !== null && phoneDom.value !== '') {

            //發(fā)送請求，生成驗證碼
            let xhr = new XMLHttpRequest();
            // methods：GET/POST請求方式等，url：請求地址，true異步（可為false同步）
            xhr.open("GET", "/user/code?phone=" + phoneDom.value, true);
            xhr.send();                                            // 發(fā)送
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {   // 成功，接收到數(shù)據(jù)
                    console.log(xhr.response);                 // 查看返回的數(shù)據(jù)(可輸出 xhr 哈)
                    // 禁用按鈕
                    btn.disabled = true;
                    // 開啟定時器
                    var timer = setInterval(function () {
                        // 判斷剩余秒數(shù)
                        if (time == 0) {
                            // 清除定時器和復(fù)原按鈕
                            clearInterval(timer);
                            btn.disabled = false;
                            btn.innerHTML = '獲取驗證碼';
                        } else {
                            btn.innerHTML = time + '秒';
                            time--;
                        }
                    }, 1000);

                } else if (xhr.status == 404) {
                    // 失敗，頁面未找到

                }
            }
        } else {
            alert("請輸入手機(jī)號！")
        }
    });
</script>

控制層調(diào)用service的接口里的一個方法

實現(xiàn)類實現(xiàn)該方法

方法如下

 @Override
    public String sendCode(String phone, HttpSession session) {
        //這里手機(jī)號碼為空則報空指針，判斷不嚴(yán)謹(jǐn)
        if (StringUtils.hasText(phone) && RegexUtil.isMobile(phone)) {
            //生成驗證碼
            String yzmCode = RandomUtil.randomNumbers(6);

            //保存驗證碼到session
            session.setAttribute("yzmCode", yzmCode);

            System.out.println("發(fā)送短信驗證碼成功" + yzmCode);
            return "發(fā)送短信驗證碼成功!驗證碼是：" + yzmCode;
        } else {
            return "手機(jī)號格式錯誤";
        }
    }

1.首先判斷手機(jī)號的格式

2.如果手機(jī)號格式不為空，且手機(jī)號格式正確

通過隨機(jī)生成驗證碼，這里只是簡單的模擬短信驗證碼，真正的實現(xiàn)這里可以調(diào)用相關(guān)的方法

3.將驗證碼保存到session中

4.在控制臺輸出該驗證碼

一個是注冊接口

  @Override
    public String register(User user, HttpSession session) {
        //判斷輸入手機(jī)號的格式
        if (StringUtils.hasText(user.getPhone()) && RegexUtil.isMobile(user.getPhone())) {
            //從session拿出緩存的驗證碼
            Object cacheCode = session.getAttribute("yzmCode");
            String code = user.getCode();
            if (cacheCode == null || !cacheCode.equals(code)) {
                return "html/register";
            }
            //3.根據(jù)手機(jī)號查詢用戶
            User user1 = query().eq("phone", user.getPhone()).one();
            if (user1 == null) {
                userMapper.insert(user);
                return "html/login";
            }
         
            return "html/register";
        }
        return "html/register";
    }
}

1.判斷手機(jī)號格式

2.判斷輸入的驗證碼和session保存的驗證碼是否相等

3.根據(jù)手機(jī)號查詢該用戶是否存在

  User user1 = query().eq("phone", user.getPhone()).one();

到此這篇關(guān)于springboot結(jié)合mybatis-plus基于session模擬短信注冊功能的文章就介紹到這了,更多相關(guān)springboot session模擬短信注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: