java+ElementUI前后端分离旅游项目第三天 预约管理
生活随笔
收集整理的這篇文章主要介紹了
java+ElementUI前后端分离旅游项目第三天 预约管理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
預約管理-套餐管理
學習目標：
1：了解常見的圖片存儲方案
2：掌握新增套餐實現過程
3：掌握套餐分頁查詢實現過程
4：掌握Quartz使用方式
1. 第一章. 圖片存儲方案
【目標】
美年旅游項目，圖片存儲方案
【路徑】
1：介紹
（1）文件上傳功能介紹
2：七牛云存儲
（1）注冊
（2）新建存儲空間
（3）查看存儲空間信息
（4）開發者中心
- 文件上傳
- 文件刪除
（5）鑒權
（6）Java SDK操作七牛云
（7）封裝工具類
【講解】
1.1. 介紹
在實際開發中，我們會有很多處理不同功能的服務器。例如：
應用服務器：負責部署我們的應用
數據庫服務器：運行我們的數據庫
文件服務器：負責存儲用戶上傳文件的服務器
分服務器處理的目的是讓服務器各司其職，從而提高我們項目的運行效率。
常見的圖片存儲方案：
方案一：使用nginx搭建圖片服務器
方案二：使用開源的分布式文件存儲系統，例如Fastdfs、HDFS等
方案三：使用云存儲，例如阿里云、七牛云等
1.2. 七牛云存儲
七牛云（隸屬于上海七牛信息技術有限公司）是國內領先的以視覺智能和數據智能為核心的企業級云計算服務商，同時也是國內知名智能視頻云服務商，累計為 70 多萬家企業提供服務，覆蓋了國內80%網民。圍繞富媒體場景推出了對象存儲、融合 CDN 加速、容器云、大數據平臺、深度學習平臺等產品、并提供一站式智能視頻云解決方案。為各行業及應用提供可持續發展的智能視頻云生態，幫助企業快速上云，創造更廣闊的商業價值。
官網：https://www.qiniu.com/
通過七牛云官網介紹我們可以知道其提供了多種服務，我們主要使用的是七牛云提供的對象存儲服務來存儲圖片。
1.2.1. 注冊、登錄
要使用七牛云的服務，首先需要注冊成為會員。地址：https://portal.qiniu.com/signup
注冊完成后就可以使用剛剛注冊的郵箱和密碼登錄到七牛云：
登錄成功后點擊頁面右上角管理控制臺：
注意：登錄成功后還需要進行實名認證才能進行相關操作。
1.2.2. 新建存儲空間
要進行圖片存儲，我們需要在七牛云管理控制臺新建存儲空間。點擊管理控制臺首頁對象存儲下的立即添加按鈕，頁面跳轉到新建存儲空間頁面：
可以創建多個存儲空間，各個存儲空間是相互獨立的。
1.2.3. 查看存儲空間信息
存儲空間創建后，會在左側的存儲空間列表菜單中展示創建的存儲空間名稱，點擊存儲空間名稱可以查看當前存儲空間的相關信息
課程中重點關注【內容管理】中的信息。
1.2.4. 開發者中心
可以通過七牛云提供的開發者中心學習如何操作七牛云服務，地址：https://developer.qiniu.com/
點擊對象存儲，跳轉到對象存儲開發頁面，地址：https://developer.qiniu.com/kodo
操作步驟：
第一步：導入jar包：
第二步：鑒權
點擊“管理控制臺”，點擊右上圖標
可根據文檔中提供的上傳文件和刪除文件進行測試：
在 meinian_common 中測試
1.2.4.1.文件上傳
package com.atguigu;import com.google.gson.Gson; import com.qiniu.common.Zone; import com.qiniu.http.Response; import com.qiniu.storage.Configuration; import com.qiniu.storage.UploadManager; import com.qiniu.storage.model.DefaultPutRet; import com.qiniu.util.Auth; import org.junit.Test;public class TestQiniu {// 上傳本地文件@Testpublic void uploadFile(){//構造一個帶指定Zone對象的配置類Configuration cfg = new Configuration(Zone.zone2());//...其他參數參考類注釋UploadManager uploadManager = new UploadManager(cfg);//...生成上傳憑證，然后準備上傳String accessKey = "dzpXBDSa3musX6U7Nq8v0fzv921stt-NnRLGhACK";String secretKey = "AB90WSgUo32gY87jOyOW2zVH97fz9wT9JWCpKEm-";String bucket = "maweiqi";//如果是Windows情況下，格式是 D:\\qiniu\\test.png，可支持中文String localFilePath = "D:/2.jpg";//默認不指定key的情況下，以文件內容的hash值作為文件名String key = null;Auth auth = Auth.create(accessKey, secretKey);String upToken = auth.uploadToken(bucket);try {Response response = uploadManager.put(localFilePath, key, upToken);//解析上傳成功的結果DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);System.out.println(putRet.key);System.out.println(putRet.hash);} catch (QiniuException ex) {Response r = ex.response;System.err.println(r.toString());try {System.err.println(r.bodyString());} catch (QiniuException ex2) {//ignore}}} }1.2.4.2.文件刪除
// 刪除空間中的文件@Testpublic void deleteFile(){//構造一個帶指定Zone對象的配置類Configuration cfg = new Configuration(Zone.zone0());//...其他參數參考類注釋String accessKey = "dzpXBDSa3musX6U7Nq8v0fzv921stt-NnRLGhACK";String secretKey = "AB90WSgUo32gY87jOyOW2zVH97fz9wT9JWCpKEm-";String bucket = "maweiqi";String key = "Fu3Ic6TV6wIbJt793yaGeBmCkzTX";Auth auth = Auth.create(accessKey, secretKey);BucketManager bucketManager = new BucketManager(auth, cfg);try {bucketManager.delete(bucket, key);} catch (QiniuException ex) {//如果遇到異常，說明刪除失敗System.err.println(ex.code());System.err.println(ex.response.toString());}}七牛云提供了多種方式操作對象存儲服務，本項目采用Java SDK方式，地址：https://developer.qiniu.com/kodo/sdk/1239/java
使用Java SDK操作七牛云需要導入如下maven坐標：（項目已經引入）
<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.0</version> </dependency>1.2.5. 鑒權
Java SDK的所有的功能，都需要合法的授權。授權憑證的簽算需要七牛賬號下的一對有效的Access Key和Secret Key，這對密鑰可以在七牛云管理控制臺的個人中心（https://portal.qiniu.com/user/key）獲得，如下圖：
1.2.6. Java SDK操作七牛云
本章節我們就需要使用七牛云提供的Java SDK完成圖片上傳和刪除，我們可以參考官方提供的例子。
上傳文件：
//構造一個帶指定Zone對象的配置類，zone0表示華東地區（默認） Configuration cfg = new Configuration(Zone.zone0()); //...其他參數參考類注釋UploadManager uploadManager = new UploadManager(cfg); //...生成上傳憑證，然后準備上傳 String accessKey = "your access key"; String secretKey = "your secret key"; String bucket = "your bucket name";//默認不指定key的情況下，以文件內容的hash值作為文件名 String key = null;try {byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");ByteArrayInputStream byteInputStream=new ByteArrayInputStream(uploadBytes);Auth auth = Auth.create(accessKey, secretKey);String upToken = auth.uploadToken(bucket);try {Response response = uploadManager.put(byteInputStream,key,upToken,null, null);//解析上傳成功的結果DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);System.out.println(putRet.key);System.out.println(putRet.hash);} catch (QiniuException ex) {Response r = ex.response;System.err.println(r.toString());try {System.err.println(r.bodyString());} catch (QiniuException ex2) {//ignore}} } catch (UnsupportedEncodingException ex) {//ignore }刪除文件：
//構造一個帶指定Zone對象的配置類，zone0表示華東地區（默認） Configuration cfg = new Configuration(Zone.zone0()); //...其他參數參考類注釋String accessKey = "your access key"; String secretKey = "your secret key";String bucket = "your bucket name"; String key = "your file key";Auth auth = Auth.create(accessKey, secretKey); BucketManager bucketManager = new BucketManager(auth, cfg); try {bucketManager.delete(bucket, key); } catch (QiniuException ex) {//如果遇到異常，說明刪除失敗System.err.println(ex.code());System.err.println(ex.response.toString()); }1.2.7. 封裝工具類
為了方便操作七牛云存儲服務，我們可以將官方提供的案例簡單改造成一個工具類，在我們的項目中直接使用此工具類來操作就可以：
package com.atguigu.utils;import com.google.gson.Gson; import com.qiniu.common.QiniuException; import com.qiniu.common.Zone; import com.qiniu.http.Response; import com.qiniu.storage.BucketManager; import com.qiniu.storage.Configuration; import com.qiniu.storage.UploadManager; import com.qiniu.storage.model.DefaultPutRet; import com.qiniu.util.Auth; import java.io.File; import java.io.FileInputStream; import java.io.InputStream;/*** 七牛云工具類*/ public class QiniuUtils {public static String accessKey = "dzpXBDSa3musX6U7Nq8v0fzv921stt-NnRLGhACK";public static String secretKey = "AB90WSgUo32gY87jOyOW2zVH97fz9wT9JWCpKEm-";public static String bucket = "maweiqi";public static void upload2Qiniu(String filePath,String fileName){//構造一個帶指定Zone對象的配置類Configuration cfg = new Configuration(Zone.zone2());UploadManager uploadManager = new UploadManager(cfg);Auth auth = Auth.create(accessKey, secretKey);String upToken = auth.uploadToken(bucket);try {Response response = uploadManager.put(filePath, fileName, upToken);//解析上傳成功的結果DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);} catch (QiniuException ex) {Response r = ex.response;try {System.err.println(r.bodyString());} catch (QiniuException ex2) {//ignore}}}//上傳文件public static void upload2Qiniu(byte[] bytes, String fileName){//構造一個帶指定Zone對象的配置類Configuration cfg = new Configuration(Zone.zone2());//...其他參數參考類注釋UploadManager uploadManager = new UploadManager(cfg);//默認不指定key的情況下，以文件內容的hash值作為文件名String key = fileName;Auth auth = Auth.create(accessKey, secretKey);String upToken = auth.uploadToken(bucket);try {Response response = uploadManager.put(bytes, key, upToken);//解析上傳成功的結果DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);System.out.println(putRet.key);System.out.println(putRet.hash);} catch (QiniuException ex) {Response r = ex.response;System.err.println(r.toString());try {System.err.println(r.bodyString());} catch (QiniuException ex2) {//ignore}}}//刪除文件public static void deleteFileFromQiniu(String fileName){//構造一個帶指定Zone對象的配置類Configuration cfg = new Configuration(Zone.zone2());String key = fileName;Auth auth = Auth.create(accessKey, secretKey);BucketManager bucketManager = new BucketManager(auth, cfg);try {bucketManager.delete(bucket, key);} catch (QiniuException ex) {//如果遇到異常，說明刪除失敗System.err.println(ex.code());System.err.println(ex.response.toString());}} }將此工具類放在 meinian_common 工程中，后續會使用到。
【小結】
1：介紹
（1）文件上傳功能介紹
2：七牛云存儲
（1）注冊
（2）新建存儲空間
（3）查看存儲空間信息
（4）開發者中心
（5）鑒權
（6）Java SDK操作七牛云
（7）封裝工具類
2. 第二章. 新增套餐
【目標】
新增套餐
【路徑】
1：需求分析
2：前臺代碼
（1）彈出新增窗口
（2）動態展示跟團游列表
（3）圖片上傳并預覽
- 使用七牛云存儲圖片
（4）提交請求
- 使用數據庫存儲圖片名稱
- 使用springmvc的文件上傳技術
3：后臺代碼
業務：
- 新增套餐
（1）SetmealController.java（Controller）
（2）SetmealService.java（服務接口）
（3）SetmealServiceImpl.java（服務實現類）
（4）SetmealDao.java（Dao接口）
（5）SetmealDao.xml（Mapper映射文件）
4：完善文件上傳，Redis存儲圖片名稱（一會說）
【接口文檔】
請求方式 get請求
請求地址
/travelgroup/findAll.do返回方result子成員：
| tableData | object | 是 | 表單數據 |
tableData子成員如下：
創建表
DROP TABLE IF EXISTS `t_setmeal`; CREATE TABLE `t_setmeal` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(1000) DEFAULT NULL,`code` varchar(8) DEFAULT NULL,`helpCode` varchar(16) DEFAULT NULL,`sex` char(1) DEFAULT NULL,`age` varchar(32) DEFAULT NULL,`price` float DEFAULT NULL,`remark` varchar(3000) DEFAULT NULL,`attention` varchar(128) DEFAULT NULL,`img` varchar(128) DEFAULT NULL,PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;DROP TABLE IF EXISTS `t_setmeal_travelgroup`; CREATE TABLE `t_setmeal_travelgroup` (`setmeal_id` int(11) NOT NULL DEFAULT '0',`travelgroup_id` int(11) NOT NULL DEFAULT '0',PRIMARY KEY (`setmeal_id`,`travelgroup_id`),KEY `travelgroup_key` (`travelgroup_id`),CONSTRAINT `travelgroup_key` FOREIGN KEY (`travelgroup_id`) REFERENCES `t_travelgroup` (`id`),CONSTRAINT `setmeal_key` FOREIGN KEY (`setmeal_id`) REFERENCES `t_setmeal` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;【講解】
2.1. 需求分析
套餐其實就是跟團游的集合，例如有一個套餐為“北京深圳雙飛套餐”，這個套餐可以包括多個跟團游。
所以在添加套餐時需要選擇這個套餐包括的跟團游。
套餐對應的實體類為Setmeal，
public class Setmeal implements Serializable {private Integer id;private String name;private String code;private String helpCode;private String sex;//套餐適用性別：0不限 1男 2女private String age;//套餐適用年齡private Float price;//套餐價格private String remark;private String attention;private String img;//套餐對應圖片存儲路徑（用于存放七牛云上的圖片名稱）private List<TravelGroup> travelGroups;//體檢套餐對應的跟團游，多對多關系 }其中img字段表示套餐對應圖片存儲路徑（用于存放七牛云上的圖片名稱）
對應的數據表為 t_setmeal。套餐和跟團游為多對多關系，所以需要中間表 t_setmeal_travelgroup 進行關聯。
t_setmeal 表
t_setmeal_travelgroup 表
2.2. 前臺代碼
套餐管理頁面對應的是 setmeal.html 頁面，根據產品設計的原型已經完成了頁面基本結構的編寫，現在需要完善頁面動態效果。
2.2.1. 彈出新增窗口
頁面中已經提供了新增窗口，只是出于隱藏狀態。只需要將控制展示狀態的屬性 dialogFormVisible 改為true接口顯示出新增窗口。點擊新建按鈕時綁定的方法為 handleCreate ，所以在 handleCreate 方法中修改dialogFormVisible 屬性的值為true即可。同時為了增加用戶體驗度，需要每次點擊新建按鈕時清空表單輸入項。
由于新增套餐時還需要選擇此套餐包含的跟團游，所以新增套餐窗口分為兩部分信息：基本信息和跟團游信息，如下圖：
（1）：新建按鈕綁定單擊事件，對應的處理函數為handleCreate
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>（2）：handleCreate()方法：
// 重置表單 resetForm() {// 清空套餐基本信息this.formData = {};// 選項卡設置成第一個this.activeName='first';// 重置跟團游的復選框this.travelgroupIds = [];// 重置上傳的圖片路徑this.imageUrl = null; }, // 彈出添加窗口 handleCreate() {this.dialogFormVisible = true;this.resetForm(); },2.2.2. 動態展示跟團游列表
現在雖然已經完成了新增窗口的彈出，但是在跟團游信息標簽頁中需要動態展示所有的跟團游信息列表數據，并且可以進行勾選。具體操作步驟如下：
（1）定義模型數據
1 2 tableData:[],//添加表單窗口中跟團游列表數據 travelgroupIds:[],//添加表單窗口中跟團游復選框對應id（2）動態展示跟團游列表數據，數據來源于上面定義的tableData模型數據
<el-tab-pane label="跟團游信息" name="second"> <div class="checkScrol"><table class="datatable"><thead><tr><th>選擇</th><th>項目編碼</th><th>項目名稱</th><th>項目說明</th></tr></thead><tbody><!--循環遍歷tableData--><tr v-for="c in tableData"><td><!--復選框綁定travelgroupIds，存放到值是id--><input :id="c.id" v-model="travelgroupIds" type="checkbox" :value="c.id"></td><td><label :for="c.id">{{c.code}}</label></td><td><label :for="c.id">{{c.name}}</label></td><td><label :for="c.id">{{c.remark}}</label></td></tr></tbody></table> </div> </el-tab-pane>其中：v-model=“travelgroupIds”，用于回顯復選框。
（3）完善 handleCreate 方法，發送ajax請求查詢所有跟團游數據并將結果賦值給tableData模型數據用于頁面表格展示
// 彈出添加窗口 handleCreate() {this.dialogFormVisible = true;this.resetForm();axios.get("/travelgroup/findAll.do").then((res)=> {if(res.data.flag){this.tableData = res.data.data;}else{this.$message.error(res.data.message);}}); },（4）分別在 TravelGroupController 、TravelGroupService 、TravelGroupServiceImpl 、TravelGroupDao 、TravelGroupDao.xml 中擴展方法查詢所有跟團游數據
1：TravelGroupController：
package com.atguigu.controller;import com.alibaba.dubbo.config.annotation.Reference; import com.atguigu.constant.MessageConstant; import com.atguigu.entity.PageResult; import com.atguigu.entity.QueryPageBean; import com.atguigu.entity.Result; import com.atguigu.pojo.TravelGroup; import com.atguigu.pojo.TravelItem; import com.atguigu.service.TravelGroupService; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import java.util.List;/*** TravelGroupController** @Author: 馬偉奇* @Description:*/ @RequestMapping("/travelgroup") @RestController public class TravelGroupController {@Referenceprivate TravelGroupService travelGroupService;//查詢所有@RequestMapping("/findAll")public Result findAll(){// 查詢所有的跟團游List<TravelGroup> travelGroupList = travelGroupService.findAll();if(travelGroupList != null && travelGroupList.size() > 0){Result result = new Result(true, MessageConstant.QUERY_SETMEAL_SUCCESS,travelGroupList);return result;}return new Result(false,MessageConstant.QUERY_SETMEAL_FAIL);}2：TravelGroupService：
package com.atguigu.service;import com.atguigu.entity.PageResult; import com.atguigu.pojo.TravelGroup; import com.atguigu.pojo.TravelItem;import java.util.List;/*** TravelGroupService** @Author: 馬偉奇* @Description:*/ public interface TravelGroupService {List<TravelGroup> findAll();3：TravelGroupServiceImpl：
package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service; import com.atguigu.dao.TravelGroupDao; import com.atguigu.entity.PageResult; import com.atguigu.pojo.TravelGroup; import com.atguigu.pojo.TravelItem; import com.atguigu.service.TravelGroupService; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional;import java.util.HashMap; import java.util.List; import java.util.Map;/*** TravelGroupServiceImpl** @Author: 馬偉奇* @Description:*/ @Service(interfaceClass = TravelGroupService.class) @Transactional public class TravelGroupServiceImpl implements TravelGroupService {@Autowiredprivate TravelGroupDao travelGroupDao;@Overridepublic List<TravelGroup> findAll() {return travelGroupDao.findAll();}4：TravelGroupDao：
package com.atguigu.dao;import com.atguigu.pojo.TravelGroup; import com.atguigu.pojo.TravelItem; import com.github.pagehelper.Page;import java.util.List; import java.util.Map;/*** TravelGroupDao** @Author: 馬偉奇* @Description:*/ public interface TravelGroupDao {List<TravelGroup> findAll();5：TravelGroupDao.xml：
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.atguigu.dao.TravelGroupDao"><select id="findAll" resultType="travelGroup">select * from t_travelgroup</select> </mapper>運行程序 http://localhost:82/pages/main.html
2.2.3. 圖片上傳并預覽
此處使用的是ElementUI提供的上傳組件el-upload，提供了多種不同的上傳效果，上傳成功后可以進行預覽。
實現步驟：
（1）定義模型數據，用于后面上傳文件的圖片預覽：
imageUrl:null,//模型數據，用于上傳圖片完成后圖片預覽（2）定義上傳組件：
<!--el-upload：上傳組件action：上傳的提交地址（七牛云服務器）auto-upload：選中文件后是否自動上傳name：上傳文件的名稱，服務端可以根據名稱獲得上傳的文件對象show-file-list：是否顯示已上傳文件列表on-success：文件上傳成功時的鉤子before-upload：上傳文件之前的鉤子 --> <el-uploadclass="avatar-uploader"action="/setmeal/upload.do":auto-upload="autoUpload"name="imgFile":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><!--用于上傳圖片預覽--><img v-if="imageUrl" :src="imageUrl" class="avatar"><!--用于展示上傳圖標--><i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>（3）定義對應的鉤子函數：
// 注意axios執行url的時候，響應是通過resposne.data實現 // 注意elementUI執行url的時候，響應是通過resposne實現 //文件上傳成功后的鉤子，response為服務端返回的值，file為當前上傳的文件封裝成的js對象 handleAvatarSuccess(response, file) {// 對imageUrl賦值，將圖片顯示到文件上傳的框中，進行瀏覽this.imageUrl = "http://q2t6dfukt.bkt.clouddn.com/"+response.data; // 用于顯示this.$message({message: response.message,type: response.flag ? 'success' : 'error'});//設置模型數據（圖片名稱），后續提交ajax請求時會提交到后臺最終保存到數據庫this.formData.img = response.data; // 用于保存 }, //上傳圖片之前執行 beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上傳套餐圖片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上傳套餐圖片大小不能超過 2MB!');}return isJPG && isLt2M; },（4）創建SetmealController，接收上傳的文件
package com.atguigu.controller;import com.alibaba.dubbo.config.annotation.Reference; import com.atguigu.constant.MessageConstant; import com.atguigu.entity.Result; import com.atguigu.service.SetmealService; import com.atguigu.utils.QiniuUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile;import java.io.IOException; import java.util.UUID;/*** SetmealController** @Author: 馬偉奇* @Description:*/ @RestController @RequestMapping("/setmeal") public class SetmealController {@Referenceprivate SetmealService setmealService;// imgFile:需要跟頁面el-upload里面的name保持一致@RequestMapping("/upload")public Result upload(MultipartFile imgFile) {try {//獲取原始文件名String originalFilename = imgFile.getOriginalFilename();// 找到.最后出現的位置int lastIndexOf = originalFilename.lastIndexOf(".");//獲取文件后綴String suffix = originalFilename.substring(lastIndexOf);//使用UUID隨機產生文件名稱，防止同名文件覆蓋String fileName = UUID.randomUUID().toString() + suffix;QiniuUtils.upload2Qiniu(imgFile.getBytes(),fileName);//圖片上傳成功Result result = new Result(true, MessageConstant.PIC_UPLOAD_SUCCESS, fileName);return result;} catch (IOException e) {e.printStackTrace();}return new Result(false,MessageConstant.PIC_UPLOAD_FAIL);} }注意：別忘了在spring配置文件中配置文件上傳組件
已在springmvc.xml中配置
<!--文件上傳組件--> <bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="104857600" /><!--最大上傳文件大小--><property name="maxInMemorySize" value="4096" /><property name="defaultEncoding" value="UTF-8"/> </bean>錯誤
解決方案
地區設置錯誤
// Zone.zone2():表示華南，設置對應的地區 Configuration cfg = new Configuration(Zone.zone2());2.2.4. 提交請求
請求方式 post
調用地址
/setmeal/add.do調用方requestparams子成員：
| travelgroupIds | int | 是 | 跟團游id |
| formData | object | 是 | 表單數據 |
formData子成員如下：
| name | String | 是 | 名稱 |
| code | String | 是 | 編碼 |
| helpCode | String | 是 | 助記碼 |
| sex | String | 是 | 套餐適用性別：0不限 1男 2女 |
| age | String | 是 | 套餐適用年齡 |
| price | Float | 是 | 套餐價格 |
| remark | String | 是 | 評論 |
| attention | String | 是 | 注意 |
| img | String | 是 | 套餐對應圖片存儲路徑 |
當用戶點擊新增窗口中的確定按鈕時發送 ajax請求將數據提交到后臺進行數據庫操作。提交到后臺的數據分為兩部分：套餐基本信息（對應的模型數據為 formData）和跟團游 id數組（對應的模型數據為travelgroupIds）。
（1）為確定按鈕綁定單擊事件，對應的處理函數為handleAdd
<div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="handleAdd()">確定</el-button> </div>（2）完善handleAdd方法
//添加 handleAdd () {axios.post("/setmeal/add.do?travelgroupIds=" + this.travelgroupIds,this.formData).then((response)=> {this.dialogFormVisible = false;if(response.data.flag){this.$message({message: response.data.message,type: 'success'});}else{this.$message.error(response.data.message);}}).finally(()=> {this.findPage();}); },2.3. 后臺代碼
2.3.1. Controller
在SetmealController中增加方法
package com.atguigu.controller;import com.alibaba.dubbo.config.annotation.Reference; import com.atguigu.constant.MessageConstant; import com.atguigu.entity.Result; import com.atguigu.pojo.Setmeal; import com.atguigu.service.SetmealService; import com.atguigu.utils.QiniuUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile;import java.io.IOException; import java.util.UUID;/*** SetmealController** @Author: 馬偉奇* @Description:*/ @RestController @RequestMapping("/setmeal") public class SetmealController {@Referenceprivate SetmealService setmealService;//新增@RequestMapping("/add")public Result add(@RequestBody Setmeal setmeal, Integer[] travelgroupIds){try {setmealService.add(setmeal,travelgroupIds);}catch (Exception e){//新增套餐失敗return new Result(false,MessageConstant.ADD_SETMEAL_FAIL);}//新增套餐成功return new Result(true,MessageConstant.ADD_SETMEAL_SUCCESS);}2.3.2. 服務接口
創建 SetmealService 接口并提供新增方法
package com.atguigu.service;import com.atguigu.pojo.Setmeal;/*** SetmealService** @Author: 馬偉奇* @Description:*/ public interface SetmealService {public void add(Setmeal setmeal, Integer[] travelgroupIds); }2.3.3. 服務實現類
創建 SetmealServiceImpl 服務實現類并實現新增方法
package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service; import com.atguigu.dao.SetmealDao; import com.atguigu.pojo.Setmeal; import com.atguigu.service.SetmealService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional;import java.util.HashMap; import java.util.Map;/*** SetmealServiceImpl** @Author: 馬偉奇* @Description:*/ @Service(interfaceClass = SetmealService.class) @Transactional public class SetmealServiceImpl implements SetmealService {@Autowiredprivate SetmealDao setmealDao;@Overridepublic void add(Setmeal setmeal,Integer[] travelgroupId) {// 新增套餐setmealDao.add(setmeal);// 2：向套餐和跟團游的中間表中插入數據if(travelgroupId != null && travelgroupId.length > 0){//綁定套餐和跟團游的多對多關系setSetmealAndTravelGroup(setmeal.getId(),travelgroupId);}}//綁定套餐和跟團游的多對多關系private void setSetmealAndTravelGroup(Integer id, Integer[] travelgroupId) {for (Integer checkgroupId : travelgroupId) {Map<String, Integer> map = new HashMap<>();map.put("travelgroup_id",checkgroupId);map.put("setmeal_id",id);setmealDao.setSetmealAndTravelGroup(map);}} }2.3.4. Dao接口
創建 SetmealDao 接口并提供相關方法
package com.atguigu.dao;import com.atguigu.pojo.Setmeal;import java.util.Map;/*** SetmealDao** @Author: 馬偉奇* @Description:*/ public interface SetmealDao {void add(Setmeal setmeal);void setSetmealAndTravelGroup(Map<String, Integer> map);}2.3.5. Mapper映射文件
創建 SetmealDao.xml 文件并定義相關SQL語句
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.atguigu.dao.SetmealDao"><!--新增--><insert id="add" parameterType="setmeal"><selectKey resultType="int" order="AFTER" keyProperty="id">SELECT LAST_INSERT_ID()</selectKey>insert into t_setmeal(name,code,helpCode,sex,age,price,remark,attention,img) values (#{name},#{code},#{helpCode},#{sex},#{age},#{price},#{remark},#{attention},#{img})</insert><!--綁定套餐和跟團游多對多關系--><insert id="setSetmealAndTravelGroup" parameterType="map">insert intot_setmeal_travelgroup(setmeal_id,travelgroup_id)values (#{setmeal_id},#{travelgroup_id})</insert></mapper>運行程序 http://localhost:82/pages/main.html
2.4. 完善文件上傳，Redis存儲圖片名稱（一會說）
前面我們已經完成了文件上傳，將圖片存儲在了七牛云服務器中。但是這個過程存在一個問題，就是如果用戶只上傳了圖片而沒有最終保存套餐信息到我們的數據庫，這時我們上傳的圖片就變為了垃圾圖片。對于這些垃圾圖片我們需要定時清理來釋放磁盤空間。這就需要我們能夠區分出來哪些是垃圾圖片，哪些不是垃圾圖片。如何實現呢？
方案就是利用redis來保存圖片名稱，具體做法為：
1、當用戶上傳圖片后，將圖片名稱保存到redis的一個Set集合中，例如集合名稱為 setmealPicResources
2、當用戶添加套餐后，將圖片名稱保存到redis的另一個Set集合中，例如集合名稱為setmealPicDbResources
3、計算 setmealPicResources集合與 setmealPicDbResources集合的差值，結果就是垃圾圖片的名稱集合，清理這些圖片即可
本小節我們先來完成前面2個環節，第3個環節（清理圖片環節）在后面會通過定時任務再實現。
實現步驟：
（1）在 meinian_web 項目中提供Spring配置文件 spring-redis.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://code.alibabatech.com/schema/dubbohttp://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!--Jedis連接池的相關配置--><bean id="jedisPoolConfig" class="redis.clients.jedis.JedisPoolConfig"><!--最大連接數, 默認8個--><property name="maxTotal" value="100"></property><!--最大空閑連接數, 默認8個--><property name="maxIdle" value="50"></property><!--允許借調 在獲取連接的時候檢查有效性, 默認false--><property name="testOnBorrow" value="true"/><!--允許歸還 在return給pool時，是否提前進行validate操作--><property name="testOnReturn" value="true"/></bean><bean id="jedisPool" class="redis.clients.jedis.JedisPool"><constructor-arg name="poolConfig" ref="jedisPoolConfig" /><constructor-arg name="host" value="127.0.0.1" /><constructor-arg name="port" value="6379" type="int" /><constructor-arg name="timeout" value="30000" type="int" /></bean> </beans>同時在springmvc.xml中使用 標簽引入
<import resource="classpath:spring-redis.xml"></import>（2）在 meinian_common工程中提供Redis常量類
package com.atguigu.constant;/*** RedisConstant** @Author: 馬偉奇* @Description:*/ public class RedisConstant {//套餐圖片所有圖片名稱(七牛)public static final String SETMEAL_PIC_RESOURCES = "setmealPicResources";//套餐圖片保存在數據庫中的圖片名稱(數據庫)public static final String SETMEAL_PIC_DB_RESOURCES = "setmealPicDbResources"; }（3）完善SetmealController，在文件上傳成功后將圖片名稱保存到 redis 集合中
@Autowired private JedisPool jedisPool;//圖片上傳 @RequestMapping("/upload") public Result upload(@RequestParam("imgFile")MultipartFile imgFile){try{//獲取原始文件名String originalFilename = imgFile.getOriginalFilename();int lastIndexOf = originalFilename.lastIndexOf(".");//獲取文件后綴String suffix = originalFilename.substring(lastIndexOf);//使用UUID隨機產生文件名稱，防止同名文件覆蓋String fileName = UUID.randomUUID().toString() + suffix;QiniuUtils.upload2Qiniu(imgFile.getBytes(),fileName);//圖片上傳成功Result result = new Result(true, MessageConstant.PIC_UPLOAD_SUCCESS,fileName);//將上傳圖片名稱存入Redis，基于Redis的Set集合存儲jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_RESOURCES,fileName);return result;}catch (Exception e){e.printStackTrace();//圖片上傳失敗return new Result(false,MessageConstant.PIC_UPLOAD_FAIL);} }添加：
//將上傳圖片名稱存入Redis，基于Redis的Set集合存儲 jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_RESOURCES,fileName);（4）在 meinian_service項目中提供Spring配置文件 applicationContext-redis.xml
meinian_service 里面的啟動方式在 web.xml 如下：所以可以直接加載 redis 配置文件
<context-param><param-name>contextConfigLocation</param-name><param-value>classpath*:applicationContext*.xml</param-value></context-param>applicationContext-redis.xml 配置文件如下
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://code.alibabatech.com/schema/dubbohttp://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!--Jedis連接池的相關配置--><bean id="jedisPoolConfig" class="redis.clients.jedis.JedisPoolConfig"><property name="maxTotal"><value>200</value></property><property name="maxIdle"><value>50</value></property><property name="testOnBorrow" value="true"/><property name="testOnReturn" value="true"/></bean><bean id="jedisPool" class="redis.clients.jedis.JedisPool"><constructor-arg name="poolConfig" ref="jedisPoolConfig" /><constructor-arg name="host" value="127.0.0.1" /><constructor-arg name="port" value="6379" type="int" /><constructor-arg name="timeout" value="30000" type="int" /></bean> </beans>（5）完善 SetmealServiceImpl 服務類，在保存完成套餐信息后將圖片名稱存儲到 redis 集合中
@Autowired private JedisPool jedisPool;//新增套餐 public void add(Setmeal setmeal, Integer[] travelgroupIds) {setmealDao.add(setmeal);if(travelgroupIds != null && travelgroupIds.length > 0){//綁定套餐和跟團游的多對多關系setSetmealAndTravelGroup(setmeal.getId(),travelgroupIds);}//將圖片名稱保存到RedissavePic2Redis(setmeal.getImg()); } //將圖片名稱保存到Redis private void savePic2Redis(String pic){jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_DB_RESOURCES,pic); }測試：
【小結】
1：需求分析
2：前臺代碼
（1）彈出新增窗口
（2）動態展示跟團游列表
（3）圖片上傳并預覽
- 使用七牛云存儲圖片
（4）提交請求
- 使用數據庫存儲圖片名稱
- 使用springmvc的文件上傳技術
第一步：頁面定義上傳組件：
html<!--el-upload：上傳組件action：上傳的提交地址（七牛云服務器）auto-upload：選中文件后是否自動上傳name：上傳文件的名稱，服務端可以根據名稱獲得上傳的文件對象show-file-list：是否顯示已上傳文件列表on-success：文件上傳成功時的鉤子before-upload：上傳文件之前的鉤子--><el-uploadclass="avatar-uploader"action="/setmeal/upload.do":auto-upload="autoUpload"name="imgFile":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><!--用于上傳圖片預覽--><img v-if="imageUrl" :src="imageUrl" class="avatar"><!--用于展示上傳圖標--><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>第二步：使用springmvc跳轉Controller，接收文件參數
java@RequestMapping("/upload")public Result upload(@RequestParam("imgFile")MultipartFile imgFile){}第三步：配置springmvc.xml
xml<!--文件上傳組件--><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="104857600" /><!--最大上傳文件大小--><property name="maxInMemorySize" value="4096" /><property name="defaultEncoding" value="UTF-8"/></bean>3：后臺代碼
業務：
- 新增套餐
（1）SetmealController.java（Controller）
（1）SetmealService.java（服務接口）
（1）SetmealServiceImpl.java（服務實現類）
（1）SetmealDao.java（Dao接口）
（1）SetmealDao.xml（Mapper映射文件）
4：完善文件上傳，Redis存儲圖片名稱（一會說）
3. 第三章. 旅游套餐分頁
【目標】
旅游套餐列表分頁
【路徑】
1：前臺代碼
（1）定義分頁相關模型數據
（2）定義分頁方法
（3）完善分頁方法執行時機
2：后臺代碼
業務：
- 旅游套餐分頁列表展示
（1）SetmealController.java（Controller）
（2）SetmealService.java（服務接口）
（3）SetmealServiceImpl.java（服務實現類）
（4）SetmealDao.java（Dao接口）
（5）SetmealDao.xml（Mapper映射文件）
導入分頁數據
INSERT INTO `t_setmeal` VALUES ('12', '公司年度旅游套餐（男女通用）', '0001', 'RZTJ', '0', '18-60', '300', '公司年度旅游套餐', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg'); INSERT INTO `t_setmeal` VALUES ('13', '廣州長隆酒店+珠海長隆企鵝酒店雙飛5日自由行套餐', '0002', 'FHZA', '2', '18-60', '1200', '長隆酒店(廣州長隆野生動物世界店)位于廣州長隆旅游度假區中心地段，毗鄰長隆歡樂世界、長隆水上樂園、長隆野生動物世界、長隆飛鳥樂園和長隆國際大馬戲等主題樂園。交通便捷，多條園區穿梭巴往返長隆酒店和各大園區之間。珠海園區、機場快線、香港直通巴匯集其中，廣州地鐵3號線/7號線讓您的度假娛樂更快捷方便。 長隆酒店作為大型的生態主題酒店，主要以熱帶區域的人文文化風情為主基調。客房的擺設裝修以客為主，溫馨舒適，并有多種客房和套房類型選擇。酒店綠植圍繞，種類繁多，動物島置身于酒店之中，珍稀動物隨處可見。 酒店內配套多間風味各異的餐廳，讓你足不出戶品嘗環球美食。酒店配套室外泳池、室內四季恒溫泳池、健身房、童趣樂園、康體中心等，都是您商旅或者度假的上佳消遣地方。 國際會展中心更有可容納3,000人的6,000平方米宴會廳，擁有12米無柱高樓頂，配備LED屏幕，及大型內置8米升降舞臺、先進的多媒體視聽、通訊系統等商務會議設施。39個不同規格的豪華多功能會議廳。專業的銷售、服務團隊和完善的會議設施設備隨時準備為您提供一流的會議、展覽和宴會服務，打造一流的商務會議品牌。', null, 'd7114f3d-35bd-4e52-b0b5-9dfc83d54af72.jpg'); INSERT INTO `t_setmeal` VALUES ('14', '廈門+鼓浪嶼雙飛5日自由行套餐', '0003', 'YGBM', '0', '55-100', '1400', '鼓浪嶼的生活，是慵懶而優雅的，像極了歐洲某個古老的城市，不張揚，卻有著致命的吸引力——溫柔的陽光，蔚藍的大海，美妙的琴聲，靜靜矗立的老建筑，悠然自得的貓咪，所有的一切，總讓人忍不住想好好的，再談一場戀愛。 所以做了這樣的主題，就是想把所謂浪漫，狠狠地，徹底地，進行下去。要華麗，因為青春理應肆意和張揚；要低調，因為在心底，總有一個最柔軟最隱秘的角落，是只屬于你的。最重要的，是要浪漫。在流淌著音樂的房間里，看點點燭光搖曳，撒在床上的玫瑰花瓣香味隱約撲來，舉起手中的紅酒杯，兩個人，相視無語。cheers. 感謝你們，與我們分享這美好。也但愿我能，一直見證你們的幸福。', null, '1291b1fb-40c2-4558-b102-02e05c4cff6c3.jpg'); INSERT INTO `t_setmeal` VALUES ('15', '云南-昆明-大理-麗江-香格里拉雙飛8日游套餐', '0004', 'ZAGD', '0', '14-20', '2400', '今日行程無導游陪同，如您當日抵昆時間較早，可自行將行李寄存在入住酒店（貴重物品請自行保管好）；隨后，自由活動（如抵達昆明時間尚早，可自行前往云南師范大學（西南聯合大學舊址）、昆明金馬碧雞坊、南屏街、、陸軍講武堂等景點游覽、（外出酒店時貴重物品請自行保管好，請到酒店前臺帶上酒店名片，方便打車回酒店）', null, '68c7c13f-8fc2-46c3-b5d6-f7ec7992dc6e1.jpg'); INSERT INTO `t_setmeal` VALUES ('3', '澳門威尼斯人商圈酒店雙飛3-5日自由行套餐', '0001', 'RZTJ', '0', '18-60', '300', '澳門巴黎人是全澳門乃至亞洲的一顆閃耀新星，您可以在此感受“光之城”巴黎的獨特藝術氣息與迷人魅力。這里有約2千余間法式客房及套房供您選擇，還有依照巴黎埃菲爾鐵塔1/2比例建造的巴黎鐵塔，讓您體驗獨特的浪漫風情。您還可以于170家精品名店享受購物樂趣，或是品嘗經典法式美食，欣賞精彩的娛樂表演，暢游水世界、兒童王國等各種娛樂項目，像巴黎人一樣體驗無處不在的浪漫與驚喜！', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg'); INSERT INTO `t_setmeal` VALUES ('4', '香港九龍尖沙咀商圈雙飛3-8日自由行套餐', '0001', 'RZTJ', '0', '18-60', '300', '香港九龍珀麗酒店(Rosedale Hotel Kowloon)位于市中心繁華鬧市，地處九龍中心地帶，毗鄰多個購物、娛樂中心；酒店提供班車來往旺角、尖沙嘴和“圓方”購物區，方便賓客出行。 香港九龍珀麗酒店(Rosedale Hotel Kowloon) 設計精巧、新穎獨特，擁有精致、高雅的各式客房。酒店客房均配有LED智能電視、iPod/ iPhone 底座，讓您盡享便捷、舒適生活。', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg'); INSERT INTO `t_setmeal` VALUES ('5', '海南-亞龍灣-三亞雙飛7日游', '0001', 'RZTJ', '0', '18-60', '300', '全程由旅游局指定餐廳用餐，嚴格把控餐飲質量，讓您安心享用每一頓飲食，盡情嘗特色美食，讓味蕾綻放在路上，品味舌尖上的海南 。', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg'); INSERT INTO `t_setmeal` VALUES ('6', '麗江-大理-香格里拉雙飛6日游', '0001', 'RZTJ', '0', '18-60', '300', '云南地處高原，老年人體溫調節功能較差，易受涼感冒，所以衣服要帶得夠，以便隨時增減，行走出汗時，不要馬上脫衣敞懷。高原地區晝夜溫差大，睡前要蓋好被毯，夜間風起雨來時要關好門窗。', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg'); INSERT INTO `t_setmeal` VALUES ('7', '海南-亞龍灣-三亞雙飛8日游', '0001', 'RZTJ', '0', '18-60', '300', '旅游中要有充足的休息和睡眠，若感到體力不支，可略著休息或減緩旅行。在長時間步行游覽時應隨時坐下小憩。', null, 'a5e8e729-74ce-4939-bf36-9cdc02fb2ae51.jpg');INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '5'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '6'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '7'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '8'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '9'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('14', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('15', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('12', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('14', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('15', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('14', '12'); INSERT INTO `t_setmeal_travelgroup` VALUES ('14', '13'); INSERT INTO `t_setmeal_travelgroup` VALUES ('15', '13'); INSERT INTO `t_setmeal_travelgroup` VALUES ('13', '14'); INSERT INTO `t_setmeal_travelgroup` VALUES ('15', '14'); INSERT INTO `t_setmeal_travelgroup` VALUES ('13', '15'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '5'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '6'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '7'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '8'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '9'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('4', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('15', '10'); INSERT INTO `t_setmeal_travelgroup` VALUES ('3', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('4', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('5', '11'); INSERT INTO `t_setmeal_travelgroup` VALUES ('4', '12'); INSERT INTO `t_setmeal_travelgroup` VALUES ('4', '13'); INSERT INTO `t_setmeal_travelgroup` VALUES ('5', '13'); INSERT INTO `t_setmeal_travelgroup` VALUES ('6', '14'); INSERT INTO `t_setmeal_travelgroup` VALUES ('5', '14'); INSERT INTO `t_setmeal_travelgroup` VALUES ('6', '15');【講解】
3.1. 前臺代碼
3.1.1. 定義分頁相關模型數據
pagination: {//分頁相關模型數據currentPage: 1,//當前頁碼pageSize:10,//每頁顯示的記錄數total:0,//總記錄數queryString:null//查詢條件 }, dataList: [],//當前頁要展示的分頁列表數據3.1.2. 定義分頁方法
請求方式 post
請求地址
/setmeal/findPage.do調用方requestparams子成員：
| currentPage | Integer | 是 | 頁碼 |
| pageSize | Integer | 是 | 每頁記錄數 |
| queryString | String | 是 | 查詢條件 |
返回方result子成員：
| dataList | List | 是 | 當前頁結果 |
| total | Long | 是 | 總記錄數 |
（1）在頁面中提供了findPage方法用于分頁查詢，為了能夠在setmeal.html頁面加載后直接可以展示分頁數據，可以在VUE提供的鉤子函數created中調用findPage方法
//鉤子函數，VUE對象初始化完成后自動執行 created() {this.findPage(); },（2）findPage()方法：
//分頁查詢 findPage() {//分頁參數var param = {currentPage:this.pagination.currentPage,//頁碼pageSize:this.pagination.pageSize,//每頁顯示的記錄數queryString:this.pagination.queryString//查詢條件};//請求后臺axios.post("/setmeal/findPage.do",param).then((response)=> {//為模型數據賦值，基于VUE的雙向綁定展示到頁面this.dataList = response.data.rows;this.pagination.total = response.data.total;}); },3.1.3. 完善分頁方法執行時機
除了在created鉤子函數中調用findPage方法查詢分頁數據之外，當用戶點擊查詢按鈕或者點擊分頁條中的頁碼時也需要調用findPage方法重新發起查詢請求。
（1）為查詢按鈕綁定單擊事件，調用findPage方法
<el-button @click="handleCurrentChange(1)" class="dalfBut">查詢</el-button>（2）為分頁條組件綁定current-change事件，此事件是分頁條組件自己定義的事件，當頁碼改變時觸發，對應的處理函數為handleCurrentChange
<div class="pagination-container"><el-paginationclass="pagiantion"@current-change="handleCurrentChange":current-page="pagination.currentPage":page-size="pagination.pageSize"layout="total, prev, pager, next, jumper":total="pagination.total"></el-pagination> </div>定義handleCurrentChange方法
//切換頁碼 handleCurrentChange(currentPage) {//currentPage為切換后的頁碼this.pagination.currentPage = currentPage;this.findPage(); }3.2. 后臺代碼
3.2.1. Controller
在 SetmealController 中增加分頁查詢方法
package com.atguigu.controller;import com.alibaba.dubbo.config.annotation.Reference; import com.atguigu.constant.MessageConstant; import com.atguigu.entity.PageResult; import com.atguigu.entity.QueryPageBean; import com.atguigu.entity.Result; import com.atguigu.pojo.Setmeal; import com.atguigu.service.SetmealService; import com.atguigu.utils.QiniuUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile;import java.io.IOException; import java.util.List; import java.util.UUID;/*** SetmealController** @Author: 馬偉奇* @Description:*/ @RestController @RequestMapping("/setmeal") public class SetmealController {//分頁查詢 @RequestMapping("/findPage") public PageResult findPage(@RequestBody QueryPageBean queryPageBean){PageResult pageResult = setmealService.findPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());return pageResult; }3.2.2. 服務接口
在 SetmealService 服務接口中擴展分頁查詢方法
package com.atguigu.service;import com.atguigu.entity.PageResult; import com.atguigu.pojo.Setmeal;/*** SetmealService** @Author: 馬偉奇* @Description:*/ public interface SetmealService {PageResult findPage(Integer currentPage, Integer pageSize, String queryString);3.2.3. 服務實現類
在 SetmealServiceImpl 服務實現類中實現分頁查詢方法，基于Mybatis分頁助手插件實現分頁
package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service; import com.atguigu.dao.SetmealDao; import com.atguigu.entity.PageResult; import com.atguigu.pojo.Setmeal; import com.atguigu.service.SetmealService; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional;import java.util.HashMap; import java.util.Map;/*** SetmealServiceImpl** @Author: 馬偉奇* @Description:*/ @Service(interfaceClass = SetmealService.class) @Transactional public class SetmealServiceImpl implements SetmealService {@Autowiredprivate SetmealDao setmealDao;public PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {PageHelper.startPage(currentPage,pageSize);Page<Setmeal> page = setmealDao.findPage(queryString);return new PageResult(page.getTotal(),page.getResult()); }3.2.4. Dao接口
在 SetmealDao 接口中擴展分頁查詢方法
package com.atguigu.dao;import com.atguigu.pojo.Setmeal; import com.github.pagehelper.Page;import java.util.Map;/*** SetmealDao** @Author: 馬偉奇* @Description:*/ public interface SetmealDao {Page<Setmeal> findPage(String queryString);3.2.5. Mapper映射文件
在 SetmealDao.xml 文件中增加SQL定義
<select id="findPage" parameterType="string" resultType="setmeal">select * from t_setmeal<where><if test="value!=null and value.length>0">code=#{value} or name like concat('%',#{value},'%') or helpCode=#{value}</if></where> </select>程序運行 http://localhost:82/pages/main.html
【小結】
1：前臺代碼
（1）定義分頁相關模型數據
（2）定義分頁方法
（3）完善分頁方法執行時機
2：后臺代碼
業務：
- 體檢套餐分頁列表展示
（1）SetmealController.java（Controller）
（2）SetmealService.java（服務接口）
（3）SetmealServiceImpl.java（服務實現類）
（4）SetmealDao.java（Dao接口）
（5）SetmealDao.xml（Mapper映射文件）
4. 第四章. 定時任務組件Quartz
【目標】
定時任務組件Quartz
- 清除文件上傳所產生的垃圾圖片
【路徑】
1：Quart介紹
- 掌握場景（定時任務）
2：Quartz入門案例
- spring整合Quartz（spring中配置）
3：cron表達式
4：cron表達式在線生成器
【講解】
4.1. Quartz介紹
Quartz是Job scheduling（作業調度）領域的一個開源項目，Quartz既可以單獨使用也可以跟spring框架整合使用，在實際開發中一般會使用后者。使用Quartz可以開發一個或者多個定時任務，每個定時任務可以單獨指定執行的時間，例如每隔1小時執行一次、每個月第一天上午10點執行一次、每個月最后一天下午5點執行一次等。
官網：https://www.w3cschool.cn/quartz_doc/
簡單來說，就是可以幫助我們設置一個有規律的或者在某個具體的時間點干點想干的事的一個開源框架。
在使用Scheduler之前，需要實例化 , scheduler實例化后，可以啟動(start)、暫停(stand-by)、停止(shutdown)。
Quartz API的關鍵接口是：
- Scheduler：任務調度器，所有的任務都是從這里開始。
- Trigger：觸發器，定義任務執行的方式、間隔。
- JobDetail & Job ： 定義任務具體執行的邏輯。
Scheduler的生命期，從SchedulerFactory創建它時開始，到Scheduler調用shutdown()方法時結束；Scheduler被創建后，可以增加、刪除和列舉Job和Trigger，以及執行其它與調度相關的操作（如暫停Trigger）。但是，Scheduler只有在調用start()方法后，才會真正地觸發trigger（即執行job）
創建項目 quartz_demo 導入 maven 坐標：
<dependencies><!--引入Quartz的依賴--><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.2.1</version></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz-jobs</artifactId><version>2.2.1</version></dependency></dependencies>Quartz 入門案例
① 創建QuartzTest
package com.atguigu;import org.quartz.*; import org.quartz.impl.StdSchedulerFactory;/*** QuartzTest** @Author: 馬偉奇* @Description:*/ public class QuartzTest {public static void main(String[] args) {try {//定義一個JobDetailJobDetail jobDetail = JobBuilder.newJob(HelloQuartz.class)//定義name和group 給觸發器一些屬性 比如名字，組名。.withIdentity("job1", "group1")//job需要傳遞的內容 具體job傳遞參數。.usingJobData("name", "sdas").build();//定義一個TriggerTrigger trigger = TriggerBuilder.newTrigger().withIdentity("trigger1", "group1")//加入 scheduler之后立刻執行 立刻啟動.startNow()//定時 ，每隔1秒鐘執行一次 以某種觸發器觸發。.withSchedule(SimpleScheduleBuilder.simpleSchedule().withIntervalInSeconds(1)//重復執行.repeatForever()).build();//創建schedulerScheduler scheduler = StdSchedulerFactory.getDefaultScheduler();scheduler.scheduleJob(jobDetail, trigger);// Scheduler只有在調用start()方法后，才會真正地觸發trigger（即執行job）scheduler.start(); //運行一段時間后關閉try {Thread.sleep(8000);} catch (InterruptedException e) {e.printStackTrace();}//Scheduler調用shutdown()方法時結束scheduler.shutdown();} catch (Exception e) {e.printStackTrace();}} }② 創建HelloQuartz
package com.atguigu; import org.quartz.Job; import org.quartz.JobDetail; import org.quartz.JobExecutionContext;import java.util.Date; /*** HelloQuartz** @Author: 馬偉奇* @Description:*/ public class HelloQuartz implements Job {public void execute(JobExecutionContext jobExecutionContext) {JobDetail detail = jobExecutionContext.getJobDetail();String name = detail.getJobDataMap().getString("name");System.out.println("my job name is " + name + " at " + new Date());} }執行程序
<!--spring整合Quartz--> <dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>5.0.2.RELEASE</version> </dependency>4.2. Quartz整合springboot
創建項目 quartz_demo
添加pom文件
<!--父工程--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.6.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- 添加 Scheduled 坐標 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>5.0.5.RELEASE</version></dependency></dependencies>創建 BootApplication
package com.atguigu;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.scheduling.annotation.EnableScheduling;/*** BootApplication** @Author: 馬偉奇* @Description:*/ @SpringBootApplication @EnableScheduling public class BootApplication {public static void main(String[] args) {SpringApplication.run(BootApplication.class, args);} }創建 TaskController
package com.atguigu.controller; import java.text.SimpleDateFormat; import java.util.Date;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Controller; /*** TaskController** @Author: 馬偉奇* @Description:*/@Controller("Task") public class TaskController{@Scheduled(fixedDelay = 3000)public void myTask1(){SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");System.out.println(simpleDateFormat.format(new Date()));try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}}@Scheduled(fixedRate = 3000)public void myTask2(){SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");System.out.println(simpleDateFormat.format(new Date()));try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}}/*** cron:,項目啟動后每5秒執行一次* fixedDelay:距離上一次定時任務執行完畢后N毫秒在執行，* 比如參數是3000，上次執行A任務花了5秒，執行完成之后在過3秒執行* fixedRate:執行周期，執行頻率，* 上一個定時任務執行開始，在過N毫秒后執行，比如參數是3000，上次執行A任務花了2秒，在過1秒后執行，* 上次執行A任務花了15秒，任務執行后，直接執行** @auther* @return void*/@Scheduled(cron = "0/5 * * * * ?")public void cronTask(){logger.info("Cron方式-定時任務執行時間："+ dateFormat.format(new Date()));}}4.2. Quartz整合spring
【路徑】
1：創建maven工程quartzdemo，打包方式為war，導入jar包
2：自定義一個Job
3：提供Spring配置文件application-jobs.xml，配置自定義Job、任務描述、觸發器、調度工廠等
4：web.xml中定義
5：啟動tomcat完成測試
【講解】
本案例基于Quartz和spring整合的方式使用。具體步驟：
（1）創建maven工程quartz_demo，打包方式為war，導入Quartz和spring相關坐標，pom.xml文件如下
導入jar包
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.atguigu</groupId><artifactId>quartz_demo</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>5.0.2.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>5.0.2.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>5.0.2.RELEASE</version></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.2.1</version></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz-jobs</artifactId><version>2.2.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><!-- 指定端口 --><port>8080</port><!-- 請求路徑 --><path>/</path></configuration></plugin></plugins></build> </project>（2）自定義一個Job
package com.atguigu;/*** JobDemo** @Author: 馬偉奇* @Description:*/ // 任務調度類 public class JobDemo {// 提供方法（備份數據庫，清理日志，清理圖片）public void run(){// 完成業務System.out.println(new Date());} }（3）提供Spring配置文件application-jobs.xml，配置自定義Job、任務描述、觸發器、調度工廠等
【路徑】
1：創建JobDetail對象,作用是負責通過反射調用指定的Job，注入目標對象，注入目標方法
2：注冊一個觸發器，指定任務觸發的時間
3：注冊一個統一的調度工廠，通過這個調度工廠調度任務
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!-- 注冊自定義Job --><bean id="jobDemo" class="com.atguigu.JobDemo"></bean><!-- 1：創建JobDetail對象,作用是負責通過反射調用指定的Job，注入目標對象，注入目標方法 --><bean id="jobDetail"class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean"><!-- 注入目標對象 --><property name="targetObject" ref="jobDemo"/><!-- 注入目標方法 --><property name="targetMethod" value="run"/></bean><!-- 2：注冊一個觸發器，指定任務觸發的時間 --><bean id="myTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean"><!-- 注入JobDetail --><property name="jobDetail" ref="jobDetail"/><!-- 指定觸發的時間，基于Cron表達式（0/10表示從0秒開始，每10秒執行一次） --><property name="cronExpression"><value>0/10 * * * * ?</value></property></bean><!-- 3：注冊一個統一的調度工廠，通過這個調度工廠調度任務 --><bean id="scheduler" class="org.springframework.scheduling.quartz.SchedulerFactoryBean"><!-- 注入多個觸發器 --><property name="triggers"><list><ref bean="myTrigger"/></list></property></bean> </beans>（4）web.xml中定義
啟動web，自動加載spring容器。
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID" version="3.0"><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:application-jobs.xml</param-value></context-param> </web-app>執行上面main方法觀察控制臺，可以發現每隔10秒會輸出一次，說明每隔10秒自定義Job被調用一次。
4.3. cron表達式
上面的入門案例中我們指定了一個表達式：0/10 * * * * ?
這種表達式稱為cron表達式，通過cron表達式可以靈活的定義出符合要求的程序執行的時間。本小節我們就來學習一下cron表達式的使用方法。如下圖：
cron表達式分為七個域，之間使用空格分隔。其中最后一個域（年）可以為空。每個域都有自己允許的值和一些特殊字符構成。使用這些特殊字符可以使我們定義的表達式更加靈活。
下面是對這些特殊字符的介紹：
逗號（,）：指定一個值列表，例如使用在月域上1,4,5,7表示1月、4月、5月和7月
橫杠（-）：指定一個范圍，例如在時域上3-6表示3點到6點（即3點、4點、5點、6點）
星號（*）：表示這個域上包含所有合法的值。例如，在月份域上使用星號意味著每個月都會觸發
斜線（/）：表示遞增，例如使用在秒域上0/15表示每15秒
問號（?）：只能用在日和周域上，但是不能在這兩個域上同時使用。表示不指定，例如想在每月的20日觸發調度，不管20日到底是星期幾，則只能使用如下寫法： 13 13 15 20 * ?, 其中最后一位只能用？，而不能使用 *，如果使用 * 表示不管星期幾都會觸發，實際上并不是這樣。
井號（#）：只能使用在周域上，用于指定月份中的第幾周的哪一天，例如6#3，意思是某月的第三個周五 (6=星期五，3意味著月份中的第三周)
L：某域上允許的最后一個值。只能使用在日和周域上。當用在日域上，表示的是在月域上指定的月份的最后一天。用于周域上時，表示周的最后一天，就是星期六
W：W 字符代表著工作日 (星期一到星期五)，只能用在日域上，它用來指定離指定日的最近的一個工作日
4.3.1 常用表達式例子
（1）0 0 2 1 * ? * 表示在每月的1日的凌晨2點調整任務（2）0 15 10 ? * MON-FRI 表示周一到周五每天上午10:15執行作業（3）0 0 10,14,16 * * ? 每天上午10點，下午2點，4點 （4）0 0 12 ? * WED 表示每個星期三中午12點 （5）0 0 12 * * ? 每天中午12點觸發 （6）0 15 10 ? * * 每天上午10:15觸發 （7）0 15 10 * * ? 每天上午10:15觸發 （8）0 15 10 * * ? * 每天上午10:15觸發 （9）0 15 10 * * ? 2005 2005年的每天上午10:15觸發 （10）0 * 14 * * ? 在每天下午2點到下午2:59期間的每1分鐘觸發 （11）0 0/5 14 * * ? 在每天下午2點到下午2:55期間的每5分鐘觸發 （12）0 0/5 14,18 * * ? 在每天下午2點到2:55期間和下午6點到6:55期間的每5分鐘觸發 （13）0 0-5 14 * * ? 在每天下午2點到下午2:05期間的每1分鐘觸發 （14）0 10,44 14 ? 3 WED 每年三月的星期三的下午2:10和2:44觸發 （15）0 15 10 ? * MON-FRI 周一至周五的上午10:15觸發 （16）0 15 10 15 * ? 每月15日上午10:15觸發 （17）0 15 10 L * ? 每月最后一日的上午10:15觸發 （18）0 15 10 ? * 6L 每月的最后一個星期五上午10:15觸發 （19）0 15 10 ? * 6L 2002-2005 2002年至2005年的每月的最后一個星期五上午10:15觸發 （20）0 15 10 ? * 6#3 每月的第三個星期五上午10:15觸發（21）0 15 10 ? 6L 2002-2006 表示2002-2006年的每個月的最后一個星期五上午10:15執行作（22）0 0/30 9-17 * * ? 朝九晚五工作時間內每半小時4.4. cron表達式在線生成器
前面介紹了cron表達式，但是自己編寫表達式還是有一些困難的，我們可以借助一些cron表達式在線生成器來根據我們的需求生成表達式即可。
http://cron.qqe2.com/
【小結】
1：Quart介紹
- 掌握場景（定時任務）
2：Quartz入門案例
- spring整合Quartz（spring中配置）
3：cron表達式
4：cron表達式在線生成器
http://cron.qqe2.com/
5. 第五章. 定時清理垃圾圖片
【目標】
Quartz整合項目，完成定時清理垃圾圖片
【路徑】
1：創建maven聚合工程meinian_jobs，打包方式為war，導入Quartz等相關坐標
2：配置web.xml
- web容器啟動，加載spring容器
3：配置log4j.properties
4：配置applicationContext-redis.xml
- spring整合redis
5：配置applicationContext-jobs.xml
- spring整合Quartz
6：創建ClearImgJob定時任務類
- 使用Quartz清理垃圾圖片
【講解】
前面我們已經完成了旅游套餐的管理，在新增套餐時套餐的基本信息和圖片是分兩次提交到后臺進行操作的。也就是用戶首先將圖片上傳到七牛云服務器，然后再提交新增窗口中錄入的其他信息。如果用戶只是上傳了圖片而沒有提交錄入的其他信息，此時的圖片就變為了垃圾圖片，因為在數據庫中并沒有記錄它的存在。此時我們要如何處理這些垃圾圖片呢？
解決方案就是通過定時任務組件定時清理這些垃圾圖片。為了能夠區分出來哪些圖片是垃圾圖片，我們在文件上傳成功后將圖片保存到了一個 redis 集合中，當套餐數據插入到數據庫后我們又將圖片名稱保存到了另一個redis集合中，通過計算這兩個集合的差值就可以獲得所有垃圾圖片的名稱。
本章節我們就會基于Quartz 定時任務，通過計算 redis 兩個集合的差值找出所有的垃圾圖片，就可以將垃圾圖片清理掉。
操作步驟：
（1）創建maven聚合工程 meinian_jobs ，打包方式為war，導入Quartz等相關坐標
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>meinian_parent</artifactId><groupId>com.atguigu</groupId><version>1.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>meinian_jobs</artifactId><packaging>war</packaging><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencies><dependency><groupId>com.atguigu</groupId><artifactId>meinian_interface</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz-jobs</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><!-- 指定端口 --><port>83</port><!-- 請求路徑 --><path>/</path></configuration></plugin></plugins></build> </project>（2）配置web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID" version="3.0"><display-name>Archetype Created Web Application</display-name><!-- 加載spring容器 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath*:applicationContext*.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener> </web-app>（3）配置log4j.properties
### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target=System.err log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n### direct messages to file mylog.log ### log4j.appender.file=org.apache.log4j.FileAppender log4j.appender.file.File=c:\\mylog.log log4j.appender.file.layout=org.apache.log4j.PatternLayout log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n### set log levels - for more verbose logging change 'info' to 'debug' ###log4j.rootLogger=debug, stdout（4）配置applicationContext-redis.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://code.alibabatech.com/schema/dubbohttp://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!--Jedis連接池的相關配置--><bean id="jedisPoolConfig" class="redis.clients.jedis.JedisPoolConfig"><!--在指定時刻通過pool能夠獲取到的最大的連接的jedis個數--><property name="maxTotal"><value>200</value></property><!--最大能夠保持idle的數量--><property name="maxIdle"><value>50</value></property><!--表示連接池在創建鏈接的時候會先測試一下鏈接是否可用，這樣可以保證連接池中的鏈接都可用的。--><property name="testOnBorrow" value="true"/><property name="testOnReturn" value="true"/></bean><bean id="jedisPool" class="redis.clients.jedis.JedisPool"><constructor-arg name="poolConfig" ref="jedisPoolConfig" /><constructor-arg name="host" value="127.0.0.1" /><constructor-arg name="port" value="6379" type="int" /><constructor-arg name="timeout" value="30000" type="int" /></bean> </beans>（5）配置 applicationContext-jobs.xml
使用組件：
<!--組件的掃描 開啟注解配置支持，否則在ClearImgJob不能使用@Autowired--> <context:component-scan base-package="com.atguigu"></context:component-scan> <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!--開啟注解配置支持，否則在ClearImgJob不能使用@Autowired--><context:component-scan base-package="com.atguigu"></context:component-scan><!-- 注冊自定義Job --><bean id="jobDemo" class="com.atguigu.job.ClearImgJob"></bean><!-- 注冊JobDetail,作用是負責通過反射調用指定的Job --><bean id="jobDetail"class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean"><!-- 注入目標對象 --><property name="targetObject" ref="jobDemo"/><!-- 注入目標方法 --><property name="targetMethod" value="clearImg"/></bean><!-- 注冊一個觸發器，指定任務觸發的時間 --><bean id="myTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean"><!-- 注入JobDetail --><property name="jobDetail" ref="jobDetail"/><!-- 指定觸發的時間，基于Cron表達式（0 0 2 * * ?表示凌晨2點執行） --><!-- 指定觸發的時間，基于Cron表達式（0 25 12 * * ?表示12點25分執行） --><property name="cronExpression"><value>0 0 2 * * ?</value></property></bean><!-- 注冊一個統一的調度工廠，通過這個調度工廠調度任務 --><bean id="scheduler" class="org.springframework.scheduling.quartz.SchedulerFactoryBean"><!-- 注入多個觸發器 --><property name="triggers"><list><ref bean="myTrigger"/></list></property></bean> </beans>（6）創建ClearImgJob定時任務類
package com.atguigu.job;import com.atguigu.constant.RedisConstant; import com.atguigu.utils.QiniuUtils; import org.springframework.beans.factory.annotation.Autowired; import redis.clients.jedis.JedisPool;import java.util.Iterator; import java.util.Set;/*** ClearImgJob** @Author: 馬偉奇* @Description:*/ public class ClearImgJob {@Autowiredprivate JedisPool jedisPool;//清理圖片public void clearImg(){//計算redis中兩個集合的差值，獲取垃圾圖片名稱// 需要注意：在比較的時候，數據多的放到前面，如果pic多，那么pic放到前面，db多，db放到前面Set<String> set = jedisPool.getResource().sdiff(RedisConstant.SETMEAL_PIC_RESOURCES,RedisConstant.SETMEAL_PIC_DB_RESOURCES);Iterator<String> iterator = set.iterator();while(iterator.hasNext()){String pic = iterator.next();System.out.println("刪除圖片的名稱是："+pic);//刪除圖片服務器中的圖片文件QiniuUtils.deleteFileFromQiniu(pic);//刪除redis中的數據jedisPool.getResource().srem(RedisConstant.SETMEAL_PIC_RESOURCES,pic);}} }測試：
注意：如果 redis 服務端啟動如下，不需要擔心，直接使用 , 只是沒有圖標而已。
【小結】
1：創建maven聚合工程 meinian_jobs ，打包方式為war，導入Quartz等相關坐標
2：配置web.xml
- web容器啟動，加載spring容器
3：配置log4j.properties
4：配置applicationContext-redis.xml
- spring整合redis
5：配置applicationContext-jobs.xml
- spring整合Quartz
6：創建ClearImgJob定時任務類
- 使用Quartz清理垃圾圖片
m.atguigu.job.ClearImgJob">
0 0 2 * * ?
（6）創建ClearImgJob定時任務類
package com.atguigu.job;import com.atguigu.constant.RedisConstant; import com.atguigu.utils.QiniuUtils; import org.springframework.beans.factory.annotation.Autowired; import redis.clients.jedis.JedisPool;import java.util.Iterator; import java.util.Set;/*** ClearImgJob** @Author: 馬偉奇* @Description:*/ public class ClearImgJob {@Autowiredprivate JedisPool jedisPool;//清理圖片public void clearImg(){//計算redis中兩個集合的差值，獲取垃圾圖片名稱// 需要注意：在比較的時候，數據多的放到前面，如果pic多，那么pic放到前面，db多，db放到前面Set<String> set = jedisPool.getResource().sdiff(RedisConstant.SETMEAL_PIC_RESOURCES,RedisConstant.SETMEAL_PIC_DB_RESOURCES);Iterator<String> iterator = set.iterator();while(iterator.hasNext()){String pic = iterator.next();System.out.println("刪除圖片的名稱是："+pic);//刪除圖片服務器中的圖片文件QiniuUtils.deleteFileFromQiniu(pic);//刪除redis中的數據jedisPool.getResource().srem(RedisConstant.SETMEAL_PIC_RESOURCES,pic);}} }測試：
[外鏈圖片轉存中…(img-78Qc0k5F-1654660667120)]
注意：如果 redis 服務端啟動如下，不需要擔心，直接使用 , 只是沒有圖標而已。
[外鏈圖片轉存中…(img-y4qLs3If-1654660667121)]
【小結】
1：創建maven聚合工程 meinian_jobs ，打包方式為war，導入Quartz等相關坐標
2：配置web.xml
- web容器啟動，加載spring容器
3：配置log4j.properties
4：配置applicationContext-redis.xml
- spring整合redis
5：配置applicationContext-jobs.xml
- spring整合Quartz
6：創建ClearImgJob定時任務類
- 使用Quartz清理垃圾圖片
總結
以上是生活随笔為你收集整理的java+ElementUI前后端分离旅游项目第三天 预约管理的全部內容，希望文章能夠幫你解決所遇到的問題。
