IDEA使用DWR框架实现登录功能

原创

吟游诗人的算法笔记 2022-10-31 17:37:54 博主文章分类：javaweb系列 ©著作权

©著作权归作者所有：来自51CTO博客作者吟游诗人的算法笔记的原创作品，请联系作者获取转载授权，否则将追究法律责任

近来做项目需要用到SSH框架，我就顺便用了下DWR来做登录和注册了，下面就讲述如何制作登录功能。

众所周知，DWR框架是基于ajax的异步框架，通过其可以在js代码里直接对java方法进行操作，其底层肯定是借用了ajax的异步的，但是其也不可能真的能够在js里调用java方法，不过是利用java的一些反射机制罢了，不过必须得承认其做的非常好。

下面也不说废话了，直接上手吧。
首先申明，我的项目已经配置了SSH框架，所以和没配置的有细微差别，会说明的。

一、导入DWR包
这点想必大家都很清楚了，这里我采用的是用maven，可以pom.xml里配置

<!-- dwr -->
    <dependency>
        <groupId>org.directwebremoting</groupId>
        <artifactId>dwr</artifactId>
        <version>3.0.M1</version>
    </dependency>

也可以像我，点开File->Project Structure

IDEA使用DWR框架实现登录功能_教程

我选的是图示这个

IDEA使用DWR框架实现登录功能_教程_02

然后把包加进去就不多废话了，继续

在WEB-INF下建立dwr.xml文件

这个是使用spring框架注入的写法，这个下面是一般写法

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr30.dtd">
<dwr>
    <allow>
        <create creator="spring" javascript="dwrLogin">
            <param name="xxx" value="dwrLogin" />
        </create>
    </allow>
</dwr>

这个param 里的 value 和 spring 配置文件中对应的bean的 id 一样
下面这个是一般写法

<dwr>  
    <allow>  
        <create creator="new" javascript="dwrLogin">  
            <param name="class" value="yypt.dwrLogin"></param>  
        </create>  
    </allow>  
</dwr>

javascript 里的值就是在 js 代码里能用到的对象的名字

具体的dwr.xml配置说明，

然后配置web.xml，用来配置dwr框架要响应的url。
把dwr的配置文件写在前面，这样就算配置了struts也不用担心冲突
配置文件如下：

<!-- 在struts2之前加一个dwr -->
    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <!-- 是否允许调试，如果要在浏览器中调试则必须设置为true -->
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <!-- 如果允许跨域请求，则必须将此值设置为false，默认值为true -->
        <init-param>
            <param-name>crossDomainSessionSecurity</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>allowScriptTagRemoting</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

好了这些都配置好了，这时配置一个bean用来响应客户端发来的请求
就一个实现了get和set的bean，类名叫UserInfo，字段有name 和 pwd，我的是hibernate逆向工程生成的，就不放上来了，这么简单想必大家都会。

另外提一句，如果是使用spring注入的，需要在spring配置文件中加入：

<bean id="dwrLogin" class="service.LoginCheckService"/>

id和上面dwr.xml中配置的value一致。

然后再做一个用来响应的Service类
如果是spring配置的，就是上面这个class对应的类的对象
如果是直接创建的，就和 param 中的 value 一致。
下面简单写一下这个类：

package service;

import bean.Userinfo;

public class LoginCheckService {

    public Boolean isInfoRight(String name, String pwd){
        Userinfo userinfo = new Userinfo();
        userinfo.setUserName(name);
        userinfo.setUserPwd(pwd);
        System.out.println("DWR | " + name+ " | " + pwd);
        return false;
    }
}

很显然，我的方法有两个参数，分别是从网页获取的用户名和密码，然后在后台将其打印出来。
并且返回一个参数，返回参数为 false。

好了那么前端代码，需要添加三个js文件，前两个文件文件名是固定的，第三个dwrLogin.js的文件名是前面在dwr.xml配置的javascript的值

<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%= request.getContextPath()%>/dwr/interface/dwrLogin.js"></script>

我的前端页面比较简单，不要在意样式了，架构是这样

<!-- 登录 -->
            <div class="login animated">
                <h2>登录</h2>
                <form  action="login" method="post">
                    <input type="text" name="lUserName" class="login-input gradient-border" id="login-name" placeholder="(*/ω＼*)账号">

                    <input type="password" name="lUserPwd" class="login-input gradient-border" id="login-pwd" placeholder="(*/ω＼*)密码">
                    <br><span class="login-error"></span><br>

                    <button type="submit" class="btn btn-success login-btn">登录</button>
                    <br><br>
                    <a class="turn-register">没有账号？立即注册</a>
                </form>
            </div>

我的js代码，看起来比较长，其实很简单，里面有点表单验证逻辑。另外需要一提的是，我是一点击登录按钮就是用DWR去调用后台逻辑判断账号密码是否正确（当然我的后台没有真正的逻辑，恒返回false），但是要知道，dwr调用后并不是直接获取到一个值，而是用了一个回调函数，也就是说不能直接这样

var result = dwrLogin.isInfoRight(userName.val(),userPwd.val());

这样是获取不到返回值的，而需要一个回调函数：

// 使用DWR
dwrLogin.isInfoRight(userName.val(),userPwd.val(),callback_login);
...
// 回调函数
var callback_login = function(data){
    console.log("data: " + data);
    ...
}

而如果想在原函数获取到回调后的值，就只能用一个全局变量了。
DWR常用于注册时判断用户名重复检验，因为其是异步的，但是用到登录这儿，异步就不行了，因为我的逻辑肯定是在登录按钮点击事件的函数中写的，而回调又是异步的，我就不能正确获取到回调后的返回值。这时就显示DWR的强大了，它虽然是默认异步，但也是支持同步的，设置很容易：

// 设置dwr 设为false就变成了同步方法，设置true就是异步
dwr.engine.setAsync(false);

这样就可以实现同步响应了，这样就可以用DWR来实现登录功能啦！
下面是完整js代码

// 初始化登录验证
var checkLogin = function(){
    var loginBtn = $('.login-btn');
    var loginError = $('.login-error');
    var userName = $('#login-name');
    var userPwd = $('#login-pwd');
    loginBtn.on('click',function(){
        // 判断如果有空没填，就直接报错
        if(userName.val().trim() == "" || userPwd.val().trim() == ""){
            loginError.html(REQUEST_EMPTY);
            return false;
        }else{
            loginError.html("");
        }

        // 设置dwr 为同步方法
        dwr.engine.setAsync(false);
        dwrLogin.isInfoRight(userName.val(),userPwd.val(),callback_login);
        // 重置dwr为异步
        dwr.engine.setAsync(true);


        console.log("同步完:" + okLogin);
        // 能够登录
        if( okLogin == true ){
            return false;
        }else{
            loginError.html(LOGIN_ERROR);
            return false;
        }
        return false;

    });
};

var callback_login = function(data){
    console.log("data: " + data);
    okLogin = data;
    console.log("okLogin:" + okLogin);
    isOKay = true;
}