BJ_web_developers / gateway

Commit 025e127ebaa4b681716c5e27e9d6ad60e6fa3691

Authored by chenbiao
1 parent 6a7c6b4b

add 综合平台入口 登录添加验证码以及校验功能

Inline Side-by-side
Showing 6 changed files with 140 additions and 159 deletions
css/login.css
  View file @025e127
... ... @@ -69,6 +69,14 @@ html,body{
69 69 height: 40px;
70 70 background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center;
71 71 }
  72 +.login-yzm-bg{
  73 + float: left;
  74 + display: inline-block;
  75 + vertical-align: middle;
  76 + width: 40px;
  77 + height: 40px;
  78 + background:rgba(170,171,171,.8) url("../img/yzm.png") no-repeat center center;
  79 +}
72 80 .form-control{
73 81 border-radius: 0;
74 82 }
... ... @@ -319,7 +327,7 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
319 327 text-align: center;
320 328 line-height: 40px;
321 329 font-size: 14px;
322   - background-color: rgba(255,255,255,.75);
  330 + /*background-color: rgba(255,255,255,.75);*/
323 331 border: none;
324 332 }
325 333  
... ... @@ -386,3 +394,21 @@ img { border:none; }
386 394  
387 395 #supersized img { max-width: none !important }
388 396  
  397 +/* 验证码 */
  398 +.login_input_txtSmall{
  399 + float: left;
  400 + width: 150px !important;
  401 +}
  402 +
  403 +#code {
  404 + margin-left: 10px;
  405 + float: left;
  406 + width: 90px;
  407 + height: 40px;
  408 + font-weight: bold;
  409 + border: 0;
  410 + letter-spacing: 2px;
  411 + color: #D71D20;
  412 + font-size: 24px;
  413 + /*background: #f7f7f7;*/
  414 +}
... ...
img/yzm.png 0 → 100644
View file @025e127

392 Bytes
js/config.js
  View file @025e127
1 1 //阿里云正式环境，别删
  2 +// baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址
2 3  
3   - // baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址
4   -
5   -//阿里云环境，别删 丹阳
6   -// baseUrl='http://106.15.191.5:8088/'
7   -
8   -
9   -//阿里云测试环境，别删
10   - baseUrl = 'http://39.98.54.240:8088/';// url公用地址
11   -
  4 +//赤峰测试环境，别删
  5 + baseUrl = 'http://dev.renniting.cn/sys/';// url公用地址
12 6  
13 7 //demo环境，别删
14 8 // baseUrl = 'http://47.96.41.88:18088/';// url公用地址
... ...
js/login.js
  View file @025e127
1   -function slide() {
2   - var slideBox = $('#slide_box')[0];
3   - var slideXbox = $('#slide_xbox')[0];
4   - var btn = $('#btn')[0];
5   - var slideBoxWidth = slideBox.offsetWidth;
6   - var btnWidth = btn.offsetWidth;
7   - //pc绔�
8   - btn.ondragstart = function () {
9   - return false;
10   - };
11   - btn.onselectstart = function () {
12   - return false;
13   - };
14   - btn.onmousedown = function (e) {
15   - var disX = e.clientX - btn.offsetLeft;
16   - document.onmousemove = function (e) {
17   - var objX = e.clientX - disX + btnWidth;
18   - if (objX < btnWidth) {
19   - objX = btnWidth
20   - }
21   - if (objX > slideBoxWidth) {
22   - objX = slideBoxWidth
23   - }
24   - $('#slide_xbox').width(objX + 'px');
25   - };
26   - document.onmouseup = function (e) {
27   - var objX = e.clientX - disX + btnWidth;
28   - if (objX < slideBoxWidth) {
29   - objX = btnWidth;
30   - } else {
31   - objX = slideBoxWidth;
32   - locked = true;
33   - $('#slide_xbox').html('验证通过<div id="btn"></div>');
34   - }
35   - $('#slide_xbox').width(objX + 'px');
36   - document.onmousemove = null;
37   - document.onmouseup = null;
38   - };
39   - };
40   - //绉诲姩绔�
41   - var cont = $("#btn");
42   - var startX = 0, sX = 0, moveX = 0,leftX = 0;
43   - cont.on({//缁戝畾浜嬩欢
44   - touchstart: function (e) {
45   - startX = e.originalEvent.targetTouches[0].pageX;//鑾峰彇鐐瑰嚮鐐圭殑X鍧愭爣
46   - sX = $(this).offset().left;//鐩稿浜庡綋鍓嶇獥鍙杞寸殑鍋忕Щ閲�
47   - leftX = startX - sX;//榧犳爣鎵€鑳界Щ鍔ㄧ殑鏈€宸︾鏄綋鍓嶉紶鏍囪窛div宸﹁竟璺濈殑浣嶇疆
48   - },
49   - touchmove: function (e) {
50   - e.preventDefault();
51   - moveX = e.originalEvent.targetTouches[0].pageX;//绉诲姩杩囩▼涓璛杞寸殑鍧愭爣
52   - var objX = moveX - leftX + btnWidth;
53   - if (objX < btnWidth) {
54   - objX = btnWidth
55   - }
56   - if (objX > slideBoxWidth) {
57   - objX = slideBoxWidth
58   - }
59   - $('#slide_xbox').width(objX + 'px');
60   - },
61   - touchend: function (e) {
62   - var objX = moveX - leftX + btnWidth;
63   - if (objX < slideBoxWidth) {
64   - objX = btnWidth;
65   - } else {
66   - objX = slideBoxWidth;
67   - locked = true;
68   - $('#slide_xbox').html('验证通过<div id="btn"></div>');
69   - }
70   - $('#slide_xbox').width(objX + 'px');
71   - }
72   - });
73   -}
74   -slide();
  1 +// edit by chenbiao 2022/04/22
75 2 /**
76 3 * 输入框内容检测插件
77 4 */
... ... @@ -160,63 +87,77 @@ function password(obj){
160 87 $('#password').on("blur", function() { //验证邮箱地址
161 88 password($(this));
162 89 });
163   -//验证码验证
164   -//function verification(obj) {
165   -// var _this = obj;
166   -// if(_this.val() !== '1234'){
167   -// _this.prev().addClass('glyphicon glyphicon-remove');
168   -// return false;
169   -// }else{
170   -// _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
171   -// }
172   -//}
173   -//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址
174   -// verification($(this));
175   -//});
176   -//点击登陆
  90 +var fun={
  91 + init:function () {
  92 + $('#login_code_ifo').text('');
  93 + //获取验证码
  94 + createCode();
  95 + }
  96 +};
  97 +fun.init();
  98 +$(document).on('click','#code',function () {
  99 + //获取验证码
  100 + createCode();
  101 +})
  102 +
  103 +
  104 +//点击登录
177 105 $('#login-btn').on('click',function () {
178 106 var obj1 = $('#userName');
179 107 var obj2 = $('#password');
180 108 username(obj1);
181 109 password(obj2);
182   - //verification($('#login_imgCode_value'));
183   - if(flagAjax){
184   - var verificationText = $('#slide_xbox').text();
185 110  
186   - if(verificationText != '验证通过'){
187   - $('#login_error_ifo').text("请拖动滑块验证");
188   - }else{
  111 + // 验证码
  112 + var imgCode=document.getElementById("code").value;
  113 + var imgCodeId=$('#code').attr('data-id');
  114 + var inputCode = document.getElementById("codedate").value.toUpperCase(); //取得输入的验证码并转化为大
  115 + //校验 验证码是否匹配正确
  116 + if(inputCode.length <= 0) { //若输入的验证码长度为0
  117 + //alert("请输入验证码！"); //则弹出请输入验证码
  118 + $('#login_error_ifo').text("请输入验证码！");
  119 + return;
  120 + }
  121 + if(inputCode != imgCode ) { //若输入的验证码与产生的验证码不一致时
  122 + //alert("验证码输入错误!"); //则弹出验证码输入错误
  123 + $('#login_error_ifo').text("验证码输入错误!");
  124 + createCode();//刷新验证码
  125 + document.getElementById("codedate").value = "";//清空文本框
  126 + return;
  127 + }
189 128  
190   - var Username= $('#userName').val();
191   - var Password= $('#password').val();
192   - // var imageCode = $imageCodeValue.val();
193   - // alert("username is "+username+"password is"+password+"code is "+imageCode);
  129 + $('#login_error_ifo').text('');
194 130  
  131 + if(flagAjax){
  132 + var Username= $('#userName').val();
  133 + var Password= $('#password').val();
  134 + // var imageCode = $imageCodeValue.val();
  135 + // alert("username is "+username+"password is"+password+"code is "+imageCode);
195 136  
196   - var opts = {};
197   - opts.method = "POST";
198   - opts.url = dataUrl.util.getLogin();
199   - opts.success = loginSuccess;
200 137  
201   - var data = {
202   - 'terminalSource':6,
203   - };
204   - data.clientType = sysComm.clientType;
205   - data.sysCode = sysComm.sysCode;
206   - data.grantType = sysComm.grantType;
207   - data.username = Username;
208   - data.password = Password;
209   - //data.imgCode = imageCode;
  138 + var opts = {};
  139 + opts.method = "POST";
  140 + opts.url = dataUrl.util.getLogin();
  141 + opts.success = loginSuccess;
210 142  
211   - data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂
212   - opts.data = JSON.stringify(data);
213   - sysAjax(opts);
214   - }
  143 + var data = {
  144 + // 'terminalSource':6,
  145 + };
  146 + data.clientType = sysComm.clientType;
  147 + data.sysCode = sysComm.sysCode;
  148 + data.grantType = sysComm.grantType;
  149 + data.username = Username;
  150 + data.password = Password;
  151 + data.imgCodeId = imgCodeId;
  152 + data.imgCode = imgCode;
  153 + data.expiresIn = 60 * 60 * 12;//默认12小时
  154 + opts.data = JSON.stringify(data);
  155 + sysAjax(opts);
215 156  
216 157  
217 158 }
218 159  
219   - // window.location.href='index.html';
  160 +
220 161 });
221 162 //回车事件
222 163 $('#login_imgCode_value').keyup(function(event){
... ... @@ -238,29 +179,45 @@ $(&#39;.verification-logo&#39;).on(&#39;click&#39;,function () {
238 179 $("#login_imgCode_value").val("");
239 180 $('.verification-logo').removeClass('glyphicon glyphicon-remove');
240 181 });
241   -getImgCode();
242 182  
243   -//点击换验证码
244   -$('#login_imgCode').on('click', function () {
245   - getImgCode();
246   -});
247   -function getImgCode() {
248   - var opt = {
249   - method: "get",
250   - url: dataUrl.util.getLoginImageCode(),
251   - success: imgCodeSuccess
252   - }
253   - sysAjax(opt);
254   -}
255   -function imgCodeSuccess(res) {
256   - if (res.code === '8888') {
257   - var imageCodeStr = res.data.imageCodeStr;
258   - var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr;
259   - fn.setToken(res.data.authTokenid);
260   - $imageCode.attr('src', base64ImgStr);
261   - }
  183 +/**
  184 + * 验证码获取 请求接口
  185 + * Get getloginimgcode
  186 + * @param
  187 + */
  188 +
  189 +var syscode; //在全局定义验证码
  190 +function createCode() {
  191 + // 发出Ajax请求
  192 + $.ajax({
  193 + type: "GET",
  194 + url: dataUrl.util.imageCodeStr(),
  195 + data: null,
  196 + dataType: null,
  197 + processData: true,
  198 + traditional: true,
  199 + success: function (res) {
  200 +
  201 + if (res.code === '8888') {
  202 + var data = res.data;
  203 + var imgCodeId=data.authTokenid;
  204 + var imgCode=data.imageCodeStr;
  205 + syscode=imgCode;
  206 +
  207 + $('#code').val(imgCode);
  208 + $('#code').attr('data-id',imgCodeId);
  209 +
  210 + } else {
  211 + console.log(res.msg);
  212 + }
  213 +
  214 + },
  215 + error: function (err) {
  216 + console.log(err);
  217 + }
  218 + })
  219 +};
262 220  
263   -}
264 221 //登录成功的函数
265 222 function loginSuccess(res) {
266 223 if (res.code === '8888') {
... ... @@ -279,33 +236,38 @@ function loginSuccess(res) {
279 236 //alert("success");
280 237 fn.setUserAccount(res.data.userName);
281 238 window.location.href = "index.html";
282   - } else if (res.code == "2000" || res.code === '1004') {
  239 + } else if (res.code == "1012") {
  240 +
  241 + $('#login_error_ifo').text("验证码不匹配");
  242 + createCode();//刷新验证码
  243 +
  244 + }else if (res.code == "2000" || res.code === '1004') {
283 245 //账号密码不匹配
284 246 $('#login_error_ifo').text("账号密码不匹配");
285 247 //$error.text("账号或密码错误!");
286   - getImgCode();
  248 + createCode();
287 249 } else if (res.code == "2001") {
288 250 //账号无有效角色，非有效用户
289 251 $('#login_error_ifo').text("账号无效");
290 252 //$error.text("账号无有效角色，非有效用户!");
291   - getImgCode();
  253 + createCode();
292 254 } else if (res.code == "2002") {
293 255 //验证码错误
294 256 // $('.verification-logo').addClass('glyphicon glyphicon-remove');
295 257 $('#login_error_ifo').text("验证码错误");
296 258 //return false;
297 259 // $imageCodeValue.focus();
298   - getImgCode();
  260 + createCode();
299 261 } else if(res.code == "2010"){
300 262 $('#login_error_ifo').text("用户没有关联停车场");
301   - getImgCode();
  263 + createCode();
302 264 }
303 265 else {
304 266 console.log(res.code);
305 267 $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
306 268 $('#login_error_ifo').text("系统错误");
307 269 // $error.text(res.msg);
308   - getImgCode();
  270 + createCode();
309 271 }
310 272  
311 273 }
... ...
js/unit.js
  View file @025e127
... ... @@ -29,8 +29,8 @@ dataUrl.util = {
29 29 return baseUrl + 'sysLoginLog/queryLoginLog';
30 30 },
31 31 //获取验证码
32   - getLoginImageCode: function () {
33   - return baseUrl + 'oauth/imageCode?' + Math.random()
  32 + imageCodeStr: function () {
  33 + return baseUrl + 'oauth/imageCodeStr'
34 34 },
35 35 //登录
36 36 getLogin: function () {
... ...
login.html
  View file @025e127
... ... @@ -55,10 +55,9 @@
55 55 </div>
56 56 </div>
57 57 <div id="slide_box">
58   - <div id="slide_xbox">
59   - <div id="btn"></div>
60   - </div>
61   - 拖动滑块验证
  58 + <span class="login-yzm-bg"></span>
  59 + <input type="text" class="login_input_txtSmall form-control" placeholder="请输入验证码" id="codedate"><input type = "button" id="code" data-id=""/>
  60 +
62 61 </div>
63 62  
64 63 <div id="login_error_ifo" class="login_error_ifo">
... ...