结合ExtJS和SSH简单实现登录

#1创建Takeout1工程

*1）使用MyEclipse新建一个Web Project工程，名为Takeout1

       如果使用Tomcat7.0，不能使用高版本的JDK

#2添加Struts2特性

*1）右击项目名----MyEclipse----Add Struts Capabilities----选择Strtus2.x和/*----Finish

       

#3添加Spring特性

*1）右击项目名----Myeclipse----Add Spring Capabilities----如下图所示，选择红框的内容----Finish

       

*2）打开WebRoot----WEB-INF----web.xml----添加配置Spring配置文件的位置和加载器，代码如下

<context-param>          <param-name>contextConfigLocation</param-name>         <!-- 如果 applicationContext.xml放在src目录下使用此路径 -->        <param-value>WEB-INF/classes/applicationContext.xml</param-value>        <!-- 如果 applicationContext.xml放在WEB-INF目录下使用此路径（使用Eclipse时会创建在WEB-INF目录下）-->          <!-- <param-value>WEB-INF/applicationContext.xml</param-value> -->  </context-param>    <listener>          <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>    </listener>

#4添加Hbiernate特性

*1）在MySQL的默认数据库test中创建user表并插入几条数据，用作登录，代码如下

use test;create table if not exists user(id int primary key auto_increment,name varchar(50) not null,password varchar(50) not null);insert into user(name,password) values('user1','password1');insert into user(name,password) values('user2','password2');insert into user(name,password) values('user3','password3');select * from user;

*2）创建MySQL DB Driver
       右击Window----Show View----DB Browser（或使用其它方式打开DB Browser）

       在DB Browser内右击空白处----New，按下图填写和选择，其中Add JARs----搜索并选择mysql-connector-java-5.1.26-bin.jar

       mysql-connector-java-5.1.26-bin.jar可以在MySQL安装目录下找到..\MySQL\Connector J 5.1.26或者到官网下载

       添加此DB Driver可以方便添加Hibernate特性和使用Hibernate反向工程创建POJO和DAO等

       
*3）添加hibernate特性

       右击项目名----Myeclipse----Add Hibernate Capabilities----如下图所示，选择红框的内容----Next

       Hibernate版本过高可能会出现问题，此处选择Hibernate3.3

       

       Next----选择Spring configuration file----Next----选择Existing Spring configuration file（在添加Spring特性时已有此文件）

       Next----如下图设置数据源连接细节----选择刚才创建的DB Driver（其它会自动填写）----填写密码

       

       Next----去除Create SessionFactory class的勾选----Finish，此时可以部署到Tomcat并查看是否出错

#5搭建ExtJS环境

*1）添加ExtJS SDK，可参考http://blog.csdn.net/u010520912/article/details/24329955

       *ext-lang-zh_CN.js       *此文件在locale文件夹（国际化文件）内，在中文环境下只需引入ext-lang-zh_CN.js

       *bootstrap.js                     *根据路径自动调用适当的js文件，如选择调用ext-all.js或是ext-all-debug.js

       *ext-all-dev.js                *在发布的时候需要调用的extjs文件

       *ext-all-debug.js               *在调试的时候需要调用的extjs文件

       *ext-all.js                     *在发布的时候需要调用的extjs文件

       *resources                        *资源文件，如css和images

       在WebRoot目录下新建extjs文件夹，复制bootstrap.js、ext-all-dev.js、ext-all-debug.js、ext-all.js 、resources到里面

       再在extjs文件夹下新建locale文件夹，将ext-lang-zh_CN.js 复制到里面，如下图所示

       

#6编写程序

*1）在src目录下新建以下一些包

       

       本程序分为三层：应用层、Service层以及DAO层

       其中，pojo为简单的JavaBean，与数据库的表相对应

       action为应用层，用于响应用户操作，实例化Service层对象并调用其中的方法以返回有效数据

       Service层则实例化Dao层的对象并调用其中的方法，而Dao层对象返回计算后的字符串，用于与数据库进行交互

       程序是正向运行的，而编写程序的顺序是反向的，先编写与数据库对应的pojo，然后编写Dao层以执行有关数据库的操作

       接着编写Service层，以操作DAO层的方法，并添加事务支持，最后编写action应用层，以响应用户操作

       基于文章篇幅，代码里不再添加相应的注释

*2）使用Hibernate反向工程生成POJO，也可自己编写

       在DB Browser中连接刚才创建的DB Driver，并展开test数据库的user表，右击打开Hibernate Reverse Engineering

       如下图所示，选择红框的内容----Next----选择Hibernate types----Next---选中user表并在右边的框中设置Class Name为User----Finish

       

*3）编写idao，在src目录下的com.tms.idao包中新建一个名为IUserDao的类，代码如下

package com.tms.idao;import java.util.List;import com.tms.pojo.User;public interface IUserDao {public void createUser(User user);public List<User> listUser();public boolean findUserByNameAndPassword(String name,String password);}

*4）编写dao，也可以使用Hbiernate反向工程自动生成

       在src目录下的com.tms.dao包中新建一个名为UserDaoImpl的类，代码如下

package com.tms.dao;import java.util.List;import org.springframework.orm.hibernate3.support.HibernateDaoSupport;import com.tms.idao.IUserDao;import com.tms.pojo.User;public class UserDaoImpl extends HibernateDaoSupport implements IUserDao {public void createUser(User user) {this.getHibernateTemplate().persist(user);}public List<User> listUser() {return this.getHibernateTemplate().find("select user from User user");}public boolean findUserByNameAndPassword(String name,String password) {List<User> userList = this.getHibernateTemplate().find("select user from User user where user.name =? and user.password =?",name,password);if (userList.size() > 0) {return true;}return false;}}

*5）编写iservice， 在src目录下的com.tms.iservice包中新建一个名为IUserService的类，代码如下

package com.tms.iservice;import java.util.List;import com.tms.pojo.User;public interface IUserService {public void createUser(User user);public List<User> listUser();public boolean findUserByNameAndPassword(String name,String password);}

*6）编写service，在src目录下的com.tms.service包中新建一个名为UserServiceImpl的类，代码如下

package com.tms.service;import java.util.List;import com.tms.idao.IUserDao;import com.tms.iservice.IUserService;import com.tms.pojo.User;public class UserServiceImpl implements IUserService {private IUserDao userDao;public void createUser(User user) {userDao.createUser(user);}public List<User> listUser() {return userDao.listUser();}public boolean findUserByNameAndPassword(String name, String password) {return userDao.findUserByNameAndPassword(name, password);}public IUserDao getUserDao() {return userDao;}public void setUserDao(IUserDao userDao) {this.userDao = userDao;}}

*7）编写action，在src目录下的com.tms.action包中新建一个名为LoginAction的类，代码如下

package com.tms.action;import java.util.*;import com.tms.iservice.IUserService;import com.opensymphony.xwork2.ActionSupport;public class LoginAction extends ActionSupport {private static final long serialVersionUID = 1L;public Map<?, ?> responseJson;public String userName;public String userPassword;private IUserService userService;    public Map<?, ?> getResponseJson() {           return responseJson;       }       public void setResponseJson(Map<String, Object> responseJson) {           this.responseJson = responseJson;       } public String getUserName() {return userName;}public void setUserName(String userName) {this.userName = userName;}public String getUserPassword() {return userPassword;}public void setUserPassword(String userPassword) {this.userPassword = userPassword;}public String login() {boolean isLogin = userService.findUserByNameAndPassword(userName, userPassword);        Map<String, Object> map = new HashMap<String, Object>();          map.put("success", isLogin);        System.out.print(isLogin);        this.setResponseJson(map);        return SUCCESS;  }public String tms() {return SUCCESS;}public IUserService getUserService() {return userService;}public void setUserService(IUserService userService) {this.userService = userService;}}

*8）配置Struts.xml文件，在struts标签内添加如下代码

<constant name="struts.objectFactory" value="spring"/><constant name="struts.devMode" value="true"/><package name="login" extends="json-default">          <action name="tmslogin" class="loginAction" method="login">                          <result type="json">                  <param name="root">responseJson</param>            </result>        </action>     </package>    <package name="tms" extends="struts-default">        <action name="tmsmain" class="loginAction" method="tms"><result name="success">WEB-INF/page/main.jsp</result></action>    </package>

*9）配置applicationContent.xml文件，在beans标签内添加如下代码

<bean id="sessionFactory" class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean"><property name="dataSource"><ref bean="dataSource" /></property><property name="annotatedClasses"><list><value>com.tms.pojo.User</value></list></property><property name="hibernateProperties"><props><prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop><prop key="hibernate.show_sql">true</prop><prop key="hibernate.format_sql">false</prop></props></property></bean><bean id="userDao" class="com.tms.dao.UserDaoImpl"><property name="sessionFactory" ref="sessionFactory"></property></bean><bean id="hibernateTransactionAttributeSource" class="org.springframework.transaction.interceptor.NameMatchTransactionAttributeSource"><property name="properties"><props><prop key="*">PROPAGATION_REQUIRED</prop></props></property></bean><bean id="hibernateTransactionManager"        class="org.springframework.orm.hibernate3.HibernateTransactionManager">        <property name="sessionFactory" ref="sessionFactory" />    </bean><bean id="userService" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean"><property name="transactionManager" ref="hibernateTransactionManager"></property><property name="target"><bean class="com.tms.service.UserServiceImpl"><property name="userDao" ref="userDao"></property></bean></property><property name="transactionAttributeSource" ref="hibernateTransactionAttributeSource"></property></bean><bean id="loginAction" scope="prototype" class="com.tms.action.LoginAction"><property name="userService" ref="userService"></property></bean>

#7编写ExtJS登录界面

*1）在WebRoot目录下添加如下图所示的文件和文件夹，并且在WEB-INF下新建page文件夹，page文件夹下新建main.jsp文件

       page文件夹下的main.jsp文件用于登录成功后跳转

       

*2）编写index.jsp，打开index.jsp文件，添加如下代码

<html>  <head>    <base href="<%=basePath%>">    <title>登录</title>    <!-- 新增的代码 --><link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css">    <script type="text/javascript" src="./extjs/bootstrap.js"></script>        <script type="text/javascript" src="./extjs/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="app.js"></script><!-- 新增的代码 -->  </head>  <body></body></html>

*3）编写app.js，打开app.js文件，添加如下代码

Ext.onReady(function(){Ext.application({name: 'TMS',appFolder: 'app',launch: function() {Ext.create('Ext.container.Viewport', {items: {xtype: 'loginView'}});},controllers: ['LoginController']});});

*4）编写LoginController.js，打开LoginController.js文件，添加如下代码

Ext.define('TMS.controller.LoginController', {extend: 'Ext.app.Controller',views: ['LoginView'],init: function() {}});

*5）编写LoginView.js，打开LoginView.js文件，添加如下代码

Ext.define('TMS.view.LoginView', {    extend: 'Ext.form.Panel',    alias : 'widget.loginView',    height: 150,    width: 320,    id:'LoginView',    layout: {        type: 'absolute'    },    bodyPadding: 10,    title: '欢迎登录小熊外卖管理系统',    initComponent: function() {        Ext.applyIf(this, {            style: {                marginRight: 'auto',                marginLeft: 'auto',                marginTop: '200px',                marginBottom: 'auto'            },            items: [                {                    xtype: 'textfield',                    anchor: '100%',                    x: 50,                    y: 10,                    maxWidth: 200,                    fieldLabel: '账号',                    labelAlign: 'left',                    labelWidth: 40,                    name: 'userName'                },                {                    xtype: 'textfield',                    anchor: '100%',                    x: 50,                    y: 40,                    maxWidth: 200,                    fieldLabel: '密码',                    labelAlign: 'left',                    labelWidth: 40,                    name: 'userPassword',                    inputType: 'password'                },                {                    xtype: 'button',                    handler: function(button, event) {                    Ext.getCmp('LoginView').getForm().submit({                          url:'tmslogin',                           method: 'post',                          waitMsg: "正在登录......",                          success: function(form, action) {                          var loginResult = action.result.success;                            if (loginResult === true) {                               window.location.href="tmsmain";                            }                        },                         failure: function(form, action) {                              switch (action.failureType) {                                  case Ext.form.Action.CLIENT_INVALID:                                      Ext.Msg.alert("登录失败", "提交的表单数据无效,请检查!");                                  break;                                  case Ext.form.Action.CONNECT_FAILURE:                                      Ext.Msg.alert("登录失败", "连接失败！");                                  break;                                  case Ext.form.Action.SERVER_INVALID:                                      Ext.Msg.alert("登录失败","账号或密码错误！");                                 break;                           }                         }                      });                     },                    x: 150,                    y: 80,                    id: 'loginButton',                    width: 60,                    text: '登录'                },                {                    xtype: 'button',                    handler: function(button, event) {                    Ext.getCmp('LoginView').form.reset();                     },                    x: 220,                    y: 80,                    id: 'resetButton',                    width: 60,                    text: '重置'                }            ]        });        this.callParent(arguments);    }});

#8测试并运行程序

*1）在浏览器打开地址http://localhost:8080/Takeout1/index.jsp，并输入用户名和密码（user1和password1）

       

#9其它

*1）程序源码下载http://download.csdn.net/detail/u010520912/7236577

       尽量使用MyEclipse10.x导入，不要使用较高版本的JDK

       确保MySQL服务开启并且test数据库有user表和数据，配置好applicationContent.xml中数据库的配置，如用户名和密码

       如果出现java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I错误，是包版本冲突问题，删除struts2的包即可

       打开Window----Preferences----搜索struts----打开Struts2----Remove antlr-2.7.2.jar即可

       如果出现Cannot locate the chosen ObjectFactory implementation: spring错误，要导入Struts2-Spring-plugin-2.2.1.jar       

*2）注：此登录功能是使用ExtJS的MVC实现的，实际上并不需要，因为登录功能没有Model，可替换成以下代码

    Ext.onReady(function () {    Ext.QuickTips.init();     Ext.form.Field.prototype.msgTarget='side';    Ext.create("Ext.form.Panel", {        title: '欢迎登录小熊外卖管理系统',        frame: true,        width: 320,        height: 150,        bodyPadding: 10,        defaultType: 'textfield',        renderTo: Ext.getBody(),        defaults: {            anchor: '100%',            labelWidth: 40,            labelAlign: 'left'        },            style: {                marginRight: 'auto',                marginLeft: 'auto',                marginTop: '200px',                marginBottom: 'auto'            },        items: [            {                allowBlank: false,                blankText   : "账号不能为空",                fieldLabel: '账号',                maxWidth: 200,                name: 'userName',                emptyText: '请输入你的账户'            },            {                allowBlank: false,                blankText   : "密码不能为空",                fieldLabel: '密码',                maxWidth: 200,                name: 'userPassword',                emptyText: '请输入你的密码',                inputType: 'password'            }        ],        buttons: [            {             text: '登录',             handler: function(button, event) {            this.up('form').getForm().submit({                          url:'tmslogin',                           method: 'post',                          waitMsg: "正在登录......",                          success: function(form, action) {                          var loginResult = action.result.success;                            if (loginResult === true) {                               window.location.href="tmsmain";                            }                        },                         failure: function(form, action) {                              switch (action.failureType) {                                  case Ext.form.Action.CLIENT_INVALID:                                      Ext.Msg.alert("登录失败", "提交的表单数据无效,请检查!");                                  break;                                  case Ext.form.Action.CONNECT_FAILURE:                                      Ext.Msg.alert("登录失败", "连接失败！");                                  break;                                  case Ext.form.Action.SERVER_INVALID:                                      Ext.Msg.alert("登录失败","账号或密码错误！");                                 break;                           }                         }                      });                     },            id: 'loginButton',            width: 60            },            {             text: '重置',            handler: function(button, event) {             this.up('form').getForm().reset();                     },                id: 'resetButton',                    width: 60                        }        ]    });});