送水工列表
1、建立实体类Worker,通过@TableName注解关联实体类和ta_worker表(pojo)
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("tb_worker")
public class Worker {
/**
* 送水工ID
*/
private Integer wid;
/**
* 送水工名称
*/
private String workerName;
/**
* 送水工底薪
*/
private Integer workerSalary;
/**
* 送水工每桶提成
*/
private Double workerMoney;
/**
* 送水工照片,存储照片的路径,通过路径找到磁盘对应的图片
*/
private String workerImage;
}
2、建立WorkerMapper接口继承BaseMapper(子接口继承父接口就可以使用父接口的方法)(mapper)
/**
* @ClassName WorkerMapper
* @Description TODO WorkerMapper是一个映射器,它在数据库表的字段和Java实体类之间做映射
* @Author EDZ
* @Date 2022-02-12 16:28
* @Version 1.0
**/
@Repository
public interface WorkerMapper extends BaseMapper<Worker> {
}
3、建立WorkerService业务逻辑接口,定义listWorker()方法,查询所有的送水工信息(service)
/**
* @ClassName WorkerService
* @Description TODO 送水工管理的业务逻辑接口,封装了送水工管理所有的业务逻辑
* @Author EDZ
* @Date 2022-02-12 16:25
* @Version 1.0
**/
public interface WorkerService {
/**
* 获取所有的送水工信息
* @return 返回送水工列表
*/
List<Worker> listWorker();
}
4、建立WorkerServiceImpl接口实现类,实现接口的listWorker()方法
/**
* @ClassName WorkerServiceImpl
* @Description TODO 送水工管理业务逻辑接口实现类,实现了接口定义的逻辑
* @Author FJQ
* @Date 2022-02-12 16:53
* @Version 1.0
**/
@Service
public class WorkerServiceImpl implements WorkerService {
/**
* 业务逻辑层自动装配WorkerMapper映射器
*/
@Autowired
private WorkerMapper workerMapper;
/**
* 获取所有的送水工信息
*
* @return 返回送水工列表
*/
@Override
public List<Worker> listWorker() {
return workerMapper.selectList(null);
}
}
5、建立WorkerController控制器,当用户点击“送水工管理”处理用户点击的请求,调用WorkerService对象的listWorker()方法将数据查询出来,并渲染到前端(送水工列表)页面(controller)
@Controller
@RequestMapping("/worker")
@Slf4j
public class WorkerController {
@Autowired
private WorkerService workerService;
/**
* 用户点击侧边栏的“客户管理”,处理该请求,将所有的客户信息渲染到“客户列表”页面,最后返回“客户列表”页面
* @param model
* @return 返回“客户列表”页面
*/
@RequestMapping("/workerList")
public String listWorker(Model model) {
List<Worker> workerList = workerService.listWorker();
model.addAttribute("workerList",workerList);
return "workerList";
}
}
6、建立“送水工列表”页面,显示送水工列表的数据(workerList.html)
<!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}">
<script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<style>
.myWorkerImage{
width:60px;
height:60px;
border:1px solid red;
}
#add,#sub{
font-size:20px;
color:red;
font-weight: bold;
}
</style>
<script>
// $() 是一个jQuery对象,所有的jQuery代码都写在小括号里面
$(function(){
// 加工资
// $("span[id=add]") 使用“元素属性”选择器,选择所有id=add的span元素,为其绑定事件
$("span[id=add]").click(function(){
// 获取送水工的工资,然后+100,将调整后的工资重新设置到table表格中
let workerId = $(this).attr("class");
// $(this).next() 获取+后面的一个元素
// $(this).next().text()获取+后面一个元素的文本(送水工工资)
let workerSalary = $(this).next().text();
// 调整工资(+100)
workerSalary = parseInt(workerSalary);
workerSalary += 100;
// 把调整之后的工资重新设置到表格的span标签中
$(this).next().text(workerSalary);
// 前端jQuery框架使用异步ajax技术向后端发起请求,将调整之后的工资更新到后端
$.ajax({
// 前端发起的请求路径
url:'/worker/adjustSalary',
// 前端封装的参数
data:{
wid: workerId,
workerSalary: workerSalary
},
// 请求方式
method:'POST',
// 请求成功的回调函数
success:function(data,status){
if(data == "OK") {
alert("调整工资成功");
} else {
alert("调整工资失败");
}
}
})
})
})
</script>
</head>
<body>
<div id="viewport">
<!-- Sidebar
客户列表页面使用th:replace属性替换成主菜单的侧边栏,让代码能够复用
th:replace="waterMainMenu::sidebar"
waterMainMenu表示主菜单页面的文件名称
sidebar表示主菜单页面的片段名称
-->
<div id="sidebar" th:replace="waterMainMenu::sidebar">
</div>
<!-- Content -->
<div id="content">
<!--
th:replace="waterMainMenu::navbar"表示将nav标签里面所有的内容替换为主页面的navbar片段
-->
<nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<!--添加按钮-->
<a class="btn btn-primary"
th:href="@{/worker/preSaveWorker}">添加</a>
</div>
</div>
<div class="col-md-12">
<table class="table table-hover table-striped">
<thead>
<tr>
<td>送水工编号</td>
<td>送水工名称</td>
<td>送水工底薪</td>
<td>送水工提成</td>
<td>送水工照片</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr th:each="worker : ${workerList}">
<td th:text="${worker.wid}"></td>
<td th:text="${worker.workerName}"></td>
<!-- <td th:text="${worker.workerSalary}"></td>-->
<td>
<span id="add" th:class="${worker.wid}">+</span>
<span id="salary" th:text="${worker.workerSalary}"></span>
<span id="sub" th:class="${worker.wid}">-</span>
</td>
<td th:text="${worker.workerMoney}"></td>
<td>
<!--没有上传图像显示系统默认的图像
th:if="${#strings.isEmpty(worker.workerImage)}"
条件成立:表示没有上传图像,显示默认的图像
-->
<img class="myWorkerImage"
th:if="${#strings.isEmpty(worker.workerImage)}"
src="../../images/user.png" />
<!--条件成立:表示用户上传了图片,显示在服务器上显示上传图片-->
<img class="myWorkerImage"
th:if="${not #strings.isEmpty(worker.workerImage)}"
th:src="'http://localhost:8091/'+${worker.workerImage}"/>
</td>
<td>
<a class="glyphicon glyphicon-edit"
th:href="@{'/worker/preUpdat