Spring框架下的管理员登录功能实现
首页管理员登陆界面如下：
在view——login——Form.js下，写出登陆页UI
Ext.define('yucen.view.login.Form' ,{
extend: 'Ext.form.Panel',
layout:"vbox",
url:ctx+'/j_security_check', //URL、关键点，Spring自带，用以检测登录的管理员账号密码与数据库中是否匹配。
method : 'POST',
title:'登录',
width: 320,
alias: 'widget.loginform',
frame:true,
bodyPadding: 10,
defaultType: 'textfield',
defaults:{
anchor: '100%',
labelWidth: 120
},
border:1,
initComponent: function() {
this.items=[
{
fieldLabel: '用户名',
emptyText:"用户名",
name:'username',
id:'username',
minLengthText:'用户名长度大于6位字符',
maxLength:30,
maxLengthText:'用户名长度小于30位字符',
allowBlank:false,
blankText:'请输入用户名！',
regex : /[\u0000-\u00FF]/,
regexText : '请输入正确的用户名！',
listeners:{
afterrender:function(){
var cookiedata = Ext.util.Cookies.get("soLoginName");
if (cookiedata!=null){
Ext.getCmp('username').setValue(cookiedata);
}
}
}
}, {
fieldLabel:'密码',
emptyText:"密码",
name:'password',
inputType: 'password',
id:'password',
maxLength:20,
maxLengthText: '密码长度小于20位字符',
regex: /[\u0000-\u00FF]/,
regexText: "请输入正确的密码！",
inputWidth:400,
action:'loginByEnter',
allowBlank:false,
blankText:'请输入密码！'
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [
{
fieldLabel:'验证码',
xtype:'textfield',
labelWidth:120,
width:225,
maxLength: 4,
emptyText: "验证码",
action:'loginByEnter',
minLength: 1,
regex: /[\u0000-\u00FF]/,
regexText: "请输入正确的验证码！",
name:'verification'
},{xtype:'label',width:10},
{
xtype: 'box',
id: 'iconImage',
border: false,
style:{
cursor:'pointer'
},
listeners:{
'click':{
element:'el',
fn:function(){
document.getElementById('iconImage').src='getValidationCode?random='+Math.random();
}
}
},
autoEl: {
width: 60,
height: 25,
border: false,
tag: 'img',
src: 'getValidationCode'
}
}
]
},
{
xtype:'checkbox',
fieldLabel: '记住用户名',
id:'loginCheckbox',
name:'rememberPassword',
checked:true,
inputValue :true,
uncheckedValue:false
}
];
this.buttons=[
{
text:'登录',
action:"logIn"
}
];
this.callParent(arguments);
}
});
2.对应的2个action loginByEnter和logIn，分别存在于 yucen——app——controller——LoginController.js
login: function (button) {
var form=button.up('form').getForm();
//如果选中了记住用户名，就保存用户名到本地COOKIES。否则清空记录。
if (Ext.getCmp('loginCheckbox').checked) {
Ext.util.Cookies.set('soLoginName', Ext.getCmp('username').getValue());
Ext.util.Cookies.set('soLoginPassword', Ext.getCmp('password').getValue());
} else {
Ext.util.Cookies.set('soLoginName', "");
Ext.util.Cookies.set('soLoginPassword', "");
}
if (form.isValid()) {
form.submit({
status:function(form,action){
var role=Ext.decode(action.response.responseText).data.roles
if(role=="ROLE_ADMIN"){
Ext.example.msg("登录",(Ext.decode(action.response.responseText).message));
location.href =ctx+'/so/main';
}
},
failure:function (response, action) {
var res=Ext.decode(action.response.responseText).status
if(res=="success"){
Ext.example.msg("登录",(Ext.decode(action.response.responseText).message));
location.href =ctx+'/so/main';
}else{
Ext.Msg.alert("登录",(Ext.decode(action.response.responseText).message));
}
}
});
}
},
loginByEnter : function (field,e){
if(Ext.getCmp('loginCheckbox').checkd){
Ext.util.Cookies.set('soLoginName', Ext.getCmp('username').getValue());
Ext.util.Cookies.set('soLoginPassword', Ext.getCmp('password').getValue());
} else {
Ext.util.Cookies.set('soLoginName', "");
Ext.util.Cookies.set('soLoginPassword', "");
}
var form=field.up('form').getForm();
if (e.keyCode == 13) {
if (form.isValid()) {
form.submit({
status:function(form,action){
var role=Ext.decode(action.response.responseText).data.roles
if(role=="ROLE_ADMIN"){
Ext.example.msg("登录",(Ext.decode(action.response.responseText).message));
location.href =ctx+'/so/main';
}
},
failure:function (response, action) {
var res=Ext.decode(action.response.responseText).status
if(res=="success"){
Ext.example.msg("登录",(Ext.decode(action.response.responseText).message));
location.href =ctx+'/so/main';
}else{
Ext.Msg.alert("登录",(Ext.decode(action.response.responseText).message));
}
}
});
}
}
},
3.在controller中，创建一个SystemUserController，并编写" so/main "接口。
@RequestMapping(value = "/main", method = RequestMethod.GET)
@ResponseBody
public ModelAndView dashMain(){
return new ModelAndView("dashboard_main");
}
4.跳转到新页面 WEB—INF———pages———dashboard_main.jsp
<%@ include file="/common/taglibs.jsp"%>
5.继续跳转到dashboard.js
Ext.form.field.Text.prototype.msgTarget='under';
Ext.form.field.ComboBox.prototype.msgTarget='under';
Ext.application({
name: 'yucen',
appFolder: ctx+'/scripts/yucen/app',
extend: 'yucen.Dashboard',
autoCreateViewport: 'yucen.view.main.Main'
});
6.跳转到yucen—app—Dashboard.js 和 Main页面
Ext.define('yucen.Dashboard', {
extend: 'Ext.app.Application',
appFolder: ctx+'/scripts/yucen/app',
name: 'yucen',
stores: [
'NavColumn',
'FirstNavColumn',
'SecondNavColumn',
'Content',
'Building',
'BuildingCombo',
'BuildingComboWithAll',
'ActivityCombo',
'ActivityComboWithAll',
'Navigation',
'Activity',
'StatusCombo',
'PayStatusCombo',
'Registration',
'User',
'UserDetail',
'UserDetailRegistration',
'UserDetailCoupons',
'Pay',
'CommentStatusCombo',
'Comment',
'CommentSensitive',
'Award',
'Recommend',
'RecommendGrid',
'UserPaymentOrder',
'Advert'
],
models:[
'NavColumn',
'FirstNavColumn',
'SecondNavColumn',
'Content',
'Building',
'BuildingCombo',
'StatusCombo',
'Activity',
'Registration',
'User',
'UserDetail',
'UserDetailRegistration',
'UserDetailCoupons',
'Pay',
'Comment',
'CommentSensitive',
'Award',
'Recommend',
'UserPaymentOrder',
'Advert'
],
launch: function () {
}
});
Ext.define('yucen.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'yucen.view.main.Navigation',
'yucen.view.main.award.AwardGrid',
'yucen.view.main.navColumn.NavColumnGrid',
'yucen.view.main.navColumn.NavColumnAdd',
'yucen.view.main.navColumn.NavColumnSecondAdd',
'yucen.view.main.navColumn.NavColumnEdit',
'yucen.view.main.navColumn.NavColumnSort',
'yucen.view.main.navColumn.SecondNavColumnSort',
'yucen.view.main.navColumn.ContentSort',
'yucen.view.main.content.ContentGrid',
'yucen.view.main.content.ContentAdd',
'yucen.view.main.content.ContentEdit',
'yucen.view.main.content.ContentNavColumnBind',
'yucen.view.main.building.BuildingGrid',
'yucen.view.main.building.BuildingAdd',
'yucen.view.main.building.BuildingEdit',
'yucen.view.main.building.BuildingView',
'yucen.view.main.building.BuildingSort',
'yucen.view.main.building.BuildingClientAppPhoto',
'yucen.view.main.building.ClientAppPhotoAddWindow',
'yucen.view.main.building.NavigationButtons.BuildingListButtons',
'yucen.view.main.building.ClientAppPhotoEditWindow',
'yucen.view.main.activity.ActivityGrid',
'yucen.view.main.activity.ActivityAdd',
'yucen.view.main.activity.ActivityEdit',
'yucen.view.main.activity.ActivityView',
'yucen.view.main.activity.ActivitySort',
'yucen.view.main.activity.ActivityClientAppPhoto',
'yucen.view.main.activity.ClientAppPhotoAddWindow',
'yucen.view.main.activity.NavigationButtons.ActivityButtons',
'yucen.view.main.activity.ClientAppPhotoEditWindow',
'yucen.view.main.user.UserGrid',
'yucen.view.main.user.UserDetailGrid',
'yucen.view.main.user.NavigationButtons.UserButtons',
'yucen.view.main.registration.RegistrationGrid',
'yucen.view.main.registration.NavigationButtons.RegistrationButtons',
'yucen.view.main.pay.PayGrid',
'yucen.view.main.pay.PayAdd',
'yucen.view.main.pay.NavigationButtons.PayButtons',
'yucen.view.main.pay.ImportPayWindow',
'yucen.view.main.comment.CommentGrid',
'yucen.view.main.comment.CommentEdit',
'yucen.view.main.comment.CommentWindow',
'yucen.view.main.comment.CommentDetailGrid',
'yucen.view.main.comment.NavigationButtons.CommentButtons',
'yucen.view.main.recommend.RecommendGrid',
'yucen.view.main.recommend.RecommendEditWindow',
'yucen.view.main.recommend.RecommendSort',
'yucen.view.main.advert.AdvertGrid',
'yucen.view.main.advert.AdvertAdd',
'yucen.view.main.password.PasswordChange',
'yucen.view.main.MainModel',
'yucen.controller.MainController'
],
xtype: 'app-main',
id:'app-main',
controller: 'main',
viewModel: {
type: [
'main'
]
},
layout: {
type: 'border'
},
items: [
{
region: 'north',
height: 65,
border: false,
bodyStyle: 'background-color:white',
cls: 'header_bg',
contentEl: 'north-header'
},
{
xtype: 'navigation',
id: 'main-navigation',
region: 'west',
bodyPadding:0,
split: false,
width: 250,
minWidth: 200,
maxWidth: 500,
floatable: false,
title:'用户管理',
border:0,
margin: '0 5 0 0'
},{
collapsible: false,
region: 'center',
border: 0,
layout:'fit',
id:'main_center_panel',
xtype: 'panel',
items:[
{
title:' ',
collapsible: false,
xtype: 'userGrid'
}
]
},{
region: 'south',
height: 75,
minHeight: 75,
maxHeight: 100,
border: 0,
cls: 'footer_bg',
title:' ',
contentEl: 'south-footer',
bodyStyle: 'background-color:black',
collapsed:true
}]
});
至此后台从登陆至登陆成功显示主页的功能完成。