基于SSM+MySQL+BootStrap实现CRM系统中的客户管理模块（三）——实现修改客户信息的功能

「爱情、让人受尽委屈。」 2023-06-26 12:06 13阅读 0赞

修改客户有两件事需要做，第一件事是实现编辑数据回显，即在弹出的页面中回显选择客户的信息；第二件事是实现编辑客户数据，即保存修改好后的客户信息。

# 实现编辑数据回显 #

现在要实现的需求是这样的：在客户列表显示页面中，点击"修改"按钮，会弹出一个客户信息修改窗口，在该窗口中回显所选择的客户信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
在客户列表显示页面中，点击"修改"按钮会触发下面这样一个函数，虽然这儿是提前提供好了的，但是你也要会写像这样的JavaScript代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
发现这里使用的是Ajax异步提交请求。接下来，我们就要根据这个请求开发后台逻辑了，以提供给前端页面进行调用。

## 实现dao层开发 ##

首先，在客户信息持久化接口（CustomerMapper.java）中声明一个根据id查询客户信息的方法。

package com.meimeixia.crm.mapper;
    
    import java.util.List;
    
    import com.meimeixia.crm.pojo.Customer;
    import com.meimeixia.crm.pojo.QueryVo;
    
    /** * 客户信息持久化接口 * @author liayun * */
    public interface CustomerMapper { 
    	
    	/** * 根据查询条件分页查询客户列表 * @param vo * @return */
    	List<Customer> getCustomerByQueryVo(QueryVo vo);
    	
    	/** * 根据查询条件查询总记录数 * @param vo * @return */
    	Integer getCountByQueryVo(QueryVo vo);
    	
    	/** * 根据id查询客户信息 * @param id * @return */
    	Customer getCustomerById(Integer id);
    
    }

然后，在CustomerMapper.xml文件中编写对应的select查询语句。

<select id="getCustomerById" parameterType="int" resultType="customer">
        SELECT
            `cust_id`,
            `cust_name`,
            `cust_user_id`,
            `cust_create_id`,
            `cust_source`,
            `cust_industry`,
            `cust_level`,
            `cust_linkman`,
            `cust_phone`,
            `cust_mobile`,
            `cust_zipcode`,
            `cust_address`,
            `cust_createtime`
        FROM `customer`
        WHERE `cust_id` = #{id}
    </select>

## 实现service层开发 ##

首先，在客户信息业务逻辑接口（CustomerService.java）中声明一个根据id查询客户信息的方法。

package com.meimeixia.crm.service;
    
    import com.meimeixia.crm.pojo.Customer;
    import com.meimeixia.crm.pojo.QueryVo;
    import com.meimeixia.crm.utils.Page;
    
    /** * 客户信息业务逻辑接口 * @author liayun * */
    public interface CustomerService { 
    	
    	/** * 根据查询条件分页查询客户列表 * @param vo * @return 包装的分页数据 */
    	Page<Customer> getCustomerByQueryVo(QueryVo vo);
    	
    	/** * 根据id查询客户信息 * @param id * @return */
    	Customer getCustomerById(Integer id);
    
    }

然后，在以上接口的实现类（BaseDictServiceImpl.java）中去实现以上方法。

package com.meimeixia.crm.service.impl;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.meimeixia.crm.mapper.CustomerMapper;
    import com.meimeixia.crm.pojo.Customer;
    import com.meimeixia.crm.pojo.QueryVo;
    import com.meimeixia.crm.service.CustomerService;
    import com.meimeixia.crm.utils.Page;
    
    @Service
    public class CustomerServiceImpl implements CustomerService { 
    	
    	@Autowired
    	private CustomerMapper customerMapper;
    
    	@Override
    	public Page<Customer> getCustomerByQueryVo(QueryVo vo) { 
    		//计算分页查询从哪条记录开始
    		vo.setStart((vo.getPage() - 1) * vo.getRows()); 
    		//查询总记录数
    		Integer total = customerMapper.getCountByQueryVo(vo);
    		//查询每页的记录（数据）列表
    		List<Customer> list = customerMapper.getCustomerByQueryVo(vo);
    		//包装一个分页数据模型
    		Page<Customer> page = new Page<Customer>(total, vo.getPage(), vo.getRows(), list);
    		return page;
    	}
    
    	@Override
    	public Customer getCustomerById(Integer id) { 
    		return customerMapper.getCustomerById(id);
    	}
    
    }

## 实现表现层开发 ##

在CustomerController类中编写一个如下edit()方法。

package com.meimeixia.crm.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.meimeixia.crm.pojo.BaseDict;
    import com.meimeixia.crm.pojo.Customer;
    import com.meimeixia.crm.pojo.QueryVo;
    import com.meimeixia.crm.service.BaseDictService;
    import com.meimeixia.crm.service.CustomerService;
    import com.meimeixia.crm.utils.Page;
    
    /** * 客户信息请求处理的Controller * @author liayun * */
    @Controller
    @RequestMapping("customer")
    public class CustomerController { 
    	
    	@Autowired
    	private BaseDictService dictService;
    	
    	@Autowired
    	private CustomerService customerService;
    	
    	@Value("${customer_from_type}")
    	private String customer_from_type;
    	
    	@Value("${customer_industry_type}")
    	private String customer_industry_type;
    	
    	@Value("${customer_level_type}")
    	private String customer_level_type;
    	
    	@RequestMapping("list")
    	public String list(Model model, QueryVo vo) { 
    		//查询客户来源
    		List<BaseDict> fromType = dictService.getBaseDictByCode(customer_from_type);//"002"
    		//查询客户行业
    		List<BaseDict> industryType = dictService.getBaseDictByCode(customer_industry_type);//"001"
    		//查询客户级别
    		List<BaseDict> levelType = dictService.getBaseDictByCode(customer_level_type);//"006"
    		
    		//设置数据模型并返回
    		model.addAttribute("fromType", fromType);
    		model.addAttribute("industryType", industryType);
    		model.addAttribute("levelType", levelType);
    		
    		//根据查询条件分页查询用户列表
    		Page<Customer> page = customerService.getCustomerByQueryVo(vo);
    		//设置分页数据返回
    		model.addAttribute("page", page);
    		//返回查询条件
    		model.addAttribute("vo", vo);
    		return "customer";
    	}
    	
    	/** * 根据id查询用户信息，并返回json格式的数据 * @param id * @return */
    	@RequestMapping("edit")
    	@ResponseBody
    	public Customer edit(Integer id) { 
    		Customer customer = customerService.getCustomerById(id);
    		return customer;
    	}
    	
    }

至此，就完成了在客户信息修改窗口中回显所选择的客户信息的功能。

# 实现编辑客户数据 #

实现编辑客户数据这个功能也很简单，只需要在客户信息修改窗口中点击"保存修改"按钮，即可保存修改好后的客户信息，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]  
在客户信息修改窗口中点击"保存修改"按钮，很显然触发的是下面这样一个函数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3]  
有同学不仅想问，`$("#edit_customer_form").serialize()`这是个啥啊？它其实是序列化表单，即把表单中`<input>`标签的name属性的值和value属性的值拼装成一个串，注意这不是一个json串，而是一个类似于属性拼接模式（参数传递模式）的串，该串有点像get请求提交参数时参数拼接的样子。你要是不信的话，可以试着弹出`$("#edit_customer_form").serialize()`看看，就像下面这样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4]  
这时，在客户信息修改窗口中点击"保存修改"按钮，你会发现弹出了如下一个窗口。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5]  
好了，接下来，我们就要根据前台发起的请求开发后台逻辑了。

## 实现dao层开发 ##

首先，在客户信息持久化接口（CustomerMapper.java）中声明一个更新客户信息的方法。

然后，在CustomerMapper.xml文件中编写对应的update更新语句，一定要注意判断空值。

<update id="updateCustomer" parameterType="customer">
    	UPDATE `customer` 
    	
    	<set>
    		
    		<if test="cust_name != null">
    			`cust_name` = #{cust_name},
    		</if>
    		<if test="cust_source != null and cust_source != ''">
    			`cust_source` = #{cust_source},
    		</if>
    		<if test="cust_industry != null and cust_industry != ''">
    			`cust_industry` = #{cust_industry},
    		</if>
    		<if test="cust_linkman != null and cust_linkman != ''">
    			`cust_linkman` = #{cust_linkman},
    		</if>
    		<if test="cust_linkman != null and cust_linkman != ''">
    			`cust_linkman` = #{cust_linkman},
    		</if>
    		<if test="cust_phone != null and cust_phone != ''">
    			`cust_phone` = #{cust_phone},
    		</if>
    		<if test="cust_mobile != null and cust_mobile != ''">
    			`cust_mobile` = #{cust_mobile},
    		</if>
    		<if test="cust_zipcode != null and cust_zipcode != ''">
    			`cust_zipcode` = #{cust_zipcode},
    		</if>
    		<if test="cust_address != null and cust_address != ''">
    			`cust_address` = #{cust_address},
    		</if>
    	</set>
    	WHERE `cust_id` = #{cust_id}
    </update>

## 实现service层开发 ##

首先，在客户信息业务逻辑接口（CustomerService.java）中声明一个更新客户信息的方法。

然后，在以上接口的实现类（BaseDictServiceImpl.java）中去实现以上方法。

## 实现表现层开发 ##

在CustomerController类中编写一个如下update()方法。

到这里，就完美实现修改客户信息的功能了，是不是很简单呢？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019123118372618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231183732851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200114085447547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200114085448763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200114085532410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200114085537633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWF5dW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70