cz_health_day04

检查套餐

项目需求

完成检查套餐的新增、分页

新增时完成图片的上传，上传至七牛云

1、新增检查套餐之图片上传

　　图片/文件上传的3种方式：

• 使用nginx搭建 单机的文件存储 企业内部使用（很少见）
• 使用开源分布式文件存储系统，如Fastdfs、HDFS等 集群机器，安全
• 使用云存储，如阿里云，七牛云 互联网公司，小型服务企业，数据不敏感

　　本次方案使用七牛云

• 前端上传图片，elementUI组件具有自动上传的方法，在上传发送之前，对图片进行校验是否为以jpg结尾，图片的大小是否超过2mb，成功后执行上传方法（自动执行，不需要写ajax）
• 后端接收到图片的文件数据，使用封装的utils上传到七牛云，注意文件名的重复问题，使用UUID 产生新的名字，再将图片名称返回至前端
• 前端提示上上传成功或者上传失败

2、新增检查套餐

• 点击新建按钮，弹出添加框，同时触发查询所有的检查组的ajax，进入后端获取数据回显
• 填写数据，点击确认，发送ajax至后端，将检查套餐数据填入检查套餐表，检查组数据填入与检查套餐关联的检查组表，注意点：通过插入检查套餐时使用mybatis的selectKey语句获取检查套餐的id

3、查询所有及分页

• 前端进行页面加载，查询，页码修改时，触发查询所有检查套餐的方法
• 异步发送请求至后端，后端获取所有检查套餐数据后返回至前端

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            imageUrl: null,//模型数据，用于上传图片完成后图片预览
            activeName: 'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
            formData: {},//表单数据
            tableData: [],//添加表单窗口中检查组列表数据
            checkgroupIds: [],//添加表单窗口中检查组复选框对应id
            dialogFormVisible: false//控制添加窗口显示/隐藏
        },
        created() {
            this.findPage();
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            //这个函数中response返回的就是result对象，所以直接可以。data等等
            handleAvatarSuccess(response, file) {
                this.imageUrl = "http://qgi57u0d4.hd-bkt.clouddn.com/" + response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });

                this.formData.img = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                //判断图片是否以jpg为结尾
                const isJPG = file.type === 'image/jpeg';
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                //判断图片大小不超过2m
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //添加
            handleAdd() {
                this.dialogFormVisible = false;
                //点击确认，发送ajax请求
                axios.post("/setmeal/add.do?checkgroupIds=" + this.checkgroupIds, this.formData).then((res) => {
                    if (res.data.flag) {
                        //将正确查询的到的数据回显
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).finally(() => {
                    this.checkgroupIds = [];
                    this.formData = {};
                    this.findPage();
                })
            },
            //分页查询
            findPage() {
                let param = {
                    pageSize: this.pagination.pageSize,
                    currentPage: this.pagination.currentPage,
                    queryString: this.pagination.queryString
                }
                //异步发送信息
                axios.post("/setmeal/findPage.do", param).then((res) => {
                    this.dataList = res.data.rows;
                    this.pagination.total = res.data.total;
                })
            },
            // 重置表单
            resetForm() {
                this.formData = {};
                this.checkgroupIds = [];
            },
            // 弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;//弹出添加窗口
                this.resetForm();
                this.imageUrl = null;//点击新建每次都是空的，没有加载图片
                this.activeName = 'first';//设置检查套餐为默认选中
                //发送ajax回显检查组的数据
                axios.get("/checkgroup/findAll.do").then((res) => {
                    if (res.data.flag) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            }
        }
    })
</script>

mybatis中获取插入前的数据id的SQL语句

select * from t_setmeal
        <if test="value != null and value.length > 0">
        where code = #{value} or name = #{value} or helpCode = #{value}
         </if>

七牛云上传的自定义工具

/**
 * 七牛云工具类
 */
public class QiniuUtils {
    public  static String accessKey = "ZY1m8Cq8qhmuciSmVPSZJf2FqI6HqPJi9zbynHQx";
    public  static String secretKey = "j9cxpaEbR-ksDCK0oDYHybqRgfR_K-xZY-UjCbJp";
    public  static String bucket = "babymyfree";

    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());
        }
    }
}