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 name="keywords" content="" /> | |||
| <meta name="description" content="" /> | |||
| <link href="/static/css/main.css" rel="stylesheet" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <div class="main"> | |||
| <p class="btnclick">sssss</p> | |||
| <script id="nav-mian-text" type="text/html"> | |||
| {{if isAdmin}} | |||
| <h1>{{title}}</h1> | |||
| @@ -28,7 +30,7 @@ | |||
| </div> | |||
| </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> | |||
+ 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({ | |||
| 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) { | |||
+ 71
- 37
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; | |||
+ 1
- 1
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="***" 属性识别结构，其余的均可自定义 | |||
+ 4
- 1
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; | |||
+ 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> | |||