首先用未做過任何加密的登錄作為案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>后臺登錄</title>
<link rel="stylesheet" href="__PUBLIC__/plugins/layui/css/layui.css" media="all" />
</head>
<body class="beg-login-bg">
<div class="beg-login-box">
<header>
<h1>后臺登錄</h1>
</header>
<div class="beg-login-main">
<form class="layui-form">
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="text" name="userName" id="name" autocomplete="off" placeholder="這里輸入登錄名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="password" name="password" id="pwd" autocomplete="off" placeholder="這里輸入密碼" class="layui-input">
</div>
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="test" name="captcha" id="captcha" autocomplete="off" placeholder="輸入驗(yàn)證碼" class="layui-input" style="width:50%;display:inline" >
<span style="float:right;">})</span>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-big login" onclick="return false;">
<i class="layui-icon"></i> 登錄</button>
<div class="beg-clear"></div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="__PUBLIC__/plugins/layui/layui.js"></script>
<script>
layui.use(['layer','jquery'], function() {
var layer = layui.layer,
$ = layui.jquery
$('.login').click(function(){
var name = $('#name').val();
var pwd = $('#pwd').val();
var captcha = $('#captcha').val();
if(name.length < 1){
layer.tips('請輸入用戶名', '#name');return;
}
if(pwd.length < 1){
layer.tips('請輸入密碼', '#pwd');return;
}
if(captcha.length < 1){
layer.tips('請輸入驗(yàn)證碼', '#captcha');return;
}
var url = "{:U('Login/doLogin')}";
$.post(url,{name:name,pwd:pwd,captcha:captcha},function(data){
if(data.status){
$('#code_img').click();
layer.msg(data.msg);
}else{
layer.msg("登錄成功");
}
})
})
});
</script>
</body>
</html>
本例中用到了layui，下載地址：<a >點(diǎn)我下載</a>
教程文檔：<a >文檔地址</a>
當(dāng)然這只是簡單的異步提交暇唾，未做任何加密，密碼傳輸過程中就是“裸著”的了如圖：
1483681765(1).jpg
其實(shí)很多網(wǎng)站都有這樣的問題尘奏，正常情況下影響也不不大，只不過我所在的項(xiàng)目需要將密碼加密酒甸，所以講所做的東西記錄下來。
密碼加密有兩種方法：1革骨、利用jquery插件進(jìn)行md5加密 2、RSA加密
先說第一種MD5加密蔫浆，先貼代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>后臺登錄</title>
<link rel="stylesheet" href="__PUBLIC__/plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="__PUBLIC__/css/login.css" />
</head>
<body class="beg-login-bg">
<div class="beg-login-box">
<header>
<h1>后臺登錄</h1>
</header>
<div class="beg-login-main">
<form class="layui-form">
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="text" name="userName" id="name" autocomplete="off" placeholder="這里輸入登錄名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="password" name="password" id="pwd" autocomplete="off" placeholder="這里輸入密碼" class="layui-input">
</div>
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="test" name="captcha" id="captcha" autocomplete="off" placeholder="輸入驗(yàn)證碼" class="layui-input" style="width:50%;display:inline" >
<span style="float:right;">})</span>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-big login" onclick="return false;">
<i class="layui-icon"></i> 登錄</button>
<div class="beg-clear"></div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="__PUBLIC__/plugins/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery_md5.js"></script>
<script>
function encrypt(pwd) {
return $.md5(pwd);
}
layui.use(['layer','jquery'], function() {
var layer = layui.layer,
$ = layui.jquery
$('.login').click(function(){
var name = $('#name').val();
var pwd = $('#pwd').val();
var captcha = $('#captcha').val();
if(name.length < 1){
layer.tips('請輸入用戶名', '#name');return;
}
if(pwd.length < 1){
layer.tips('請輸入密碼', '#pwd');return;
}
if(captcha.length < 1){
layer.tips('請輸入驗(yàn)證碼', '#captcha');return;
}
pwd = encrypt(pwd);//加密密碼
var url = "{:U('Login/doLogin')}";
$.post(url,{name:name,pwd:pwd,captcha:captcha},function(data){
if(data.status){
$('#code_img').click();
layer.msg(data.msg);
}else{
layer.msg("登錄成功");
}
})
})
});
</script>
</body>
</html>
jquery_md5下載地址：<a >jquery_md5下載</a>
jquery_md5是以jquery為基礎(chǔ)的插件踪蹬，跟php的MD5加密一樣使用驹溃。
加密后的登錄密碼顯示如圖：
1483684502(1).jpg
MD5加密傳輸過去不可解密，所以并不推薦使用延曙。RSA加密傳輸過去后，還可以在后臺解密亡哄。這個(gè)加密方法過兩天再寫出來枝缔。
<h1>覺得本文對你有幫助</h1>
關(guān)注簡書mid米店，持續(xù)分享中蚊惯。愿卸。。
