二十五、Spring项目四（2）

第4章 预约管理-套餐管理

1 上传图片

1.1 前端

使用element ui的el-upload

<!--
  el-upload：上传组件
  action：上传的提交地址
  auto-upload：选中文件后是否自动上传
  name：上传文件的名称，服务端可以根据名称获得上传的文件对象
  show-file-list：是否显示已上传文件列表
  on-success：文件上传成功时的钩子
  before-upload：上传文件之前的钩子
-->
<el-upload
           class="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>

1. 上传文件之前beforeAvatarUpload：
   校验图片大小格式，是否符合要求，再请求上传

   //上传文件之前的钩子
   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;
   }
   

2. action发送上传请求给后端处理

3. 回显到界面上，图片预览操作
   时机：上传成功后进行回显handleAvatarSuccess：
   data中的数据里包含imageUrl，传给页面端显示：使用七牛云的图片链接地址，对象存储控制台中有七牛云分给你的域名地址，拼接你的图片名，就是你的图片地址

   //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
   handleAvatarSuccess(response, file) {
     this.imageUrl = "http://pqjroc654.bkt.clouddn.com/"+response.data;
     this.$message({
       message: response.message,
       type: response.flag ? 'success' : 'error'
     });
     //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
     this.formData.img = response.data;
   }
   

1.2 存储

将图片存储到云中：这里使用的七牛云
七牛云对外提供了Java SDK来操作七牛云中的数据

1. 导入maven坐标

<dependency>
  <groupId>com.qiniu</groupId>
  <artifactId>qiniu-java-sdk</artifactId>
  <version>7.2.0</version>
</dependency>

2. 注册七牛云个人中心获取密钥
3. 使用Java SDK操作

   //构造一个带指定Zone对象的配置类
   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";
   //如果是Windows情况下，格式是 D:\\qiniu\\test.png
   String localFilePath = "/home/qiniu/test.png";
   //默认不指定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.3 优化

一个问题：用户上传了图片，但是又取消了，并没有提交表单保存到数据库中，这样图片就成为垃圾数据存储到七牛云中了，所以需要定时清理垃圾图片。
如何区分垃圾图片？
利用redis构建一个上传集合和另一个确定集合，那么上传集合一定会>=确定集合，集合差值的结果就是垃圾图片。
什么时候清理垃圾图片？
利用Quartz定时清理垃圾图片。

reids

建立Spring配置文件spring-redis.xml，生成对象
注意：项目启动web.xml中只加载了springmvc.xml，并没有配置加载spring-redis.xml，需要在springmvc.xml中import一下
而provider中web.xml配置的是spring*，所以会扫描到不用添加

Quartz

Quartz：
Spring只是帮我们创建对象，调用需要Quartz框架。
何时调用：
	定义触发器
	Cron表达式指定触发时间

Cron表达式描述触发时间：
其中？描述：周和日同时指定很可能是矛盾的，同时满足的几率是很小的，比如每月3日是周三，并不是所有的每个月的3号是周三，所以需要问号符？来放弃1方