DWR新闻发布系统，多新闻类型间切换无刷新

最新推荐文章于 2025-08-08 17:07:36 发布
转载 最新推荐文章于 2025-08-08 17:07:36 发布 · 1k 阅读 · 0
文章标签：

#dwr #import #javascript #class #function #struts

本文介绍了一个使用DWR实现Ajax功能并与Struts框架整合的示例项目。通过创建数据库表、POJO类、Hibernate配置文件、Action类、数据访问层和服务层等组件，实现了新闻系统的增删查功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

step1: 下载DWR包
step2: 构建数据库
sql 代码
  1. if exists (select 1   
  2.             from  sysobjects   
  3.            where  id = object_id('AJAX_NEW')   
  4.             and   type = 'U')   
  5.    drop table AJAX_NEW   
  6. go   
  7.   
  8.   
  9. /*==============================================================*/   
  10. /* Table: AJAX_NEW                                              */   
  11. /*==============================================================*/   
  12. create table AJAX_NEW (   
  13.    ID                   integer              not null,   
  14.    NEW_TITLE            VARCHAR(100)         null,   
  15.    NEW_AUTHER           VARCHAR(30)          null,   
  16.    NEW_TYPE             VARCHAR(30)          null,   
  17.    NEW_CONTENT          VARCHAR(500)         null,   
  18.    constraint PK_AJAX_NEW primary key  (ID)   
  19. )   
  20. go   

step3 搭建Struts,Hibernate框架，生成Hibernae配置文件以及po类：

java 代码
  1. package com.fzfx88.conf;   
  2.   
  3. /**  
  4.  * AbstractAjaxNew generated by MyEclipse - Hibernate Tools  
  5.  * po 抽象类  
  6.  * auther huguoqing  
  7.  */  
  8.   
  9. public abstract class AbstractAjaxNew  implements java.io.Serializable {   
  10.   
  11.     // Fields       
  12.      private Integer id;   
  13.      private String newTitle;   
  14.      private String newAuther;   
  15.      private String newType;   
  16.      private String newContent;   
  17.   
  18.     // Constructors   
  19.   
  20.     /** default constructor */  
  21.     public AbstractAjaxNew() {   
  22.     }   
  23.   
  24.        
  25.     /** full constructor */  
  26.     public AbstractAjaxNew(String newTitle, String newAuther, String newType, String newContent) {   
  27.         this.newTitle = newTitle;   
  28.         this.newAuther = newAuther;   
  29.         this.newType = newType;   
  30.         this.newContent = newContent;   
  31.     }   
  32.   
  33.       
  34.     // Property accessors   
  35.   
  36.     public Integer getId() {   
  37.         return this.id;   
  38.     }   
  39.        
  40.     public void setId(Integer id) {   
  41.         this.id = id;   
  42.     }   
  43.   
  44.     public String getNewTitle() {   
  45.         return this.newTitle;   
  46.     }   
  47.        
  48.     public void setNewTitle(String newTitle) {   
  49.         this.newTitle = newTitle;   
  50.     }   
  51.   
  52.     public String getNewAuther() {   
  53.         return this.newAuther;   
  54.     }   
  55.        
  56.     public void setNewAuther(String newAuther) {   
  57.         this.newAuther = newAuther;   
  58.     }   
  59.   
  60.     public String getNewType() {   
  61.         return this.newType;   
  62.     }   
  63.        
  64.     public void setNewType(String newType) {   
  65.         this.newType = newType;   
  66.     }   
  67.   
  68.     public String getNewContent() {   
  69.         return this.newContent;   
  70.     }   
  71.        
  72.     public void setNewContent(String newContent) {   
  73.         this.newContent = newContent;   
  74.     }   
  75. }   

ＰＯ类，MyEclipse 5.1.1生成：

java 代码
  1. package com.fzfx88.conf;   
  2. // Generated by MyEclipse - Hibernate Tools   
  3.   
  4. /**  
  5.  * AjaxNew generated by MyEclipse - Hibernate Tools  
  6.  * auther huguoqing  
  7.  */  
  8. public class AjaxNew extends AbstractAjaxNew implements java.io.Serializable {   
  9.   
  10.     // Constructors   
  11.   
  12.     /** default constructor */  
  13.     public AjaxNew() {   
  14.     }   
  15.   
  16.        
  17.     /** full constructor */  
  18.     public AjaxNew(String newTitle, String newAuther, String newType, String newContent) {   
  19.         super(newTitle, newAuther, newType, newContent);           
  20.     }   
  21.       
  22. }  

Hibernate  AjaxNew.hbm.xml配置文件

xml 代码
  1. <!--sp-->xml version="1.0"?>  
  2. <!--CTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"   </sp-->
  3. "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">  
  4. <!--  </span> </li> <li class="alt"><span><span class="comments">    Mapping file autogenerated by MyEclipse - Hibernate Tools </span> </span></li> <li class=""><span><span class="comments">-->  
  5. <hibernate-mapping>  
  6.     <class name="com.fzfx88.conf.AjaxNew" table="AJAX_NEW" schema="dbo" catalog="pepsi">  
  7.         <id name="id" type="java.lang.Integer">  
  8.             <column name="ID" />  
  9.             <generator class="identity" />  
  10.         id>  
  11.         <property name="newTitle" type="java.lang.String">  
  12.             <column name="NEW_TITLE" length="100" />  
  13.         property>  
  14.         <property name="newAuther" type="java.lang.String">  
  15.             <column name="NEW_AUTHER" length="30" />  
  16.         property>  
  17.         <property name="newType" type="java.lang.String">  
  18.             <column name="NEW_TYPE" length="30" />  
  19.         property>  
  20.         <property name="newContent" type="java.lang.String">  
  21.             <column name="NEW_CONTENT" length="500" />  
  22.         property>  
  23.     class>  
  24. hibernate-mapping>  

 step:4  构建 Action 类：

java 代码
  1. /**  
  2.  * news system  
  3.  */  
  4. package com.fzfx88.base.action;   
  5.   
  6.   
  7. import javax.servlet.http.HttpServletRequest;   
  8. import javax.servlet.http.HttpServletResponse;   
  9.   
  10. import org.apache.struts.action.ActionForm;   
  11. import org.apache.struts.action.ActionForward;   
  12. import org.apache.struts.action.ActionMapping;   
  13.   
  14. import com.fzfx88.base.form.AjaxNewsSystemForm;   
  15. import com.fzfx88.base.service.AjaxNewsSystemService;   
  16. import com.fzfx88.common.base.BaseAction;   
  17. import com.fzfx88.conf.AjaxNew;   
  18.   
  19. /**  
  20.  * @author huguoqing  
  21.  *  
  22.  */  
  23. public class AjaxNewsSystemAction extends BaseAction {   
  24.     AjaxNewsSystemService nService = new AjaxNewsSystemService();   
  25.     /**  
  26.      * 初始化  
  27.      * @param mapping  
  28.      * @param form  
  29.      * @param request  
  30.      * @param response  
  31.      * @return  
  32.      */  
  33.     public ActionForward init(ActionMapping mapping,ActionForm form,   
  34.             HttpServletRequest request,HttpServletResponse response){   
  35.         AjaxNewsSystemForm nForm = (AjaxNewsSystemForm)form;   
  36.         AjaxNew news = nForm.getNews();   
  37.         return mapping.findForward("init");   
  38.     }   
  39.     /**  
  40.      * 新建  
  41.      * @param mapping  
  42.      * @param form  
  43.      * @param request  
  44.      * @param response  
  45.      * @return  
  46.      */  
  47.     public ActionForward save(ActionMapping mapping,ActionForm form,   
  48.             HttpServletRequest request,HttpServletResponse response){   
  49.         AjaxNewsSystemForm nForm = (AjaxNewsSystemForm)form;   
  50.         AjaxNew news = nForm.getNews();   
  51.         if(nService.createNews(news)){   
  52.             return mapping.findForward("success");   
  53.         }else{   
  54.             return mapping.findForward("false");   
  55.         }   
  56.     }   
  57.        
  58. }   

step 5: 构建数据层访问类：

java 代码
  1. /**  
  2.  *   
  3.  */  
  4. package com.fzfx88.base.service;   
  5.   
  6. import java.util.ArrayList;   
  7. import java.util.List;   
  8.   
  9. import org.hibernate.Hibernate;   
  10. import org.hibernate.HibernateException;   
  11. import org.hibernate.Query;   
  12. import org.hibernate.Session;   
  13. import org.hibernate.Transaction;   
  14.   
  15. import com.fzfx88.conf.AjaxNew;   
  16. import com.fzfx88.util.HibernateUtil;   
  17.   
  18. /**  
  19.  * @author huguoqing  
  20.  *  
  21.  */  
  22. public class AjaxNewsSystemService {   
  23.     /**  
  24.      * 新建news  
  25.      * @param news  
  26.      */  
  27.     public boolean createNews(AjaxNew news){   
  28.         Session session=HibernateUtil.currentSession();   
  29.         Transaction tran=session.beginTransaction();       
  30.         try{       
  31.             session.save(news);   
  32.             tran.commit();   
  33.             session.flush();   
  34.         } catch (HibernateException e) {   
  35.             if(tran!=null){   
  36.                 tran.rollback();   
  37.             }   
  38.             e.printStackTrace();   
  39.             return false;   
  40.         }finally {   
  41.             HibernateUtil.closeSession();   
  42.         }   
  43.         return true;   
  44.     }   
  45.     /**  
  46.      * 获得新闻列表  
  47.      * @param newType  
  48.      * @return  
  49.      */  
  50.     public List queryStoreList(String newType){   
  51.         List storeList =new ArrayList();   
  52.         Session session=HibernateUtil.currentSession();   
  53.         Transaction tran=session.beginTransaction();   
  54.         String sql="from AjaxNew where newType=:newType ";   
  55.         try {   
  56.             Query query=session.createQuery(sql);   
  57.             query.setParameter("newType",newType);   
  58.             storeList=query.list();   
  59.         } catch (HibernateException e) {   
  60.             if(tran!=null){   
  61.                 tran.rollback();   
  62.             }   
  63.             e.printStackTrace();   
  64.         }finally {   
  65.             HibernateUtil.closeSession();   
  66.         }   
  67.         return storeList;   
  68.     }   
  69.     /**  
  70.      * 根据id获得AjaxNew对象  
  71.      * @param id  
  72.      * @return  
  73.      */  
  74.     public AjaxNew retrieveAjaxNew(String newId){   
  75.         Integer id = Integer.parseInt(newId);   
  76.         Session session=HibernateUtil.currentSession();   
  77.         String sql="from AjaxNew w where w.id=:id ";   
  78.         AjaxNew item=null;   
  79.         try {   
  80.             Query query=session.createQuery(sql);   
  81.             query.setParameter("id",id);   
  82.                
  83.             item=(AjaxNew)query.uniqueResult();   
  84.             if(Hibernate.isInitialized(item)){   
  85.                  Hibernate.initialize(item);   
  86.             }   
  87.         } catch (HibernateException e) {   
  88.             e.printStackTrace();   
  89.         }finally {   
  90.             HibernateUtil.closeSession();   
  91.         }   
  92.         return item;   
  93.     }   
  94. }   

step 6: 构建Struts Form .................AjaxNewsSystemForm.java

step 7 :Struts 配置文件：

xml 代码
  1. <!--sp-->xml version="1.0" encoding="UTF-8"?>  
  2. <!--CTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd"</sp-->>  
  3.   
  4. <struts-config>  
  5.   <data-sources/>  
  6.   <form-beans>  
  7.      <form-bean name="AjaxNewsSystemForm" type="com.fzfx88.base.form.AjaxNewsSystemForm" />        
  8.   form-beans>  
  9.   <global-exceptions />  
  10.   
  11.   <global-forwards>  
  12.     <forward name="success" path="/regSuccess.htm"/>  
  13.     <forward name="false" path="/false.htm"/>  
  14.   global-forwards>  
  15.   <action-mappings>  
  16.     <action name="AjaxNewsSystemForm"    
  17.               path="/news"    
  18.               type="com.fzfx88.base.action.AjaxNewsSystemAction"  
  19.               scope="request">  
  20.          <forward name="init" path="/base/news.jsp"/>  
  21.     action>  
  22.   action-mappings>  
  23.   <message-resources parameter="resource.ApplicationResources" />  
  24. struts-config>  

  25. step:8  配置 dwr

         (一)、配置 web.xml 文件，添加 DwrServlet

    xml 代码
    1. <!--sp-->xml version="1.0" encoding="UTF-8"?>  
    2. <web-app xmlns="http://java.sun.com/xml/ns/j2ee" >  
    3.    <servlet>  
    4.         <servlet-name>dwr-invokerservlet-name>  
    5.         <servlet-class>  
    6.     org.directwebremoting.servlet.DwrServlet   
    7.         servlet-class>  
    8.         <init-param>  
    9.     <param-name>debugparam-name>  
    10.     <param-value>trueparam-value>      
    11.         init-param>  
    12.         <init-param>  
    13.     <param-name>classes param-name>       
    14.         <param-value>java.lang.Objectparam-value>  
    15.         init-param>  
    16.         <load-on-startup>100load-on-startup>      
    17.   servlet>    
    18.   <servlet-mapping>  
    19.     <servlet-name>dwr-invokerservlet-name>  
    20.     <url-pattern>/dwr/*url-pattern>  
    21.   servlet-mapping>  
    22.   <session-config>  
    23.       <session-timeout>30session-timeout>  
    24.   session-config>  
    25.   <welcome-file-list>  
    26.       <welcome-file>index.jspwelcome-file>  
    27.   welcome-file-list>  
    28. web-app>  
    29.   

         (二)、配置 dwr.xml，添加需要能够远程调用的类以及公开客户端调用的类方法：

    xml 代码
    1. <!--sp-->xml version="1.0" encoding="UTF-8"?>  
    2. <dwr>  
    3.   <allow>  
    4.   
    5.     <create creator="new" javascript="news" scope="application">  
    6.       <param name="class" value="com.fzfx88.base.service.AjaxNewsSystemService"/>  
    7.       <include method="queryStoreList"/>  
    8.       <include method="retrieveAjaxNew"/>  
    9.     create>  
    10.        
    11.     <convert  converter="bean" match="com.fzfx88.conf.AjaxNew">  
    12.         <param name="include" value="id,newTitle, newAuther, newType, newContent"/>  
    13.     convert>  
    14.   
    15.   allow>  
    16. dwr>  
    step9:构建页面  
    css 代码
    1. [html]   
    2. [head]   
    3.     [meta http-equiv="Content-Type" content="text/html; charset=gbk" /]   
    4.     [link href="reg/style.css" type="text/css" rel="stylesheet"]  
    5.     <!--js是dwr自动生成，命名要和dwr.xml中<span class="attribut-->javascript=news相符->
    6.     [script type='text/javascript' src='../dwr/interface/news.js'] 
    7.     <!--wr 中的js需引-->
    8.     [script type='text/javascript' src='../dwr/engine.js'] 
    9.     <!--wr 中的js需引-->  
    10.     [script type='text/javascript' src='../dwr/util.js'/]   
    11.     <!--定义js文--> 
    12.     [script type='text/javascript' src='../jsfloder/ajaxNews.js'/]   
    13.     [title]news[/title]   
    14. [/head]   
    15. [body]   
    16. [div id="tabs5"]   
    17. [ul][li id="current"][a href="javaScript:queryNewsList('1');"][span]国内[/span][/a][/li]   
    18. [li][a href="javaScript:queryNewsList('2');"][span]国际[/span][/a][/li]   
    19. [li][a href="javaScript:queryNewsList('3');"][span]时事政治[/span][/a][/li]   
    20. [li][a href="javaScript:queryNewsList('4');"][span]影视娱乐[/span][/a][/li]   
    21. [li][a href="javaScript:queryNewsList('5');"][span]读书频道[/span][/a][/li]   
    22. [li][a href="javaScript:queryNewsList('6');"][span]美容护肤[/span][/a][/li]   
    23. [li][a href="javaScript:queryNewsList('7');"][span]生活琐事[/span][/a][/li]   
    24. [/ul]   
    25. [/div]   
    26. [TABLE  class="toptable grid" width="100%" cellSpacing="0" cellPadding="5" align="center" border="1"]   
    27.   [TBODY id="knew"]   
    28.   [/TBODY]   
    29. [/TABLE]   
    30. [div id="snow" style="width:500px;border:1px solid darkcyan;padding:5px;display:none;"][/div]   
    31. [/body]   
    32. [/html]  

       step10: 构建 js文件

    js 代码
    1. function queryNewsList(id){   
    2.     var loadinfo = "正在载入中，请稍等...........";   
    3.     var newType = id;   
    4.     try{   
    5.             //news为dwr.xml文件中定义java类的别名，调用该类的queryStoreList方法，
    6.             //获取新闻信息
    7.             news.queryStoreList(newType,queryNewList);   
    8.             DWRUtil.useLoadingMessage(loadinfo);   
    9.     }catch(e){   
    10.        
    11.     }   
    12. }
    13. //将查询结果返回的list，添加到页面表格中   
    14. function queryNewList(data){   
    15.     document.getElementById( "snow" ).style.display = "none";   
    16.     var cellfuncs = [   
    17.         function(data){   
    18.             var newId = data.id;   
    19.             var ahive = document.createElement(");   
    20.             ahive.setAttribute("alink","fuchsia");   
    21.             var oTextNode = document.createTextNode(data.newTitle);   
    22.             ahive.appendChild(oTextNode);      
    23.             return ahive;   
    24.         },   
    25.         function(data){   
    26.             var newId = data.id;   
    27.             var ahive = document.createElement(");   
    28.             ahive.setAttribute("alink","#FFFFFF");   
    29.             var delButton = document.createElement("img");   
    30.             delButton.setAttribute("src","../images/ico_down.gif");   
    31.             delButton.setAttribute("border","1");              
    32.             ahive.appendChild(delButton);   
    33.             return ahive;   
    34.         }          
    35.     ];   
    36.     DWRUtil.removeAllRows('knew');     
    37.     DWRUtil.addRows('knew', data,cellfuncs,{   
    38.     rowCreator:function(options) {   
    39.         var row = document.createElement("tr");   
    40.         row.setAttribute("id",options.rowData.id);   
    41.         row.setAttribute("height","20");   
    42.         return row;   
    43.     },   
    44.     cellCreator:function(options) {   
    45.         var td = document.createElement("td");   
    46.         td.setAttribute("align","left");   
    47.         return td;   
    48.     }          
    49.     });   
    50. } 
    51. //根据id获得一条新闻的具体信息  
    52. function showContent(id){   
    53.     var news_id = id;   
    54.     var loadinfo = "正在载入中，请稍等...........";   
    55.     try{   
    56.         news.retrieveAjaxNew(news_id,showAnew);   
    57.         DWRUtil.useLoadingMessage(loadinfo);   
    58.     }catch(e){   
    59.        
    60.     }   
    61. } 
    62. //显示信息内容  
    63. function showAnew(data){   
    64.     var pp = document.getElementById("snow");   
    65.     document.getElementById( "snow" ).style.display = "";   
    66.     if (pp.hasChildNodes()) {   
    67.         for (i=0; i
    68.           var currentNode = pp.childNodes[i];   
    69.             pp.removeChild(currentNode);   
    70.         }   
    71.     }   
    72.    var titleText = document.createTextNode(data.newTitle);   
    73.    var context = document.createTextNode(data.newContent);   
    74.    var tspan = document.createElement("p");   
    75.    tspan.setAttribute("style","font-weight:normal;");   
    76.    tspan.appendChild(titleText);   
    77.    var cspan = document.createElement("p");   
    78.    cspan.appendChild(context);   
    79.    var vbr = document.createElement("br");   
    80.    pp.appendChild(tspan);   
    81.    pp.appendChild(vbr);;   
    82.    pp.appendChild(cspan);   
    83. }  
DWR 应用实例(二) 新闻发布系统，多种新闻类型之间切换无刷新
Bob1228的专栏
05-12 216
step:8  配置 dwr     (一)、配置 web.xml 文件，添加 DwrServletxml 代码 &lt;!--sp--&gt;xml version="1.0" encoding="UTF-8"?&gt;   &lt;web-app xmlns="http://java.sun.com/xml/ns/j2ee" &gt;      &lt;servlet&amp
DWR 应用实例(一) 新闻发布系统，多种新闻类型之间切换无刷新
Bob@优快云
05-12 747
 最近闲着用dwr做了个类似 163 新闻导航，在多种新闻类型下切换，无须刷新：step1: 下载DWR包step2: 构建数据库sql 代码 if exists (select 1                from  sysobjects               where  id = object_id(AJAX_NEW)  
DWR 应用实例(一) 新闻发布系统，多种新闻类型之间切换无刷新
美丽人生
04-24 140
最近闲着用dwr做了个类似 163 新闻导航，在多种新闻类型下切换，无须刷新： step1: 下载DWR包 step2: 构建数据库 sql 代码 if exists (select 1                from  sysobjects               where  id = object_id('AJAX_NEW')    ...
DWR详细配置
天之蓝
07-12 212
DWR是一种AJAX(Asynchronous JavaScript and XML)的JAVA实现，它提供了一种能在web浏览器端采用JavaScript语言直接调用后台业务商业组件的解决方案。DWR通过 JavaScript直接调用远程组件可以减少Web开发的时间，特别对于那些具有和用户频繁交互的Web应用程序。DWR使得浏览器不用刷新页面就可以 从远程Web服务器取得用户需的数据，这种无刷新...
dwr 框架
terryjs
09-20 229
首先，你安装DWR时会配置一个servlet，这个servlet记得吧？他就是负责把前台的JS参数封装成JAVA，去调用你的JAVA类，然后将返回结果（JAVA类型）再翻译成JS生成到你的JSP页面上，给你的错觉就是你用JS直接调用了JAVA方法。DWR的主要的优点：可以直接访问Javabean，无刷新技术.DWR框架实现：1.在配置文件中写入dwr的配置信息2.写一个属性bean。3.通过一个...
DWR配置详解
danwind的专栏
11-24 481
DWR是一种AJAX(Asynchronous JavaScript and XML)的JAVA实现，它提供了一种能在web浏览器端采用JavaScript语言直接调用后台业务商业组件的解决方案。DWR通过JavaScript直接调用远程组件可以减少Web开发的时间，特别对于那些具有和用户频繁交互的Web应用程序。DWR使得浏览器不用刷新页面就可以从远程Web服务器取得用户需的数据，这种无...
构建实时提醒功能：DWR反向AJAX案例实践
weixin_29717341的博客
08-07 384
DWR（Direct Web Remoting）是一个为Java Web应用提供远程JavaScript调用的框架。其主要优势在于能够使AJAX开发变得简单和高效。它通过在客户端JavaScript和服务器端Java之间进行透明通信，大大减少了网络编程中的繁琐步骤。异步JavaScript和XML（AJAX）技术自诞生以来，一直是Web应用中实现动态内容更新和提高用户体验的重要手段。传统AJAX允许浏览器异步地向服务器发送请求，然后接收数据并更新网页的部分内容，而不必重新加载整个页面。
DWR高级主题之反向Ajax
fhd001的专栏
12-20 1704
DWR高级主题之反向Ajax ---------- 反向Ajax的基本概念是，客户端不必主动从服务器获取信息，服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax“传统”web模型所带来的一个限制：实时信息很难从技术上解决。原因是，客户端必须联系服务器，主动询问是否存在变更，如果有变更就会更新页面(或者页面的一部分),虽然可以非常快速完成这个操作，让人感觉好像是实时的，但是实际上不是
DWR了解
mike_caoyong的专栏
11-26 833
DWR入门教程 DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它通过反射，将java翻译成javascript，然后利用回调机制，轻
DWR实现新闻发布系统：新闻类型无刷新切换技术解析
结合以上知识点，针对标题中提到的“DWR应用实例(一) 新闻发布系统，多种新闻类型之间切换无刷新”的实现，我们可以描绘一个场景： 1. **系统需求：** 用户登录新闻发布系统后，希望能够浏览不同类型的新闻，如政治...
Dwr无刷新分页.rar
03-19
标题中的"Dwr无刷新分页.rar"指的是使用Direct Web Remoting (DWR)技术实现的网页分页功能，且该功能无需用户手动刷新页面。DWR是一种JavaScript库，它允许Web应用程序在客户端与服务器之间进行实时通信，实现了AJAX...
Dwr技术实现无刷新页面分页功能详解
### 知识点：Dwr实现无刷新分页 #### 1. DWR简介 DWR（Direct Web Remoting）是一个使AJAX技术更加容易使用的Java库。它允许开发者在浏览器端直接使用Java类和方法，就好像它们是JavaScript函数一样。通过DWR，...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 875
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 501
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
【JS】扁平树数据转为树结构
此人太懒，没有任何简介
08-07 194
摘要：本文展示了如何将扁平数据结构转换为树形结构的JavaScript实现。通过buildTree函数，可以根据指定的ID和父ID字段将扁平数据转换为嵌套的树形结构，并可选地删除空子节点。示例代码演示了如何将包含公司部门信息的扁平数据转换为层级分明的树状结构，结果输出为JSON格式的树形数据。该工具函数适用于处理组织机构、菜单等需要层级展示的数据场景。
Vite 深度解析：现代前端开发引擎
最新发布
weixin_43822134的博客
08-08 724
Vite 代表了前端工具链从"打包时代"向"原生ESM时代"的演进，其核心价值在于将开发者从构建等待中解放出来。虽然Webpack在复杂场景下仍有优势，但Vite已成为现代前端开发的默认选择。
Vue3 学习教程，从入门到精通， Vue 3 实例选项语法详解与案例代码(29）
qq_45746668的博客
08-07 989
本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。
JavaScript Array（数组）
wjs2024的博客
08-07 731
Array 对象是 JavaScript 中的一个内置对象，它提供了一系列用于数组操作的函数和方法。使用 Array 对象可以方便地创建、访问、修改和删除数组元素。本文详细介绍了 JavaScript 中的 Array 对象，包括其基本用法、方法、属性以及在实际开发中的应用。掌握 Array 对象，有助于提高 JavaScript 编程水平，提升开发效率。希望本文对您有所帮助。2278字标题包含关键词“JavaScript”和“Array”，提高搜索排名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值