Dwr3.0纯注解(纯Java Code配置)配置与应用浅析二之前端调用后端

Dwr是一个轻量级的远程调用框架，它可以帮助开发者在前端页面中方便地调用后端Java方法。在Dwr 3.0版本中，提供了完全基于注解的纯Java代码配置方式，这种方式相对于传统的XML配置方式更加简单、易用。

配置DwrServlet

首先，我们需要在web.xml文件中配置DwrServlet：

<servlet>
    <servlet-name>DwrServlet</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>activeReverseAjaxEnabled</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>allowGetForSafariButMakeForgeryEasier</param-name>
        <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>DwrServlet</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

其中，init-param中的三个参数分别表示：

• debug：是否开启调试模式，建议设置为false。
• activeReverseAjaxEnabled：是否启用反向Ajax，即能够由服务器自动向客户端发送数据的机制。
• allowGetForSafariButMakeForgeryEasier：是否允许使用GET方式提交Dwr请求。建议设置为false，以防止跨站点请求伪造（CSRF）攻击。

配置Dwr服务

接下来，我们需要在Java代码中定义一个Dwr服务接口，并通过注解来标识该服务：

package com.example.dwr;

import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;

@RemoteProxy
public interface HelloWorldService {
    @RemoteMethod
    public String sayHello(String name);
}

在注解中，@RemoteProxy表示该接口是一个Dwr服务接口，@RemoteMethod表示该方法可供前端调用。

然后，我们需要实现该接口，并在实现类上也加上注解：

package com.example.dwr;

import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.RemoteMethod;

@RemoteProxy
public class HelloWorldServiceImpl implements HelloWorldService {
    @RemoteMethod
    public String sayHello(String name) {
        return "Hello, " + name + "!";
    }
}

最终效果

完成以上配置之后，我们就可以在前端页面中使用Dwr调用后端Java方法了。例如，在JavaScript代码中可以这样调用：

HelloWorldService.sayHello("World", {
    callback:function(result) {
        console.log(result);
    }
});

这会输出字符串"Hello, World!"到控制台。

示例说明

以下是两个简单的示例，用于演示Dwr如何在前端页面中调用后端Java方法。

示例一：计算器

首先，定义一个CalculatorService接口用于提供加减乘除四种基本运算：

package com.example.dwr;

import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;

@RemoteProxy
public interface CalculatorService {
    @RemoteMethod
    public int add(int x, int y);

    @RemoteMethod
    public int subtract(int x, int y);

    @RemoteMethod
    public int multiply(int x, int y);

    @RemoteMethod
    public int divide(int x, int y);
}

然后，在实现类CalculatorServiceImpl中实现这些方法：

package com.example.dwr;

import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.RemoteMethod;

@RemoteProxy
public class CalculatorServiceImpl implements CalculatorService {
    @RemoteMethod
    public int add(int x, int y) {
        return x + y;
    }

    @RemoteMethod
    public int subtract(int x, int y) {
        return x - y;
    }

    @RemoteMethod
    public int multiply(int x, int y) {
        return x * y;
    }

    @RemoteMethod
    public int divide(int x, int y) {
        if (y == 0) {
            throw new IllegalArgumentException("Cannot divide by zero");
        }
        return x / y;
    }
}

最后，在前端页面中调用这些方法：

CalculatorService.add(2, 3, {
    callback:function(result) {
        console.log("2 + 3 = " + result);
    }
});

CalculatorService.multiply(2, 3, {
    callback:function(result) {
        console.log("2 * 3 = " + result);
    }
});

示例二：批量文件上传

首先，定义一个FileUploadService接口用于上传文件：

package com.example.dwr;

import java.io.InputStream;

import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.io.FileTransfer;

@RemoteProxy
public interface FileUploadService {
    @RemoteMethod
    public FileTransfer[] uploadFiles(InputStream[] inputStreams, String[] fileNames);
}

可以看到，这个接口的参数是两个数组，分别表示多个文件的输入流和文件名，返回结果是一个包含多个文件信息的数组FileTransfer[]。

然后，在实现类FileUploadServiceImpl中实现这个方法：

package com.example.dwr;

import java.io.InputStream;

import org.apache.commons.io.IOUtils;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.io.FileTransfer;

@RemoteProxy
public class FileUploadServiceImpl implements FileUploadService {
    @RemoteMethod
    public FileTransfer[] uploadFiles(InputStream[] inputStreams, String[] fileNames) {
        if (inputStreams.length != fileNames.length) {
            throw new IllegalArgumentException("The length of inputStreams and fileNames must be the same");
        }

        FileTransfer[] fileTransfers = new FileTransfer[inputStreams.length];
        for (int i = 0; i < inputStreams.length; i++) {
            InputStream inputStream = inputStreams[i];
            String fileName = fileNames[i];

            byte[] fileData;
            try {
                fileData = IOUtils.toByteArray(inputStream);
            } catch (Exception e) {
                throw new RuntimeException("Error reading file data", e);
            }

            fileTransfers[i] = new FileTransfer(fileName, "application/octet-stream", fileData);
        }

        return fileTransfers;
    }
}

在这个示例中，我们使用了Apache Commons IO库来读取上传的文件内容，并将内容封装成FileTransfer对象返回。

最后，在前端页面中实现文件上传：

function uploadFiles() {
    var fileInput = document.getElementById("fileInput");
    var fileCount = fileInput.files.length;

    var inputStreams = [];
    var fileNames = [];

    for (var i = 0; i < fileCount; i++) {
        var file = fileInput.files[i];
        var inputStream = file.slice();

        inputStreams.push(inputStream);
        fileNames.push(file.name);
    }

    FileUploadService.uploadFiles(inputStreams, fileNames, {
        callback:function(result) {
            console.log(result);
        }
    });
}

在这个示例中，我们使用了HTML5中提供的File API来读取文件输入流，并调用FileUploadService.uploadFiles方法上传文件，并在回调方法中输出上传结果。

总之，Dwr的使用非常简单，只需要定义好Java服务接口和实现类，然后在前端页面中调用这些服务方法即可。而纯注解方式的Dwr配置，更是使开发者可以更加方便地配置和使用Dwr。