Spring3 MVC 教程 （Mybatis+ExtJS基本权限管理）
说明：
- 验证码：采用开源的https://code.google.com/p/kaptcha/，代码自己修改了部分。
- 上传文件：swfupload，参考论坛里面的另外一个帖子。
- ext的tab非iframe模式，只加载一次ExtJS，速度还可以～自己命名jsp里面的变量的时候注意变量ID不要重复 参加下面部分js代码
- 框架采用了mybatis+spring3MVC，应该说是学习springmvc的好例子。代码都有详细注释。
- js的加载采用了yepnope，是一个基于条件的异步资源（JS和CSS）加载工具
- mybatis的配置文件的生成采用了自己修改的mybatis的工具。mybatis-generator 修改版
其他：
附件为maven构建的工程，需要lib的可以去网盘下载，里面也有base_power.pdm文件，可以自己转为mysql的脚本。
建库语句在war包里面的readme文件夹下面
7z的分卷压缩老是搞不好，只好贴网盘地址了
http://dl.dbank.com/c0bakwliui
// tab主面板
index.tabPanel = new Ext.TabPanel({
id: 'mainTabPanel',
region: 'center',
activeTab: 0,
deferredRender: false,
enableTabScroll: true,
// bodyStyle:'height:100%',
defaults: {
layout: 'fit',
autoScroll: true
},
plugins: new Ext.ux.TabCloseMenu({
closeTabText: '关闭标签页',
closeOtherTabsText: '关闭其他标签页',
closeAllTabsText: '关闭所有标签页'
}),
items: [{
id: 'home',
title: '我的主页',
iconCls: 'home',
closable: false,
autoScroll: true,
autoLoad: {
url: index.welcome,
scripts: true,
nocache: true
}
}],
listeners: {
'bodyresize': function (panel, neww, newh) {
// 自动调整tab下面的panel的大小
var tab = panel.getActiveTab();
var centerpanel = Ext.getCmp(tab.id + "_div_panel");
if (centerpanel) {
centerpanel.setHeight(newh - 2);
centerpanel.setWidth(neww - 2);
}
}
}
});
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<div id="changePwdDiv" style="width: 100%; height: 100%;">
<div id="changePwdToolBarDiv"></div>
<div id="changePwdFormDiv"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//yepnope("${ctx}/resources/js/user/changepwd.js");
Ext.ns("Ext.Authority.changepassword"); // 自定义一个命名空间
changepwd = Ext.Authority.changepassword; // 定义命名空间的别名
changepwd = {
changeurl : ctx + "/user/changepwd"
};
// 编辑用户Form
changepwd.changePwdFormPanel = new Ext.form.FormPanel({
renderTo : 'changePwdFormDiv',
border : false,
defaults : {
xtype : "textfield",
labelWidth : 50
},
bodyStyle : 'padding:5px;background-color:transparent;',
items : [ {// 原密码
id : 'old_password',
name : 'old_password',
inputType : "password",
fieldLabel : '原密码',
anchor : '99%',
allowBlank : false,
maxLength : 32
}, { // 新密码
id : 'new_password',
name : 'new_password',
inputType : "password",
fieldLabel : '新密码',
anchor : '99%',
allowBlank : false,
maxLength : 32
}, {// 确认密码
id : 'compare_password',
name : 'compare_password',
inputType : "password",
fieldLabel : '确认密码',
vtype : "password",// 自定义的验证类型
vtypeText : "两次输入的密码不一致！",
confirmTo : "new_password",// 要比较的另外一个的组件的id
anchor : '99%',
allowBlank : false,
maxLength : 32
}, {// 账户ID
xtype : 'hidden',
name : 'userId',
value : '${user.userId}'
} ]
});
// 工具栏
changepwd.changePwdToolbar = new Ext.Toolbar({
renderTo : 'changePwdToolBarDiv',
items : [ new Ext.Button({
text : '保存',
iconCls : 'save',
handler : function() {
var form = changepwd.changePwdFormPanel.getForm();
if (form.isValid()) {
var values = form.getValues();
// 发送请求
Share.AjaxRequest({
url : changepwd.changeurl,
params : {
oldPassword : Ext.MD5(values.old_password),
newPassword : Ext.MD5(values.new_password),
comparePassword : Ext.MD5(values.compare_password),
userId : values.userId
},
callback : function(json) {
// 重新登录
Share.getWin().location = ctx;
},
falseFun : function(json) {//失败后想做的个性化操作函数
if (json.msg.indexOf('原密码不正确！请重新输入') > -1) {
$("#old_password").focus().val('');
return;
}
if (json.msg.indexOf('两次输入的新密码不一致') > -1) {
$("#new_password").val('');
$("#compare_password").val('').focus();
return;
}
if (json.msg.indexOf('请输入正确的帐号和其注册邮箱') > -1) {
return;
}
}
});
}
}
}), new Ext.Button({
text : '取消',
iconCls : 'cancel',
handler : function() {
header.changePwdWindow.close();
}
}) ]
});
var events = "beforecopy beforepaste beforedrag contextmenu selectstart drag paste copy cut dragenter";
$("#old_password").bind(events, function(e) {
if (e && e.preventDefault)
e.preventDefault();
else
window.event.returnValue = false;
return false;
});
$("#new_password").bind(events, function(e) {
return false;
});
$("#compare_password").bind(events, function(e) {
return false;
});
});
</script>
代码不多贴了，上图片吧。
分享到：
相关推荐
spring+mvc+mybatis+extjs整合 内含mysql数据库，很适合新手借鉴
Spring3MVC + MyBatis + ExtJs3整合开发系列
NULL 博文链接：https://kimho.iteye.com/blog/1148782
本人初步采用spring mvc3 mybatis3 extjs 3.4开发进销存软件，有很好的参考价值，其中数据库采用oracle，分页采用调用oracle的存储过程，有很好的学习价值，若是想开发简单的CRM和进销存系统是极品参考的系统。...
JavaWeb+Extjs+springMvc+mybatis做的信息管理系统，主要是用Extjs实现前台，其中包括了树形结构和基本的表单和列表等，springMVC框架，数据库操作层使用的是mybatis，其中的数据库表结构可以根据其中的mapper.xml...
整理了一下Spring、Spring mvc、Mybatis、ExtJs实战开发技术的内容，作为进阶提示
前台完全基于 extjs mvc框架开发 想学习extjs mvc的可以看看 后台用了activiti工作流 写了一个简单的请假审批例子 想学习spring mvc的也可以下载看看
spring mvc mybatis extjs 3.4 权限管理 ,调用oracle存储过程作为分页，是进销存产品开发的最好的参考案例
spring mvc +mybatis+extjs3 整合开发：登陆模块演示，实战开发
Spring3MVC+MyBatis+ExtJs3 权限管理
eclipse 开发的作品，整合spring mvc mybatis ExtJS6,实现漂亮的管理后台; 主要技术说明：完善了CURD的功能；健全的权限管理；缓存工厂的使用，默认使用EHCACHE;后台模板切换；程序启动自动加载平台参数；完善了...
SpringMVC和Extjs一起使用，为以后做一个好看的页面做铺垫
Extjs5.0从入门到实战开发信息管理系统（Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis），完整版，提供课件和代码下载！ 本教程从Extjs5的开发环境搭建开始，讲解了Extjs5的项目结构（包括核心文件的作用...
给大家分想一套视频教程，Extjs5.0从入门到实战开发信息管理系统（Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis），希望对大家学习Extjs5.0有帮助
spring3MVC,Extjs3,MyBatis实现的后台管理
通用后台管理系统 new extjs spring mvc mybatis maven
荀 -展示柜奥普方面spring-aop 引导程序缓存——弹簧缓存数据库米巴蒂斯蔚来米娜2 nosql redis -- ...-extjs4 -- extjs4 设计使用 sencha 架构师-javascript 例子-jsr 并发贾克斯蔚来小门户servlet3 网络套接字-static