上一篇我主要介绍dwr的概况。这一篇我用dwr做了个可以不刷新页面就更新的表格。
运行环境:
windows xp pro sp2
j2sdk1.2.4_03
weblogic8.1
struts1.2.4
开发工具eclipse3.0
其实dwr和struts没有什么关系,只不过最近我们项目组在用struts作东西。我就顺便用把我的程序建立在Struts上。
主要文件。
dwr.jar--dwr的类库包
struts的类库包,具体我不说了,这东西谁都知道。
jdts0.9.jar--数据库SQLServer的驱动程序包。
以上jar包放在WebContent\WEB-INF\lib下
web.xml--谁都知道这东西干嘛用的吧。
struts-config.xml --这个也不说了。
dwr.xml -- dwr的配置文件
weblogic.xml -- weblogic模块配置文件。
还有一个struts的tld就不说了
以上文件放在WebContent\WEB-INF下面。
login.jsp -- 登陆界面,这里我也用到了dwr
showtable.jsp --登陆成功会转到这个页面,一个ajax表格。
showtable.js -- showtable.jsp中用到的javascript
main.css -- 不说了
还有 *.gif界面要到的图片
以上文件放在WebContent下
剩下的就是java类了。
LoginAction.java --Struts的Action,负责登陆
TableAction.java --Struts的Action,负责表格内容初始化
UserLogic.java --负责验证用户
TableRowConverter.java -- 继承于dwr的BeanConverter,负责将一个对象转成javascript能用的东西。
LoginForm.java --Struts的Form,负责登陆信息
TableModelBean.java --TableModel一部分给struts用一部分给dwr用。
TableRowBean.java 用户存放行信息的Bean。
ModelOneDAO.java --随便取的名字,有点恶(三声)。负责从数据库操作的。
这个例子还需要一个数据库,我用的是SQLServer。
下面是建表的SQL语句。输入数据的SQL就不贴了太长了。我会弄个源码下载的。
接下来是写业务逻辑
Login.java
/**/
/*
* Created on 2005-7-29
*
* TODO To change the template for this generated file go to
* Window - Preferences - Java - Code Style - Code Templates
*/
package org.mstar.strutsajax.action;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.mstar.strutsajax.ajax.UserLogic;
import org.mstar.strutsajax.form.LoginForm;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
/**/
/**
* @author matianyi
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
public
class
LoginAction extends Action
{
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
/**//* (non-Javadoc)
* @see org.apache.struts.action.Action#execute(org.apache.struts.action.ActionMapping, org.apache.struts.action.ActionForm, javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
HttpServletRequest request, HttpServletResponse response) throws Exception
{
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
if(validateUser((LoginForm)form))
{
return mapping.findForward("success");
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
} else
{
return mapping.findForward("failure");
}
}
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
private boolean validateUser(LoginForm form)
{
UserLogic userLogic = new UserLogic();
return userLogic.validate(form.getUsername(),form.getPassword());
}
}
UserLogic.java
package org.mstar.strutsajax.ajax;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
/**/
/**
* @author matianyi
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
public
class
UserLogic
{
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
public boolean validate(String username,String password)
{
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
if("mty".equals(username)&&"123".equals(password))
{
return true;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
} else
{
return false;
}
}
}
LoginForm.java
package org.mstar.strutsajax.form;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
import org.apache.struts.action.ActionForm;
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
/**/
/**
* @author matianyi
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
public
class
LoginForm extends ActionForm
{
private String username;
![点击在新窗口查看原始图片 screen.jpg](https://i-blog.csdnimg.cn/blog_migrate/76c21a3921eaea26da4b2951cbde7b38.jpeg)
运行环境:
windows xp pro sp2
j2sdk1.2.4_03
weblogic8.1
struts1.2.4
开发工具eclipse3.0
其实dwr和struts没有什么关系,只不过最近我们项目组在用struts作东西。我就顺便用把我的程序建立在Struts上。
主要文件。
dwr.jar--dwr的类库包
struts的类库包,具体我不说了,这东西谁都知道。
jdts0.9.jar--数据库SQLServer的驱动程序包。
以上jar包放在WebContent\WEB-INF\lib下
web.xml--谁都知道这东西干嘛用的吧。
struts-config.xml --这个也不说了。
dwr.xml -- dwr的配置文件
weblogic.xml -- weblogic模块配置文件。
还有一个struts的tld就不说了
以上文件放在WebContent\WEB-INF下面。
login.jsp -- 登陆界面,这里我也用到了dwr
showtable.jsp --登陆成功会转到这个页面,一个ajax表格。
showtable.js -- showtable.jsp中用到的javascript
main.css -- 不说了
还有 *.gif界面要到的图片
以上文件放在WebContent下
剩下的就是java类了。
LoginAction.java --Struts的Action,负责登陆
TableAction.java --Struts的Action,负责表格内容初始化
UserLogic.java --负责验证用户
TableRowConverter.java -- 继承于dwr的BeanConverter,负责将一个对象转成javascript能用的东西。
LoginForm.java --Struts的Form,负责登陆信息
TableModelBean.java --TableModel一部分给struts用一部分给dwr用。
TableRowBean.java 用户存放行信息的Bean。
ModelOneDAO.java --随便取的名字,有点恶(三声)。负责从数据库操作的。
这个例子还需要一个数据库,我用的是SQLServer。
下面是建表的SQL语句。输入数据的SQL就不贴了太长了。我会弄个源码下载的。
/*
==============================================================
*/
/* DBMS name: Microsoft SQL Server 2000 */
/* Created on: 2005-8-1 13:21:33 */
/* ============================================================== */
if exists ( select 1
from sysobjects
where id = object_id ( ' AJAX_MODEL_ONE ' )
and type = ' U ' )
drop table AJAX_MODEL_ONE
go
/* ============================================================== */
/* Table: AJAX_MODEL_ONE */
/* ============================================================== */
create table AJAX_MODEL_ONE (
col1 int not null ,
col2 int not null ,
col3 int not null ,
constraint PK_AJAX_MODEL_ONE primary key (col1)
)
go
/* DBMS name: Microsoft SQL Server 2000 */
/* Created on: 2005-8-1 13:21:33 */
/* ============================================================== */
if exists ( select 1
from sysobjects
where id = object_id ( ' AJAX_MODEL_ONE ' )
and type = ' U ' )
drop table AJAX_MODEL_ONE
go
/* ============================================================== */
/* Table: AJAX_MODEL_ONE */
/* ============================================================== */
create table AJAX_MODEL_ONE (
col1 int not null ,
col2 int not null ,
col3 int not null ,
constraint PK_AJAX_MODEL_ONE primary key (col1)
)
go
Login.java
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![点击在新窗口查看原始图片](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)