easyUI快速入门第八讲——SSH+MySQL+easyUI实现CRM系统中客户管理模块的CRUD操作（二）

Myth丶恋晨 2023-05-29 03:42 10阅读 0赞

# 实现客户管理模块中保存客户的功能 #

## 编写web层 ##

首先，我们肯定是要提供一个添加客户的窗口的，并且窗口里面应放置一个添加客户的表单，该窗口显然一开始默认是隐藏的，只有当我们点击了新增客户的按钮或者超链接，这个窗口才弹出来，效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
要想实现这样的需求，得用到datagrid（数据表格）组件中的一个toolbar属性以及easyUI中的window（窗口）组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
这时，customer.html页面中的内容就要修改成下面这个样子了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript"> $(function() { //页面加载完成后，创建数据表格datagrid $('#dg').datagrid({ //指定数据表格发送Ajax请求的地址 url:'customer_findAll.action', //定义标题行所有的列，注意这是一个二维数组 columns:[[ //像field、title等就是列属性 { field:'cust_name',title:'客户名称',width:100}, { field:'cust_source',title:'客户来源',width:100}, { field:'cust_level',title:'客户级别',width:100}, { field:'cust_industry',title:'客户所属行业',width:100}, { field:'cust_phone',title:'客户固定电话',width:100}, { field:'cust_mobile',title:'客户移动电话',width:100}, //row参数代表的是一行记录数据 { field:'xxxx',title:'操作',width:100,formatter:function(value,row,index){ return "<a href='#'>修改</a> | <a href='#'>删除</a>"; } } ]], //显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色 striped:true, //显示分页工具栏（分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件） pagination:true, //分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏 pagePosition:"bottom", //初始化页数，即一开始显示第几页的东东 pageNumber:1, //每页显示多少条记录 pageSize:3, //下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数） pageList:[3,5,10], toolbar: [{ iconCls: 'icon-add', //点击以上+这个小图标，就能触发下面这个函数，在该函数中，打开隐藏的添加客户窗口 handler: function() { $('#winAdd').window('open'); } }] }); }); </script>
    </head>
    <body>
    	<table id="dg"></table>
    	
    	
    	<div id="winAdd" class="easyui-window" title="添加客户" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true,closed:true"> 
            <form id="formAdd" method="post">
    			<TABLE cellSpacing=0 cellPadding=5 border=0>
    			<TR>
    				<td>客户名称：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
    				</td>
    				<td>客户级别 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>信息来源 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
    				</td>
    				<td>客户行业：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>固定电话 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
    			</td>
    			<td>移动电话 ：</td>
    			<td>
    				<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
    					</td>
    				</TR>
    				
    				<tr>
    					<td rowspan=2>
    						<button id="customerBtn" type="button" onclick="save()">保存</button>
    					</td>
    				</tr>
    			</TABLE>   
    		</form>
    	</div>
    </body>
    </html>

当我们在添加客户的窗口中填写完客户的相关信息后，点击保存按钮，就要把表单中的客户相关信息提交到后台。现在，添加客户的窗口中嵌套的是一个普通表单，怎样才能将这个普通表单提交到后台呢？先要使该普通表单成为Ajax提交方式的表单，再做一个提交操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
好了，点击保存按钮触发的save方法，你现在该知道怎么编写了吧？想一想，思路是不是像下面这样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
在编写以上save方法的过程中，或许你会遇到这样一个问题，后台保存客户无论是成功还是失败，在前台都要获取响应数据，因为你总该知道保存客户是成功还是失败吧！具体的响应数据的格式应该是怎样的呢？

*  后台保存客户成功，一个典型的响应数据格式应如下：
    
        { "msg":"保存客户成功！"}
 *  后台保存客户失败，一个典型的响应数据格式应如下：
    
        { "msg":"保存客户失败！"}

一旦表单以Ajax方式提交之后，在`'success'`回调函数中拿到的data其实就是一个普通的字符串，而不是把它当作一个JSON对象来使用，那怎样才能将一个普通的字符串转成一个JSON对象呢？这时，就要使用到JavaScript中的一个全局函数了，即eval()，它会计算JavaScript字符串，并把其作为脚本代码来执行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
还有一个问题，保存客户无论是成功还是失败，都应该用一个普通的消息展示窗口提示一下保存客户成功或者失败的消息，那该怎样实现这样的需求呢？这时，就要用到easyUI中的messager（消息窗口）组件了，如果要显示一个普通的消息展示窗口，那么可以使用如下`$.messager.show`方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]  
最终，save方法便要编写成下面这样子了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]  
然后，我们就要在CustomerAction类中编写一个保存客户的方法了。由于我们知道了后台响应回前台的具体的数据格式，所以我们同样可以构建一个Map集合，再使用JSONObject类将其转成一个JSON对象格式的数据。

public String save() throws IOException { 
    	Map<String, String> map = new HashMap<String, String>();
    	try { 
    		customerService.save(customer);
    		map.put("msg", "保存客户成功！");
    	} catch (Exception e) { 
    		e.printStackTrace();
    		map.put("msg", "保存客户失败！");
    	}
    	JSONObject jsonObject = JSONObject.fromObject(map);
    	ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
    	ServletActionContext.getResponse().getWriter().println(jsonObject.toString());
    	return NONE;
    }

## 编写service层 ##

首先，在CustomerService接口中添加一个保存客户的方法声明，如下：

package com.meimeixia.crm.service;
    
    import org.hibernate.criterion.DetachedCriteria;
    
    import com.meimeixia.crm.domain.Customer;
    import com.meimeixia.crm.domain.PageBean;
    
    public interface CustomerService { 
    
    	PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows);
    
    	void save(Customer customer);
    
    }

然后，在以上接口的一个实现类（CustomerServiceImpl.java）中去实现保存客户的方法。

package com.meimeixia.crm.service.impl;
    
    import java.util.List;
    import org.hibernate.criterion.DetachedCriteria;
    import com.meimeixia.crm.dao.CustomerDao;
    import com.meimeixia.crm.domain.Customer;
    import com.meimeixia.crm.domain.PageBean;
    import com.meimeixia.crm.service.CustomerService;
    
    public class CustomerServiceImpl implements CustomerService { 
    	
    	private CustomerDao customerDao;
    
    	public void setCustomerDao(CustomerDao customerDao) { 
    		this.customerDao = customerDao;
    	}
    
    	@Override
    	public PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows) { 
    		PageBean<Customer> pageBean = new PageBean<Customer>();
    		pageBean.setCurrentPage(page);
    		pageBean.setPageSize(rows);
    		Integer totalCount = customerDao.findCount(detachedCriteria);
    		pageBean.setTotalCount(totalCount);
    		double tc = totalCount;
    		Double num = Math.ceil(tc / rows);
    		pageBean.setTotalPage(num.intValue());
    		Integer begin = (page - 1) * rows;
    		List<Customer> list = customerDao.findByPage(detachedCriteria, begin, rows);
    		pageBean.setList(list);
    		return pageBean;
    	}
    
    	@Override
    	public void save(Customer customer) { 
    		customerDao.save(customer);
    	}
    	
    }

### 添加事务 ###

由于现在执行的是保存客户的操作，那么必须要在实现类（CustomerServiceImpl.java）上添加@Transactional注解。这里，我们会使用Spring基于注解方式的声明式事务管理，因为写起来更加简单。

*  第一步，配置事务管理器。
    
        
        <bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
        	
        	<property name="sessionFactory" ref="sessionFactory" />
        </bean>
 *  第二步，开启事务注解。
    
        
        <tx:annotation-driven transaction-manager="transactionManager" />
 *  第三步，在业务层中的实现类上添加@Transactional注解。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]

## 编写dao层 ##

首先，在CustomerDao接口中添加一个保存客户的方法声明，如下：

package com.meimeixia.crm.dao;
    
    import java.util.List;
    
    import org.hibernate.criterion.DetachedCriteria;
    
    import com.meimeixia.crm.domain.Customer;
    
    public interface CustomerDao { 
    
    	Integer findCount(DetachedCriteria detachedCriteria);
    
    	List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows);
    
    	void save(Customer customer);
    
    }

然后，在以上接口的一个实现类（CustomerDaoImpl.java）中去实现保存客户的方法。

package com.meimeixia.crm.dao.impl;
    
    import java.util.List;
    
    import org.hibernate.criterion.DetachedCriteria;
    import org.hibernate.criterion.Projections;
    import org.springframework.orm.hibernate5.support.HibernateDaoSupport;
    
    import com.meimeixia.crm.dao.CustomerDao;
    import com.meimeixia.crm.domain.Customer;
    
    public class CustomerDaoImpl extends HibernateDaoSupport implements CustomerDao { 
    
    	@Override
    	public Integer findCount(DetachedCriteria detachedCriteria) { 
    		detachedCriteria.setProjection(Projections.rowCount());
    		List<Long> list = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
    		if (list.size() > 0) { 
    			return list.get(0).intValue();
    		}
    		return null;
    	}
    
    	@Override
    	public List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows) { 
    		detachedCriteria.setProjection(null);
    		return (List<Customer>) this.getHibernateTemplate().findByCriteria(detachedCriteria, begin, rows);
    	}
    
    	@Override
    	public void save(Customer customer) { 
    		this.getHibernateTemplate().save(customer);
    	}
    
    }

至此，保存客户的功能，我们就已经实现了，至于测试的话，我就不再这里测试了（偷懒了），反正是好使的！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191103180758186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191103180808399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191103195826877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191103195832852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019110320392426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191103211227153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191103211243186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2019110321233230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70