集成送水管理系统项目：SpringBoot+Thymeleaf+mybatisPlus+bootstrap（六）

点击“客户管理”，显示客户信息列表

1.1定义Customer实体类

package com.minzu.entities;
​
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
​

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

​1.2 定义Mapper接口

package com.minzu.mapper;
​
import com.baomidou.mybatisplus.core.mapper.baseMapper;
import com.minzu.entities.Customer;
import org.springframework.stereotype.Repository;
​

@Repository
public interface CustomerMapper extends baseMapper {}

​1.3 编写业务逻辑接口Service

package com.minzu.service;
​
import com.minzu.entities.Customer;
​
import java.util.List;
​

public interface CustomerService {
​
    
    List listCustomer();
}

1.4 编写Service实现类

package com.minzu.service.impl;
​
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.minzu.entities.Customer;
import com.minzu.mapper.CustomerMapper;
import com.minzu.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
​
import java.util.List;
​

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

1.5 编写Controller控制器

package com.minzu.controller;
​
import com.minzu.entities.Customer;
import com.minzu.service.CustomerService;
import com.minzu.service.impl.CustomerServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
​
import java.util.List;
​

@Controller
@RequestMapping("/cust")
@Slf4j
public class CustomerController {
    
    @Autowired
    private CustomerService customerService  ;
​
    
    @RequestMapping("/listCust")
    public String listCustomer(Model model) {
        List custList = customerService.listCustomer();
        model.addAttribute("custList",custList);
        return "customerList";
    }
}

​1.6 导入静态页面

    
    
​
    
    
    
    
    
    
    
​


​

​
    
    
        

            公司后台管理
        
        

            

                
                     客户管理
                
            
            

                
                     送水工管理
                
            
            

                
                     送水历史管理
                
​
        
    
​
    
    
        
        
            
                
                    
                        
                        
                            
                            
                            
                            
                            
                        
                        
                        
                            
                        
                    
客户编号
客户名称
客户地址
联系方式
水票数量

                
            
        
    
  

​

1.7 修改主菜单

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

    
         客户管理
    

1.8 运行程序

http://localhost:8081

1.9存在的问题

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

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

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

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

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

2.1 编写CustomerService接口

在CustomerService接口增加saveCustomer方法

    
    int saveCustomer(Customer customer);

2.2 编写接口实现类

实现CustomerService接口的saveCustomer方法

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

2.3 编写CustomerController

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

    @RequestMapping("/preSaveCust")
    public String preSaveCust() {
        return "custSave";
    }

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

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

    
        添加客户
    

2.5 新建"添加客户"页面custSave.html

    
    

    
    
    
    
    
    
    






    
    

    

    
    
        
        
            
                
                    

                        
                            客户名称
                            
                                
                            
                        

                        
                            客户地址
                            
                                
                            
                        

                        
                            联系方式
                            
                                
                            
                        
                        
                            水票数量
                            
                                
                            
                        
                        
                            
                                
                                  
                                
                            

                        
                    
                
            
        
    

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

3.1 编写CustomerService接口

在CustomerService接口增加searchCustomer方法

    
    List searchCustomer(String custName);

3.2 编写接口实现类

实现CustomerService接口的searchCustomer方法

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

3.3 编写CustomerController

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

    @RequestMapping("/searchCustomer")
    public String searchCustomer(String custName,Model model) {
        log.info("search custName = "+custName);
        List custList = customerService.searchCustomer(custName);
        // 满足条件的客户列表渲染到页面
        model.addAttribute("custList",custList);
        return "custList";
    }

3.4 编写搜索表单

4.1编写CustomerService接口

在CustomerService接口增加deleteCustomerById方法

    
    int deleteCustomerById(Integer cid);

4.2 编写接口实现类

实现CustomerService接口的deleteCustomerById方法

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

4.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("delete customer rows = "+rows);
        // 查询已删除的客户列表信息
        return "redirect:/cust/listCust";
    }

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

5.1数据回显

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

1.在CustomerService接口新增加getCustomerById方法根据客户ID查询对应的客户信息。

 
    Customer getCustomerById(Integer cid);

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

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

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

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

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

5.新增加“修改客户”页面。

    
    

    
    
    
    
    
    
    






    
    

    

    
    
        
        
            
                
                    

                        
                        
                            客户名称
                            
                                
                            
                        

                        
                            客户地址
                            
                                
                            
                        

                        
                            联系方式
                            
                                
                            
                        
                        
                            水票数量
                            
                                
                            
                        
                        
                            
                                
                                  
                                
                            

                        
                    
                
            
        
    

5.2 修改表单客户信息

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

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

    
    int updateCustomer(Customer customer);

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

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

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 rows = "+rows);
        // 修改成功查询客户列表，跳转到客户页面
        return "redirect:/cust/listCust";
    }