@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("tb_worker")
public class Worker {
private Integer wid;
private String workerName;
private Integer workerSalary;
private Double workerMoney;
private String workerImage;
}
2、建立WorkerMapper接口继承BaseMapper（子接口继承父接口就可以使用父接口的方法）（mapper）
@Repository public interface WorkerMapper extends BaseMapper3、建立WorkerService业务逻辑接口，定义listWorker()方法，查询所有的送水工信息（service）{ }
public interface WorkerService {
List listWorker();
}
4、建立WorkerServiceImpl接口实现类，实现接口的listWorker()方法
@Service
public class WorkerServiceImpl implements WorkerService {
@Autowired
private WorkerMapper workerMapper;
@Override
public List listWorker() {
return workerMapper.selectList(null);
}
}
5、建立WorkerController控制器，当用户点击“送水工管理”处理用户点击的请求，调用WorkerService对象的listWorker()方法将数据查询出来，并渲染到前端（送水工列表）页面（controller）
@Controller
@RequestMapping("/worker")
@Slf4j
public class WorkerController {
@Autowired
private WorkerService workerService;
@RequestMapping("/workerList")
public String listWorker(Model model) {
List workerList = workerService.listWorker();
model.addAttribute("workerList",workerList);
return "workerList";
}
}
6、建立“送水工列表”页面，显示送水工列表的数据（workerList.html）
冯宝宝送水后台管理系统
添加
| 送水工编号 | 送水工名称 | 送水工底薪 | 送水工提成 | 送水工照片 | 操作 |
| + - |
然后根据自己的需求修改页面（如下）
冯宝宝送水后台管理系统
| 送水工编号 | 送水工名称 | 送水工底薪 | 送水工提成 | 送水工照片 | 操作 |
注意：根据要求，需要点击哪个页面就显示哪个页面的内容，所以我们要在主页面（也就是登陆后跳转的页面waterMainMenu.html）中加入可以跳转的超链接＜ａ＞标签
效果图
注意：这个模块涉及到换照片（换头像），在真实的项目中关于图片上传，一般都会有一个图片服务器（上传到数据库，存在图片服务器中）
目前先存着本地中
2 添加送水工在浏览器采集送水工信息(名称、底薪、提成、照片)，然后将送水工信息持久化(插入)到对应的表中。添加送水工的核心步骤是将浏览器选择的照片上传到服务器。
2.1 编写yml配置上传文件的配置信息
# 配置浏览器上传图像到服务器的路径
location: D:/upLoad/picture/
# 配置静态资源路径
# Springboot有四个地方可以放静态资源
# classpath:/static/
# classpath:/public/
# classpath:/resources/
# classpath:/META-INF/resource/
resources:
static-locations: classpath:/static/,classpath:/public/,classpath:/resources/,classpath:/META-INF/resource/,file:${location}
# 配置上传文件大小限制
servlet:
multipart:
max-request-size: 100MB
max-file-size: 100MB
file:${location}的意思：location: D:/upLoad/picture/，就是图片存放的地点
如图：
# 配置服务器端口号
server:
port: 8080
# 配置浏览器上传图像到服务器的路径
location: D:/upLoad/picture/
spring:
application:
name: springboot-fbb
# 数据库连接和Druid连接池配置
datasource:
driver-class-name: com.mysql.jdbc.Driver
name: defaultDataSource
password: root
url: jdbc:mysql://localhost:3306/minzu?useUnicode=true&characterEncoding=UTF8&useSSL=false
username: root
type: com.alibaba.druid.pool.DruidDataSource
druid:
min-idle: 5
max-active: 10
max-wait: 3000
# 配置Thymeleaf模板，该模板的后缀为.html,后缀为Classpath下面的/templates/water/
thymeleaf:
# 禁用Thymeleaf缓存
cache: true
check-template: true
check-template-location: true
content-type: text/html
enabled: true
encoding: UTF-8
excluded-view-names: ''
mode: HTML5
prefix: classpath:/templates/water/
suffix: .html
# 配置静态资源路径
# Springboot有四个地方可以放静态资源
# classpath:/static/
# classpath:/public/
# classpath:/resources/
# classpath:/META-INF/resource/
resources:
static-locations: classpath:/static/,classpath:/public/,classpath:/resources/,classpath:/META-INF/resource/,file:${location}
# 配置上传文件大小限制
servlet:
multipart:
max-request-size: 100MB
max-file-size: 100MB
# MyBatis-Plus配置
mybatis-plus:
configuration:
# 实体类属性支持驼峰映射
map-underscore-to-camel-case: true
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 主键自动增长
global-config:
db-config:
因为我们把本地当作图片服务器
2.2 编写WorkerService接口定义添加送水工对应的方法saveWorker
int saveWorker(Worker worker);
2.3 编写接口实现类
在接口实现类WorkerServiceImpl中实现接口的方法
@Override
public int saveWorker(Worker worker) {
return workerMapper.insert(worker);
}
2.4 编写控制器
从yml配置文件中读取服务器存放上传图像的路径
注意：这个添加和普通的添加是不一样的，他需要带上 图片的路径，让它可以选择，我们目前只是在yml文件里写了location，那要怎么获取它呢？从yml文件获取信息，要用注解：
@Value("${location}")
private String location; //然后给它定义一个类型
# 配置浏览器上传图像到服务器的路径 location: D:/upLoad/picture/
这个在spring课中讲过
在WorkerController控制器中定义preSaveWorker方法，当用户点击“添加”按钮跳转到添加页面
@RequestMapping("/preSaveWorker")
public String preSaveWorker() {
return "workerSave";
}
2.5 编写workerSave.html页面
冯宝宝送水后台管理系统
2.6 修改workerList.html页面
在workerList.html页面增加添加按钮
添加
然后在WorkerController控制器中定义saveWorker方法。当用户提交表单将浏览器选择的文件上传到服务器中，并且将送水工信息持久化到数据库中，最后返回“送水工”列表页面，能够查看添加之后的送水工信息
@RequestMapping(value="/saveWorker",method = RequestMethod.POST)
public String saveWorker(Worker worker, MultipartFile file){ //一般做图片上传，我们必须要用MultipartFile
//调用图片上传的方法
uploadfile(worker,file); //自己创建的方法
//将数据持久化到数据库
workerService.saveWorker(worker); //uploadfile方法已经把要上传的文件发送到worker里了
return "redirect:/worker/workerList";
}
private void uploadfile(Worker worker, MultipartFile file) {
// 条件成立：表示客户上传了文件
if (file != null) {
// 获取上传文件名称。例如：WeChart.png
String filename = file.getOriginalFilename(); //获取原始文件名
// 获取上传文件的后缀索引号
int suffixIndex = filename.lastIndexOf("."); //最后的索引
// 根据索引获取后缀。例如：.png
String suffix = StringUtils.substring(filename, suffixIndex); //StringUtils:String自身的一个工具类,StringUtils的包要导org.thymeleaf.util.StringUtils;
// 获取文件前缀（使用当前系统时间的纳秒）
long prefix = System.nanoTime();
// 创建服务器上传路径的File对象
File serverPath = new File(location);
// 条件成立：表示服务器存储上传文件的路径不存在，需要创建
if (!serverPath.exists()) {
serverPath.mkdirs();
}
// 拼接上传的文件。前缀(15456435635)+后缀(.png) 15456435635.png
String uploadFile = prefix + suffix;
// 创建上传的文件在服务器磁盘的真实路径
// 参数1：父路径。例如：D:/upLoad/picture/
// 参数2：上传的文件名。例如： 15456435635.png
File uploadFilePath = new File(serverPath, uploadFile);
// 上传文件
try {
file.transferTo(uploadFilePath);
} catch (IOException e) {
e.printStackTrace();
}
// 将拼接上传的文件设置到Worker对象中
worker.setWorkerImage(uploadFile);
}
}
}
然后修改我们的workerList.html页面，因为之前是把上传图片的位置写死的，要加上一个判断，来确认上传图片以后的功能
添加
然后去添加送水工的页面workerSave.html在form表单中，去添加
th:action="@{/worker/saveWorker}"
因为要点击事件后上传，所以要连接上传的方法
注意：修改页面和添加页面极为相似，但要修改回显信息方法，把
改成
还有要注意，回显图片
3.2 提交表单修改送水工信息
3.2.1 编写WorkerService接口
定义updateWorker方法修改送水工信息
int updateWorker(Worker worker);
3.2.2 编写接口实现类
接口实现类WorkerServiceImpl实现updateWorker方法
@Override
public int updateWorker(Worker worker) {
QueryWrapper qw = new QueryWrapper<>();
qw.eq("wid",worker.getWid());
return workerMapper.update(worker,qw);
}
3.2.3 编写WorkerController控制器
@RequestMapping(value="/updateWorker",method = RequestMethod.POST)
public String updateWorker(Worker worker, MultipartFile file) {
// 条件成立：表示用户在浏览器上传了图像
if(null != file) {
// 获取上传文件的名称
String fileName = file.getOriginalFilename();
// 获取上传文件后缀的索引
int index = fileName.lastIndexOf(".");
// 获取上传文件的后缀，例如：.png
String suffix = fileName.substring(index);
// 返回1970-01-01距离现在的纳秒数作为上传文件的前缀
// 例如： 1565634653563456
long prefix = System.nanoTime();
// 拼接上传文件的前缀和后缀，例如：1565634653563456.png
String uploadFileName = prefix + suffix;
// 创建服务器存放浏览器上传文件的File对象
File uploadFile = new File(location);
// 条件成立：表示路径不存在，在服务器磁盘上创建改路径
if(!uploadFile.exists()) {
uploadFile.mkdirs();
}
// 创建上传文件的File对象
// 参数1：上传文件的路径，参数2：上传文件的名称
File path = new File(uploadFile,uploadFileName);
try {
file.transferTo(path);
} catch (IOException e) {
log.error("上传失败",e);
e.printStackTrace();
}
worker.setWorkerImage(uploadFileName);
}
int rows = workerService.updateWorker(worker);
log.info("worker update rows = "+rows);
return "redirect:/worker/workerList";
}
4 文件上传重构
什么是软件重构？重新组织代码结构，让你的程序更加整洁、高效的运行
为什么需要重构？添加送水工和修改送水工“上传文件”功能有大量重复的代码
@RequestMapping("/preSaveWorker")
public String preSaveWorker(){
return "workerSave";
}
@RequestMapping(value="/saveWorker",method = RequestMethod.POST)
public String saveWorker(Worker worker, MultipartFile file) {
transferFile(worker, file);
int rows = workerService.saveWorker(worker);
log.info("worker save rows = "+rows);
return "redirect:/worker/workerList";
}
private void transferFile(Worker worker, MultipartFile file) {
// 条件成立：表示用户在浏览器上传了图像
if (null != file) {
// 获取上传文件的名称
String fileName = file.getOriginalFilename();
// 获取上传文件后缀的索引
int index = fileName.lastIndexOf(".");
// 获取上传文件的后缀，例如：.png
String suffix = fileName.substring(index);
// 返回1970-01-01距离现在的纳秒数作为上传文件的前缀
// 例如： 1565634653563456
long prefix = System.nanoTime();
// 拼接上传文件的前缀和后缀，例如：1565634653563456.png
String uploadFileName = prefix + suffix;
// 创建服务器存放浏览器上传文件的File对象
File uploadFile = new File(location);
// 条件成立：表示路径不存在，在服务器磁盘上创建改路径
if (!uploadFile.exists()) {
uploadFile.mkdirs();
}
// 创建上传文件的File对象
// 参数1：上传文件的路径，参数2：上传文件的名称
File path = new File(uploadFile, uploadFileName);
try {
file.transferTo(path);
} catch (IOException e) {
log.error("上传失败", e);
e.printStackTrace();
}
worker.setWorkerImage(uploadFileName);
}
}
@RequestMapping("/preUpdateWorker/{wid}")
public String preUpdateWorker(@PathVariable("wid") Integer wid,Model model) {
log.info("pre update worker wid = "+wid);
Worker worker = workerService.getWorkerById(wid);
model.addAttribute("worker",worker);
return "workerUpdate";
}
@RequestMapping(value="/updateWorker",method = RequestMethod.POST)
public String updateWorker(Worker worker, MultipartFile file) {
//表示如果有图片文件就上传，没有就跳过
if(!file.getOriginalFilename().equals("")){
// 条件成立：表示用户在浏览器上传了图像
transferFile(worker, file);
}
int rows = workerService.updateWorker(worker);
log.info("worker update rows = "+rows);
return "redirect:/worker/workerList";
}
在修改方法中最好加一个 if 判断，不然在修改上传时没有图片（头像）会上传失败
//表示如果有图片文件就上传，没有就跳过
if(!file.getOriginalFilename().equals("")){
// 条件成立：表示用户在浏览器上传了图像
transferFile(worker, file);
}
