liuminjian 4 lat temu
rodzic
commit
5edeb573a3
10 zmienionych plików z 238 dodań i 56 usunięć
  1. +4
    -2
      index.html
  2. +13
    -0
      static/css/main.css
  3. +5
    -0
      static/js/api/index.js
  4. +23
    -15
      static/js/common/main.js
  5. +71
    -37
      static/js/common/tools.js
  6. +1
    -1
      static/js/lib/dialog/dialog-config.js
  7. +4
    -1
      static/js/project/index.js
  8. +88
    -0
      static/js/project/user/login.js
  9. +29
    -0
      user/login.html
  10. +0
    -0
      view/user/login.html

+ 4
- 2
index.html Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -0,0 +1,5 @@
/*--------------
* 用户登录、注册相关
-----------------*/
var captchaImage_get = '/captchaImage'; //图形验证码接口
var login_post = '/login'; //用户登录接口

+ 23
- 15
static/js/common/main.js Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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>

+ 0
- 0
view/user/login.html Wyświetl plik


Ładowanie…
Anuluj
Zapisz