传智健康2—图片云存储方案与预约设置


阅读数: 次   

EverydayOneCat

☀️OverHeating🌙

0671e553b93f2bfb233429b94f9956ff75e04a96.jpg@518w_1e_1c

图片云存储方案

1.图片存储方案

在实际开发中，我们会有很多处理不同功能的服务器。例如：
应用服务器：负责部署我们的应用
数据库服务器：运行我们的数据库
文件服务器：负责存储用户上传文件的服务器

分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。

常见的图片存储方案：
方案一：使用nginx搭建图片服务器
方案二：使用开源的分布式文件存储系统，例如Fastdfs、HDFS等
方案三：使用云存储，例如阿里云、七牛云等

2.七牛云存储

官网：https://www.qiniu.com/

要使用七牛云的服务，首先需要注册成为会员。地址：https://portal.qiniu.com/signup

注意：登录成功后还需要进行实名认证才能进行相关操作。

可以通过七牛云提供的开发者中心学习如何操作七牛云服务，地址：https://developer.qiniu.com/

七牛云提供了多种方式操作对象存储服务，本项目采用Java SDK方式，地址：https://developer.qiniu.com/kodo/sdk/1239/java

Java SDK的所有的功能，都需要合法的授权。授权凭证的签算需要七牛账号下的一对有效的Access Key和Secret Key，这对密钥可以在七牛云管理控制台的个人中心（https://portal.qiniu.com/user/key）获得。

3.封装七牛云工具类

为了方便操作七牛云存储服务，我们可以将官方提供的案例简单改造成一个工具类，在我们的项目中直接使用此工具类来操作就可以：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
package com.itheima.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 = "WEtwLwEDS97nEIor1PnFQORbERhJlhcGAiAd2a5N";
    public  static String secretKey = "geCec9wlks-LVr7BttH7be2rsiWpGsa_4Cra9oga";
    public  static String bucket = "itcast-health-jy";

    public static void upload2Qiniu(String filePath,String fileName){
        //构造一个带指定Zone对象的配置类
        Configuration cfg = new Configuration(Zone.zone0());
        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.zone0());
        //...其他参数参考类注释
        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.zone0());
        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());
        }
    }
}

4.套餐管理中的上传图片

套餐管理和之前的检察管理差不多，这里着重介绍新增套餐中的上传图片。

image-20201119095428092

4.1前端

此处使用的是ElementUI提供的上传组件el-upload，提供了多种不同的上传效果，上传成功后可以进行预览。

（1）定义模型数据，用于后面上传文件的图片预览：

1
imageUrl:null,//模型数据，用于上传图片完成后图片预览

（2）定义上传组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--
    el-upload：上传组件
    action：上传的提交地址
    auto-upload：选中文件后是否自动上传
    name：上传文件的名称，服务端可以根据名称获得上传的文件对象
    show-file-list：是否显示已上传文件列表
    on-success：文件上传成功时的钩子
    before-upload：上传文件之前的钩子
-->
<el-form-item label="上传图片">
    <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>
</el-form-item>

（3）定义对应的钩子函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
handleAvatarSuccess(response, file) {
    //为模型数据imageUrl赋值，用于页面图片预览
    this.imageUrl = "http://qjy2m0vhk.hd-bkt.clouddn.com/"+response.data;
    this.$message({
        type:response.flag ? 'success':'error',
        message:response.message
    });
    //设置模型数据（图片名称），后续提交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.2后端

在spring配置文件中配置文件上传组件

1
2
3
4
5
6
<!--文件上传组件-->
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@RequestMapping("/upload")
public Result upload(@RequestParam("imgFile") MultipartFile imgFile){
    try {
        //获取原始文件名
        String originalFilename = imgFile.getOriginalFilename();
        int lastIndexOf = originalFilename.lastIndexOf(".");
        String substring = originalFilename.substring(lastIndexOf - 1);//.jpg
        //使用UUID随机产生文件名称，防止同名文件覆盖
        String fileName = UUID.randomUUID().toString() + substring;
        QiniuUtils.upload2Qiniu(imgFile.getBytes(),fileName);
        //将上传图片名称存入Redis，基于Redis的Set集合存储
        jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_RESOURCES,fileName);
        return new Result(true, MessageConstant.PIC_UPLOAD_SUCCESS,fileName);
    } catch (IOException e) {
        e.printStackTrace();
        return new Result(false, MessageConstant.PIC_UPLOAD_FAIL);
    }
}

5.定时任务组件Quartz

5.1前面存在的问题

前面我们已经完成了文件上传，将图片存储在了七牛云服务器中。但是这个过程存在一个问题，就是如果用户只上传了图片而没有最终保存套餐信息到我们的数据库，这时我们上传的图片就变为了垃圾图片。对于这些垃圾图片我们需要定时清理来释放磁盘空间。这就需要我们能够区分出来哪些是垃圾图片，哪些不是垃圾图片。

方案就是利用redis来保存图片名称，具体做法为：

1、当用户上传图片后，将图片名称保存到redis的一个Set集合中，例如集合名称为setmealPicResources

2、当用户添加套餐后，将图片名称保存到redis的另一个Set集合中，例如集合名称为setmealPicDbResources

3、计算setmealPicResources集合与setmealPicDbResources集合的差值，结果就是垃圾图片的名称集合，清理这些图片即可

5.2完善文件上传

配置文件spring-redis.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--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>

在health_common工程中提供Redis常量类

1
2
3
4
5
6
7
8
package com.itheima.constant;

public class RedisConstant {
    //套餐图片所有图片名称
    public static final String SETMEAL_PIC_RESOURCES = "setmealPicResources";
    //套餐图片保存在数据库中的图片名称
    public static final String SETMEAL_PIC_DB_RESOURCES = "setmealPicDbResources";
}

完善SetmealController，在文件上传成功后将图片名称保存到redis集合中（之前代码已实现）

完善SetmealServiceImpl服务类，在保存完成套餐信息后将图片名称存储到redis集合中（简单实现）

5.3Quartz介绍

Quartz是Job scheduling（作业调度）领域的一个开源项目，Quartz既可以单独使用也可以跟spring框架整合使用，在实际开发中一般会使用后者。使用Quartz可以开发一个或者多个定时任务，每个定时任务可以单独指定执行的时间，例如每隔1小时执行一次、每个月第一天上午10点执行一次、每个月最后一天下午5点执行一次等。

官网：http://www.quartz-scheduler.org/

Quartz其实和SpringTask差不多，都是通过cron表达式灵活的定义出符合要求的程序执行的时间。

这里就不过多介绍cron表达式的使用，具体参见之前写的《品优购系统开发终章—品优购系统业务分析》中的任务调度SpringTask部分。

自己编写表达式还是有一些困难的，我们可以借助一些cron表达式在线生成器来根据我们的需求生成表达式即可。

5.4定时清理垃圾图片

我们基于Quartz定时任务，通过计算redis两个集合的差值找出所有的垃圾图片，就可以将垃圾图片清理掉。

创建maven工程health_jobs，打包方式为war，导入Quartz等相关坐标，配置applicationContext-jobs.xml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?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"
       xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
							http://www.springframework.org/schema/beans/spring-beans.xsd
							http://www.springframework.org/schema/mvc
							http://www.springframework.org/schema/mvc/spring-mvc.xsd
							http://code.alibabatech.com/schema/dubbo
							http://code.alibabatech.com/schema/dubbo/dubbo.xsd
							http://www.springframework.org/schema/context
							http://www.springframework.org/schema/context/spring-context.xsd">
    <!--开启spring注解使用-->
    <context:annotation-config></context:annotation-config>
    <!--注册自定义Job-->
    <bean id="clearImgJob" class="com.itheima.jobs.ClearImgJob"></bean>

    <bean id="jobDetail"
          class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
        <!-- 注入目标对象 -->
        <property name="targetObject" ref="clearImgJob"/>
        <!-- 注入目标方法 -->
        <property name="targetMethod" value="clearImg"/>
    </bean>
    <!-- 注册一个触发器，指定任务触发的时间 -->
    <bean id="myTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean">
        <!-- 注入JobDetail -->
        <property name="jobDetail" ref="jobDetail"/>
        <!-- 指定触发的时间，基于Cron表达式 -->
        <property name="cronExpression">
            <!--
            <value>0 0 2 * * ?</value>
            -->
            <value>0/10 * * * * ?</value>
        </property>
    </bean>
    <!-- 注册一个统一的调度工厂，通过这个调度工厂调度任务 -->
    <bean id="scheduler" class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
        <!-- 注入多个触发器 -->
        <property name="triggers">
            <list>
                <ref bean="myTrigger"/>
            </list>
        </property>
    </bean>
</beans>

创建ClearImgJob定时任务类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @author JY
 * @create 2020-11-19 9:26
 */
public class ClearImgJob {
    @Autowired
    private JedisPool jedisPool;

    public void clearImg(){
        Set<String> set = jedisPool.getResource().sdiff(RedisConstant.SETMEAL_PIC_RESOURCES, RedisConstant.SETMEAL_PIC_DB_RESOURCES);
        if (set != null) {
            for (String picName : set) {
                //删除七牛云服务器上的图片
                QiniuUtils.deleteFileFromQiniu(picName);
                //从Redis集合中删除图片名称
                jedisPool.getResource().srem(RedisConstant.SETMEAL_PIC_RESOURCES,picName);
            }
        }
    }
}

预约设置

我们需要满足用户方便的管理每天的可预约人数，让用户可以通过操作Excel来方便的实现对数据库预约模块的修改。

image-20201120232113251

这里需要学习java操作Excel的工具——Apache POI。

1.Apache POI

1.1POI介绍

Apache POI是用Java编写的免费开源的跨平台的Java API，Apache POI提供API给Java程序对MicrosoftOffice格式档案读和写的功能，其中使用最多的就是使用POI操作Excel文件。

maven坐标：

1
2
3
4
5
6
7
8
9
10
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>3.14</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>3.14</version>
</dependency>

POI结构：

1
2
3
4
5
6
7
HSSF － 提供读写Microsoft Excel XLS格式档案的功能
XSSF － 提供读写Microsoft Excel OOXML XLSX格式档案的功能
HWPF － 提供读写Microsoft Word DOC格式档案的功能
HSLF － 提供读写Microsoft PowerPoint格式档案的功能
HDGF － 提供读Microsoft Visio格式档案的功能
HPBF － 提供读Microsoft Publisher格式档案的功能
HSMF － 提供读Microsoft Outlook格式档案的功能

1.2封装操作Excel工具类

因为代码冗余太严重，将常用操作封装成工具类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
package com.itheima.utils;

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.multipart.MultipartFile;

public class POIUtils {
    private final static String xls = "xls";
    private final static String xlsx = "xlsx";
    private final static String DATE_FORMAT = "yyyy/MM/dd";
    /**
     * 读入excel文件，解析后返回
     * @param file
     * @throws IOException
     */
    public static List<String[]> readExcel(MultipartFile file) throws IOException {
        //检查文件
        checkFile(file);
        //获得Workbook工作薄对象
        Workbook workbook = getWorkBook(file);
        //创建返回对象，把每行中的值作为一个数组，所有行作为一个集合返回
        List<String[]> list = new ArrayList<String[]>();
        if(workbook != null){
            for(int sheetNum = 0;sheetNum < workbook.getNumberOfSheets();sheetNum++){
                //获得当前sheet工作表
                Sheet sheet = workbook.getSheetAt(sheetNum);
                if(sheet == null){
                    continue;
                }
                //获得当前sheet的开始行
                int firstRowNum  = sheet.getFirstRowNum();
                //获得当前sheet的结束行
                int lastRowNum = sheet.getLastRowNum();
                //循环除了第一行的所有行
                for(int rowNum = firstRowNum+1;rowNum <= lastRowNum;rowNum++){
                    //获得当前行
                    Row row = sheet.getRow(rowNum);
                    if(row == null){
                        continue;
                    }
                    //获得当前行的开始列
                    int firstCellNum = row.getFirstCellNum();
                    //获得当前行的列数
                    int lastCellNum = row.getPhysicalNumberOfCells();
                    String[] cells = new String[row.getPhysicalNumberOfCells()];
                    //循环当前行
                    for(int cellNum = firstCellNum; cellNum < lastCellNum;cellNum++){
                        Cell cell = row.getCell(cellNum);
                        cells[cellNum] = getCellValue(cell);
                    }
                    list.add(cells);
                }
            }
            workbook.close();
        }
        return list;
    }

    //校验文件是否合法
    public static void checkFile(MultipartFile file) throws IOException{
        //判断文件是否存在
        if(null == file){
            throw new FileNotFoundException("文件不存在！");
        }
        //获得文件名
        String fileName = file.getOriginalFilename();
        //判断文件是否是excel文件
        if(!fileName.endsWith(xls) && !fileName.endsWith(xlsx)){
            throw new IOException(fileName + "不是excel文件");
        }
    }
    public static Workbook getWorkBook(MultipartFile file) {
        //获得文件名
        String fileName = file.getOriginalFilename();
        //创建Workbook工作薄对象，表示整个excel
        Workbook workbook = null;
        try {
            //获取excel文件的io流
            InputStream is = file.getInputStream();
            //根据文件后缀名不同(xls和xlsx)获得不同的Workbook实现类对象
            if(fileName.endsWith(xls)){
                //2003
                workbook = new HSSFWorkbook(is);
            }else if(fileName.endsWith(xlsx)){
                //2007
                workbook = new XSSFWorkbook(is);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return workbook;
    }
    public static String getCellValue(Cell cell){
        String cellValue = "";
        if(cell == null){
            return cellValue;
        }
        //如果当前单元格内容为日期类型，需要特殊处理
        String dataFormatString = cell.getCellStyle().getDataFormatString();
        if(dataFormatString.equals("m/d/yy")){
            cellValue = new SimpleDateFormat(DATE_FORMAT).format(cell.getDateCellValue());
            return cellValue;
        }
        //把数字当成String来读，避免出现1读成1.0的情况
        if(cell.getCellType() == Cell.CELL_TYPE_NUMERIC){
            cell.setCellType(Cell.CELL_TYPE_STRING);
        }
        //判断数据的类型
        switch (cell.getCellType()){
            case Cell.CELL_TYPE_NUMERIC: //数字
                cellValue = String.valueOf(cell.getNumericCellValue());
                break;
            case Cell.CELL_TYPE_STRING: //字符串
                cellValue = String.valueOf(cell.getStringCellValue());
                break;
            case Cell.CELL_TYPE_BOOLEAN: //Boolean
                cellValue = String.valueOf(cell.getBooleanCellValue());
                break;
            case Cell.CELL_TYPE_FORMULA: //公式
                cellValue = String.valueOf(cell.getCellFormula());
                break;
            case Cell.CELL_TYPE_BLANK: //空值
                cellValue = "";
                break;
            case Cell.CELL_TYPE_ERROR: //故障
                cellValue = "非法字符";
                break;
            default:
                cellValue = "未知类型";
                break;
        }
        return cellValue;
    }
}

2.通过Excel批量导入预约设置信息

批量导入预约设置信息操作过程：

1、点击模板下载按钮下载Excel模板文件
2、将预约设置信息录入到模板文件中
3、点击上传文件按钮将录入完信息的模板文件上传到服务器
4、通过POI读取上传文件的数据并保存到数据库

image-20201120235524023

2.1前端

为模板下载按钮绑定事件实现模板文件下载

1
2
3
4
5
6
7
<el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
@click="downloadTemplate()">模板下载</el-button>

//模板文件下载
downloadTemplate(){
window.location.href="../../template/ordersetting_template.xlsx";
}

使用ElementUI的上传组件实现文件上传并绑定相关事件

1
2
3
4
5
6
7
<el-upload action="/ordersetting/upload.do"
    name="excelFile"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button type="primary">上传文件</el-button>
</el-upload>

判断文件格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
//上传之前进行文件格式校验
beforeUpload(file){
    const isXLS = file.type === 'application/vnd.ms-excel';
    if(isXLS){
        return true;
    }
    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (isXLSX) {
        return true;
    }
    this.$message.error('上传文件只能是xls或者xlsx格式!');
    return false;
}

2.2后端

Controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@RequestMapping("/upload")
public Result upload(@RequestParam("excelFile") MultipartFile multipartFile){
    try {
        List<String[]> strings = POIUtils.readExcel(multipartFile);
        if(strings!=null && strings.size()>0){
            List<OrderSetting> list = new ArrayList<>();
            for (String[] string : strings) {
                OrderSetting orderSetting = new OrderSetting(new Date(string[0]),Integer.parseInt(string[1]));
                list.add(orderSetting);
            }
            orderSettingService.add(list);
        }
    } catch (IOException e) {
        e.printStackTrace();
        return new Result(false, MessageConstant.IMPORT_ORDERSETTING_FAIL);
    }
    return new Result(true, MessageConstant.IMPORT_ORDERSETTING_SUCCESS);
}

Service:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
public void add(List<OrderSetting> list) {
    if (list != null && list.size()>0) {
        for (OrderSetting orderSetting : list) {
            //检查此数据（日期）是否存在
            long count = orderSettingDao.findCountByOrderDate(orderSetting.getOrderDate());
            if (count>0){
                //已经存在，执行更新操作
                orderSettingDao.editNumberByOrderDate(orderSetting);
            }else {
                //不存在，执行添加操作
                orderSettingDao.add(orderSetting);
            }
        }
    }
}

3.日历展示预约设置信息

前面已经完成了预约设置功能，现在就需要通过日历的方式展示出来每天设置的预约人数。

在页面中已经完成了日历的动态展示，我们只需要查询当前月份的预约设置信息并展示到日历中即可，同时在日历中还需要展示已经预约的人数，效果如下：

image-20201120233037330

3.1前端

观察静态页面已有代码，发现显示效果是由leftObj来决定的。数据属性如下：

1
2
3
4
5
6
7
this.leftobj = [
    { date: 1, number: 120, reservations: 1 },
    { date: 3, number: 120, reservations: 1 },
    { date: 4, number: 120, reservations: 120 },
    { date: 6, number: 120, reservations: 1 },
    { date: 8, number: 120, reservations: 1 }
];

根据当前页面对应的月份查询数据库获取预约设置信息，将查询结果赋值给leftobj模型数据

1
2
3
4
5
6
7
8
9
10
//发送ajax请求，根据当前页面对应的月份查询预约设置信息
axios.post("/ordersetting/getOrderSettingByMonth.do?date="+this.currentYear
           +"-"+this.currentMonth).then((res)=>{
    if(res.data.flag){
        //为模型数据赋值，通过双向绑定展示到日历中
        this.leftobj = res.data.data;
    }else {
        this.$message.error(response.data.message);
    }
});

3.2后端

这里需要注意，leftObj的属性和OrderSetting的属性名不一样，所以我们需要自定义List< Map >来返回包装的正确数据。

Controller:

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/getOrderSettingByMonth")
public Result getOrderSettingByMonth(String date){//参数格式为：2019-03
    try {
        List<Map> list = orderSettingService.getOrderSettingByMonth(date);
        return new Result(true,MessageConstant.GET_ORDERSETTING_SUCCESS,list);
    } catch (Exception e) {
        e.printStackTrace();
        return new Result(true,MessageConstant.GET_ORDERSETTING_FAIL);
    }
}

Service:

这里需要注意每个月的天数都不一样，但是在数据库中，每个月都查到31号，能把这个月的数据都查完。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
public List<Map> getOrderSettingByMonth(String date) {
    String begin = date + "-1";//2019-03-1
    String end = date + "-31";
    Map map  = new HashMap();
    map.put("begin",begin);
    map.put("end",end);
    List<OrderSetting> list = orderSettingDao.getOrderSettingByMonth(map);
    List<Map> result = new ArrayList<>();
    for (OrderSetting orderSetting : list) {
        Map resultMap = new HashMap();
        resultMap.put("date",orderSetting.getOrderDate().getDate());//获得日期（几号）
        resultMap.put("number",orderSetting.getNumber());
        resultMap.put("reservations",orderSetting.getReservations());
        result.add(resultMap);
    }
    return result;
}

Dao:

查询一个月份的所有数据可以用
between 这个月第一天 and 这个月最后一天

1
2
3
4
<!--根据日期范围查询-->
<select id="getOrderSettingByMonth" parameterType="map" resultType="com.itheima.pojo.OrderSetting">
    select * from t_ordersetting where orderDate between #{begin} and #{end}
</select>

4.基于日历实现预约设置

我们也需要实现用户点击页面具体的日期修改当前日期的可预约人数，方便用户对个别有出入的日期其进行更改。

image-20201120234333575

4.1前端

这里用到ElementUI的MessageBox组件。我们从官网粘贴并修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//预约设置
handleOrderSet(day){
    //alert(this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()));
    this.$prompt('请输入可预约人数', '预约设置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]*[1-9][0-9]*$/,
        inputErrorMessage: '只能输入正整数'
    }).then(({ value }) => {
        //发送ajax请求，将输入的数据提交到Controller
        axios.post("/ordersetting/editNumberByDate.do",{
            number:value,
            orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()) //日期
        }).then((res) => {
            if(res.data.flag){
                this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                this.$message({
                    type:'success',
                    message:res.data.message
                });
            }else{
                this.$message.error(res.data.message);
            }
        });
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '取消输入'
        });
    });
}

4.2后端

Controller:

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/editNumberByDate")
public Result editNumberByDate(@RequestBody OrderSetting orderSetting){
    try {
        orderSettingService.editNumberByDate(orderSetting);
    } catch (Exception e) {
        e.printStackTrace();
        return new Result(true,MessageConstant.ORDERSETTING_FAIL);
    }
    return new Result(true,MessageConstant.ORDERSETTING_SUCCESS);
}

Service:

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public void editNumberByDate(OrderSetting orderSetting) {
    //先判断这个日期是否设置了，如果设置了就更新，没有则新增
    long count = orderSettingDao.findCountByOrderDate(orderSetting.getOrderDate());
    if(count>0){
        //当前日期已经进行了预约设置，需要进行修改操作
        orderSettingDao.editNumberByOrderDate(orderSetting);
    }else {
        //当前日期没有进行预约设置，进行添加操作
        orderSettingDao.add(orderSetting);
    }
}

结语

我什么情话都说不出来，我只想见你一面。
静下来想你，觉得一切都美好得不可思议。
——王小波《爱你就像爱生命》

强推《到了30岁还是处男，似乎会变成魔法师》，男酮狂喜😍

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家