Dwr框架入门教学

x33g5p2x  于2021-10-17 转载在 其他  
字(8.6k)|赞(0)|评价(0)|浏览(365)

DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。

虽然现在慢慢被淘汰了,但是还是很多公司在用的,还是有必要简单的学习下以便不时之需

dwr 支持和spring结合,或者dwr +SSM 结合, 需要自己研究研究

dwr官方文档: http://directwebremoting.org/dwr/index.html

我是使用Maven集成的 ,当然如果你项目不是Maven项目的话那么就需要手动倒入jar

需要的Maven

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.68</version>
    </dependency>
    
<!-- dwr-->

    <dependency>
      <groupId>org.directwebremoting</groupId>
      <artifactId>dwr</artifactId>
      <version>2.0.3</version>
    </dependency>

    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>

  </dependencies>

com.dwr.pojo

package com.dwr.pojo;

public class User {

    private  String name;
    private  int age;
    private  String sex;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

com.dwr.service

package com.dwr.service;

import com.alibaba.fastjson.JSON;
import com.dwr.pojo.User;
import com.dwr.utils.BeanToJson;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class HelloWord {

    public String sayHello(String name){
        return  name +"say :hello world!";

    }
   // 由于dwr只支持json的数据格式,进行传输,因此在dwr中我们要读取javaBean中的属性,就必须将其转换成json的数据格式
   // 现在有很多json转换工具所以 就不用dwr提供的在配置文件中使用convert 和signatures 显示转换了
    //前端接收时候 只需要使用 JSON.parse( data) 将字符串转为JSON对象就可以进行操作了
    public String sayHelloBean(){
        User user = new User();
        user.setName("胡");
        user.setAge(22);
        user.setSex("男");
        return BeanToJson.beanToString(user);
    }

    public  String sayHelloList(){
        List<User> list=new ArrayList<>();
        User user = new User();
        user.setName("胡");
        user.setAge(22);
        user.setSex("男");

        User user1 = new User();
        user1.setName("胡1");
        user1.setAge(22);
        user1.setSex("男");

        User user2 = new User();
        user2.setName("胡2");
        user2.setAge(22);
        user2.setSex("男");
        list.add(user);
        list.add(user1);
        list.add(user2);
        return  BeanToJson.beanToString(list);
    }

    public  String sayHelloMap(){
        Map map=new HashMap();
        map.put("map1","1111111111");
        map.put("map2","2222222222");
        map.put("map3","3333333333");
        return  BeanToJson.beanToString(map);
    }

}

com.dwr.utils

package com.dwr.utils;

import com.alibaba.fastjson.JSON;

public class BeanToJson {

    public static  String beanToString(Object o){
        return  JSON.toJSONString(o);
    }
}

webapp->js

添加jquery-3.4.1.js文件

链接:https://pan.baidu.com/s/16Nmtwo2KNNuGlSOQ5Mw5cg
提取码:1234

webapp->WEB-INF

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">


  <!-- 配置dwr -->
  <servlet>
    <servlet-name>dwr</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!-- 开启调试dwr模式 项目启动后访问 http://localhost:8080/当前项目名/dwr/ 如果能访问成功那么就配置ok -->
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
<!-- 解决前端报错: Error: java.lang.SecurityException, Session Error -->
    <init-param>
      <param-name>crossDomainSessionSecurity</param-name>
      <param-value>false</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

</web-app>

dwr.xml

<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd" >
<dwr>
    <allow>

 <!-- 项目启动后 http://localhost:8080/test_weblogc/dwr/test/HelloWord 如果能访问成功那么就ok -->

<!-- creator="new" 属性指定java类实例的生成方式,new意味着DWR应当调用类的默认构造函数来获得实例,其他的还有spring方式,通过与IOC容器 Spring进行集成来获得实例等等 javascript=" testClass "属性指定javascript代码访问对象时使用的名称。 <param>标签:指定需要的java类名。 <include> 标签指定要公开给javascript的方法。不指定的话就公开所有方法。 <exclude> 标签指定要防止被访问的方法。 -->
        <create creator="new" javascript="HelloWord">
            <param name="class" value="com.dwr.service.HelloWord"/>
            <include method="sayHello"/>
            <include method="sayHelloBean"/>
            <include method="sayHelloList"/>
            <include method="sayHelloMap"/>
<!-- <exclude method=""/>-->
<!-- 映射对象中的 成员变量-->
<!-- <param name="" value=""/> -->
        </create>

    </allow>
</dwr>

webapp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<h1>result  String </h1>
<div id="result"> </div>
输入名称:<input type="text" name="name" id="name"> <input type="button" name="asy" id="asy" value="say">

<h1>result Bean</h1>
<p>name:<span id="bean_name"></span></p>
<p>age:<span id="bean_age"></span></p>
<p>name:<span id="bean_sex"></span></p>

<h1>result List  Set</h1>

    <table border="1px" id="list_bean">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
            <th>sex</th>
        </tr>
    </table>

<h1>result Map</h1>
小情歌,歌曲编号: <span id="map1"></span> <br/>
踏山河,歌曲编号: <span id="map2"></span> <br/>
情歌王,歌曲编号: <span id="map3"></span> <br/>

<%-- engine.js和util.js是dwr自带的脚本文件。 自动生成 --%>
<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()%>/js/jquery-3.4.1.js"></script>


<%--  dwr接口区域--%>
<script type='text/javascript' src="<%=request.getContextPath()%>/dwr/interface/HelloWord.js"></script>


<%-- 页面js渲染区域--%>
<script type="text/javascript"> $(function (){ $("#asy").click(function () { var name=$("#name").val(); //调用java的方法 HelloWord.sayHello(name,function (data){ $("#result").html(data) }) }); //调用java的方法,注意要和方法入参保持一致 HelloWord.sayHelloBean(function (data){ console.log(" HelloWord.sayHelloBean"+data) data=JSON.parse( data) $("#bean_name").text(data.name); $("#bean_age").text(data.age); $("#bean_sex").text(data.sex); }) HelloWord.sayHelloList(function (data) { console.log(" HelloWord.sayHelloList"+data) data=JSON.parse( data) $.each(data,function(index,value){ console.log("下标:"+index,"值"+value) $("#list_bean").append( "<tr>" + "<td>"+index+"</td>"+ "<td>"+value.name+"</td>"+ "<td>"+value.age+"</td>"+ "<td>"+value.sex+"</td>"+ "</tr>" ) }); }); HelloWord.sayHelloMap(function (data) { console.log(" HelloWord.sayHelloMap"+data) data=JSON.parse( data) $("#map1").text(data.map1); $("#map2").text(data.map2); $("#map3").text(data.map3); $.each(data,function(key,value){ console.log(" key"+key,"-------","value",value) }); }); }) </script>
</body>
</html>

效果图

相关文章