H5登录界面

最新推荐文章于 2024-08-16 15:34:57 发布

月上谷

最新推荐文章于 2024-08-16 15:34:57 发布

阅读量2.7w

点赞数 7

分类专栏：前端开发工程师文章标签： jquery .net html css

本文链接：https://blog.csdn.net/weixin_37839390/article/details/78228611

版权

前端开发工程师专栏收录该内容

9 篇文章 1 订阅

订阅专栏

H5登录界面

一、登录界面：

所用技术：前端：html+css+js+jquery+layer.js+icoonfont
后端：.net
1、移动端页面的制作，一般使用百分比布局+rem布局，但是rem需要在有ui的psd原型图才能使用
2、移动端页面的制作不要忘记添加适配代码viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3、当页面中的盒子大于浏览器默认盒子大小的时候，说明是宽高出问题了，这个时候需要调整
4、做登录页面的时候，首先需要判断用户名密码是否已经输入了，没有输入的需要提示
5、做ajax交互的时候data中的参数是前端需要向后台传入的参数；回调函数里面的数据是后台向前段传入的数据
6、解析的时候，后入后端传入的是json数据，需要使用json.stringify来解析
7、回调函数里，需要先从后端获取数据，获取数据的时候，使用var xxx = res.xxx的格式

二、详细代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/login/login.css">
<link rel="stylesheet" type="text/css" href="./fonts/icon_login/iconfont.css">
<script src="http://119.29.218.203:60/JScript/Jquery/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="./js/layer-master/dist/mobile/need/layer.css">
<script src="./js/layer-master/dist/layer.js"></script>
</head>
<body>
     <div class="login">
        <div class="information">
            <div class="topic">登录界面</div>
        </div>            
        <form id="loginForm" action="" class="">
            <div class="carName">
                <span class="ionic_use">
                    <i class="iconfont icon-yonghuming"></i>
                    <input id="username" type="text" class="usernames" placeholder="用户名"  style=" background-color: #ffffff;">     
                </span>
            </div>
            <div class="carPassword">
                <span class="ionic_pass">
                    <i class="iconfont icon-mima"></i>
                    <input id="password" type="password" class="passwords" placeholder="密码">                    
                </span>
            </div>
            <div>
                <input id="submit" type="button" value="登  录" />
            </div>
        </form> 
    </div>
    <script>
            function confirm() {
                var userName = $('#username').val(); 
                var passWord = $('#password').val();
                var jsonData = {"userName":userName,"passWord":passWord};//.net后台处理的数据
                if(userName == "" || passWord == "") { 
                    layer.msg('账号密码均不能为空！', {icon: 5});
                } else { 
                    $.ajax({
                        url: 'http://119.29.218.203:20770/User.asmx/CheckLogin', 
                        type: 'post',
                        data: {
                            "para" : JSON.stringify(jsonData)
                        },
                        dataType: 'json',
                        success: function(data) {
                               console.log(data);
                            if(data.Result == 1) {                 
                                var info = data.ErrorInfo;
                                var userId = data.UserId;
                                var useName = data.UserName;
                                var deptId = data.DeptId;
                                var deptName = data.DeptName;
                                var isAudio = data.IsAudio;
                                var admin = data.Admin;
                                var guid = data.GUID;
                                localStorage.setItem("userName", userName);
                                localStorage.setItem("passWord", passWord);
                                localStorage.setItem("guid", guid);
                                localStorage.setItem("userId", userId);
                                window.location.href = './home.html';
                            } else {
                                    layer.msg('用户名或账号输入错误！', {icon: 5});
                                }
                        }   
                    })
                }
            }
            $('#submit').click(function() {
                confirm();
                return false;
            })
        </script>
</body>
</html>