现在的位置: 首页 > 综合 > 正文

ExtJS实战(7)-登陆

2011年03月29日 ⁄ 综合 ⁄ 共 14820字 ⁄ 字号 评论关闭

上篇文章我们已经把最核心的ExtJS代码贴出来了。慢慢消化着,我们先来一个完整的登陆应用。登陆页面如下:

 

1.login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"  href="resources/css/ext-all.css">

<script type="text/javascript" src="resources/js/ext-base.js"></script>

<script type="text/javascript" src="resources/js/ext-all.js"></script>

<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="resources/js/login.js"></script>

</head>

<body>

 

</body>

</html>

 

2.其中使用到的login.js

Ext.onReady(function() {

              Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

              // 使用表单提示

              Ext.QuickTips.init();

              Ext.form.Field.prototype.msgTarget = 'side';

 

              // 定义表单

              var login = new Ext.FormPanel({

                            labelWidth : 75,

                            monitorValid : true,// 把有formBind:true的按钮和验证绑定

                            baseCls : 'x-plain',

                            defaults : {

                                 width : 150

                            },

                            defaultType : 'textfield',// 默认字段类型

 

                            // 定义表单元素

                            items : [{

                                          fieldLabel : '帐户',

                                          name : 'login.uname',// 元素名称

                                          // anchor:'95%',//也可用此定义自适应宽度

                                          allowBlank : false,// 不允许为空

                                          blankText : '帐户不能为空!'// 错误提示内容

                                     }, {

                                          inputType : 'password',

                                          fieldLabel : '密码',

                                          // anchor:'95%',

                                          name : 'login.upass',

                                          allowBlank : false,

                                          blankText : '密码不能为空!'

                                     }],

                            buttons : [{

                                 text : '登陆',

                                 formBind : true,

                                 type : 'submit',

                                 // 定义表单提交事件

                                 handler : function() {

                                     if (simple.form.isValid()) {// 验证合法后使用加载进度条

                                          Ext.MessageBox.show({

                                                        title : '请稍等',

                                                        msg : '正在登陆...',

                                                        progressText : '',

                                                        width : 300,

                                                        progress : true,

                                                        closable : false,

                                                        animEl : 'loading'

                                                   });

                                          // 控制进度速度

                                          var f = function(v) {

                                               return function() {

                                                   var i = v / 11;

                                                   Ext.MessageBox

                                                             .updateProgress(i, '');

                                               };

                                          };

 

                                          for (var i = 1; i < 12; i++) {

                                              setTimeout(f(i), i * 150);

                                          }

 

                                          // 提交到服务器操作

                                          login.form.doAction('submit', {

                                                        url : 'login.do',// 文件路径

                                                        method : 'post',// 提交方法post或get

                                                        params : '',

                                                        // 提交成功的回调函数

                                                       success : function(form, action) {

                                                    if (action.result.msg == 'ok') {

                                                        window.location = 'index.jsp';

                                                    } else {

                                                        Ext.Msg

                                                                .alert(

                                                                        '登陆失败',

                                                                        action.result.msg);

                                                    }

                                                },

                                                // 提交失败的回调函数

                                                failure : function() {

                                                    Ext.Msg.alert('错误',

                                                            '服务器出现错误请稍后再试!');

                                                }

                                                   });

                                     }

                                 }

                            }, {

                                 text : '取消',

                                 handler : function() {

                                     login.form.reset();

                                 }// 重置表单

                            }]

                       });

              // 定义窗体

              var win = new Ext.Window({

                   id : 'loginWin',

                   title : '用户登陆',

                   layout : 'fit', // 布局方式fit,自适应布局

                   width : 300,

                   height : 150,

                   modal : true,

                   plain : true,

                   bodyStyle : 'padding:5px;',

                   maximizable : false,// 禁止最大化

                   closeAction : 'close',

                   closable : false,// 禁止关闭

                   collapsible : true,// 可折叠

                   plain : true,

                   buttonAlign : 'center',

                   items : login

                       // 将表单作为窗体元素嵌套布局

                   });

              win.show();// 显示窗体

 

         });

 

       看了上篇文章中的JS代码,这里的登陆JS真是小巫见大巫,简单的不行。我们看到,上面主要是一个窗口和一个表单,这个表单提交的URL为login.do,那我们服务器端就要一个Action组件来对此进行响应。接下来我们就来看下服务器端的代码:

package org.leno.houseHire.action;

 

import java.io.PrintWriter;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.leno.houseHire.service.ILoginService;

import org.leno.houseHire.service.LoginDTO;

 

public class LoginAction extends Action {

    private ILoginService loginService;

 

    public void setLoginService(ILoginService loginService) {

        this.loginService = loginService;

    }

    public ActionForward execute(ActionMapping mapping, ActionForm form,

            HttpServletRequest request, HttpServletResponse response) throws Exception {

        response.setCharacterEncoding("utf-8");

        PrintWriter pw = response.getWriter();

        LoginForm lForm = (LoginForm) form;

        LoginDTO dto = lForm.getLogin();

        boolean flag = loginService.valid(dto);

        if(flag){

            request.getSession().setAttribute("USER_INFO", dto);

            pw.print("{success:true,msg:'ok'}");

        }else{

            pw.print("{success:true,msg:'用户名或密码错误!'}");

        }

        return null;

    }

}

   

    这里有几个地方要提醒下大家,首先是我们这里的Action也是利用Service做事,所以是由Spring来管理的,其次,我们依然采用实体DTO对象做ActionForm的属性,最后,也是最重要的一点,结合客户端的回调代码分析,要清楚服务器端返回给客户端的是一个JSON对象!这里使用到的其它JAVA类如下:

1.数据访问层(DAO及其实现)

package org.leno.houseHire.dao;

 

 

public interface ILoginDAO {

 

    public boolean valid(User user);

}

package org.leno.houseHire.dao;

 

import org.hibernate.Query;

import org.hibernate.Session;

import org.hibernate.SessionFactory;

 

 

public class LoginDAOImpl implements ILoginDAO {

   

    private SessionFactory sessionFactory;

 

    public void setSessionFactory(SessionFactory sessionFactory) {

        this.sessionFactory = sessionFactory;

    }

 

    public boolean valid(User user) {

        Session session = sessionFactory.openSession();

        Query query = session.createQuery("from User u where u.uname=:name and u.upass=:pass");

        query.setString("name", user.getUname());

        query.setString("pass", user.getUpass());

        Object obj = query.uniqueResult();

        session.close();

        if(obj!=null){

            User user2= (User) obj;

            user.setUid(user2.getUid());

            return true;

        }

        return false;

    }

 

}

 

2.服务层(Service及其实现)

package org.leno.houseHire.service;

 

public interface ILoginService {

 

    public boolean valid(LoginDTO dto);

}

package org.leno.houseHire.service;

 

import java.lang.reflect.InvocationTargetException;

 

import org.apache.commons.beanutils.BeanUtils;

import org.leno.houseHire.dao.ILoginDAO;

import org.leno.houseHire.dao.User;

 

 

public class LoginServiceImpl implements ILoginService {

   

    private ILoginDAO loginDAO;

 

    public void setLoginDAO(ILoginDAO loginDAO) {

        this.loginDAO = loginDAO;

    }

 

 

 

    public boolean valid(LoginDTO dto) {

        User pojo = new User();

        try {

            BeanUtils.copyProperties(pojo, dto);

        } catch (IllegalAccessException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        } catch (InvocationTargetException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

        boolean flag =  loginDAO.valid(pojo);

        if(flag){

            dto.setUid(pojo.getUid());

        }

        return flag;

    }

 

}

 

3.登陆应用的DTO(数据传输对象)

package org.leno.houseHire.service;

 

public class LoginDTO {

 

    private Integer uid;

    private String uname;

    private String upass;

   

    public Integer getUid() {

        return uid;

    }

    public void setUid(Integer uid) {

        this.uid = uid;

    }

    public String getUname() {

        return uname;

    }

    public void setUname(String uname) {

        this.uname = uname;

    }

    public String getUpass() {

        return upass;

    }

    public void setUpass(String upass) {

        this.upass = upass;

    }

   

   

}

 

4.登陆应用的ActonForm(表现层的传值组件)

package org.leno.houseHire.action;

 

import org.apache.struts.action.ActionForm;

import org.leno.houseHire.service.LoginDTO;

 

 

public class LoginForm extends ActionForm {

 

    private LoginDTO login = new LoginDTO();

 

    public LoginDTO getLogin() {

        return login;

    }

 

    public void setLogin(LoginDTO login) {

        this.login = login;

    }  

}

 

       如果用户登陆失败,将会继续停留在登陆页面,获得错误提示信息;如果登陆成功,那么就可以进入到系统首页index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="resources/js/ext-base.js"></script>

<script type="text/javascript" src="resources/js/ext-all.js"></script>

<script type="text/javascript" src="resources/js/skin.js"></script>

<script type="text/javascript" src="resources/js/TabCloseMenu.js"></script>

<script type="text/javascript" src="resources/js/init-main.js"></script>

<style type="text/css">

.x-panel-body p {

    margin: 5px;

}

 

.x-column-layout-ct .x-panel {

    margin-bottom: 5px;

}

 

.x-column-layout-ct .x-panel-dd-spacer {

    margin-bottom: 5px;

}

 

.user {

    background-image: url(resources/icons/user.gif) !important;

}

 

.unit {

    background-image: url(resources/icons/application_view_list.png)

        !important;

}

 

.settings {

    background-image: url(resources/icons/cog.png) !important;

}

 

.tabs {

    background-image: url(resources/icons/tabs.gif ) !important;

}

.munuList {

    list-style: square;

    padding-left: 30px;

    margin-top: 10px;

    color: #000000;

    font-size: 12px;

    text-decoration: underline;

    cursor: hand;

}

 

#main-panel td {

    padding: 5px;

}

</style>

</head>

<body>

<div id="toolbar-div"></div>

<div id="menus">

            <div id="userMenus">

                <ul class="munuList">

                    <li>

                        <span id="person" href="house/infos.jsp"

                            onclick="onClickMenuItem(this)">租房信息</span>

                    </li>

                </ul>

            </div>

            <div id="unitMenus">

                <ul class="munuList">

                    <li>

                        <span id="unit" href="unit/default.jsp"

                            onclick="onClickMenuItem(this)">机构信息</span>

                    </li>

                </ul>

            </div>

            <div id="settingMenus">

                <ul class="munuList">

                    <li>

                        <span id="userManager" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">用户管理</span>

                    </li>

                </ul>

            </div>

            <div id="msg">

                <ul class="munuList">

                    <li>

                        <span id="readMsg" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">阅读短信息</span>

                    </li>

                    <li>

                        <span id="sendMsg" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">发送短信息</span>

                    </li>

                    <li>

                        <span id="searchMsg" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">查询短信息</span>

                    </li>

                </ul>

            </div>

            <div id="eMeeting">

                <ul class="munuList">

                    <li>

                        <span id="meetingRoom" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">电子会议室</span>

                    </li>

                    <li>

                        <span id="newMeetingRoom" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">新建电子会议</span>

                    </li>

                    <li>

                        <span id="meetingManage" href="system/default.jsp"

                            onclick="onClickMenuItem(this)">电子会议管理</span>

                    </li>

                </ul>

            </div>

        </div>

 

        <div id="center">

 

        </div>

 

        <div id="afficheDiv">

            <p>

                尊敬的

                <font color=green><B>LENO</B> </font> ,欢迎您使用房屋出租系统.

            </p>

            <p>

                <img src="resources/images/ajax.bmp" width="600" height="400">

                <!-- <img src="resources/images/JSON.gif" height="180">

                <img src="resources/images/apache.png" height="180" width="200">

                <img src="resources/images/java-logo.jpg" > -->

            </p>

        </div>

</body>

</html>

 

       首页上面涉及到的JS,主要部分已经贴出来了。那么,结合init-main.js里的onClickMenuItem()函数,我们知道,还需要一个放frame的tabFrame.jsp页面,如下:

<%@ page language="java" pageEncoding="utf-8"%>

<IFRAME SRC="<%=request.getParameter("url")%>" width="100%" height="100%" frameborder="0"></IFRAME>

 

       这样,我们就能将它和我们前面的表格串起来了,我们的登陆应用也完成了。效果如下:

 

 

 

 

抱歉!评论已关闭.