web前端练习1----实现登录功能

最新推荐文章于 2024-05-12 13:32:53 发布

zhaihaohao1

最新推荐文章于 2024-05-12 13:32:53 发布

阅读量1.9w

点赞数 9

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/84104074

版权

web前端2018 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

效果图：

在这里插入图片描述
思路：
1html+css 完成基本布局
2Ajax请求数据完成登录功能
3把登录成功后的 token和用户名传到下个页面

代码：我把所有代码：html css js 都写在了一个文件里
Login.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--手机上运行时，加上这句话-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title></title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .title {
            font-size: 20px;
            background-color: cornflowerblue;
            color: #fff;
           /*
            * 里面的文字居中
            */
            line-height: 50px;
            text-align: center;
            /*
             *绝对定位
             */
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
        }

        .content {
            margin-top: 110px;
        }

        .mybutton {
            width: 200px;
            line-height: 40px;
            text-align: center;
            background-color: cornflowerblue;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 20px;
            color: #fff;
        }

        .shurukuang {
            /*
             * 自己居中
             * 要设置为块级元素
             */
            display: block;
            margin: 0 auto;

            width: 200px;
            height: 25px;
            margin-top: 1px;
            border: none;
            border-bottom: 1px solid;
            margin-top: 5px;
            text-indent: 4px;
            /*
             * outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
             * 这里是去掉原有的，鼠标点击后的黄色轮廓
             */
            outline: none;
        }
    </style>
</head>
<body>


<div class="title">
    登录界面
</div>

<div class="content">
    <input id="username" class="shurukuang" type="text" placeholder="手机号" value="zhh1">
    <input id="password" class="shurukuang" type="password" placeholder="密码" value="123456">
</div>
<div class="mybutton" onclick="myClick()">登录</div>


<script>

    // 请求路径
    var httpurl = "/api2/ddgl/login";
    // 数据请求
    function myClick() {
        var usernamestr = document.getElementById("username").value;
        var passwordstr = document.getElementById("password").value;
        if(usernamestr==""||usernamestr==null){
            alert("用户名为空");
            return;
        }
        if(passwordstr==""||passwordstr==null){
            alert("密码为空");
            return;
        }

        $.ajax({
            url: httpurl,//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                username: usernamestr,
                password: passwordstr,
                uniqueDeviceIdentifier: 2
            },
            success: function (data, textStatus, jqXHR) {//请求成功之后执行的回调函数
                if(data.resultCode!=200){
                    alert("用户名或密码错误")
                    return;
                }
                var token = data.extras.token;
                console.log(token);
                location.href = "Listview1.html?" + "token=" + token + "&&" + usernamestr;

            },
            error: function (jqXHR, textStatus, errorThrown) {//请求失败之后执行的回调函数
                console.log(errorThrown);
            }
        });
    }

</script>

</body>
</html>

注意：
1记着要引入jquery-2.1.4.min.js 包
2ajax由于跨域问题，不能访问到，需要nginx 反向代理

nginx 下载安装使用
https://download.csdn.net/download/zhaihaohao1/10786751
源码下载
源码：h5源码----MyListView1
静态源码：h5源码----Listdemo0
https://download.csdn.net/download/zhaihaohao1/10786731

zhaihaohao1

关注

9
点赞
踩
91

收藏

觉得还不错? 一键收藏
0
评论
web前端练习1----实现登录功能

效果图：思路：1html+css 完成基本布局2Ajax请求数据完成登录功能3把登录成功后的 token和用户名传到下个页面代码：我把所有代码：html css js 都写在了一个文件里Login.html&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head lang=&quot;en&quot;&amp;gt; &a
复制链接

扫一扫

专栏目录