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"%>
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/yucen/dashboard.js"></script>
</head>
<body></body>
</html>
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
}]
});
至此後臺從登陸至登陸成功顯示主頁的功能完成。