使用JS的promise实现前端登录页面和后端的交互

最新推荐文章于 2024-05-30 15:31:25 发布

云先生呀

最新推荐文章于 2024-05-30 15:31:25 发布

阅读量2.5k

点赞数 4

文章标签：前端 javascript 交互

本文链接：https://blog.csdn.net/qq_53225969/article/details/122896456

版权

使用JS的promise实现前端登录页面和后端的交互

个人认为JS的promise的作用和ajax差不多，形式上也是相似，接下来一起来看看

1、布局一个简单的前端登录页面，不要求细致，能看就问题不大。
2、将布局好的HTML页面加上css样式。
3、用spring框架写一个简单的登录页面。
4、通过JS的promise来完成互动。

1、布局一个简单的前端登录页面，不要求细致，能看就行，问题不大。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/indexTest.css" rel="stylesheet" type="text/css">
    <script src="../static/js/index.js"></script>
</head>
<body>
<div class="main">
    <div class="start">

        <div class="left">
            <div class="leftcenter">
                <h1>Welcome</h1>
                <h1>某某后台管理系统</h1>
            </div>
        </div>
        <div class="right">
            <div class="rightcenter">
                <div class="c1"><input type="text" placeholder="请输入用户名" id="username"></div>
                <div class="c2"><input type="text" placeholder="请输入密码" id="password"></div>
                <div class="c3"><input type="text" placeholder="请输入验证码"></div>
                <div class="c4">
                    <div class="c44">
                        <input type="checkbox">记住密码
                    </div>
                </div>
                <div class="c5">
                    <div class="c55">
                        <input type="button" value="登录" id="now" onclick="index()">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>

2、将布局好的HTML页面加上css样式。

在这里插入图片描述

这里有意思的是，大家如果给页面加上背景图片，想得到一个全屏的效果，老是看到边框有边距，这里只需要简单的设置：

body {
padding: 0;
margin: 0;
}

html{
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    background: url("../../templates/11.jpg") no-repeat ;
    background-size: 100% 100%;
    position: relative;

}

.main{
    height: 580px;
    width: 1260px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.start{
    height: 400px;
    width: 700px;
    border: 2px rgba(136, 255, 0, 0.7) solid;
    position: absolute;
    border-radius: 25px;
}

.left{
    padding: 0;
    margin-top: 10px;
    height: 400px;
    width: 340px;
    opacity: 0.8;
    text-align: center;
    float: left;

}

.leftcenter{
    height: 200px;
    width: 340px;
    margin-top: 123px;
    float: left;
}
.right{
    padding: 0;
    margin: 0;
    height: 400px;
    width: 350px;
    float: right;
}
.rightcenter{
    height: 200px;
    width: 350px;
    margin-top: 80px;
    border-left: #88ff00;
    float: right;
}

.c1 input{
    border: none;
    outline: medium;
}
.c2 input{
    border: none;
    outline: medium;
}
.c3 input{
    border: none;
    outline: medium;
}

.c1{
    margin-top: 0px;
    text-align: center;
}

.c2{
    margin-top: 50px;
    text-align: center;

}

.c3{
    margin-top: 52px;
    text-align: center;

}
.c4{
    margin-top: 54px;
    text-align: center;
}

.c44{
    width: 144px;
    margin-left: 70px;
}

.c5{
    margin-top: 50px;
    text-align: center;
}
.c55{
    width: 144px;
    margin-left: 48px;
}
button{
    width: 143px;
    height: 20px;
    background-color: #88ff00;
}

3、用spring框架写一个简单的登录页面。

在这里插入图片描述

 @RequestMapping("login")
    public String login(String name, String password, HttpServletResponse response) {
        response.setHeader("Access-Control-Allow-Origin", "*");
        //允许请求的方法
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");

        response.setHeader("Access-Control-Expose-Headers", "Token");

        response.setHeader("Access-Control-Allow-Headers", "Token");

        response.setHeader("Access-Control-Allow-Credentials", "true");

        JSONObject object = new JSONObject();

        if (name.equals("")) {
            object.put("1","用户名不能为空！");
            return object.toString();
        }
        if (password.equals("")) {
            object.put("2","登录密码不能为空！");
            return object.toString();

        }

        User user = userService.selectUserByName(name, password);
        if (user == null) {
            object.put("3","登录失败！");
            return object.toString();
        } else {
            object.put("4","登录成功！");
            return object.toString();
        }
    }

这里会碰到一个跨域访问的问题，解决方法如下：

 response.setHeader("Access-Control-Allow-Origin", "*");
        //允许请求的方法
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");

        response.setHeader("Access-Control-Expose-Headers", "Token");

        response.setHeader("Access-Control-Allow-Headers", "Token");

        response.setHeader("Access-Control-Allow-Credentials", "true");

4、通过JS的promise来完成互动。

function index() {
	//js通过input的id属性，拿到前端页面输入的用户名，密码
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;

	//js前端向后端发送请求，同时把前端页面的用户名，密码拼接传给后端
    let called = new Promise(
        (a, b) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", 'http://localhost:8000/login?name=' + username + '&password=' + password);
            xhr.onload = () => a(xhr.responseText);
            xhr.onerror = () => b(xhr);
            xhr.send();
        }
    );

	//js通过对后端返回的请求，解析拿到想要的数据
    called
        .then((e) => {
            console.log(e)
            let date = JSON.parse(e);
            document.getElementById('now').innerHTML = date.msg;
            alert(e)
        })
        .catch((e) => {
            console.log("失败了", e);
        })

}

最后测试成功：

在这里插入图片描述

云先生呀

关注

4
点赞
踩
45

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用JS的promise实现前端登录页面和后端的交互

使用JS的promise实现前端登录页面和后端的交互个人认为JS的promise的作用和ajax差不多，形式上也是相似，接下来一起来看看1、布局一个简单的前端登录页面，不要求细致，能看就问题不大。2、将布局好的HTML页面加上css样式。3、用spring框架写一个简单的登录页面。4、通过JS的promise来完成互动。1、布局一个简单的前端登录页面，不要求细致，能看就行，问题不大。<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫