diff --git a/index.html b/index.html index 8e94ac3..4672e2b 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,12 @@ +
+

sssss

+ \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..8708f28 --- /dev/null +++ b/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); } } diff --git a/static/js/api/index.js b/static/js/api/index.js new file mode 100644 index 0000000..d3e3087 --- /dev/null +++ b/static/js/api/index.js @@ -0,0 +1,5 @@ +/*-------------- +* 用户登录、注册相关 +-----------------*/ +var captchaImage_get = '/captchaImage'; //图形验证码接口 +var login_post = '/login'; //用户登录接口 \ No newline at end of file diff --git a/static/js/common/main.js b/static/js/common/main.js index bac87ee..f543246 100644 --- a/static/js/common/main.js +++ b/static/js/common/main.js @@ -1,23 +1,24 @@ requirejs.config({ urlArgs: "ver=1.0_" + (new Date).getTime(), - baseUrl: '/', + baseUrl: '/static/js/', 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: { bootstrap: { @@ -42,9 +43,16 @@ requirejs.config({ }); //所有页面都需要的js，先行加载 -require(['jquery', 'bootstrap', 'nprogress']); +require(['jquery', 'bootstrap', 'nprogress',"API"]); require(["jquery"], function ($) { + //ajax加载页面跳转 + $(document).ajaxStart(function(){ + $('.loading').show(); + }).ajaxStop(function(){ + $('.loading').hide(); + }); + //根据条件加载不同js文件 var currentPage = $("#require-page").attr("current-page"); var targetModule = $("#require-page").attr("target-module"); if (targetModule) { diff --git a/static/js/common/tools.js b/static/js/common/tools.js index 26b5677..ae08dcd 100644 --- a/static/js/common/tools.js +++ b/static/js/common/tools.js @@ -4,6 +4,7 @@ define(['jquery', 'dialog'], function ($, dialog) { this.version = "1.0.0"; this.description = "这是一个工具类"; } + var ajaxJsUrl = "/api"; $.extend(Tool.prototype, { /** @@ -11,51 +12,67 @@ define(['jquery', 'dialog'], function ($, dialog) { * @param url (String) * @param data (Json) 需要提交的数据 * @param cb(Function) 回调函数 + * @param noHead(Boolean) 是否需要Bearer */ - doPost: function (url, data, cb) { + doPost: function (url, data, cb, noHead) { 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({ - 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) { - 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 * @param url(String) * @param data(Json) 需要提交的数据 * @param cb(Function) 回调函数 + * @param noHead(Boolean) 是否需要Bearer */ - doGet: function (uri, data, cb) { + doGet: function (uri, data, cb , noHead) { 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) { url += $.map(data, function (n, i) { if (i == data.length - 1) { @@ -69,17 +86,25 @@ define(['jquery', 'dialog'], function ($, dialog) { $.ajax({ url: url, 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) { - 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 * @param id(String) 创建的dialog的Id 用于分辨唯一的dialog @@ -197,6 +222,15 @@ define(['jquery', 'dialog'], function ($, dialog) { } return true; }, + /** + * skip 页面跳转 + * @param url 跳转页面链接 + */ + skip:function(url){ + if(url!=''){ + window.location = url + } + } }); return Tool; diff --git a/static/js/lib/dialog/dialog-config.js b/static/js/lib/dialog/dialog-config.js index e0eb37c..eb27a0b 100644 --- a/static/js/lib/dialog/dialog-config.js +++ b/static/js/lib/dialog/dialog-config.js @@ -61,7 +61,7 @@ define({ // css 文件路径，留空则不会使用 js 自动加载样式 // 注意：css 只允许加载一个 - cssUri: '../static/css/ui-dialog.css', + cssUri: '../css/ui-dialog.css', // 模板（使用 table 解决 IE7 宽度自适应的 BUG） // js 使用 i="***" 属性识别结构，其余的均可自定义 diff --git a/static/js/project/index.js b/static/js/project/index.js index d359253..73c3c97 100644 --- a/static/js/project/index.js +++ b/static/js/project/index.js @@ -10,11 +10,14 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) { } }; var tools = new Tools(); - + module.init = function (page) { + let _this = this; var navMian = template('nav-mian-text', module.initData); $("#nav-mian").html(navMian); + + }; module.login = function () { }; return module; diff --git a/static/js/project/user/login.js b/static/js/project/user/login.js new file mode 100644 index 0000000..8ce717a --- /dev/null +++ b/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; +}); \ No newline at end of file diff --git a/user/login.html b/user/login.html new file mode 100644 index 0000000..0157985 --- /dev/null +++ b/user/login.html @@ -0,0 +1,29 @@ + + + + + + 农燊高科-登录 + + + + + + + + + +
+ +
+ + + \ No newline at end of file diff --git a/view/user/login.html b/view/user/login.html deleted file mode 100644 index e69de29..0000000