refactor(cutejava-framework):重构项目基础框架

- 优化了多个类的代码结构和注释
- 添加了新的工具类和配置类
- 调整了部分功能实现方式
- 统一了代码格式和命名规范
- 删除了七牛云存储
- 新增了Minio存储

cutejava-front/src/api/system/ossStorage.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/ossStorage/uploadFile',
+    method: 'post',
+    data: data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/ossStorage/removeFileByIds',
+    method: 'post',
+    data: ids
+  })
+}
+
+export default { add, del }

cutejava-front/src/store/getters.js

@@ -14,8 +14,8 @@ const getters = {
   imagesUploadApi: state => state.api.imagesUploadApi,
   baseApi: state => state.api.baseApi,
   fileUploadApi: state => state.api.fileUploadApi,
+  ossUploadApi: state => state.api.ossUploadApi,
   updateAvatarApi: state => state.api.updateAvatarApi,
-  qiNiuUploadApi: state => state.api.qiNiuUploadApi,
   druidSqlApi: state => state.api.druidSqlApi,
   swaggerApi: state => state.api.swaggerApi,
   websocketApi: state => state.api.websocketApi,

cutejava-front/src/store/modules/api.js

@@ -6,8 +6,6 @@ const api = {
     imagesUploadApi: baseUrl + '/api/localStorage/uploadPicture',
     // 修改头像
     updateAvatarApi: baseUrl + '/api/user/modifyUserAvatar',
-    // 上传文件到七牛云
-    qiNiuUploadApi: baseUrl + '/api/qiNiuContent/uploadFile',
     // Sql 监控
     druidSqlApi: baseUrl + '/druid/index.html',
     // websocket
@@ -16,6 +14,8 @@ const api = {
     swaggerApi: baseUrl + '/doc.html',
     // 文件上传
     fileUploadApi: baseUrl + '/api/localStorage/uploadFile',
+    // oss上传
+    ossUploadApi: baseUrl + '/api/ossStorage/uploadFile',
     // baseUrl，
     baseApi: baseUrl
   }

cutejava-front/src/views/system/storage/index.vue

@@ -1,31 +1,31 @@
 <template>
   <el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
-    <el-tab-pane label="本地存储" name="first">
+    <el-tab-pane label="本地存储" name="local">
       <Local ref="local" />
     </el-tab-pane>
-    <el-tab-pane label="七牛云存储" name="second">
-      <QiNiu ref="qiNiu" />
+    <el-tab-pane label="OSS存储" name="oss">
+      <Oss ref="oss" />
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <script>
-import QiNiu from './qiniu/index.vue'
 import Local from './local/index.vue'
+import Oss from './oss/index.vue'
 export default {
   name: 'Storage',
-  components: { QiNiu, Local },
+  components: { Local, Oss },
   data() {
     return {
-      activeName: 'first'
+      activeName: 'local'
     }
   },
   methods: {
     tabClick(name) {
-      if (this.activeName === 'first') {
+      if (this.activeName === 'local') {
         this.$refs.local.crud.toQuery()
       } else {
-        this.$refs.qiNiu.crud.toQuery()
+        this.$refs.oss.crud.toQuery()
       }
     }
   }

cutejava-front/src/views/system/storage/oss/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="app-container" style="padding: 8px;">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input
+          v-model="query.blurry"
+          clearable
+          size="small"
+          placeholder="输入内容模糊搜索"
+          style="width: 200px;"
+          class="filter-item"
+          @keyup.enter.native="crud.toQuery"
+        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <!-- 新增 -->
+        <el-button
+          slot="left"
+          v-permission="['admin','storage:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-upload"
+          @click="crud.toAdd"
+        >上传
+        </el-button>
+      </crudOperation>
+    </div>
+    <!--表单组件-->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.add ? '文件上传' : '编辑文件'"
+      width="500px"
+    >
+      <el-form ref="form" :model="form" size="small" label-width="80px">
+        <el-form-item label="文件名">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <!--   上传文件   -->
+        <el-form-item v-if="crud.status.add" label="上传">
+          <el-upload
+            ref="upload"
+            :limit="1"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :headers="headers"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :action="ossUploadApi + '?name=' + form.name"
+          >
+            <div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
+            <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
+        <el-button v-else :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      style="width: 100%;"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="serviceType" label="服务提供商" />
+      <el-table-column prop="bucketName" label="存储桶名称" />
+      <el-table-column prop="fileName" label="文件名称" />
+      <el-table-column prop="fileSizeDesc" label="文件大小" />
+      <el-table-column prop="fileMime" label="文件类型" />
+      <el-table-column prop="fileMd5" label="文件Md5" width="260" />
+      <el-table-column prop="createBy" label="操作人" />
+      <el-table-column prop="createTime" label="创建日期" />
+      <el-table-column label="操作" fixed="right">
+        <template slot-scope="scope">
+          <el-button id="ossFileUrl" type="text" @click="handleCopyFileUrl(scope.row.fileUrl)">复制链接</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+import crudFile from '@/api/system/ossStorage'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+import Clipboard from 'clipboard'
+import { Message } from 'element-ui'
+
+const defaultForm = { id: null, name: '' }
+export default {
+  components: { pagination, crudOperation, rrOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '文件', url: 'api/ossStorage', crudMethod: { ...crudFile }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      delAllLoading: false,
+      loading: false,
+      headers: { 'Authorization': getToken() },
+      permission: {
+        edit: ['admin', 'storage:edit'],
+        del: ['admin', 'storage:del']
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'ossUploadApi'
+    ])
+  },
+  created() {
+    this.crud.optShow.add = false
+  },
+  methods: {
+    // 上传文件
+    upload() {
+      this.$refs.upload.submit()
+    },
+    beforeUpload(file) {
+      let isLt2M = true
+      isLt2M = file.size / 1024 / 1024 < 100
+      if (!isLt2M) {
+        this.loading = false
+        this.$message.error('上传文件大小不能超过 100MB')
+      }
+      this.form.name = file.name
+      return isLt2M
+    },
+    handleSuccess(response, file, fileList) {
+      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      this.$refs.upload.clearFiles()
+      this.crud.status.add = CRUD.STATUS.NORMAL
+      this.crud.resetForm()
+      this.crud.toQuery()
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+      this.loading = false
+    },
+    handleCopyFileUrl(fileUrl) {
+      const clipboard = new Clipboard('#ossFileUrl', {
+        text(trigger) {
+          return fileUrl
+        }
+      })
+      // 复制成功
+      clipboard.on('success', (e) => {
+        Message.success('复制成功')
+        clipboard.destroy()
+      })
+      // //复制失败
+      clipboard.on('error', (e) => {
+        Message.error('复制失败')
+        clipboard.destroy()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-image__error, .el-image__placeholder {
+  background: none;
+}
+
+::v-deep .el-image-viewer__wrapper {
+  top: 55px;
+}
+</style>

cutejava-front/src/views/system/storage/qiniu/form.vue

@@ -1,98 +0,0 @@
-<template>
-  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="七牛云配置" append-to-body width="580px">
-    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="110px">
-      <el-form-item label="Access Key" prop="accessKey">
-        <el-input v-model="form.accessKey" style="width: 95%" placeholder="accessKey，在安全中心，秘钥管理中查看" />
-      </el-form-item>
-      <el-form-item label="Secret Key" prop="secretKey">
-        <el-input v-model="form.secretKey" type="password" style="width: 95%;" placeholder="secretKey，在安全中心，秘钥管理中查看" />
-      </el-form-item>
-      <el-form-item label="空间名称" prop="bucket">
-        <el-input v-model="form.bucket" style="width: 95%;" placeholder="存储空间名称作为唯一的 Bucket 识别符" />
-      </el-form-item>
-      <el-form-item label="外链域名" prop="host">
-        <el-input v-model="form.host" style="width: 95%;" placeholder="外链域名，可自定义，需在七牛云绑定" />
-      </el-form-item>
-      <el-form-item label="存储区域">
-        <el-select v-model="form.zone" placeholder="请选择存储区域">
-          <el-option
-            v-for="item in zones"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="空间类型" prop="type">
-        <el-radio v-model="form.type" label="公开">公开</el-radio>
-        <el-radio v-model="form.type" label="私有">私有</el-radio>
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="dialog = false">取消</el-button>
-      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { queryQiniuConfig, modifyQiniuConfig } from '@/api/system/qiniu'
-export default {
-  data() {
-    return {
-      zones: ['华东', '华北', '东南亚'], dialog: false,
-      loading: false, form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
-      rules: {
-        accessKey: [
-          { required: true, message: '请输入accessKey', trigger: 'blur' }
-        ],
-        secretKey: [
-          { required: true, message: '请输入secretKey', trigger: 'blur' }
-        ],
-        bucket: [
-          { required: true, message: '请输入空间名称', trigger: 'blur' }
-        ],
-        host: [
-          { required: true, message: '请输入外链域名', trigger: 'blur' }
-        ],
-        type: [
-          { required: true, message: '空间类型不能为空', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    init() {
-      queryQiniuConfig().then(res => {
-        this.form = res
-      })
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          modifyQiniuConfig(this.form).then(res => {
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.$parent.crud.toQuery()
-            this.loading = false
-            this.dialog = false
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

cutejava-front/src/views/system/storage/qiniu/index.vue

@@ -1,189 +0,0 @@
-<template>
-  <div class="app-container" style="padding: 8px;">
-    <!--表单组件-->
-    <eForm ref="form" />
-    <!-- 工具栏 -->
-    <div class="head-container">
-      <div v-if="crud.props.searchToggle">
-        <!-- 搜索 -->
-        <el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-        <date-range-picker v-model="query.createTime" class="date-item" />
-        <rrOperation />
-      </div>
-      <crudOperation :permission="permission">
-        <template slot="left">
-          <!-- 上传 -->
-          <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传</el-button>
-          <!-- 同步 -->
-          <el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步</el-button>
-          <!-- 配置 -->
-          <el-button
-            class="filter-item"
-            size="mini"
-            type="success"
-            icon="el-icon-s-tools"
-            @click="doConfig"
-          >配置</el-button>
-        </template>
-      </crudOperation>
-      <!-- 文件上传 -->
-      <el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
-        <el-upload
-          :before-remove="handleBeforeRemove"
-          :on-success="handleSuccess"
-          :on-error="handleError"
-          :file-list="fileList"
-          :headers="headers"
-          :action="qiNiuUploadApi"
-          class="upload-demo"
-          multiple
-        >
-          <el-button size="small" type="primary">点击上传</el-button>
-          <div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
-        </el-upload>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="doSubmit">确认</el-button>
-        </div>
-      </el-dialog>
-      <!--表格渲染-->
-      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="name" :show-overflow-tooltip="true" label="文件名">
-          <template slot-scope="scope">
-            <a href="JavaScript:" class="el-link el-link--primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
-          </template>
-        </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型" @selection-change="crud.selectionChangeHandler" />
-        <el-table-column prop="bucket" label="空间名称" />
-        <el-table-column prop="size" label="文件大小" />
-        <el-table-column prop="type" label="空间类型" />
-        <el-table-column prop="updateTime" label="创建日期" />
-      </el-table>
-      <!--分页组件-->
-      <pagination />
-    </div>
-  </div>
-</template>
-
-<script>
-import crudQiNiu from '@/api/system/qiniu'
-import { mapGetters } from 'vuex'
-import { getToken } from '@/utils/auth'
-import eForm from './form.vue'
-import CRUD, { presenter, header, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
-import pagination from '@crud/Pagination'
-import DateRangePicker from '@/components/DateRangePicker'
-
-export default {
-  components: { eForm, pagination, crudOperation, rrOperation, DateRangePicker },
-  cruds() {
-    return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }})
-  },
-  mixins: [presenter(), header(), crud()],
-  data() {
-    return {
-      permission: {
-        del: ['admin', 'storage:del']
-      },
-      title: '文件', dialog: false,
-      icon: 'el-icon-refresh',
-      url: '', headers: { 'Authorization': getToken() },
-      dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'qiNiuUploadApi'
-    ])
-  },
-  watch: {
-    url(newVal, oldVal) {
-      if (newVal && this.newWin) {
-        this.newWin.sessionStorage.clear()
-        this.newWin.location.href = newVal
-        // 重定向后把url和newWin重置
-        this.url = ''
-        this.newWin = null
-      }
-    }
-  },
-  created() {
-    this.crud.optShow.add = false
-    this.crud.optShow.edit = false
-  },
-  methods: {
-    // 七牛云配置
-    doConfig() {
-      const _this = this.$refs.form
-      _this.init()
-      _this.dialog = true
-    },
-    handleSuccess(response, file, fileList) {
-      const uid = file.uid
-      const id = response.id
-      this.files.push({ uid, id })
-    },
-    handleBeforeRemove(file, fileList) {
-      for (let i = 0; i < this.files.length; i++) {
-        if (this.files[i].uid === file.uid) {
-          crudQiNiu.del([this.files[i].id]).then(res => {})
-          return true
-        }
-      }
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    // 刷新列表数据
-    doSubmit() {
-      this.fileList = []
-      this.dialogVisible = false
-      this.dialogImageUrl = ''
-      this.dialog = false
-      this.crud.toQuery()
-    },
-    // 监听上传失败
-    handleError(e, file, fileList) {
-      const msg = JSON.parse(e.message)
-      this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
-    },
-    // 下载文件
-    download(id) {
-      this.downloadLoading = true
-      // 先打开一个空的新窗口，再请求
-      this.newWin = window.open()
-      crudQiNiu.createFilePreviewUrl(id).then(res => {
-        this.downloadLoading = false
-        this.url = res.url
-      }).catch(err => {
-        this.downloadLoading = false
-        console.log(err.response.data.message)
-      })
-    },
-    // 同步数据
-    synchronize() {
-      this.icon = 'el-icon-loading'
-      crudQiNiu.sync().then(res => {
-        this.icon = 'el-icon-refresh'
-        this.$message({
-          showClose: true,
-          message: '数据同步成功',
-          type: 'success',
-          duration: 1500
-        })
-        this.crud.toQuery()
-      }).catch(err => {
-        this.icon = 'el-icon-refresh'
-        console.log(err.response.data.message)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>