×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

在JavaEE6中使用JSF2.0简化页面制作

【精选译文】过去几个星期，对Java EE 6的新特性进行了一系列介绍。除了Servlet 3.0的特性，Java EE 6也使用了新的JSF 2.0标准。下面我们来看一看JSF 2.0是如何简化页面制作并提供Ajax支持的。***，我们对Servlet 3.0和JSF 2.0的新特性进行了总结。

简化JSF 2.0页面制作

JavaServer Faces技术提供了一个服务端组件框架，简化了Java EE应用程序用户界面的开发，其中最显著的改进是页面制作，通过使用标准的JavaServer Faces视图声明语言（JavaServer Faces View Declaration Language，俗称Facelets）创建一个JSF页面更加容易。

Facelets

Facelets是一个强大的轻量级声明语言，可以使用它展示一个JSF页面，使用Facelets时，你可以使用HTML风格的模板展示一个JSF页面，也可以构建一个组件树，JSF应用程序中的用户界面通常是由JSF组件构成的JSF页面，Facelets在JSP之上提供了更多优点。

在JSP中，Web页面中的元素是按照渐进顺序处理和渲染的，而JSF提供了它自己的处理和渲染顺序，这可能会导致不可预测的行为发生，Facelets解决了这个问题，通过模板，Facelets也允许代码复用，可以大大减少开发UI的时间，现在Facelets已经成为构建JSF应用程序的***技术。

Facelets通常是使用XHTML标记语言编写的，因此Facelets是可以跨不同开发平台的，下面是Java EE 6教材中提供的JSF页面的Facelets XHTML代码部分：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.            
  
  
  
  
  3.            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4. 
  
  
  
  
  4.    
  
  
  
  
  5.            xmlns:f="http://java.sun.com/jsf/core" 
    6. 
  
  
  
  
  6.            xmlns:h="http://java.sun.com/jsf/html" 
    7. 
  
  
  
  
  7.            xmlns:ui="http://java.sun.com/jsf/facelets"> 
    8. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.            Guess Number JSF Application 
    10. 
  
  
  
  
  10.     
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12.        
    13. 
  
  
  
  
  13.        
     
    14. 
  
  
  
  
  14.        Hi. My name is Duke. I am thinking of a number from  
    15. 
  
  
  
  
  15.                to  
    16. 
  
  
  
  
  16.                  
    17. 
  
  
  
  
  17.        .  
    18. 
  
  
  
  
  18.        
     
    19. 
  
  
  
  
  19.          Can you guess it ?  
    20. 
  
  
  
  
  20.        
     
    21. 
  
  
  
  
  21.         
    22. 
  
  
  
  
  22.        
  
  
  
  
  23.              value="#{UserNumberBean.userNumber}"> 
    24. 
  
  
  
  
  24.           converterMessage="#{ErrMsg.userNoConvert}"> 
    25. 
  
  
  
  
  25.        
  
  
  
  
  26.              minimum="#{UserNumberBean.minimum}" 
    27. 
  
  
  
  
  27.              maximum="#{UserNumberBean.maximum}"/> 
    28. 
  
  
  
  
  28.         
    29. 
  
  
  
  
  29.        
  
  
  
  
  30.              action="success" value="submit" /> 
    31. 
  
  
  
  
  31.        
  
  
  
  
  32.                   style="color: red;  
    33. 
  
  
  
  
  33.                    font-family: 'New Century Schoolbook', serif;  
    34. 
  
  
  
  
  34.                    font-style: oblique;  
    35. 
  
  
  
  
  35.                    text-decoration: overline"  
    36. 
  
  
  
  
  36.                    id="errors1" 
    37. 
  
  
  
  
  37.                    for="userNo"/> 
    38. 
  
  
  
  
  38.         
    39. 
  
  
  
  
  39.        
    40. 
  
  
  
  
  40.     
    41. 
  
  
  
  
  41.     
    42. 
  
  
  
  
  42.  
    43.

页面渲染效果如图1所示。

 
图 1 使用Facelets创建的用户界面

这个Facelets XHTML页面和普通JSP页面并没有多大不同，Facelets支持JSF和JSTL标签库，它也包括一个Facelets标签库，支持功能丰富的页面模板。命名空间声明xmlns:ui="http://java.sun.com/jsf/facelets"就是针对facelets标签库的，但这里没有使用facelets标签库的标签，facelets也支持统一的表达式语言。

模板

使用模板，你可以创建一个页面作为应用程序中其它页面的模板，这样可以避免多次创建结构类似的页面，同时也可以统一应用程序中多个页面的视觉风格。

Facelets标签库包括一个模板标签，为了实施模板化，首先创建一个包括标签的模板页面，然后创建一个使用这个模板的客户端页面，在客户端页面中，使用标签指定模板，使用标签指定插入到模板中的内容。

下面是一个模板页面的内容：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
  
  
  
  
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.    
  
  
  
  
  6.          xmlns:ui="http://java.sun.com/jsf/facelets" 
    7. 
  
  
  
  
  7.          xmlns:h="http://java.sun.com/jsf/html" 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.        
    10. 
  
  
  
  
  10.          <ui:insert name="title">Page Title</ui:insert 
    11. 
  
  
  
  
  11.        
    12. 
  
  
  
  
  12.        
    13. 
  
  
  
  
  13.           
     
    14. 
  
  
  
  
  14.                
    15. 
  
  
  
  
  15.           
 
  •           
     
  •                
  •          
    •  
  •        
  •     
  •  

    • 下面是使用这个模板的客户端页面代码：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.     
  
  
  
  
    7.           xmlns:ui="http://java.sun.com/jsf/facelets" 
      8. 
  
  
  
  
    8.           xmlns:h="http://java.sun.com/jsf/html" 
      9. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10.         
      11. 
  
  
  
  
    11.            This text will not be displayed.  
      12. 
  
  
  
  
    12.             
      13. 
  
  
  
  
    13.                Welcome page  
      14. 
  
  
  
  
    14.             
      15. 
  
  
  
  
    15.             
      16. 
  
  
  
  
    16.                ... [Links should be here]  
      17. 
  
  
  
  
    17.             
      18. 
  
  
  
  
    18.             
      19. 
  
  
  
  
    19.                ... [Data should be here]  
      20. 
  
  
  
  
    20.             
      21. 
  
  
  
  
    21.         
      22. 
  
  
  
  
    22.            This text also will not be displayed.  
      23. 
  
  
  
  
    23.       
      24. 
  
  
  
  
    24.      
      25.

    当客户端调用这个模板时，它使用标题Welcome Page渲染这个页面，这个页面显示了两部分内容，一个显示客户端中指定的链接列表，另一个显示客户端中指定的数据。

    混合组件

    混合组件时JSF中的一个新特性，通过它创建自定义JSF组件会更加容易。你可以使用JSF页面标记和其它JSF组件创建混合组件。在Facelets的标注下，任何XHTML页面都可以变成一个混合组件。此外，混合组件可以有验证器，转换器和监听器。

    创建好混合组件后，你可以将它保存到库中，以后有需要时就可以调用了。

    让我们创建一个渲染为登录面板的混合组件，用户登录时，组件反馈一个登录事件，如图2所示。

     
    图 2 登录面板混合组件

    下面是混合组件的源代码：

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      3. 
  
  
  
  
    3.    
  
  
  
  
    4.       xmlns:h="http://java.sun.com/jsf/html" 
      5. 
  
  
  
  
    5.       xmlns:f="http://java.sun.com/jsf/core"> 
      6. 
  
  
  
  
    6.       xmlns:f="http://java.sun.com/jsf/facelets"> 
      7. 
  
  
  
  
    7.       xmlns:composite="http://java.sun.com/jsf/composite"> 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.    This content will not be displayed in the rendered output 
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.     
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.             
      16. 
  
  
  
  
    16.      
      17. 
  
  
  
  
    17.      
      18. 
  
  
  
  
    18.       
    19.     
      20.  
    20.        
      21.  
    21.     
      22.  
    22.     
      23.  
    23.        
      24.  
    24.     
      25.  
    25.     
      26.  
    26.        
      27.  
    27.     
      28.  
    28.      
      29. 
  
  
  
  
      
  
  
  
  Username:   
  
  
  
  
      
  
  
  
  
      
  
  
  
  Password: 
  
  
  
  
      
  
  
  
  
      
  
  
  
  
  
  
  
  
      
  
  
  
  
       
      29. 
  
  
  
  
    29.      
      30. 
  
  
  
  
    30.     
      31. 
  
  
  
  
    31.     
      32. 
  
  
  
  
    32.  
      33.

    xmlns:composite="http://java.sun.com/jsf/composite"声明了混合UI组件的命名空间，标签声明混合组件的使用契约，标签在使用契约中指定标签，这个表示组件可以暴露一个事件，让使用这个混合组件的页面可以轻松访问它。
    标签定义了混合组件的实现，这里的实现是一个简单的表，它包括用户名、密码和登录按钮JSF组件。

    为了让混合组件可用，将代码保存为XHTML文件，将文件放到应用程序根目录下resources目录的子目录中即可。子目录的名字可以采用包含混合组件的资源库名字，JSF运行时通过向混合组件的标签名后追加.xhtml后缀查找混合组件。例如，如果你将标签命名为loginPanel，那么保存为混合组件的文件名就是loginPanel.xhtml。然后你就可以在Web页面中使用混合组件了，下面就是一个使用混合组件的Web页面代码示例：

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2.    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
      3. 
  
  
  
  
    3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      4. 
  
  
  
  
    4.    
  
  
  
  
    5.       xmlns:h="http://java.sun.com/jsf/html" 
      6. 
  
  
  
  
    6.       xmlns:f="http://java.sun.com/jsf/core" 
      7. 
  
  
  
  
    7.       xmlns:ui="http://java.sun.com/jsf/facelets" 
      8. 
  
  
  
  
    8.       xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.    Example 01>/title> </li>
  
  
  
  <li>   <style type="text/css"> </li>
  
  
  
  <li>   .grayBox { padding: 8px; margin: 10px 0; border: 1px solid #CCC; background-color: #f9f9f9;  }  </li>
  
  
  
  <li>   </style> </li>
  
  
  
  <li>   </h:head> </li>
  
  
  
  <li> </li>
  
  
  
  <li>   <h:body> </li>
  
  
  
  <li>     <p>Usage of Login Panel Component</p> </li>
  
  
  
  <li> </li>
  
  
  
  <li>        <ui:debug hotkey="p" rendered="true"/> </li>
  
  
  
  <li> </li>
  
  
  
  <li>     <h:form> </li>
  
  
  
  <li>         <div id="compositeComponent" class="grayBox" style="border: 1px solid #090;"> </li>
  
  
  
  <li>            <ez:loginPanel> </li>
  
  
  
  <li>                <f:actionListener for="loginEvent" type="example01.LoginActionListener" /> </li>
  
  
  
  <li> </li>
  
  
  
  <li>            </ez:loginPanel> </li>
  
  
  
  <li>         </div> </li>
  
  
  
  <li>     <p><h:commandButton value="reload" /></p> </li>
  
  
  
  <li> </li>
  
  
  
  <li>     <p><h:outputText value="#{loginActionMessage}" /></p> </li>
  
  
  
  <li>     </h:form> </li>
  
  
  
  <li> </li>
  
  
  
  <li>   </h:body> </li>
  
  
  
  <li>   </html> </li>
  
  
  
  <li> </li>
 
 
 
 </ol></pre><p>注意声明xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"，它指定了混合组件的命名空间和前缀，这里的ezcomp是资源目录的子目录名，JSF使用下面的约定：所有命名空间URI都以http://java.sun.com/jsf/composite/开头，使用资源库的名称结束。</p><p><strong><f:actionListener></strong></p><p>标签关联混合组件的行为监听器，标签中的for属性表示这个监听器是为混合组件上名为loginEvent行为事件准备的，你需要编写代码来处理事件，例如：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>import javax.faces.component.UIComponent;  </li>
  
  
  
  <li> import javax.faces.component.ValueHolder;  </li>
  
  
  
  <li> import javax.faces.context.FacesContext;  </li>
  
  
  
  <li> import javax.faces.event.AbortProcessingException;  </li>
  
  
  
  <li> import javax.faces.event.ActionEvent;  </li>
  
  
  
  <li> import javax.faces.event.ActionListener;  </li>
  
  
  
  <li> </li>
  
  
  
  <li> public class LoginActionListener implements ActionListener {  </li>
  
  
  
  <li> </li>
  
  
  
  <li>     public void processAction(ActionEvent event) throws AbortProcessingException {  </li>
  
  
  
  <li>         FacesContext context = FacesContext.getCurrentInstance();  </li>
  
  
  
  <li>         context.getExternalContext().getRequestMap().put("loginActionMessage",  </li>
  
  
  
  <li>                 "Login event happened");  </li>
  
  
  
  <li>     }  </li>
  
  
  
  <li> }  </li>
 
 
 
 </ol></pre><p>#p#</p><p><strong>JSF 2.0对Ajax的支持</strong></p><p>JSF 2.0天生就支持Ajax，利用Ajax技术，Web应用程序在后台以异步的方式从服务器获取数据。支持Ajax后，允许页面局部刷新，允许选择视图中的一个组件进行处理而不影响其它组件。</p><p>要在JSF中使用Ajax，需要访问有资源标识符的JavaScript资源jsf.js，它存在于javax.faces资源库中，包含让JSF与Ajax交互的JavaScript API，JavaScript API由一组标准的JavaScript函数组成，使JavaServer Faces框架中的Ajax操作变得简单了，你几乎不用直接包括这个文件，当你使用任何开启Ajax的标签或组件时，JSF会自动包括它。然后你就可以使用<f:ajax>标签或调用JavaScript API中的函数了。</p><p>下面是一个使用<f:ajax>标签的示例：</p><pre>
 
 
 
 <ol>
  
  
  
  <li><h:commandButton id="button1"> </li>
  
  
  
  <li>      <f:ajax execute="..." render="..."/> </li>
  
  
  
  <li>   </h:commandButton> </li>
  
  
  
  <li> </li>
 
 
 
 </ol></pre><p>这里的<f:ajax>标签是嵌套在<h:commandButton>标签内的，这样会结合在execute属性中指定的Ajax行为和<h:commandButton>标签呈现的命令按钮，你也可以指定一个event属性来识别JavaScript DOM事件，如果你不指定event属性，JSF使用组件的默认行为，这里的默认行为是onclick，因此JSF结合execute属性中指定的Ajax请求和呈现按钮的onclick事件。用户点击该按钮时，JSF提交Ajax请求给服务器。</p><p>使用<f:ajax>标签的一个好处是不用在页面中指定载入jsf.js，它会自动为你载入，相比之下，如果你调用JavaScript API，首先需要使用<h:outputScript>让jsf.js对当前视图可用，例如：</p><pre>
 
 
 
 <ol>
  
  
  
  <li><f:view contentType="text/html"/> </li>
  
  
  
  <li>     <h:head> </li>
  
  
  
  <li>       <meta... </li>
  
  
  
  <li>       <title... </li>
  
  
  
  <li>     </h:head> </li>
  
  
  
  <li>     <h:body> </li>
  
  
  
  <li>       ...  </li>
  
  
  
  <li>       <h:outputScript name="jsf.js" library="javax.faces" target="body"/> </li>
  
  
  
  <li>       ...  </li>
  
  
  
  <li>     </h:body> </li>
  
  
  
  <li>     ...  </li>
  
  
  
  <li> </li>
 
 
 
 </ol></pre><p>然后才可以使用JavaScript API中的函数产生Ajax请求。例如，你使用JavaScript函数jsf.ajax.request向服务器发送一个请求，如下面的代码：</p><pre>
 
 
 
 <ol>
  
  
  
  <li><h:commandButton id="button1" value="submit"> </li>
  
  
  
  <li>   onclick="jsf.ajax.request(this,event);" /> </li>
  
  
  
  <li> </li>
 
 
 
 </ol></pre><p>代码包括一个<h:commandButton>标签，它呈现为一个按钮，用户点击这个按钮时，向服务器提交一个Ajax请求。</p><p><strong>Servlet 3.0和JSF2.0中的更多新特性</strong></p><p>Servlet 3.0中另一个新特性是允许你使用ServletContext类中的方法通过编程在Web应用程序启动时向其添加Servlet和Servlet过滤器，使用addServlet()方法添加Servlet，使用addFilter()添加Servlet过滤器。结合可插拔式共享框架特性，Web框架可以在无开发人员介入的情况下实现自我配置。</p><p>#t#此外Servlet 3.0加入了许多安全特性，除了声明安全外，Server 3.0通过HttpServletRequest接口提供了编程安全，例如，你可以在应用程序中使用HttpServletRequest的authenticate()方法执行用户名和密码的收集，或者使用login()方法指向容器验证一个非强制请求上下文中的请求调用者。有关Servlet 3.0的更多特性，请参阅JSR 315规范。</p><p>JSF 2.0中的一些额外增强与资源如何打包和处理有关，JSF 2.0标准化了打包哪里的资源。所有资源都放在resources目录或一个子目录下，资源需要按顺序正确地进行渲染，例如CSS文件和JavaScript文件，图3显示了Netbeans中的一个JSF项目部分结构及文件，注意其中的resources目录，CSS和images目录。</p><p> <br /> 图 3  JSF应用程序中resources目录下的资源</p><p>JSF 2.0也包括显示和处理资源的API，使用javax.faces.application.Resource类显示一个资源，使用javax.faces.application.ResourceHandler类创建资源的实例。有关JSF 2.0的更多信息，请参阅JSR 314规范。</p><p>【译稿，非经授权请勿转载。合作站点转载请注明原文译者和出处为，且不得修改原文内容。】</p><p>原文：Introducing the Java EE 6 Platform 作者：Ed Ort</p>        <br>
        本文名称：在JavaEE6中使用JSF2.0简化页面制作        <br>
        文章网址：<a href="http://cdbrznjsb.com/article/coihpsh.html">http://cdbrznjsb.com/article/coihpsh.html</a>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li><a href="/article/cdogood.html">深入探索Linux服务器端口设置与使用（linux服务器端口）</a></li><li><a href="/article/cdoihgo.html">售后怎么做?（电商售后怎么做)</a></li><li><a href="/article/cdogoee.html">国内邮箱服务器地址?（国内邮箱服务器地址查询)</a></li><li><a href="/article/cdogoih.html">新申请的域名怎么访问？(如何使用新注册的域名)</a></li><li><a href="/article/cdogoic.html">360天擎怎么下载？360天擎windows客户端</a></li>        </ul>
    </div>
</div>
<div class="oneE">
    <div class="oneEa container wow fadeInUp">
        <ul>
            <li>
                <dd><img src="/Public/Home/img/oe1.png" alt=""></dd>
                <h3>网站建设专属方案</h3>
            </li>
            <li>
                <dd><img src="/Public/Home/img/oe2.png" alt=""></dd>
                <h3>网站定制化设计</h3>
            </li>
            <li>
                <dd><img src="/Public/Home/img/oe3.png" alt=""></dd>
                <h3>7X24小时服务</h3>
            </li>
            <li>
                <dd><img src="/Public/Home/img/oe4.png" alt=""></dd>
                <h3>N对管家服务</h3>
            </li>
        </ul>
    </div>
    <div class="oneEb container wow fadeInUp">
        <h2>让你的专属顾问为你服务</h2>
        <form action="">
            <input type="text" placeholder="需求">
            <input type="text" placeholder="输入你的联系方式(微信或电话号码)">
            <button>立即联系</button>
        </form>
    </div>
</div>
<footer>
    <div class="foot container">
        <div class="footl">
            <img src="/Public/Home/img/logo.png" alt="">
            <p>用前卫的视觉</p>
            <p>把握好每一个细节</p>
        </div>
        <div class="footc">
            <dl>
                <dt>服务项目</dt>
                <dd><a href="">网站建设</a></dd>
                <dd><a href="">网站优化</a></dd>
                <dd><a href="">网站设计</a></dd>
                <dd><a href="">小程序开发</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
            <dl>
                <dt>客户案例</dt>
                <dd><a href="">网站案例</a></dd>
                <dd><a href="">优化案例</a></dd>
                <dd><a href="">外贸网站案例</a></dd>
            </dl>
            <dl>
                <dt>资讯中心</dt>
                <dd><a href="">建站动态</a></dd>
                <dd><a href="">网站知识</a></dd>
                <dd><a href="">网站运营</a></dd>
            </dl>
            <dl>
                <dt>快捷导航</dt>
                <dd><a href="">关于澄梦希喜</a></dd>
                <dd><a href="">联系方式</a></dd>
            </dl>
        </div>
        <div class="footr">
            <h3>联系方式</h3>
            <p>地址：成都市太升南路288号锦天国际A幢1002号</p>
            <div class="tel">
                <i><img src="/Public/Home/img/ftel.png" alt=""></i><a href="tel:13518219792">电话：13518219792</a>
            </div>
        </div>
    </div>
    <div class="yqlink container">
        标签：
        <a href="http://www.zsjierui.cn/" target="_blank">资阳</a>
        <a href="http://www.wzjierui.cn/" target="_blank">温江</a>
        <a href="http://www.ndjierui.cn/" target="_blank">南部</a>
        <a href="http://www.ptjierui.cn/" target="_blank">郫县</a>
        <a href="http://www.hzjierui.cn/" target="_blank">彭州</a>
        <a href="http://www.ncjierui.cn/" target="_blank">彭山</a>
        <a href="http://www.whjierui.cn/" target="_blank">乐山</a>
        <a href="http://www.ahjierui.cn/" target="_blank">简阳</a>
        <a href="http://www.csjierui.cn/" target="_blank">绵阳</a>
        <a href="http://www.qhjierui.cn/" target="_blank">德阳</a>
        <a href="http://www.scjierui.cn/" target="_blank">四川</a>
        <a href="http://www.tjjierui.cn/" target="_blank">什邡</a>
        <a href="http://www.tyjierui.cn/" target="_blank">绵竹</a>
        <a href="http://www.xzjierui.cn/" target="_blank">眉山</a>
        <a href="http://www.sxjierui.cn/" target="_blank">双流</a>
        <a href="http://www.ptruijie.cn/" target="_blank">新都</a>
        <a href="http://www.xjjierui.cn/" target="_blank">新津</a>
        <a href="http://www.jljierui.cn/" target="_blank">龙泉</a>
        <a href="http://www.gyruijie.cn/" target="_blank">广汉</a>
        <a href="http://www.csruizhi.cn/" target="_blank">崇州</a>
        <a href="http://www.zjjierui.cn/" target="_blank">广元</a>
        <a href="http://www.zzjierui.cn/" target="_blank">广安</a>
        <a href="http://www.hnjierui.cn/" target="_blank">巴中</a>
        <a href="http://www.fjjierui.cn/" target="_blank">达州</a>
        <a href="http://www.gyjierui.cn/" target="_blank">南充</a>
        <a href="http://www.fzjierui.cn/" target="_blank">遂宁</a>
        <a href="http://www.cdjierui.cn/" target="_blank">广安</a>
        <a href="http://www.jxjierui.cn/" target="_blank">内江</a>
        <a href="http://www.jxruijie.cn/" target="_blank">自贡</a>
        <a href="http://www.hyruijie.cn/" target="_blank">泸州</a>
        <a href="http://www.gzruizhi.cn/" target="_blank">宜宾</a>
    </div>
    <div class="copy container">
        <div class="copyl">
            © Copyright 2013-2026 四川澄梦希喜广告有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#FFFFFF">蜀ICP备2025175960号</a> 版权所有
            <a href="https://www.cdcxhl.com/menu.html">网站地图</a>
            <a href="https://www.cdcxhl.com/articles/" rel="nofollow">其他文章分类</a>
            <a href="http://www.cdbrznjsb.com">成都澄梦希喜</a>
        </div>
        <div class="copyr">
            <i><img src="/Public/Home/img/foot1.png" alt=""></i>
            <i><img src="/Public/Home/img/foot2.png" alt=""></i>
            <i><img src="/Public/Home/img/foot3.png" alt=""></i>
            <i><img src="/Public/Home/img/foot4.png" alt=""></i>
        </div>
    </div>
    <div class="bq_tag container">
        热门推荐：
        <a href="http://www.rfxrdlaz.com/" target="_blank">成都康明斯发电机</a><a href="http://www.xmruizhi.cn/" target="_blank">企业网站UI设计</a><a href="http://www.idcmianyang.com/" target="_blank">绵阳idc服务器托管</a><a href="http://www.pcwzsj.com/" target="_blank">平昌做网站</a><a href="http://www.sczlfdj.com/" target="_blank">四川发电机租赁</a><a href="http://www.zgfdjwx.com/" target="_blank">成都体系认证</a><a href="http://www.cqcxhl.com/service/ds.html" target="_blank">重庆电商网站定制</a><a href="https://www.cdxwcx.com/city/shuangliu/" target="_blank">双流网站建设</a><a href="http://www.cxjianzhan.com/" target="_blank">seo网络营销推广</a><a href="http://www.cdxwcx.cn/bj/" target="_blank">做网站价格</a><a href="http://www.canyinglgs.com/" target="_blank">成都餐饮管理公司</a><a href="http://www.cdwxfdj.com/" target="_blank">成都维修发电机</a>    </div>
</footer>
<div class="footbarline"></div>
<div id="footbar" class="uin0">
    <ul>
        <li class="on" data-href="/"><a><i><svg t="1638436981291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2991" width="48" height="48"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="2992" fill="#2c2c2c"></path></svg><p>首页</p></i></a></li>
        <li><a href="tel:13518219792"><i><svg t="1638437906526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4519" width="48" height="48"><path d="M705.74 604.873333a53.4 53.4 0 0 0-75.426667 0l-37.713333 37.713334c-21.333333 21.333333-90.413333 0.1-150.846667-60.34S360.046667 452.76 381.413333 431.4l0.046667-0.046667 37.666667-37.666666a53.4 53.4 0 0 0 0-75.426667l-165.94-165.933333a53.393333 53.393333 0 0 0-75.42 0l-37.713334 37.713333c-27.866667 27.866667-44.84 64.52-50.46 108.946667-5.213333 41.206667-0.406667 87.42 14.28 137.333333C133.333333 536.586667 199.773333 642 290.9 733.1S487.42 890.666667 587.653333 920.126667c36.926667 10.86 71.813333 16.32 104.146667 16.32a264.333333 264.333333 0 0 0 33.213333-2.04c44.426667-5.62 81.08-22.593333 108.946667-50.46l37.713333-37.713334a53.393333 53.393333 0 0 0 0-75.42z m135.76 211.193334l-37.706667 37.713333c-42.58 42.573333-115.06 51.6-204.1 25.413333-93.506667-27.5-192.453333-90.1-278.62-176.266666s-148.766667-185.113333-176.266666-278.62c-26.186667-89.033333-17.16-161.52 25.413333-204.1l37.713333-37.706667a10.666667 10.666667 0 0 1 15.086667 0l165.933333 165.933333a10.666667 10.666667 0 0 1 0 15.086667l-37.713333 37.706667C329.113333 423.333333 324.666667 458.82 338.766667 501.073333c12.426667 37.273333 38.286667 76.813333 72.813333 111.333334s74.073333 60.386667 111.333333 72.813333c16.213333 5.406667 31.42 8.08 45.26 8.08 22.233333 0 40.946667-6.913333 54.586667-20.553333l37.706667-37.713334a10.666667 10.666667 0 0 1 15.086666 0l165.933334 165.933334a10.666667 10.666667 0 0 1 0.013333 15.1zM576 234.666667a21.333333 21.333333 0 0 1 21.333333-21.333334 213.333333 213.333333 0 0 1 213.333334 213.333334 21.333333 21.333333 0 0 1-42.666667 0c0-94.106667-76.56-170.666667-170.666667-170.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m0 128a21.333333 21.333333 0 0 1 21.333333-21.333334 85.426667 85.426667 0 0 1 85.333334 85.333334 21.333333 21.333333 0 0 1-42.666667 0 42.713333 42.713333 0 0 0-42.666667-42.666667 21.333333 21.333333 0 0 1-21.333333-21.333333z m362.666667 64a21.333333 21.333333 0 0 1-42.666667 0c0-164.666667-134-298.666667-298.666667-298.666667a21.333333 21.333333 0 0 1 0-42.666667 341.073333 341.073333 0 0 1 341.333334 341.333334z" fill="#2c2c2c" p-id="4520"></path></svg><p>电话</p></i></a></li>
        <li><a class="opwx"><i><svg t="1638438138558" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10851" width="48" height="48"><path d="M498.816 345.056c26.336 0 43.936-17.632 43.936-43.904 0-26.56-17.568-43.744-43.936-43.744s-52.832 17.184-52.832 43.744C446.016 327.424 472.48 345.056 498.816 345.056zM253.088 257.408c-26.336 0-52.96 17.184-52.96 43.744 0 26.272 26.624 43.904 52.96 43.904 26.24 0 43.808-17.632 43.808-43.904C296.864 274.592 279.328 257.408 253.088 257.408zM1024 626.112c0-138.88-128.832-257.216-286.976-269.536 0.224-1.728 0.32-3.52-0.064-5.312-31.712-147.84-190.688-259.296-369.824-259.296C164.704 91.968 0 233.12 0 406.624c0 93.088 47.52 176.96 137.568 243.104l-31.392 94.368c-2.016 6.144-0.192 12.896 4.704 17.152 2.976 2.56 6.72 3.904 10.496 3.904 2.432 0 4.896-0.576 7.168-1.696L246.4 704.48l14.528 2.944c36.288 7.456 67.616 13.92 106.208 13.92 11.36 0 22.88-0.512 34.176-1.472 4.576-0.384 8.448-2.688 11.072-6.016 42.496 106.336 159.616 183.104 297.44 183.104 35.296 0 71.04-8.512 103.104-16.544l90.848 49.664c2.4 1.312 5.056 1.984 7.68 1.984 3.584 0 7.168-1.216 10.048-3.552 5.056-4.096 7.136-10.848 5.248-17.024l-23.2-77.152C981.344 772.864 1024 699.328 1024 626.112zM398.592 687.968c-10.4 0.896-20.96 1.344-31.424 1.344-35.328 0-65.216-6.112-99.776-13.248L247.296 672c-3.456-0.736-7.104-0.256-10.272 1.376l-88.288 44.192 22.944-68.928c2.24-6.752-0.224-14.112-6.016-18.176C76.96 568.64 32 493.312 32 406.624c0-155.84 150.336-282.656 335.136-282.656 163.36 0 308 99.392 337.856 231.584-171.296 2.24-309.888 122.656-309.888 270.56 0 21.504 3.264 42.336 8.768 62.432C402.208 688.128 400.448 687.808 398.592 687.968zM875.456 815.552c-5.344 4.032-7.616 10.976-5.696 17.376l15.136 50.336-62.112-33.984c-2.368-1.312-5.024-1.984-7.68-1.984-1.312 0-2.624 0.16-3.904 0.512-33.312 8.416-67.776 17.088-101.344 17.088-155.904 0-282.72-107.136-282.72-238.816 0-131.68 126.816-238.784 282.72-238.784 152.928 0 282.144 109.344 282.144 238.784C992 691.744 950.624 759.04 875.456 815.552zM612.992 511.968c-17.568 0-35.136 17.696-35.136 35.232 0 17.664 17.568 35.104 35.136 35.104 26.4 0 43.84-17.44 43.84-35.104C656.832 529.632 639.392 511.968 612.992 511.968zM806.016 511.968c-17.312 0-34.88 17.696-34.88 35.232 0 17.664 17.568 35.104 34.88 35.104 26.304 0 44.064-17.44 44.064-35.104C850.08 529.632 832.352 511.968 806.016 511.968z" p-id="10852" fill="#2c2c2c"></path></svg><p>微信</p></i></a></li>
        <li data-href="/about/"><a><i><svg t="1638438056011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9170" width="48" height="48"><path d="M896 405.333333v128c0 34.133333-29.866667 64-64 64S768 567.466667 768 533.333333v-128c0-17.066667 8.533333-34.133333 17.066667-42.666666C733.866667 251.733333 640 170.666667 516.266667 170.666667H512c-128 0-221.866667 81.066667-273.066667 192 8.533333 8.533333 17.066667 25.6 17.066667 42.666666v128c0 34.133333-29.866667 64-64 64S128 567.466667 128 533.333333v-128C128 371.2 157.866667 341.333333 192 341.333333h4.266667c51.2-123.733333 174.933333-213.333333 315.733333-213.333333s264.533333 89.6 315.733333 213.333333h4.266667c34.133333 0 64 29.866667 64 64zM896 896H128c0-98.133333 170.666667-213.333333 384-213.333333s384 115.2 384 213.333333z m-59.733333-42.666667c-42.666667-59.733333-170.666667-128-324.266667-128s-281.6 68.266667-324.266667 128h648.533334zM512 682.666667c-119.466667 0-213.333333-93.866667-213.333333-213.333334s93.866667-213.333333 213.333333-213.333333 213.333333 93.866667 213.333333 213.333333-93.866667 213.333333-213.333333 213.333334z m170.666667-213.333334c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666 76.8 170.666667 170.666667 170.666667 170.666667-76.8 170.666667-170.666667z" fill="#2c2c2c" p-id="9171"></path></svg><p>联系</p></i></a></li>
    </ul>
    <div class="fbrbg"><img src="/Public/Home/img/fbarbg.png"></div>
</div>
</body>
</html>
<script src="/Public/Home/js/jquery.min.js"></script>
<script src="/Public/Home/js/wow.min.js"></script>
<script src="/Public/Home/js/common.js"></script>
<script>
    $(".ny_con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
</script>