1客户列表
点击“客户管理”，显示客户信息列表
1.1定义Customer实体类
package com.minzu.entities;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* TODO: 客户实体类
* @author caojie
* @version 1.0
*/
@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;
/**
* TODO：客户管理的映射器，在客户表和实体类之间做映射
* @author caojie
* @version 1.0
*/
@Repository
public interface CustomerMapper extends BaseMapper<Customer> {}1.3 编写业务逻辑接口Service
package com.minzu.service;
import com.minzu.entities.Customer;
import java.util.List;
/**
* TODO: 客户管理
* @author caojie
* @version 1.0
*/
public interface CustomerService {
/**
* 返回所有客户信息
* @return 客户列表
*/
List<Customer> 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;
/**
* TODO：客户管理接口实现类
*
* @author caojie
* @version 1.0
*/
@Service
public class CustomerServiceImpl implements CustomerService {
@Autowired
private CustomerMapper customerMapper;
/**
* 返回所有客户信息
*
* @return 客户列表
*/
@Override
public List<Customer> 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;
/**
* TODO: 客户管理的控制器，处理客户管理所有的请求
*
* @author caojie
* @version 1.0
* @date 2021/10/22 8:29
*/
@Controller
@RequestMapping("/cust")
@Slf4j
public class CustomerController {
/**
* 控制器依赖业务逻辑，按照类型自动装配CustomerService对象
*/
@Autowired
private CustomerService customerService ;
/**
* 用户点击"客户管理"超链接按钮，显示所有的客户信息
* 步骤：
* 1 调用CustomerService对象的listCustomer方法查询所有的客户信息
* 2 将客户信息渲染到客户列表页面
* 3 跳转到客户列表页面
* @param model 在前端和后端之间传递数据的对象
* @return 客户列表页面
*/
@RequestMapping("/listCust")
public String listCustomer(Model model) {
List<Customer> custList = customerService.listCustomer();
model.addAttribute("custList",custList);
return "customerList";
}
}1.6 导入静态页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> 湖北民族大学送水公司后台管理系统</title>
<!--Bootstrap固定框架-->
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
<!--图标库-->
<link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
<!--核心样式-->
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="viewport">
<!-- Sidebar -->
<div id="sidebar">
<header>
<a href="#">公司后台管理</a>
</header>
<ul class="nav">
<li>
<a >
<i class="zmdi zmdi-view-dashboard"></i> 客户管理
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-link"></i> 送水工管理
</a>
</li>
<li>
<a>
<i class="zmdi zmdi-widgets"></i> 送水历史管理
</a>
</ul>
</div>
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid" >
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
</a>
</li>
<li><a href="#">测试用户123</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-striped">
<thead>
<tr>
<td>客户编号</td>
<td>客户名称</td>
<td>客户地址</td>
<td>联系方式</td>
<td>水票数量</td>
</tr>
</thead>
<tbody>
<!-- 渲染后客户列表-->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>1.7 修改主菜单
在“客户管理”菜单的超链接标签添加路径
th:href="@{/cust/listCust}"
<li>
<a th:href="@{/cust/listCust}">
<i class="zmdi zmdi-view-dashboard"></i> 客户管理
</a>
</li>1.8 运行程序
http://localhost:80811.9存在的问题
主页面
waterMainMenu.html
和客户列表页面
custList.html
存在大量重复的代码。如何解决？可以使⽤
th:fragment
属性来定义被包含的模版⽚段，以供其他模版包含。
1.修改“主页面“的侧边栏
<div id="sidebar" th:fragment="sidebar">2. 修改“主页面“的导航块
<nav class="navbar navbar-default" th:fragment="navbar">-
修改“客户管理”页面的侧边栏，去掉
div
标签里面的内容
<!--th:replace此时表示将div标签里面的内容替换为waterMainMenu页面的sidebar片段-->
<div id="sidebar" th:replace="waterMainMenu::sidebar">
</div>4.修改“客户管理“页面的导航块
<!--th:replace此时表示将nav标签里面的内容替换为waterMainMenu页面的navbar片段-->
<nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
</nav>
2 添加客户
2.1 编写CustomerService接口
在
CustomerService
接口增加
saveCustomer
方法
/**
* 添加客户信息
* @param customer 表单采集的客户信息
* @return 受影响行数，大于0添加成功，否则添加失败
*/
int saveCustomer(Customer customer);2.2 编写接口实现类
实现
CustomerService
接口的
saveCustomer
方法
/**
* 添加客户信息
* @param customer 表单采集的客户信息
* @return 受影响行数，大于0添加成功，否则添加失败
*/
@Override
public int saveCustomer(Customer customer) {
return customerMapper.insert(customer);
}2.3 编写CustomerController
当客户提交表单，将表单的客户信息持久化到数据库中，添加成功返回“用户列表”页面
/**
* 点击“添加”按钮跳转到“添加客户”页面
* @return “添加客户”页面
*/
@RequestMapping("/preSaveCust")
public String preSaveCust() {
return "custSave";
}
/**
* 添加客户信息，将表单输入的客户信息持久化到数据库中，添加成功返回客户列表页面
* @param customer
* @return
*/
@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增加一个“添加”按钮
<div class="col-md-12">
<div class="col-md-4">
<a class="btn btn-primary" th:href="@{/cust/preSaveCust}">添加客户</a>
</div>
</div>2.5 新建”添加客户”页面custSave.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> XXX送水公司后台管理系统</title>
<!--Bootstrap固定框架-->
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
<!--图标库-->
<link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
<!--核心样式-->
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="viewport">
<!-- Sidebar -->
<div id="sidebar" th:replace="waterMainMenu::sidebar">
</div>
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" method="post" th:action="@{/cust/saveCust}" >
<div class="form-group">
<label class="col-sm-2 control-label">客户名称</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="custName" placeholder="客户名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">客户地址</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="custAddress" placeholder="客户地址">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">联系方式</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="custMobile" placeholder="联系方式">
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label">水票数量</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="custTicket" placeholder="水票数量">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<input type="submit" class="btn btn-primary" name="submit" value="提交">
<input type="reset" class="btn btn-warning" name="reset" value="取消">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3 搜索客户
客户名称作为搜索条件，查询满足条件的客户信息。例如：使用模糊查询，搜索所有包含“老”的客户信息。
3.1 编写CustomerService接口
在
CustomerService
接口增加
searchCustomer
方法
/**
* 根据客户名称搜索满足条件客户信息
* @param custName 客户名称
* @return 客户列表
*/
List<Customer> searchCustomer(String custName);3.2 编写接口实现类
实现
CustomerService
接口的
searchCustomer
方法
/**
* 根据客户名称搜索满足条件客户信息
*
* @param custName 客户名称
* @return 客户列表
*/
@Override
public List<Customer> searchCustomer(String custName) {
QueryWrapper<Customer> qw = new QueryWrapper<>();
qw.like("cust_name",custName);
return customerMapper.selectList(qw);
}3.3 编写CustomerController
根据表单提供的“客户名称”，查询满足条件客户信息，最后返回客户列表页面。
/**
* 根据客户名称搜索满足条件的客户信息
* @param custName 客户名称
* @param model
* @return 客户列表页面
*/
@RequestMapping("/searchCustomer")
public String searchCustomer(String custName,Model model) {
log.info("search custName = "+custName);
List<Customer> custList = customerService.searchCustomer(custName);
// 满足条件的客户列表渲染到页面
model.addAttribute("custList",custList);
return "custList";
}3.4 编写搜索表单
<div class="col-md-8">
<form class="form-inline" th:action="@{/cust/searchCustomer}">
<input type="text" class="form-control" th:name="custName" placeholder="请输入客户名称"/>
<input type="submit" class="btn btn-primary" name="search" value="搜索"/>
</form>
</div>
4 根据ID删除客户信息
4.1编写CustomerService接口
在
CustomerService
接口增加
deleteCustomerById
方法
/**
* 根据客户ID删除对应的客户信息
* @param cid 客户ID
* @return 受影响行数，大于0删除成功，否则删除失败
*/
int deleteCustomerById(Integer cid);4.2 编写接口实现类
实现
CustomerService
接口的
deleteCustomerById
方法
/**
* 根据客户ID删除对应的客户信息
*
* @param cid 客户ID
* @return 受影响行数，大于0删除成功，否则删除失败
*/
@Override
public int deleteCustomerById(Integer cid) {
QueryWrapper<Customer> qw = new QueryWrapper<>();
qw.eq("cid",cid);
return customerMapper.delete(qw);
}4.3 编写CustomerController
根据浏览器传入的客户ID删除对应的客户信息，然后返回客户列表
/**
* 根据客户ID删除客户信息，返回客户列表页面，显示删除之后的客户列表
* @param cid 客户id
* @return 客户列表
*/
@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 客户列表页面增加删除按钮
<td>
<a class="glyphicon glyphicon-remove" th:href="@{'/cust/delCust/'+${cust.cid}}"></a>
</td>
5 修改客户
5.1数据回显
点击修改按钮，跳转到“修改客户”页面，显示要修改的客户信息。步骤如下：
1.在
CustomerService
接口新增加
getCustomerById
方法根据客户ID查询对应的客户信息。
/**
* 根据客户ID查询对应的客户信息
* @param cid 客户ID
* @return 客户信息
*/
Customer getCustomerById(Integer cid);
2.在
CustomerServiceImpl
实现类覆写接口定义的
getCustomerById
方法根据客户ID查询对应的客户信息。
/**
* 根据客户ID查询客户信息
* @param cid 客户id
* @return 客户实体
*/
@Override
public Customer getCustomerById(Integer cid) {
QueryWrapper<Customer> qw = new QueryWrapper<>();
qw.eq("cid",cid);
return customerMapper.selectOne(qw);
}
3.在
CustomerController
控制器新增
preUpateCustomer
方法完成数据的回显。调用
CustomerService
接口的
getCustomerById
方法，将客户信息渲染到页面。
/**
* 点击“修改”按钮，页面传入的客户ID查询对应的客户信息，将查询的信息渲染到“修改客户”页面
* @param cid 客户ID
* @param model
* @return “修改客户”页面
*/
@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 在客户列表页面添加“修改按钮”
<a class="glyphicon glyphicon-edit" th:href="@{'/cust/preUpdateCust/'+${cust.cid}}"></a>5.新增加“修改客户”页面。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> XXX送水公司后台管理系统</title>
<!--Bootstrap固定框架-->
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
<!--图标库-->
<link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
<!--核心样式-->
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="viewport">
<!-- Sidebar -->
<div id="sidebar" th:replace="waterMainMenu::sidebar">
</div>
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" method="post" th:action="@{/cust/updateCust}" >
<input type="hidden" th:value="${cust.cid}" name="cid"/>
<div class="form-group">
<label class="col-sm-2 control-label">客户名称</label>
<div class="col-sm-5">
<input type="text"
class="form-control"
th:value="${cust.custName}"
name="custName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">客户地址</label>
<div class="col-sm-5">
<input type="text"
class="form-control"
th:value="${cust.custAddress}"
name="custAddress">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">联系方式</label>
<div class="col-sm-5">
<input type="text"
class="form-control"
th:value="${cust.custMobile}"
name="custMobile">
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label">水票数量</label>
<div class="col-sm-5">
<input type="text"
class="form-control"
th:value="${cust.custTicket}"
name="custTicket">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<input type="submit" class="btn btn-primary" name="submit" value="提交">
<input type="reset" class="btn btn-warning" name="reset" value="取消">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>5.2 修改表单客户信息
在“修改客户”页面提交表单，将修改的数据持久化到数据库
1.在
CustomerService
接口新增加
updateCustomer
方法修改客户信息。
/**
* 修改客户信息
* @param customer 浏览器表单采集的客户信息
* @return 受影响行数，大于0修改成功，否则修改失败
*/
int updateCustomer(Customer customer);
2.在
CustomerServiceImpl
实现类覆写接口定义的
updateCustomer
方法修改客户信息。
/**
* 修改客户信息
* @param customer 浏览器表单采集的客户信息
* @return 受影响行数，大于0修改成功，否则修改失败
*/
@Override
public int updateCustomer(Customer customer) {
QueryWrapper<Customer> 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";
}
版权声明：本文为qq_35536602原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。