【前端开发】登录功能和模态对话框集成
今天的工作,主要是把前端的登录框进行完善这段auth.js可以进行通用,以后可以重复使用的好代码。
gulp.js(前端开发和监听使用)
var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
var sass = require("gulp-sass");
// gulp-util:这个插件中有一个方法log,可以打印出当前js错误的信息
var util = require("gulp-util");
var sourcemaps = require("gulp-sourcemaps");
var path = {
'html': './templates/**/',
'css': './src/css/**/',
'js': './src/js/',
'images': './src/images/',
'css_dist': './dist/css/',
'js_dist': './dist/js/',
'images_dist': './dist/images/'
};
// 处理html文件的任务
gulp.task("html",function () {
gulp.src(path.html + '*.html')
.pipe(bs.stream())
});
// 定义一个css的任务
gulp.task("css",function () {
gulp.src(path.css + '*.scss')
.pipe(sass().on("error",sass.logError))
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest(path.css_dist))
.pipe(bs.stream())
});
// 定义处理js文件的任务
gulp.task("js",function () {
gulp.src(path.js + '*.js')
.pipe(sourcemaps.init())
.pipe(uglify().on("error",util.log))
.pipe(rename({"suffix":".min"}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.js_dist))
.pipe(bs.stream())
});
// 定义处理图片文件的任务
gulp.task('images',function () {
gulp.src(path.images + '*.*')
.pipe(cache(imagemin()))
.pipe(gulp.dest(path.images_dist))
.pipe(bs.stream())
});
// 定义监听文件修改的任务
gulp.task("watch",function () {
gulp.watch(path.html + '*.html',['html']);
gulp.watch(path.css + '*.scss',['css']);
gulp.watch(path.js + '*.js',['js']);
gulp.watch(path.images + '*.*',['images']);
});
// 初始化browser-sync的任务
gulp.task("bs",function () {
bs.init({
'server': {
'baseDir': './'
}
});
});
// 创建一个默认的任务
// gulp.task("default",['bs','watch']);
gulp.task("default",['watch']);
登录页面的auth.js
function Auth() {
var self = this;
self.maskWrapper = $('.mask-wrapper');
self.scrollWrapper = $(".scroll-wrapper");
}
Auth.prototype.run = function () {
var self = this;
self.listenShowHideEvent();
self.listenSwitchEvent();
self.listenSigninEvent();
};
Auth.prototype.showEvent = function () {
var self = this;
self.maskWrapper.show();
};
Auth.prototype.hideEvent = function () {
var self = this;
self.maskWrapper.hide();
};
Auth.prototype.listenShowHideEvent = function () {
var self = this;
var signinBtn = $('.signin-btn');
var signupBtn = $('.signup-btn');
var closeBtn = $('.close-btn');
signinBtn.click(function () {
self.showEvent();
self.scrollWrapper.css({"left":0});
});
signupBtn.click(function () {
self.showEvent();
self.scrollWrapper.css({"left":-400});
});
closeBtn.click(function () {
self.hideEvent();
});
};
Auth.prototype.listenSwitchEvent = function () {
var self = this;
var switcher = $(".switch");
switcher.click(function () {
var currentLeft = self.scrollWrapper.css("left");
currentLeft = parseInt(currentLeft);
if(currentLeft < 0){
self.scrollWrapper.animate({"left":'0'});
}else{
self.scrollWrapper.animate({"left":"-400px"});
}
});
};
Auth.prototype.listenSigninEvent = function () {
var self = this;
var signinGroup = $('.signin-group');
var telephoneInput = signinGroup.find("input[name='telephone']");
var passwordInput = signinGroup.find("input[name='password']");
var rememberInput = signinGroup.find("input[name='remember']");
var submitBtn = signinGroup.find(".submit-btn");
submitBtn.click(function () {
var telephone = telephoneInput.val();
var password = passwordInput.val();
var remember = rememberInput.prop("checked");
xfzajax.post({
'url': '/account/login/',
'data': {
'telephone': telephone,
'password': password,
'remember': remember?1:0
},
'success': function (result) {
if(result['code'] == 200){
self.hideEvent();
window.location.reload();
}else{
var messageObject = result['message'];
if(typeof messageObject == 'string' || messageObject.constructor == String){
window.messageBox.show(messageObject);
}else{
// {"password":['密码最大长度不能超过20为!','xxx'],"telephone":['xx','x']}
for(var key in messageObject){
var messages = messageObject[key];
var message = messages[0];
window.messageBox.show(message);
}
}
}
},
'fail': function (error) {
console.log(error);
}
});
});
};
$(function () {
var auth = new Auth();
auth.run();
});