Spring框架下的管理员登录功能实现
来源:互联网 发布:淘宝优惠券那个网站好 编辑:程序博客网 时间:2024/06/08 00:44
首页管理员登陆界面如下:
在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
}]
});
至此后台从登陆至登陆成功显示主页的功能完成。
- Spring框架下的管理员登录功能实现
- Spring框架下的管理员修改密码功能实现
- yii框架下的后台管理员登录操作
- spring+strust2+mybatis框架下的导出功能的实现
- jeecms框架单点登录功能的实现
- 菜鸟学SSM框架搭建----Spring+SpringMVC+MyBatis整合,实现简单的登录功能
- spring+springmvc+mybatis+mysql实现登录功能(下)
- Spring Security实现后台管理员登录(一)
- SSH集成框架下真正实现Spring AOP拦截功能
- SSH集成框架下真正实现Spring AOP拦截功能
- 在Spring Boot框架下使用WebSocket实现聊天功能
- 在Spring Boot框架下使用WebSocket实现聊天功能
- 在Spring Boot框架下使用WebSocket实现聊天功能
- 在Spring Boot框架下使用WebSocket实现聊天功能
- 在Spring Boot框架下使用WebSocket实现聊天功能
- WZC框架下wifi功能的实现
- 基于权限安全框架Shiro的登录验证功能实现
- Spring+Struts2+JQuery配合实现简单的登录功能
- Android 四大组件学习之Service五
- 如何提高并发度?读写锁,分拆锁、分离锁,ThreadLocal,copyOnWrite,工作队列 per thread, 工作窃取
- UVA 12563 Jin Ge Jin Que Hao
- 关于程序运行 IROM、IRAM解决方案
- 只使用处理IO的printDigit函数,编写一个过程以输出任意实数
- Spring框架下的管理员登录功能实现
- POJ 1850 Code(组合数学)
- android下需要怎么样配置或者操作才能在界面里显示状态栏(status bar)
- SAP错误处理总结
- Invert Binary Tree
- SpringMVC使用FileUpload进行文件上传
- MFC中变量的命名方法
- 杭电 1425 sort
- 索引的好坏处