10 змінених файлів з 238 додано та 56 видалено
Об'єднаний перегляд
Параметри порівняння
-
+4 -2index.html
-
+13 -0static/css/main.css
-
+5 -0static/js/api/index.js
-
+23 -15static/js/common/main.js
-
+71 -37static/js/common/tools.js
-
+1 -1static/js/lib/dialog/dialog-config.js
-
+4 -1static/js/project/index.js
-
+88 -0static/js/project/user/login.js
-
+29 -0user/login.html
-
+0 -0view/user/login.html
+ 4
- 2
index.html
Переглянути файл
| @@ -8,10 +8,12 @@ | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||||
| <meta name="keywords" content="" /> | <meta name="keywords" content="" /> | ||||
| <meta name="description" content="" /> | <meta name="description" content="" /> | ||||
| <link href="/static/css/main.css" rel="stylesheet" type="text/css" /> | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div class="main"> | <div class="main"> | ||||
| <p class="btnclick">sssss</p> | |||||
| <script id="nav-mian-text" type="text/html"> | <script id="nav-mian-text" type="text/html"> | ||||
| {{if isAdmin}} | {{if isAdmin}} | ||||
| <h1>{{title}}</h1> | <h1>{{title}}</h1> | ||||
| @@ -28,7 +30,7 @@ | |||||
| </div> | </div> | ||||
| </body> | </body> | ||||
| <script src="static/js/common/require.js" data-main="static/js/common/main" id="require-page" current-page="index" | |||||
| target-module="static/js/project/index" defer type="text/javascript"></script> | |||||
| <script src="./static/js/common/require.js" data-main="./static/js/common/main" id="require-page" current-page="index" | |||||
| target-module="./project/index" defer type="text/javascript"></script> | |||||
| </html> | </html> | ||||
+ 13
- 0
static/css/main.css
Переглянути файл
| @@ -0,0 +1,13 @@ | |||||
| /* nprogress公用CSS */ | |||||
| #nprogress {pointer-events: none;} | |||||
| #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } | |||||
| /* Fancy blur effect */ | |||||
| #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } | |||||
| /* Remove these to get rid of the spinner */ | |||||
| #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } | |||||
| #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } | |||||
| .nprogress-custom-parent { overflow: hidden; position: relative; } | |||||
| .nprogress-custom-parent #nprogress .spinner, | |||||
| .nprogress-custom-parent #nprogress .bar { position: absolute; } | |||||
| @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } | |||||
| @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |||||
+ 5
- 0
static/js/api/index.js
Переглянути файл
| @@ -0,0 +1,5 @@ | |||||
| /*-------------- | |||||
| * 用户登录、注册相关 | |||||
| -----------------*/ | |||||
| var captchaImage_get = '/captchaImage'; //图形验证码接口 | |||||
| var login_post = '/login'; //用户登录接口 | |||||
+ 23
- 15
static/js/common/main.js
Переглянути файл
| @@ -1,23 +1,24 @@ | |||||
| requirejs.config({ | requirejs.config({ | ||||
| urlArgs: "ver=1.0_" + (new Date).getTime(), | urlArgs: "ver=1.0_" + (new Date).getTime(), | ||||
| baseUrl: '/', | |||||
| baseUrl: '/static/js/', | |||||
| paths: { | paths: { | ||||
| //第三方库的路径配置 | //第三方库的路径配置 | ||||
| jquery: 'static/js/lib/jquery/jquery-1.9.1.min', //jquery | |||||
| bootstrap: 'static/js/lib/bootstrap/js/bootstrap.min', //bootstrap | |||||
| jqueryCookie: 'static/js/lib/jquery-cookie/jquery.cookie', //cookie插件 | |||||
| template: 'static/js/lib/template/template', //模板引擎 | |||||
| templaten: 'static/js/lib/template/template-native', //模板引擎-后端写法 | |||||
| jqueryLazyload: 'static/js/lib/jQuery-plugins/jquery.lazyload.min', //图片延迟加载 | |||||
| dialog: 'static/js/lib/dialog/dialog', //artDialog弹窗插件 | |||||
| dialogConf: 'static/js/lib/dialog/dialog-config', | |||||
| drag: 'static/js/lib/dialog/drag', | |||||
| popup: 'static/js/lib/dialog/popup', | |||||
| swiper: 'static/js/lib/swiper/swiper.min', //焦点图插件 | |||||
| nprogress: 'static/js/lib/nprogress/nprogress', //页面加载loading组件 | |||||
| jquery: 'lib/jquery/jquery-1.9.1.min', //jquery | |||||
| bootstrap: 'lib/bootstrap/js/bootstrap.min', //bootstrap | |||||
| jqueryCookie: 'lib/jquery-cookie/jquery.cookie', //cookie插件 | |||||
| template: 'lib/template/template', //模板引擎 | |||||
| templaten: 'lib/template/template-native', //模板引擎-后端写法 | |||||
| jqueryLazyload: 'lib/jQuery-plugins/jquery.lazyload.min', //图片延迟加载 | |||||
| dialog: 'lib/dialog/dialog', //artDialog弹窗插件 | |||||
| dialogConf: 'lib/dialog/dialog-config', | |||||
| drag: 'lib/dialog/drag', | |||||
| popup: 'lib/dialog/popup', | |||||
| swiper: 'lib/swiper/swiper.min', //焦点图插件 | |||||
| nprogress: 'lib/nprogress/nprogress', //页面加载loading组件 | |||||
| //自己写的路径配置 | //自己写的路径配置 | ||||
| Tools: 'static/js/common/tools', | |||||
| Tools: 'common/tools', | |||||
| API : 'api/index' //所有Ajax存放地 | |||||
| }, | }, | ||||
| shim: { | shim: { | ||||
| bootstrap: { | bootstrap: { | ||||
| @@ -42,9 +43,16 @@ requirejs.config({ | |||||
| }); | }); | ||||
| //所有页面都需要的js，先行加载 | //所有页面都需要的js，先行加载 | ||||
| require(['jquery', 'bootstrap', 'nprogress']); | |||||
| require(['jquery', 'bootstrap', 'nprogress',"API"]); | |||||
| require(["jquery"], function ($) { | require(["jquery"], function ($) { | ||||
| //ajax加载页面跳转 | |||||
| $(document).ajaxStart(function(){ | |||||
| $('.loading').show(); | |||||
| }).ajaxStop(function(){ | |||||
| $('.loading').hide(); | |||||
| }); | |||||
| //根据条件加载不同js文件 | |||||
| var currentPage = $("#require-page").attr("current-page"); | var currentPage = $("#require-page").attr("current-page"); | ||||
| var targetModule = $("#require-page").attr("target-module"); | var targetModule = $("#require-page").attr("target-module"); | ||||
| if (targetModule) { | if (targetModule) { | ||||
+ 71
- 37
static/js/common/tools.js
Переглянути файл
| @@ -4,6 +4,7 @@ define(['jquery', 'dialog'], function ($, dialog) { | |||||
| this.version = "1.0.0"; | this.version = "1.0.0"; | ||||
| this.description = "这是一个工具类"; | this.description = "这是一个工具类"; | ||||
| } | } | ||||
| var ajaxJsUrl = "/api"; | |||||
| $.extend(Tool.prototype, { | $.extend(Tool.prototype, { | ||||
| /** | /** | ||||
| @@ -11,51 +12,67 @@ define(['jquery', 'dialog'], function ($, dialog) { | |||||
| * @param url (String) | * @param url (String) | ||||
| * @param data (Json) 需要提交的数据 | * @param data (Json) 需要提交的数据 | ||||
| * @param cb(Function) 回调函数 | * @param cb(Function) 回调函数 | ||||
| * @param noHead(Boolean) 是否需要Bearer | |||||
| */ | */ | ||||
| doPost: function (url, data, cb) { | |||||
| doPost: function (url, data, cb, noHead) { | |||||
| var _this = this; | var _this = this; | ||||
| $.ajax({ | |||||
| url: url + '?=' + Math.random(), | |||||
| type: 'POST', | |||||
| data: data, | |||||
| beforeSend: function (xhr) { | |||||
| xhr.setRequestHeader("timestamp", getNowFormatDate()); | |||||
| xhr.setRequestHeader("x-auth-token", _this.getCookie('tokeId')); | |||||
| xhr.setRequestHeader("version", '1.1.6'); | |||||
| }, | |||||
| success: function (data) { | |||||
| cb(data); | |||||
| var headAttribute = ''; | |||||
| if(noHead && noHead==true){ | |||||
| headAttribute = function (xhr) { | |||||
| xhr.setRequestHeader("Content-Type", 'application/json;charset=utf-8'); | |||||
| } | } | ||||
| }); | |||||
| }, | |||||
| doGetJsonp: function (url, data, cb) { | |||||
| var _this = this; | |||||
| }else{ | |||||
| headAttribute = function (xhr) { | |||||
| xhr.setRequestHeader("Content-Type", 'application/json;charset=utf-8'); | |||||
| xhr.setRequestHeader('Authorization', 'Bearer ' + _this.getCookie('Admin-Token')) | |||||
| } | |||||
| } | |||||
| $.ajax({ | $.ajax({ | ||||
| url: url, | |||||
| dataType: "jsonp", | |||||
| data: data, | |||||
| beforeSend: function (xhr) { | |||||
| xhr.setRequestHeader("from", "weixin"); | |||||
| xhr.setRequestHeader("timestamp", getNowFormatDate()); | |||||
| xhr.setRequestHeader("x-auth-token", _this.getCookie('tokeId')); | |||||
| xhr.setRequestHeader("version", '1.1.6'); | |||||
| }, | |||||
| jsonp: "jsonpcallback", | |||||
| url: ajaxJsUrl+url + '?=' + Math.random(), | |||||
| type: 'POST', | |||||
| data: JSON.stringify(data), | |||||
| dataType:'json', | |||||
| contentType : "application/json", | |||||
| beforeSend: headAttribute, | |||||
| success: function (data) { | success: function (data) { | ||||
| cb(data); | |||||
| var code = data.code; | |||||
| var msg = data.msg; | |||||
| if(code === 401){ | |||||
| _this.initDialog('系统提示','登录状态已过期，您可以继续留在该页面，或者重新登录',function () { | |||||
| _this.skip('/user/login.html') | |||||
| },'重新登录',function () {},"取消") | |||||
| }else if(code === 500){ | |||||
| _this.initError(msg) | |||||
| cb(data); | |||||
| }else if(code !=200){ | |||||
| _this.initError(msg) | |||||
| }else{ | |||||
| cb(data); | |||||
| } | |||||
| } | } | ||||
| }); | }); | ||||
| }, | }, | ||||
| /** | /** | ||||
| * ajax get | * ajax get | ||||
| * @param url(String) | * @param url(String) | ||||
| * @param data(Json) 需要提交的数据 | * @param data(Json) 需要提交的数据 | ||||
| * @param cb(Function) 回调函数 | * @param cb(Function) 回调函数 | ||||
| * @param noHead(Boolean) 是否需要Bearer | |||||
| */ | */ | ||||
| doGet: function (uri, data, cb) { | |||||
| doGet: function (uri, data, cb , noHead) { | |||||
| var _this = this; | var _this = this; | ||||
| var url = uri + '?'; | |||||
| var url = ajaxJsUrl+uri + '?'; | |||||
| var headAttribute = '' | |||||
| if(noHead && noHead==true){ | |||||
| headAttribute = function (xhr) { | |||||
| xhr.setRequestHeader("Content-Type", 'application/json;charset=utf-8'); | |||||
| } | |||||
| }else{ | |||||
| headAttribute = function (xhr) { | |||||
| xhr.setRequestHeader("Content-Type", 'application/json;charset=utf-8'); | |||||
| xhr.setRequestHeader('Authorization', 'Bearer ' + _this.getCookie('Admin-Token')) | |||||
| } | |||||
| } | |||||
| if (data) { | if (data) { | ||||
| url += $.map(data, function (n, i) { | url += $.map(data, function (n, i) { | ||||
| if (i == data.length - 1) { | if (i == data.length - 1) { | ||||
| @@ -69,17 +86,25 @@ define(['jquery', 'dialog'], function ($, dialog) { | |||||
| $.ajax({ | $.ajax({ | ||||
| url: url, | url: url, | ||||
| type: 'GET', | type: 'GET', | ||||
| beforeSend: function (xhr) { | |||||
| xhr.setRequestHeader("from", "weixin"); | |||||
| xhr.setRequestHeader("timestamp", getNowFormatDate()); | |||||
| xhr.setRequestHeader("x-auth-token", _this.getCookie('tokeId')); | |||||
| xhr.setRequestHeader("version", '1.1.6'); | |||||
| }, | |||||
| beforeSend:headAttribute, | |||||
| success: function (data) { | success: function (data) { | ||||
| cb(data); | |||||
| var code = data.code; | |||||
| var msg = data.msg; | |||||
| if(code === 401){ | |||||
| _this.initDialog('系统提示','登录状态已过期，您可以继续留在该页面，或者重新登录',function () { | |||||
| _this.skip('/user/login.html') | |||||
| },'重新登录',function () {},"取消") | |||||
| }else if(code === 500){ | |||||
| _this.initError(msg) | |||||
| }else if(code !=200){ | |||||
| _this.initError(msg) | |||||
| }else{ | |||||
| cb(data); | |||||
| } | |||||
| } | } | ||||
| }); | }); | ||||
| }, | }, | ||||
| /** | /** | ||||
| * 创建dialog | * 创建dialog | ||||
| * @param id(String) 创建的dialog的Id 用于分辨唯一的dialog | * @param id(String) 创建的dialog的Id 用于分辨唯一的dialog | ||||
| @@ -197,6 +222,15 @@ define(['jquery', 'dialog'], function ($, dialog) { | |||||
| } | } | ||||
| return true; | return true; | ||||
| }, | }, | ||||
| /** | |||||
| * skip 页面跳转 | |||||
| * @param url 跳转页面链接 | |||||
| */ | |||||
| skip:function(url){ | |||||
| if(url!=''){ | |||||
| window.location = url | |||||
| } | |||||
| } | |||||
| }); | }); | ||||
| return Tool; | return Tool; | ||||
+ 1
- 1
static/js/lib/dialog/dialog-config.js
Переглянути файл
| @@ -61,7 +61,7 @@ define({ | |||||
| // css 文件路径，留空则不会使用 js 自动加载样式 | // css 文件路径，留空则不会使用 js 自动加载样式 | ||||
| // 注意：css 只允许加载一个 | // 注意：css 只允许加载一个 | ||||
| cssUri: '../static/css/ui-dialog.css', | |||||
| cssUri: '../css/ui-dialog.css', | |||||
| // 模板（使用 table 解决 IE7 宽度自适应的 BUG） | // 模板（使用 table 解决 IE7 宽度自适应的 BUG） | ||||
| // js 使用 i="***" 属性识别结构，其余的均可自定义 | // js 使用 i="***" 属性识别结构，其余的均可自定义 | ||||
+ 4
- 1
static/js/project/index.js
Переглянути файл
| @@ -10,11 +10,14 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) { | |||||
| } | } | ||||
| }; | }; | ||||
| var tools = new Tools(); | var tools = new Tools(); | ||||
| module.init = function (page) { | module.init = function (page) { | ||||
| let _this = this; | |||||
| var navMian = template('nav-mian-text', module.initData); | var navMian = template('nav-mian-text', module.initData); | ||||
| $("#nav-mian").html(navMian); | $("#nav-mian").html(navMian); | ||||
| }; | }; | ||||
| module.login = function () { }; | module.login = function () { }; | ||||
| return module; | return module; | ||||
+ 88
- 0
static/js/project/user/login.js
Переглянути файл
| @@ -0,0 +1,88 @@ | |||||
| /** | |||||
| * Created by liuminjian on 2021/4/5. | |||||
| * | |||||
| */ | |||||
| define(['jquery', "template", "Tools"], function ($, template, Tools) { | |||||
| //数据存储 | |||||
| var module = { | |||||
| uuid:'' //验证码uuid | |||||
| }; | |||||
| //自定义方法 | |||||
| var tools = new Tools(); | |||||
| //默认进入页面加载方法 | |||||
| module.init = function (page) { | |||||
| //点击登录 | |||||
| $('#login-submit').on('click',module.login) | |||||
| //点击图形验证码 | |||||
| $('#graphicImg').on('click',module.verificationCode) | |||||
| //图形验证码加载 | |||||
| module.verificationCode() | |||||
| }; | |||||
| /*-----------------------------自定义方法-------------------------------------*/ | |||||
| //图形验证码 | |||||
| module.verificationCode = function(){ | |||||
| tools.doGet(captchaImage_get,{},module.verificationAjax,true) | |||||
| } | |||||
| module.verificationAjax = function(data){ | |||||
| if(data.code==200){ | |||||
| $('#graphicImg').attr('src','data:image/gif;base64,'+data.img) | |||||
| module.uuid = data.uuid; | |||||
| } | |||||
| } | |||||
| //用户登录 | |||||
| module.login = function () { | |||||
| if(module.check()){ | |||||
| var data = {}; | |||||
| var usernameVal = $('#username').val(); | |||||
| var passwordVal = $('#password').val(); | |||||
| var codeVal = $('#code').val(); | |||||
| data['username'] = usernameVal; | |||||
| data['password'] = passwordVal; | |||||
| data['code'] = codeVal; | |||||
| data['uuid'] = module.uuid; | |||||
| tools.doPost(login_post,data,module.loginData,true) | |||||
| } | |||||
| }; | |||||
| //手动验证表单 | |||||
| module.check = function(){ | |||||
| var usernameVal = $('#username').val(); | |||||
| var passwordVal = $('#password').val(); | |||||
| var codeVal = $('#code').val(); | |||||
| /* 手机号 */ | |||||
| if(usernameVal==''){ | |||||
| $('#username')[0].focus() | |||||
| tools.initTips('请输入用户名','right',$('#username')[0],2000) | |||||
| return false; | |||||
| } | |||||
| /* 密码 */ | |||||
| if(passwordVal ==''){ | |||||
| $('#password')[0].focus() | |||||
| tools.initTips('请输入密码','right',$('#password')[0],2000) | |||||
| return false; | |||||
| }else if(parseInt(passwordVal.length) < 6 || parseInt(passwordVal.length) > 18){ | |||||
| $('#password')[0].focus() | |||||
| tools.initTips('请输入正确格式密码','right',$('#password')[0],2000) | |||||
| return false; | |||||
| } | |||||
| /*图形验证码*/ | |||||
| if(module.uuid=='' || codeVal==''){ | |||||
| $('#code')[0].focus() | |||||
| tools.initTips('请输入图形验证码','right',$('#code')[0],2000) | |||||
| return false; | |||||
| } | |||||
| return true; | |||||
| } | |||||
| //登录校验 | |||||
| module.loginData = function(data){ | |||||
| if(data.code==500){ | |||||
| module.verificationCode() | |||||
| }else{ | |||||
| tools.setCookie('Admin-Token', data.token,24*60*60) | |||||
| tools.skip('/') | |||||
| } | |||||
| } | |||||
| return module; | |||||
| }); | |||||
+ 29
- 0
user/login.html
Переглянути файл
| @@ -0,0 +1,29 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <title>农燊高科-登录</title> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="keywords" content="" /> | |||||
| <meta name="description" content="" /> | |||||
| <link href="/static/css/main.css" rel="stylesheet" type="text/css" /> | |||||
| <style> | |||||
| .login-main{padding-top: 100px; width: 400px; margin:0 auto} | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <div class="wrapper-main"> | |||||
| <div class="login-main"> | |||||
| <div>用户名：<input type="text" class="pass-text-input" id="username" value="admin"></div> | |||||
| <div>密码：<input type="text" class="pass-text-input" id="password" value="admin123"></div> | |||||
| <div>图形验证码：<input type="text" class="pass-text-input" id="code" value=""><img src="" id="graphicImg"/></div> | |||||
| <div><button class="pass-button" id="login-submit" type="submit">登录</button></div> | |||||
| </div> | |||||
| </div> | |||||
| </body> | |||||
| <script src="../static/js/common/require.js" data-main="../static/js/common/main" id="require-page" | |||||
| target-module="../static/js/project/user/login.js" defer type="text/javascript"></script> | |||||
| </html> | |||||