案例：送水系统2

上次内容讲述了如何搭建框架和实现初步登录的测试

1.测试用户 

 找到登录成功后的页面waterMainMenu.html

  
  
    

      公司后台管理
    
    

      

        
           客户管理
        
      
      

        
           送水工管理
        
      
      

        
           送水历史管理
        
      
      

        
           计算工资
        
      
      

        
           统计送水数量
        
      
      

        
           修改密码
        
      
    
  
  
  
  
    
    

    
  

 1.1修改测试用户123

1.2我们在数据库的密码因为MD5的关系，已经加密，所以我们要去百度搜索解密方法

 搜索MD5在线解密或直接输入网址MD5免费在线解密破解_MD5在线加密-SOMD5

 输入加密密码后，得到原始密码admin

---

我们要去实现让它登陆后显示的不是测试用户，而是我们当前用户，方法：

1.3 我们需要用户名从后端传递到前端，所以要在我们原本在Controller层中的loginAccount方法（此方法是登录方法）中加入 http会话 形参（HttpSession）用model也可以

    @RequestMapping(value="/login")
    public String loginAccount(String userName, String userPwd, Model model, HttpSession session) {
        boolean result = accountService.login(userName, userPwd);
        if (result) {
            //登陆成功，用户名传递到前端
            session.setAttribute("currentUser",userName);
            //跳转主页
            return "waterMainMenu";
        } else {
            //失败，提示后，继续跳转到登录页面
            model.addAttribute("loginFail","用户名密码错误");
            return "index";
        }
    }
}

 然后这个存入会话的值，在前端的（waterMainMenu.html）中去获取这个值

这样在登陆界面才能输入正确的账户和密码才可以登陆

---

2.客户管理

要求：点击客户管理跳转到客户管理的页面，点击送水工管理跳转到送水工管理页面 

2.1 定义Customer实体类

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("tb_customer")
public class Customer {
    
    private Integer cid;
    
    private String custName;
    
    private String custAddress;
    
    private String custMobile;
    
    private String custTicket;
}

2.2定义Mapper接口

@Repository            //mapper层中的这个注解可以不要，因为我们在主程序中扫描了这个层，如果没有做扫描的话，一定要加上@Mapper注解
public interface CustomerMapper extends BaseMapper {
}

2.3 编写业务逻辑接口Service

public interface CustomerService {
    
    List listCustomer();
}

2.4 编写Service实现类

@Service
public class CustomerServiceImpl implements CustomerService {
    @Autowired
    private CustomerMapper customerMapper;
    
    @Override
    public List listCustomer() {
        return customerMapper.selectList(null);
    }
}

2.5 编写Controller控制器

@Controller
@RequestMapping("/cust")
@Slf4j
public class CustomerController {
    
    @Autowired
    private CustomerService customerService  ;
    
    @RequestMapping("/listCust")
    public String listCustomer(Model model) {                         //为什么不是list类型
        List custList = customerService.listCustomer();
        model.addAttribute("custList",custList);
        return "customerList";
    }
}

2.6 导入静态页面（customerList.html）

    
    

    
    
    
    
    
    
    






    
    
        

            公司后台管理
        
        

            

                
                     客户管理
                
            
            

                
                     送水工管理
                
            
            

                
                     送水历史管理
                

        
    

    
    
        
        
            
                
                    

                        

                        

                            
客户编号
                            
客户名称
                            
客户地址
                            
联系方式
                            
水票数量
                            
操作
                        
                        
                        

                        
                        
                    
                
            
        
    
  

 然后我们要把后端的controller拿到的数据渲染过去（custList）

 修改渲染客户列表

                        
                        
                        
                        
                            
                            
                            
                            
                            
                            
                                修改
                                删除
                            
                        
                        

2.7 修改主菜单（在登陆跳转页面中waterMainMenu.html）

 在“客户管理”菜单的超链接标签添加路径th:href="@{/cust/listCust}"

      

        
           客户管理
        
      

2.8 运行程序 2.9存在的问题

 主页面waterMainMenu.html和客户列表页面custList.html存在大量重复的代码。如何解决？可以使⽤th:fragment 属性来定义被包含的模版⽚段，以供其他模版包含。

 2.9.1.修改“主页面“的侧边栏

 2.9.2.修改“主页面“的导航块

 2.9.3. 修改“客户管理”页面的侧边栏，去掉div标签里面的内容

2.9.4.修改“客户管理“页面的导航块

3. 添加客户

3.1 编写CustomerService接口

在CustomerService接口增加saveCustomer方法  

    int saveCustomer(Customer customer);

3.2 编写接口实现类

实现CustomerService接口的saveCustomer方法

 
    @Override
    public int saveCustomer(Customer customer) {
        return customerMapper.insert(customer);
    }

3.3 编写CustomerController

当客户提交表单，将表单的客户信息持久化到数据库中，添加成功返回“用户列表”页面  

 
    @RequestMapping("/preSaveCust")
    public String preSaveCust(){

        return "customerSave";
    }
    
    public String saveCust(Customer customer){
        log.info("Customer = "+customer);
        int rows = customerService.saveCustomer(customer);
        log.info("save customer row = "+rows);
        // 重定向到客户列表，将新添加的客户信息显示到客户列表
        return "redirect:/cust/listCust";           //重定向到listCustomer方法
    }

3.4 在custList.html增加一个“添加”按钮

                    
                        
                            添加客户
                        

可以把按钮放在Content（内容）中的表格上面

的上方

        
            
                
                    
                        
                            添加客户
                        

                    

客户编号	客户名称	客户地址	联系方式	水票数量	操作
					修改| 删除

3.5 新建"添加客户"页面customerSave.html

    
    

    
    
    
    
    
    
    






    
    

    

    
    
        
        
            
                
                    

                        
                            客户名称
                            
                                
                            
                        

                        
                            客户地址
                            
                                
                            
                        

                        
                            联系方式
                            
                                
                            
                        
                        
                            水票数量
                            
                                
                            
                        
                        
                            
                                
                                  
                                
                            

                        
                    
                
            
        
    

4 搜索客户

 客户名称作为搜索条件，查询满足条件的客户信息。例如：使用模糊查询，搜索所有包含“老”的客户信息。

4.1 编写CustomerService接口

在CustomerService接口增加searchCustomer方法

    List searchCustomer(String custName);

4.2 编写接口实现类

实现CustomerService接口的searchCustomer方法  

    
    @Override
    public List searchCustomer(String custName) {
        QueryWrapper qw = new QueryWrapper<>();
        qw.like("cust_name",custName);
        return customerMapper.selectList(qw);
    

4.3 编写CustomerController

根据表单提供的“客户名称”，查询满足条件客户信息，最后返回客户列表页面。  

    
    @RequestMapping("/searchCust")
    public String searchCustomer(String custName, Model model) {
        List custList = customerService.searchCustomer(custName);
        model.addAttribute("custList",custList);
        // 把搜索条件回传到前端页面
        model.addAttribute("searchName",custName);
        return "customerList";
    }

4.4 编写搜索表单

---

5 根据ID删除客户信息 5.1编写CustomerService接口

在CustomerService接口增加deleteCustomerById方法

    
    int deleteCustomerById(Integer cid);

5.2 编写接口实现类

实现CustomerService接口的deleteCustomerById方法  

   
    @Override
    public int deleteCustomerById(Integer cid) {
        QueryWrapper qw = new QueryWrapper<>();
        qw.eq("cid",cid);
        return customerMapper.delete(qw);
    }

5.3 编写CustomerController

根据浏览器传入的客户ID删除对应的客户信息，然后返回客户列表  

    
    @RequestMapping("/delCust/{cid}")
    public String deleteCustomer(@PathVariable("cid") Integer cid) {
        log.info("delete Customer cid = "+cid);
        int rows = customerService.deleteCustomerById(cid);
        log.info("delte customer rows = "+rows);
        // 查询已删除的客户列表信息
        return "redirect:/cust/listCust";
    }

5.4 客户列表页面增加删除按钮

							
                                删除
                            

---

6 修改客户 6.1数据回显

 点击修改按钮，跳转到“修改客户”页面，显示要修改的客户信息。步骤如下：

6.1.1.在CustomerService接口新增加getCustomerById方法根据客户ID查询对应的客户信息。（回显就是查询）

 
    Customer getCustomerById(Integer cid);

 6.1.2.在CustomerServiceImpl实现类覆写接口定义的getCustomerById方法根据客户ID查询对应的客户信息。

 
    @Override
    public Customer getCustomerById(Integer cid) {
        QueryWrapper qw = new QueryWrapper<>();
        qw.eq("cid",cid);
        return customerMapper.selectOne(qw);
    }

6.1.3.在CustomerController控制器新增preUpateCustomer方法完成数据的回显。调用CustomerService接口的getCustomerById方法，将客户信息渲染到页面。

  
    @RequestMapping("/preUpdateCust/{cid}")
    public String preUpdateCustomer(@PathVariable("cid") Integer cid,Model model) {
        log.info("pre update customer cid = "+cid);
        Customer customer = customerService.getCustomerById(cid);
        model.addAttribute("customer",customer);
        // 水票数量渲染到前端
        return "customerUpdate";
    }

6.1.4 在"客户列表"页面添加“修改按钮”

  修改

6.1.5.新增加“修改客户”页面。customerUpdate.html

    
    

    
    
    
    
    
    
    






    
    

    

    
    
        
        
            
                
                    

                        
                        

                        
                            客户名称
                            
                                
                            
                        

                        
                            客户地址
                            
                                
                            
                        

                        
                            联系方式
                            
                                
                            
                        
                        
                            水票数量
                            
                                
                            
                        
                        
                            
                                
                                  
                                
                            
                        
                    
                
            
        
    

th:value="${customer.custName}"就是回显

6.2 修改表单客户信息

在“修改客户”页面提交表单，将修改的数据持久化到数据库  

6.2 .1.在CustomerService接口新增加updateCustomer方法修改客户信息。  

    int updateCustomer(Customer customer);

6.2 .2.在CustomerServiceImpl实现类覆写接口定义的updateCustomer方法修改客户信息。

 
    @Override
    public int updateCustomer(Customer customer) {
        QueryWrapper qw = new QueryWrapper<>();
        // update ..... where cid = ？
        qw.eq("cid",customer.getCid());
        return customerMapper.update(customer,qw);
    }

6.2. 3.在CustomerController控制器新增upateCustomer方法修改客户信息，然后返回客户列表显示已修改的信息

 
    @RequestMapping(value="/updateCust",method = RequestMethod.POST)
    public String updateCustomer(Customer customer) {
        log.info("update Customer "+customer);
        int rows = customerService.updateCustomer(customer);
        log.info("update customer rows = "+rows);
        // 修改成功查询客户列表，跳转到客户页面
        return "redirect:/cust/listCust";
    }

最后测试即可