用后端实现一个简单的登录模块2 前端页面

7仔QQ

已于 2024-08-13 09:24:41 修改

阅读量904

点赞数 16

文章标签：前端 java spring boot

于 2024-08-12 15:28:54 首次发布

本文链接：https://blog.csdn.net/m0_60227293/article/details/141032257

版权

该模块能做到的功能：

1阶：输入账号和密码，输入正确即可返回登录成功的信息，反之则登录失败

2阶：有简单的前端页面，有登录成功和失败的弹窗，还有登录成功的主页面

3阶：前端页面的注册也可以使用，注册完的帐号能直接登录

1阶结束了，咱们2阶继续

把前端页面写一下

前端登录、注册页面预览图，登录成功或失败上方会有浏览器窗口提示

前端借鉴了一下这个的视频的页面https://www.bilibili.com/video/BV1zD4y1D7y4/%EF%BC%9Fshare_source=copy_web&vd_source=21f3fc7e7628e67cf8020c7bc3880a85 视频演示源码，源自视频的简介https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501

上面的链接只是标明原出处，不影响接下来的步骤

在resources包里新建static包，在里面新建一个file文件，命名login.html，没错这是一个html文件

再添加一个file文件，命名home.html，这两个页面分别是登录页面和登录后的主页面

login.html

样式借鉴自上面的第一个链接视频

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">登录</div>
<!--        <div>注册</div>-->
    </div>
    <div class="content">
        <div style="display: block;">
            <p>账号</p>
            <input type="text"  id="name"/>
            <p>密码</p>
            <input type="password"  id="password"/>
            <br/>
            <input type="submit" value="登录" id="btn"/>
        </div>
<!--        <div>-->
<!--            <p>账号</p>-->
<!--            <input type="text" placeholder="请输入11位手机号" id="rename" />-->
<!--            <p>密码</p>-->
<!--            <input type="password" placeholder="请输入至少7位同时带字母和数字的密码" id="repassword" />-->
<!--            <br/>-->
<!--            <input type="submit" value="注册" id="reg"/>-->
<!--        </div>-->
    </div>
</div>

<script>
    window.onload = function(){
        var item = document.getElementsByClassName("item");
        var it = item[0].getElementsByTagName("div");

        var content = document.getElementsByClassName("content");
        var con = content[0].getElementsByTagName("div");

        for(let i=0;i<it.length;i++){
            it[i].onclick = function(){
                for(let j=0;j<it.length;j++){
                    it[j].className = '';
                    con[j].style.display = "none";
                }
                this.className = "active";
                it[i].index=i;
                con[i].style.display = "block";
            }
        }
    }

    var btn = document.getElementById("btn")
    btn.onclick = function () {
        const user = {
            name:document.getElementById("name").value,
            password:document.getElementById("password").value
        }
        axios.post("http://localhost:8080/doLogin",user)
            .then(res => {
                if(res.data.code == 200){
                    location.href="home.html"
                    localStorage.setItem("name",res.data.data.name);
                    localStorage.setItem("password",res.data.data.password);
                    alert("登录成功,欢迎："+ res.data.data.name)
                }
                else {
                    alert("登录失败")
                }
            })
    }

    // var reg = document.getElementById("reg")
    // reg.onclick = function () {
    //     const user = {
    //         name:document.getElementById("rename").value,
    //         password:document.getElementById("repassword").value
    //     }
    //     var re=/^1\d{10}$/;
    //     var pw= new RegExp("^(?=.{7,})(((?=.*[A-Z])|(?=.*[a-z]))(?=.*[0-9])).*$", "g");
    //     if (re.test(user.name) && pw.test(user.password)){
    //     axios.post("http://localhost:8080/register",user)
    //         .then(res => {
    //                 if(res.data.code == 200){
    //                     alert("注册成功")
    //                 }
    //                 else {
    //                     alert("注册失败")
    //                 }
    //         })}
    //     else {
    //     alert("手机号或密码格式不正确");
    //     }
    // }
</script>

</body>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #f3f3f3;
    }
    .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: 170px;
        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;
        display: none;
        text-align: left;
    }
    p{
        color: #4a4a4a;
        margin-top: 30px;
        margin-bottom: 6px;
        font-size: 15px;
    }
    .content input[type="text"], .content input[type="password"]{
        width: 100%;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #adadad;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .content input[type="submit"]{
        margin-top: 40px;
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: 1px solid #adadad;
        background: #00dd60;
        cursor: pointer;
        letter-spacing: 4px;
        margin-bottom: 40px;
    }
    .active{
        background: white;
    }
    .item div:hover{
        background: #f6f6f6;
    }
</style>
</html>

前端的登录相对于注册讲的能轻松一些：

点击登录后，前端会将我们输入的账号密码放在一个叫user的对象里，然后使用post方法带着user将url传给后端，根据后端返回来的数据来确定是登录成功还是失败。

这里一共有三处被注掉的代码，这些是用来写注册功能的，现在用不上。

等说到注册功能咱再解开就可以，如果你现在就想解开也没事，不影响接下来代码的运行。

解除/添加批注快捷键：选中全部批注或需要批注的代码， ctrl+/

home.html

这是一个简单的主页面，毕竟咱主要写的是后端，前端凑合能看就行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">这是主页面</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <input type="submit" value="退出登录" id="btn"/>
        </div>
    </div>
</div>
</body>

<script>

    window.onload = function(){
        let name = localStorage.getItem("name");
        let password = localStorage.getItem("password");
        if (name == null || password == null){
            location.href="login.html"
            alert("请先登录")
        }
        const user = {
            name:name,
            password:password
        }
        axios.post("http://localhost:8080/doLogin",user)
            .then(res => {
                if(res.data.code != 200){
                    location.href="login.html"
                    alert("请先登录")
                }
            })

        var item = document.getElementsByClassName("item");
        var it = item[0].getElementsByTagName("div");

        var content = document.getElementsByClassName("content");
        var con = content[0].getElementsByTagName("div");

        for(let i=0;i<it.length;i++){
            it[i].onclick = function(){
                for(let j=0;j<it.length;j++){
                    it[j].className = '';
                    con[j].style.display = "none";
                }
                this.className = "active";
                it[i].index=i;
                con[i].style.display = "block";
            }
        }
    }

    var btn = document.getElementById("btn")
    btn.onclick = function () {
        localStorage.removeItem("name");
        localStorage.removeItem("password");
        location.href = "login.html"
    }

</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #f3f3f3;
    }
    .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;
        display: none;
        text-align: left;
    }
    p{
        color: #4a4a4a;
        margin-top: 30px;
        margin-bottom: 6px;
        font-size: 15px;
    }
    .content input[type="text"], .content input[type="password"]{
        width: 100%;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #adadad;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .content input[type="submit"]{
        margin-top: 40px;
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: 1px solid #adadad;
        background: #00dd60;
        cursor: pointer;
        letter-spacing: 4px;
        margin-bottom: 40px;
    }
    .active{
        background: white;
    }
    .item div:hover{
        background: #f6f6f6;
    }
</style>
</html>

这里加了个本地存储，如果在登录界面登录成功，前端会把输入正确的账号和密码的键和值保存在浏览器。这样就能保证主页面只有在登录状态下才能正常显示，否则（运行后端后直接通过home.html 右上角的浏览器图标直接进入主页面）会弹回登录界面。