spring腾讯对象存储和jq选座插件

1、腾讯对象存储

腾讯对象存储可以用来存储包括图片、视频和文档在内的各种文件，它提供了包括pc、移动端和网页端在内的多种应用，同时也针对主流编程语言推出了对应SDK，这里介绍如何与Java中Spring提供MultipartFile类整合。

1、引入依赖

关于spring的相关依赖就不再赘述，在maven的pom.xml文件中添加如下依赖：

 

    com.qcloud
    cos_api
    5.6.8

2、上传文件

在腾讯官方文档中提供了多种上传方式，包括本地文件上传和流上传。这里使用MultipartFile从前台接受文件，并不是本地文件，如果前一种方式需要先存储到本地再上传到腾讯云，还要根据情况是否删除刚存储的本地文件，所以推荐使用流进行上传。==这里使用图片上传为例==：

package com.woniu.movie.util;

import com.qcloud.cos.COSClient;
import com.qcloud.cos.ClientConfig;
import com.qcloud.cos.auth.BasicCOSCredentials;
import com.qcloud.cos.auth.COSCredentials;
import com.qcloud.cos.model.ObjectMetadata;
import com.qcloud.cos.model.PutObjectResult;
import com.qcloud.cos.region.Region;
import org.springframework.web.multipart.MultipartFile;

import java.io.FileInputStream;
import java.io.IOException;
import java.util.UUID;

/**
 * 上传图片到腾讯对象存储
 */
public class TencentUploadUtil {
    //存储客户端
    private static COSClient cosClient;
    // 指定要上传到的存储桶
    private static final String BUCKET_NAME = "想要上传的存储桶名字";
    //存储后图片网址
    private static final String IMG_URl = "上传至对象存储后的网址，这里不包含文件名";

    /*初始化存储对象各项参数*/
    static {
        // 1 初始化用户身份信息（secretId, secretKey）。
        String secretId = "你的secretId";
        String secretKey = "你的secretKey";
        COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
        // 2 设置 bucket 的区域, COS 地域的简称请参照 
        //https://cloud.tencent.com/document/product/436/6224
        // clientConfig 中包含了设置 region, https(默认 http), 超时, 代理等 set 方法, 
        //使用可参见源码或者常见问题 Java SDK 部分。
        Region region = new Region("ap-shanghai");
        ClientConfig clientConfig = new ClientConfig(region);
        // 3 生成 cos 客户端。
        cosClient = new COSClient(cred, clientConfig);
    }

    /**
     * 将图片对象存入腾讯对象存储服务器
     *
     * @param multipartFile 前端传来的图片文件
     * @return 返回图片在腾讯云的访问路径
     */
    public static String uploadImgToTencentCloud(MultipartFile multipartFile) throws IOException {
        //使用multipartFile.getInputStream()获得输出流 这里需要强转一下类型
        FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
        ObjectMetadata objectMetadata = new ObjectMetadata();
        // 设置输入流长度 可以从MultipartFile中获取 单位是byte
        objectMetadata.setContentLength(multipartFile.getSize());
        //生成一个唯一的uuid作为上传后的文件名
        UUID uuid = UUID.randomUUID();
        //通过MultipartFile获取从前端传过来的图片名称 
        String fileName = multipartFile.getOriginalFilename();
       //简单判断一下前端是否提交了文件
        if (multipartFile.getSize() == 0 || fileName == null || "".equals(fileName)) {
            return null;
        }
        //获取文件后缀即文件类型
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        // 设置 Content type, 默认是 application/octet-stream
        //这里是图片所以是image 后面类型由文件类型决定 常见的有png、jpg、jepg、gif等等
        objectMetadata.setContentType("image/" + suffix.substring(1));
        //将uuid和文件类型组合成新的文件名
        String newFileName = uuid.toString() + suffix;
        //将文件以新文件类型的方式上传至腾讯对象存储
        PutObjectResult putObjectResult = cosClient.putObject(BUCKET_NAME, newFileName, fileInputStream, objectMetadata);
        String etag = putObjectResult.getETag();
        //关闭输入流
        fileInputStream.close();
        //将网站路径加文件组合起来 形成一个完整的可以访问的网址
        return IMG_URl + newFileName;
    }
}

2、基于jquery的选座系统

关于这个选座系统，网上有许多教程，这里主要讲一下如何重新选择作为的行列数

var sc = $('#seat_area').seatCharts({
    //在这里不论是不是从数据查询出座位后生成座位，还是默认生成座位，在生成后，座位的排列就固定不变了
                    map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc'
                    ],
})

如果想要修改座位的排列而且不刷新页面，需要对jquery.seat-charts.min.js的源码进行修改，

(function (e) {
    e.fn.seatCharts = function (t) {
        if (this.data("seatCharts")) {/*return this.data("seatCharts")*/
            //在这里添加如下代码并屏蔽上面代码
            var ary = t.legend.items;
            ary.splice(0, ary.length);
            this.empty();
        }

这样座位列表可以随意生成了，不过由于每次生成会先清空原来座位区div内的所有内容，所以后面生成的座位列表内只有座位，像官网示例中的屏幕元素也会清除掉，可以使用

$("#seat_area").prepend("
屏幕
");

在重新生成之后添加屏幕进去