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>三、效果圖
