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

最新推荐文章于 2022-11-23 17:59:20 发布

小布呀

最新推荐文章于 2022-11-23 17:59:20 发布

阅读量378

点赞数

分类专栏： JAVA项目文章标签： spring boot bootstrap 后端

本文链接：https://blog.csdn.net/qq_35536602/article/details/120903533

版权

JAVA项目专栏收录该内容

7 篇文章 3 订阅

订阅专栏

1客户列表

点击“客户管理”，显示客户信息列表
在这里插入图片描述

1.1定义Customer实体类

package com.shouyi.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.shouyi.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.shouyi.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.shouyi.service;

import com.shouyi.entities.Customer;

import java.util.List;

/**
 * TODO: 客户管理
 * @author caojie
 * @version 1.0
 */
public interface CustomerService {

    /**
     * 返回所有客户信息
     * @return 客户列表
     */
    List<Customer> listCustomer();
}

1.4 编写Service实现类

package com.shouyi.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.shouyi.entities.Customer;
import com.shouyi.mapper.CustomerMapper;
import com.shouyi.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> 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">
        <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:8091](http://localhost:8091

1.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="提交">
                                &nbsp;&nbsp;
                                <input type="reset" class="btn btn-warning" name="reset"  value="取消">
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

3 搜索客户

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gD1whf0w-1634877399678)(客户管理.assets/1634821656003.png)]

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="提交">
                                &nbsp;&nbsp;
                                <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";
    }

。

    /**
     * 修改客户信息
     * @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";
    }

小布呀

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
集成送水管理系统项目：SpringBoot+Thymeleaf+mybatisPlus+bootstrap（六）

1客户列表点击“客户管理”，显示客户信息列表1.1定义Customer实体类package com.shouyi.entities;import com.baomidou.mybatisplus.annotation.TableName;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;/** * TODO: 客户实体类 * @author caojie * @v
复制链接

扫一扫