v1.3 版本发布,代码同步后端v1.3版本

2018-12-31 17:07:02 +08:00
parent 7f2e4ed3f9
commit c97e401918
38 changed files with 1338 additions and 40 deletions
--- a/README.md
+++ b/README.md
@@ -22,4 +22,10 @@ npm run dev

 # 构建生产环境
 npm run build
-```
+```
+
+#### 反馈交流
+
+- QQ交流群：<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=90830191a40600e3a07acdcc4864890fca50c8e3ca1772e7e288a561d576f6c4"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Quella/el-admin" title="Quella/el-admin"></a>
+
+- 作者邮箱：elunez@qq.com
--- a/src/api/alipay.js
+++ b/src/api/alipay.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function get() {
+  return request({
+    url: 'api/aliPay',
+    method: 'get'
+  })
+}
+
+export function update(data) {
+  return request({
+    url: 'api/aliPay',
+    data,
+    method: 'put'
+  })
+}
+
+// 支付
+export function toAliPay(url, data) {
+  return request({
+    url: 'api/' + url,
+    data,
+    method: 'post'
+  })
+}
--- a/src/api/code.js
+++ b/src/api/code.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function resetEmail(data) {
+  return request({
+    url: 'api/code/resetEmail',
+    method: 'post',
+    data
+  })
+}
+
+export function updatePass(pass) {
+  return request({
+    url: 'api/users/updatePass/' + pass,
+    method: 'get'
+  })
+}
--- a/src/api/picture.js
+++ b/src/api/picture.js
@@ -1,13 +1,5 @@
 import request from '@/utils/request'

-export function uoload(data) {
-  return request({
-    url: 'api/pictures',
-    method: 'post',
-    data
-  })
-}
-
 export function del(id) {
  return request({
    url: 'api/pictures/' + id,
--- a/src/api/qiniu.js
+++ b/src/api/qiniu.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function get() {
+  return request({
+    url: 'api/qiNiuConfig',
+    method: 'get'
+  })
+}
+
+export function update(data) {
+  return request({
+    url: 'api/qiNiuConfig',
+    data,
+    method: 'put'
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/qiNiuContent/' + id,
+    method: 'delete'
+  })
+}
+
+export function download(id) {
+  return request({
+    url: 'api/qiNiuContent/download/' + id,
+    method: 'get'
+  })
+}
+
+export function sync() {
+  return request({
+    url: 'api/qiNiuContent/synchronize',
+    method: 'post'
+  })
+}
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -22,3 +22,26 @@ export function edit(data) {
    data
  })
 }
+
+export function validPass(pass) {
+  return request({
+    url: 'api/users/validPass/' + pass,
+    method: 'get'
+  })
+}
+
+export function updatePass(pass) {
+  return request({
+    url: 'api/users/updatePass/' + pass,
+    method: 'get'
+  })
+}
+
+export function updateEmail(code, data) {
+  return request({
+    url: 'api/users/updateEmail/' + code,
+    method: 'post',
+    data
+  })
+}
+
--- a/src/icons/svg/alipay.svg
+++ b/src/icons/svg/alipay.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546239206365" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1468" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M907 378.05l-12.4-14.33c-61-70.41-166.93-177.81-236.2-239.4l-14.12-12.58C609.07 80.37 562.07 63.09 512 63.09s-97.08 17.28-132.32 48.65l-14.12 12.57c-69.28 61.61-175.24 169-236.2 239.41l-12.41 14.33c-63.92 73.87-63.92 194 0 267.87l12.41 14.33C190.24 730.6 296.2 838 365.54 899.69l14.14 12.57c35.24 31.37 82.23 48.65 132.32 48.65s97.06-17.28 132.32-48.65l14.13-12.57 8.15-7.25c21.93-19.46 31.93-28.35 62.69-58.93l7.27-7.36-1.16-1.22a28.35 28.35 0 0 0-45.87-32.14c-2.92 2.78-43.63 41.53-68.73 63.91l-14.1 12.56c-24.89 22.1-58.53 34.28-94.7 34.28s-69.82-12.19-94.69-34.31l-14.14-12.58c-67.85-60.34-171.47-165.38-231-234.14l-12.4-14.32c-21.73-25.12-33.7-59.29-33.7-96.2s12-71.07 33.7-96.17l12.41-14.33c59.5-68.75 163.12-173.79 231-234.15l14.1-12.57c24.86-22.12 58.49-34.31 94.68-34.31s69.83 12.19 94.7 34.3l14.12 12.58c67.86 60.37 171.49 165.41 231 234.14l12.39 14.34c45.22 52.21 45.34 143.76 0.26 192.07l-7.15 7.69c-20.35 21.94-32.64 35.19-45.62 39.1-12.3 3.71-27.89-0.23-57.53-14.54-49.55-23.94-119.64-64-144-78 9.87-19.61 32.46-67.6 43.11-115.62l2.86-12.87H534.5v-15.06h154.78v-57.37H534.5v-72.41h-56.89v72.41H322.83v57.37h154.78v15.05H358.54V491H573c-4.63 14.52-13.16 32.57-19.19 44.37-22.13-8.73-80.75-29.33-141-29.33-37.94 0-69.92 10.28-92.49 29.71-22.37 19.27-34.19 46-34.19 77.42s11.32 58.29 32.75 77.74c21.9 19.89 53 30.41 90 30.41 42.76 0 87.09-19 128.18-54.78a326.76 326.76 0 0 0 43.61-46.35c22.9 12.75 90 50 152.61 83.47 40.83 21.85 69.5 26.18 95.87 14.47 25.09-11.14 47.07-36.53 77.49-71.68l0.47-0.54C971 572.07 971 451.9 907 378.05zM407.83 662c-60.15 0-64.83-37.38-64.83-48.82a48.21 48.21 0 0 1 12.15-31.36c11.06-12.2 28.45-18.39 51.69-18.39 50 0 95 17.21 115.39 26.35C503.71 611.69 456 662 407.83 662z" p-id="1469"></path></svg>
--- a/src/icons/svg/qiniu.svg
+++ b/src/icons/svg/qiniu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546225865881" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1276" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M892.928 499.712c-45.056-45.056-116.736-45.056-161.792 0-36.864 36.864-43.008 92.16-20.48 135.168L602.112 743.424c-51.2 51.2-137.216 45.056-194.56-10.24s-61.44-143.36-10.24-194.56L522.24 413.696l-45.056-45.056-124.928 124.928c-75.776 75.776-71.68 204.8 10.24 286.72 43.008 43.008 98.304 65.536 153.6 65.536 49.152 0 96.256-18.432 133.12-53.248L757.76 684.032c16.384 8.192 34.816 14.336 55.296 14.336 28.672 0 59.392-10.24 79.872-32.768 45.056-49.152 45.056-122.88 0-165.888zM847.872 614.4c-18.432 18.432-51.2 18.432-69.632 0-18.432-18.432-18.432-51.2 0-69.632 10.24-10.24 22.528-14.336 34.816-14.336s24.576 4.096 34.816 14.336c18.432 18.432 18.432 51.2 0 69.632z" fill="#bfbfbf" p-id="1277"></path><path d="M296.96 372.736l108.544-108.544c51.2-51.2 137.216-45.056 194.56 10.24 26.624 26.624 43.008 63.488 45.056 100.352 2.048 36.864-10.24 69.632-34.816 94.208L485.376 593.92l45.056 45.056L655.36 514.048c36.864-36.864 55.296-88.064 53.248-141.312-2.048-53.248-24.576-104.448-63.488-143.36-81.92-81.92-208.896-86.016-286.72-10.24L249.856 327.68c-43.008-22.528-98.304-16.384-135.168 20.48-45.056 45.056-45.056 116.736 0 161.792 22.528 22.528 51.2 32.768 79.872 32.768s59.392-10.24 79.872-32.768c38.912-38.912 45.056-94.208 22.528-137.216z m-65.536 90.112c-18.432 18.432-51.2 18.432-69.632 0-18.432-18.432-18.432-51.2 0-69.632 10.24-10.24 22.528-14.336 34.816-14.336 12.288 0 24.576 4.096 34.816 14.336 18.432 18.432 18.432 49.152 0 69.632z" fill="#bfbfbf" p-id="1278"></path></svg>
--- a/src/permission.js
+++ b/src/permission.js
@@ -20,8 +20,8 @@ function hasPermission(roles, permissionRoles) {

 router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
-  if (getToken()) { // determine if there has token
-    /* has token*/
+  if (getToken()) {
+    // 已登录且要跳转的页面是登录页
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -46,6 +46,20 @@ export const constantRouterMap = [
        meta: { title: '首页', icon: 'index', noCache: true }
      }
    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'center',
+        component: () => import('@/views/system/user/center'),
+        name: '个人中心',
+        meta: { title: '个人中心', icon: 'user' }
+      }
+    ]
  }
  // { path: '*', redirect: '/404', hidden: true }
 ]
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -6,10 +6,14 @@ const getters = {
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  name: state => state.user.name,
+  createTime: state => state.user.createTime,
+  email: state => state.user.email,
  roles: state => state.user.roles,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters,
  socketApi: state => state.api.socketApi,
-  imagesUploadApi: state => state.api.imagesUploadApi
+  imagesUploadApi: state => state.api.imagesUploadApi,
+  updateAvatarApi: state => state.api.updateAvatarApi,
+  qiNiuUploadApi: state => state.api.qiNiuUploadApi
 }
 export default getters
--- a/src/store/modules/api.js
+++ b/src/store/modules/api.js
@@ -1,8 +1,14 @@
 const baseUrl = process.env.BASE_API
 const api = {
  state: {
+    // 实时控制台
    socketApi: baseUrl + '/websocket?token=kl',
-    imagesUploadApi: baseUrl + '/api/pictures'
+    // 图片上传
+    imagesUploadApi: baseUrl + '/api/pictures',
+    // 修改头像
+    updateAvatarApi: baseUrl + '/api/users/updateAvatar',
+    // 上传文件到七牛云
+    qiNiuUploadApi: baseUrl + '/api/qiNiuContent'
  }
 }

--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,11 +1,14 @@
 import { login, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import { parseTime } from '@/utils/index'

 const user = {
  state: {
    token: getToken(),
    name: '',
+    email: '',
    avatar: '',
+    createTime: '',
    roles: []
  },

@@ -21,6 +24,12 @@ const user = {
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
+    },
+    SET_CREATE_TIME: (state, createTime) => {
+      state.createTime = createTime
+    },
+    SET_EMAIL: (state, email) => {
+      state.email = email
    }
  },

@@ -46,6 +55,8 @@ const user = {
          commit('SET_ROLES', res.roles)
          commit('SET_NAME', res.username)
          commit('SET_AVATAR', res.avatar)
+          commit('SET_EMAIL', res.email)
+          commit('SET_CREATE_TIME', parseTime(res.createTime))
          resolve(res)
        }).catch(error => {
          reject(error)
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -15,7 +15,7 @@ export function parseTime(time) {
    var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    // 拼接
-    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+    return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds
  } else {
    return ''
  }
@@ -93,3 +93,26 @@ export function debounce(func, wait, immediate) {
 export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
 }
+
+// 替换邮箱字符
+export function regEmail(email) {
+  if (String(email).indexOf('@') > 0) {
+    const str = email.split('@')
+    let _s = ''
+    if (str[0].length > 3) {
+      for (var i = 0; i < str[0].length - 3; i++) {
+        _s += '*'
+      }
+    }
+    var new_email = str[0].substr(0, 3) + _s + '@' + str[1]
+  }
+  return new_email
+}
+
+// 替换手机字符
+export function regMobile(mobile) {
+  if (mobile.length > 7) {
+    var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
+  }
+  return new_mobile
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import router from '@/router'
 import { Notification, MessageBox } from 'element-ui'
 import store from '../store'
 import { getToken } from '@/utils/auth'
@@ -51,9 +52,9 @@ service.interceptors.response.use(
        return Promise.reject(error)
      }
    }
-    if (code === 403 || code === 401) {
+    if (code === 401) {
      MessageBox.confirm(
-        'Token 无效或已经过期，你可以取消继续留在该页面，或者重新登录',
+        '登录状态已失效，你可以取消继续留在该页面，或者重新登录',
        '提示',
        {
          confirmButtonText: '重新登录',
@@ -65,6 +66,8 @@ service.interceptors.response.use(
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      })
+    } else if (code === 403) {
+      router.push({ path: '/401' })
    } else {
      const errorMsg = error.response.data.message
      if (errorMsg !== undefined) {
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -1,10 +1,9 @@
 <template>
  <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
    <el-row>
      <el-col :span="12">
        <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
+        图片来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
        <h2>你没有权限去该页面</h2>
        <h6>如有不满请联系你领导</h6>
        <ul class="list-unstyled">
@@ -12,7 +11,7 @@
          <li class="link-type">
            <router-link to="/dashboard">回首页</router-link>
          </li>
-          <li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
+          <li class="link-type"><a href="https://www.jianshu.com/">随便看看</a></li>
          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
        </ul>
      </el-col>
@@ -52,7 +51,7 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
  .errPage-container {
-    width: 800px;
+    width: 600px;
    max-width: 100%;
    margin: 100px auto;
    .pan-back-btn {
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -21,11 +21,11 @@
              首页
            </el-dropdown-item>
          </router-link>
-          <a target="_blank" href="https://github.com/elunez/eladmin">
+          <router-link to="/user/center">
            <el-dropdown-item>
-              项目地址
+              个人中心
            </el-dropdown-item>
-          </a>
+          </router-link>
          <el-dropdown-item divided>
            <span style="display:block;" @click="logout">退出登录</span>
          </el-dropdown-item>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -37,7 +37,6 @@

 <script>
 import { md5 } from '@/utils/md5'
-
 export default {
  name: 'Login',
  data() {
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -22,7 +22,7 @@
          <span v-else class="badge">{{ scope.row.logType }}</span>
        </template>
      </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="160px">
+      <el-table-column prop="createTime" label="创建日期" width="180px">
        <template slot-scope="scope">
          <span>{{ time(scope.row.createTime) }}</span>
        </template>
--- a/src/views/monitor/log/msg.vue
+++ b/src/views/monitor/log/msg.vue
@@ -18,7 +18,6 @@
        </span>
        <span style="color: #DE00CC">{{ item.className+' ' }}</span>
        <span v-html="item.body"/>
-        <span>{{ item.exception }}</span>
      </div>
    </div>
  </div>
@@ -34,7 +33,7 @@ export default {
  data() {
    return {
      height: document.documentElement.clientHeight - 132 + 'px;',
-      data: [{ name: 'elAdmin-', timestamp: parseTime(new Date()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~', exception: '' }],
+      data: [{ name: 'elAdmin-', timestamp: parseTime(new Date()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~' }],
      // level
      INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000'
    }
@@ -80,7 +79,6 @@ export default {
      }, 5000)
    },
    connection(_this) {
-      // 建立连接对象，注意部署到线上后也要修改对应的地址
      const socket = new SockJS(this.socketApi)// 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket)
--- a/src/views/system/user/center.vue
+++ b/src/views/system/user/center.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="app-container">
+    <div id="content-main" :style="'width:'+width">
+      <el-card shadow="never" class="box-card user-info">
+        <div class="avatar-content">
+          <el-upload
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :headers="headers"
+            :action="updateAvatarApi"
+            class="avatar-uploader">
+            <img v-if="avatar" :src="avatar" title="点击上传头像" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+          </el-upload>
+        </div>
+        <div class="user-info-content">
+          <div>登录账号：{{ name }}</div>
+          <div>注册时间：{{ createTime }}</div>
+          <div>账号状态：<span style="color: #909399">正常</span></div>
+        </div>
+      </el-card>
+
+      <el-card shadow="never" class="box-card reset-pass">
+        <h4 class="account-label-icon">登录密码：</h4>
+        <updatePass/>
+        <p>安全性高的密码可使账号更安全，建议设置同时包含字母，数字，符号的密码。</p>
+      </el-card>
+
+      <el-card shadow="never" class="box-card reset-email">
+        <h4 class="account-label-icon">邮箱验证：</h4>
+        <updateEmail :email="email"/>
+        <p>你的邮箱：{{ formatEmail(email) }} </p>
+        <h4>绑定邮箱可用于</h4>
+        <ul>
+          <li>安全管理，密码重置与修改</li>
+          <li>账号使用，使用邮箱登录系统</li>
+          <li>站内通知，站内信接收</li>
+        </ul>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { regEmail } from '@/utils/index'
+import updatePass from './center/updatePass'
+import updateEmail from './center/updateEmail'
+import { getToken } from '@/utils/auth'
+import store from '@/store'
+export default {
+  name: 'Center',
+  components: { updatePass, updateEmail },
+  data() {
+    return {
+      width: document.documentElement.clientWidth - 180 + 'px;',
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar',
+      'name',
+      'email',
+      'createTime',
+      'updateAvatarApi'
+    ])
+  },
+  methods: {
+    formatEmail(mail) {
+      return regEmail(mail)
+    },
+    handleSuccess(response, file, fileList) {
+      this.$notify({
+        title: '头像修改成功',
+        type: 'success',
+        duration: 2500
+      })
+      store.dispatch('GetInfo').then(() => {})
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.box-card{
+  border: 0px;
+  border-bottom: 1px solid #ECEDFE;
+  border-radius: unset;
+  h4{
+    height: 26px;
+    margin: 0 0 7px;
+    line-height: 26px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: #444242;
+    display: inline-block;
+  }
+  p{
+    font-family: Lantinghei;
+    font-size: 90%;
+    color: #747474;
+  }
+  ul{
+    padding: 0;
+    margin: 7px 0 0;
+    list-style: none;
+    font-size: 80%;
+  }
+  li {
+    float: left;
+    margin: 0 30px 10px 0!important;
+  }
+  li:before {
+    width: 8px;
+    height: 8px;
+    background-color: #52acd9;
+    color: #52acd9;
+    display: inline-block;
+    border-radius: 50%;
+    margin-right: 5px;
+    content: '';
+    box-sizing: border-box;
+  }
+}
+
+.user-info{
+  height: 170px;
+}
+
+.reset-email{
+  border-bottom: 0px;
+}
+
+.avatar-content, .user-info-content {
+  float: left;
+}
+.user-info-content{
+  font-family: Lantinghei;
+  position: relative;
+  font-size: 14px;
+  margin: 25px;
+  div{
+    margin-bottom: 15px;
+  }
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+  border-radius: 50%;
+}
+</style>
--- a/src/views/system/user/center/updateEmail.vue
+++ b/src/views/system/user/center/updateEmail.vue
@@ -0,0 +1,150 @@
+<template>
+  <div style="display: inline-block">
+    <el-button size="mini" class="button" type="info" @click="dialog = true">修改</el-button>
+    <el-dialog :visible.sync="dialog" :title="title" width="475px" @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="新邮箱" prop="email">
+          <el-input v-model="form.email" auto-complete="on" style="width: 200px;"/>
+          <el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{ buttonName }}</el-button>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input v-model="form.code" style="width: 320px;"/>
+        </el-form-item>
+        <el-form-item label="当前密码" prop="pass">
+          <el-input v-model="form.pass" type="password" style="width: 320px;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { md5 } from '@/utils/md5'
+import { validatEmail } from '@/utils/validate'
+import { validPass, updateEmail } from '@/api/user'
+import { resetEmail } from '@/api/code'
+export default {
+  props: {
+    email: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    const validatePass = (rule, value, callback) => {
+      validPass(md5(value)).then(res => {
+        if (res.status === 200) {
+          callback()
+        } else {
+          callback(new Error('密码错误，请重新输入'))
+        }
+      })
+    }
+    const validMail = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('新邮箱不能为空'))
+      } else if (value === this.email) {
+        callback(new Error('新邮箱不能与旧邮箱相同'))
+      } else if (validatEmail(value)) {
+        callback()
+      } else {
+        callback(new Error('邮箱格式错误'))
+      }
+    }
+    return {
+      loading: false, dialog: false, title: '修改邮箱', form: { pass: '', email: '', code: '' },
+      user: { email: '', password: '' }, codeLoading: false,
+      codeData: { type: 'email', value: '' },
+      buttonName: '获取验证码', isDisabled: false, time: 60,
+      rules: {
+        pass: [
+          { required: true, validator: validatePass, trigger: 'blur' }
+        ],
+        email: [
+          { required: true, validator: validMail, trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '验证码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    sendCode() {
+      if (this.form.email && this.form.email !== this.email) {
+        this.codeLoading = true
+        this.buttonName = '验证码发送中'
+        this.codeData.value = this.form.email
+        const _this = this
+        resetEmail(this.codeData).then(res => {
+          this.$message({
+            showClose: true,
+            message: '发送成功，有效期5分钟',
+            type: 'success'
+          })
+          this.codeLoading = false
+          this.isDisabled = true
+          this.buttonName = this.time-- + '秒后重新发送'
+          this.timer = window.setInterval(function() {
+            _this.buttonName = _this.time + '秒后重新发送'
+            --_this.time
+            if (_this.time < 0) {
+              _this.buttonName = '重新发送'
+              _this.time = 60
+              _this.isDisabled = false
+              clearInterval(this.timer)
+            }
+          }, 1000)
+        }).catch(err => {
+          this.codeLoading = false
+          console.log(err.response.data.message)
+        })
+      }
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.user = { email: this.form.email, password: md5(this.form.pass) }
+          updateEmail(this.form.code, this.user).then(res => {
+            this.loading = false
+            this.resetForm()
+            this.$notify({
+              title: '邮箱修改成功',
+              type: 'success',
+              duration: 1500
+            })
+            store.dispatch('GetInfo').then(() => {})
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      clearInterval(this.timer)
+      this.time = 60
+      this.buttonName = '获取验证码'
+      this.isDisabled = false
+      this.form = { pass: '', email: '', code: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/system/user/center/updatePass.vue
+++ b/src/views/system/user/center/updatePass.vue
@@ -0,0 +1,102 @@
+<template>
+  <div style="display: inline-block">
+    <el-button size="mini" class="button" type="info" @click="dialog = true">修改</el-button>
+    <el-dialog :visible.sync="dialog" :title="title" width="500px" @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="旧密码" prop="oldPass">
+          <el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;"/>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;"/>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPass">
+          <el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { md5 } from '@/utils/md5'
+import { validPass, updatePass } from '@/api/user'
+export default {
+  data() {
+    const validatePass = (rule, value, callback) => {
+      validPass(md5(value)).then(res => {
+        if (res.status === 200) {
+          callback()
+        } else {
+          callback(new Error('旧密码错误，请检查'))
+        }
+      })
+    }
+    const confirmPass = (rule, value, callback) => {
+      if (this.form.newPass !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loading: false, dialog: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
+      rules: {
+        oldPass: [
+          { required: true, validator: validatePass, trigger: 'blur' }
+        ],
+        newPass: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        confirmPass: [
+          { required: true, validator: confirmPass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          updatePass(md5(this.form.confirmPass)).then(res => {
+            this.resetForm()
+            this.$notify({
+              title: '密码修改成功，请重新登录',
+              type: 'success',
+              duration: 1500
+            })
+            setTimeout(() => {
+              store.dispatch('LogOut').then(() => {
+                location.reload() // 为了重新实例化vue-router对象 避免bug
+              })
+            }, 1500)
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { oldPass: '', newPass: '', confirmPass: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/tools/aliPay/index.vue
+++ b/src/views/tools/aliPay/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" style="padding-left: 5px;">
+    <el-tab-pane label="参数配置" name="first">
+      <Config/>
+    </el-tab-pane>
+    <el-tab-pane label="支付测试" name="second">
+      <ToPay/>
+    </el-tab-pane>
+    <el-tab-pane label="使用说明" name="third">
+      <Description/>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import Config from './module/config'
+import ToPay from './module/toPay'
+import Description from './module/description'
+export default {
+  components: { Config, ToPay, Description },
+  data() {
+    return {
+      activeName: 'second'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tools/aliPay/module/config.vue
+++ b/src/views/tools/aliPay/module/config.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
+    <el-form-item label="appID" prop="appID">
+      <el-input v-model="form.appID" style="width: 40%"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">应用APPID,收款账号既是APPID对应支付宝账号</span>
+    </el-form-item>
+    <el-form-item label="商家账号" prop="sysServiceProviderId">
+      <el-input v-model="form.sysServiceProviderId" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">商家账号</span>
+    </el-form-item>
+    <el-form-item label="商户私钥" prop="privateKey">
+      <el-input v-model="form.privateKey" type="password" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">商户私钥，你的PKCS8格式RSA2私钥</span>
+    </el-form-item>
+    <el-form-item label="支付宝公钥" prop="publicKey">
+      <el-input v-model="form.publicKey" type="password" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">支付宝公钥</span>
+    </el-form-item>
+    <el-form-item label="回调地址" prop="returnUrl">
+      <el-input v-model="form.returnUrl" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">订单完成后返回的地址</span>
+    </el-form-item>
+    <el-form-item label="异步通知" prop="notifyUrl">
+      <el-input v-model="form.notifyUrl" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">支付结果异步通知地址</span>
+    </el-form-item>
+    <el-button :loading="loading" style="margin-left:5%;" size="medium" type="success" @click="doSubmit">保存配置</el-button>
+  </el-form>
+</template>
+
+<script>
+import { get, update } from '@/api/alipay'
+export default {
+  name: 'Config',
+  data() {
+    return {
+      loading: false,
+      form: { appID: '', sysServiceProviderId: '', privateKey: '', publicKey: '', returnUrl: '', notifyUrl: '' },
+      rules: {
+        appID: [
+          { required: true, message: '请输入appID', trigger: 'blur' }
+        ],
+        sysServiceProviderId: [
+          { required: true, message: '请输入商家账号', trigger: 'blur' }
+        ],
+        privateKey: [
+          { required: true, message: '商户私钥不能为空', trigger: 'blur' }
+        ],
+        publicKey: [
+          { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
+        ],
+        returnUrl: [
+          { required: true, message: '回调地址不能为空', trigger: 'blur' }
+        ],
+        notifyUrl: [
+          { required: true, message: '回调地址不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res
+      })
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          update(this.form).then(res => {
+            this.$notify({
+              title: '修改成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/tools/aliPay/module/description.vue
+++ b/src/views/tools/aliPay/module/description.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <blockquote class="my-blockquote">注意</blockquote>
+    <pre class="my-code">
+测试所用参数都是沙箱环境，仅供测试所用，申请地址：<a style="color: #00a0e9" href="https://openhome.alipay.com/platform/appDaily.htm?tab=info" target="_blank">支付宝开发平台</a>
+如需付款测试，请使用
+账号：uuxesw9745@sandbox.com
+密码：111111
+支付密码：111111
+文明测试谢谢</pre>
+    <blockquote class="my-blockquote"> 支付设置</blockquote>
+    <pre class="my-code">
+支付提供两个测试地址
+PC端与手机端，并且使用如下代码识别
+if (/(Android)/i.test(navigator.userAgent)){     // 判断是否为Android手机
+    url = "/aliPay/toPayAsWeb"
+}else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){  // 判断是否为苹果手机
+    url = "/aliPay/toPayAsWeb"
+} else {
+    url = "/aliPay/toPayAsPC"
+}</pre>
+    <blockquote class="my-blockquote">更多帮助</blockquote>
+    <pre class="my-code">更多帮助请查看系统源码</pre>
+  </div>
+</template>
+
+<script>
+import '@/styles/description.scss'
+export default {
+  name: 'Description'
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tools/aliPay/module/toPay.vue
+++ b/src/views/tools/aliPay/module/toPay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
+      <el-form-item label="商品名称" prop="subject">
+        <el-input v-model="form.subject" style="width: 35%"/>
+      </el-form-item>
+      <el-form-item label="商品价格" prop="totalAmount">
+        <el-input v-model="form.totalAmount" style="width: 35%"/>
+        <span style="color: #C0C0C0;margin-left: 10px;">测试允许区间(0,5000]</span>
+      </el-form-item>
+      <el-form-item label="商品描述" prop="body">
+        <el-input v-model="form.body" style="width: 35%" rows="8" type="textarea"/>
+      </el-form-item>
+      <el-button :loading="loading" style="margin-left:2%;" size="medium" type="success" @click="doSubmit">去支付</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { toAliPay } from '@/api/alipay'
+export default {
+  data() {
+    return {
+      url: '',
+      // 新窗口的引用
+      newWin: null,
+      loading: false, form: { subject: '', totalAmount: '', body: '' },
+      rules: {
+        subject: [
+          { required: true, message: '商品名称不能为空', trigger: 'blur' }
+        ],
+        totalAmount: [
+          { required: true, message: '商品价格不能为空', trigger: 'blur' }
+        ],
+        body: [
+          { required: true, message: '商品描述不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    url(newVal, oldVal) {
+      if (newVal && this.newWin) {
+        this.newWin.sessionStorage.clear()
+        this.newWin.location.href = newVal
+        // 重定向后把url和newWin重置
+        this.url = ''
+        this.newWin = null
+      }
+    }
+  },
+  methods: {
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          // 先打开一个空的新窗口，再请求
+          this.newWin = window.open()
+          let url = ''
+          if (/(Android)/i.test(navigator.userAgent)) { // 判断是否为Android手机
+            url = 'aliPay/toPayAsWeb'
+          } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断是否为苹果手机
+            url = 'aliPay/toPayAsWeb'
+          } else {
+            url = 'aliPay/toPayAsPC'
+          }
+          toAliPay(url, this.form).then(res => {
+            this.loading = false
+            this.url = res
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tools/email/index.vue
+++ b/src/views/tools/email/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-tabs v-model="activeName" style="padding-left: 5px;" @tab-click="handleClick">
+  <el-tabs v-model="activeName" style="padding-left: 5px;">
    <el-tab-pane label="邮箱配置" name="first">
      <Config/>
    </el-tab-pane>
-    <el-tab-pane label="邮件测试" name="second">
+    <el-tab-pane label="发送邮件" name="second">
      <Send/>
    </el-tab-pane>
    <el-tab-pane label="使用说明" name="third">
@@ -20,12 +20,7 @@ export default {
  components: { Config, Send, Description },
  data() {
    return {
-      activeName: 'first'
-    }
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event)
+      activeName: 'second'
    }
  }
 }
--- a/src/views/tools/email/module/send.vue
+++ b/src/views/tools/email/module/send.vue
@@ -44,7 +44,10 @@ export default {
  },
  computed: {
    ...mapGetters([
-      'imagesUploadApi'
+      // sm.ms图床
+      'imagesUploadApi',
+      // 七牛云 按需选择
+      'qiNiuUploadApi'
    ])
  },
  mounted() {
@@ -54,6 +57,7 @@ export default {
    editor.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    editor.customConfig.uploadFileName = 'file'
+    // 上传到哪儿，按需选择
    editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
    editor.customConfig.onchange = (html) => {
      this.form.content = html
--- a/src/views/tools/picture/index.vue
+++ b/src/views/tools/picture/index.vue
@@ -13,7 +13,7 @@
      <el-table-column prop="size" label="文件大小"/>
      <el-table-column prop="height" label="高度"/>
      <el-table-column prop="width" label="宽度"/>
-      <el-table-column prop="createTime" label="创建日期">
+      <el-table-column width="180px" prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ time(scope.row.createTime) }}</span>
        </template>
--- a/src/views/tools/picture/module/add.vue
+++ b/src/views/tools/picture/module/add.vue
@@ -51,7 +51,7 @@ export default {
      this.pictures.push({ uid, id })
    },
    handleBeforeRemove(file, fileList) {
-      for (var i = 0; i < this.pictures.length; i++) {
+      for (let i = 0; i < this.pictures.length; i++) {
        if (this.pictures[i].uid === file.uid) {
          del(this.pictures[i].id).then(res => {})
          return true
--- a/src/views/tools/picture/module/search.vue
+++ b/src/views/tools/picture/module/search.vue
@@ -21,7 +21,6 @@ export default {
  methods: {
    checkPermission,
    toQuery() {
-      console.log(this.query)
      this.$parent.page = 0
      this.$parent.init()
    }
--- a/src/views/tools/qiniu/index.vue
+++ b/src/views/tools/qiniu/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" style="padding-left: 5px;">
+    <el-tab-pane label="存储配置" name="first">
+      <Config/>
+    </el-tab-pane>
+    <el-tab-pane label="文件列表" name="second">
+      <List/>
+    </el-tab-pane>
+    <el-tab-pane label="使用说明" name="third">
+      <Description/>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import Config from './module/config'
+import List from './module/list'
+import Description from './module/description'
+export default {
+  components: { Config, List, Description },
+  data() {
+    return {
+      activeName: 'second'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tools/qiniu/module/config.vue
+++ b/src/views/tools/qiniu/module/config.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="130px">
+    <el-form-item label="Access Key" prop="accessKey">
+      <el-input v-model="form.accessKey" style="width: 35%"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">accessKey，在安全中心，秘钥管理中查看</span>
+    </el-form-item>
+    <el-form-item label="Secret Key" prop="secretKey">
+      <el-input v-model="form.secretKey" type="password" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">secretKey，在安全中心，秘钥管理中查看</span>
+    </el-form-item>
+    <el-form-item label="空间名称" prop="bucket">
+      <el-input v-model="form.bucket" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">存储空间名称作为唯一的 Bucket 识别符</span>
+    </el-form-item>
+    <el-form-item label="外链域名" prop="host">
+      <el-input v-model="form.host" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">外链域名，可自定义，需在七牛云绑定</span>
+    </el-form-item>
+    <el-form-item label="存储区域" prop="port">
+      <el-select v-model="form.zone" placeholder="请选择存储区域">
+        <el-option
+          v-for="item in zones"
+          :key="item"
+          :label="item"
+          :value="item"/>
+      </el-select>
+      <span style="color: #C0C0C0;margin-left: 10px;">北美区域尚未支持自定义数据处理服务，一旦创建区域无法修改，请谨慎选择</span>
+    </el-form-item>
+    <el-form-item label="空间类型" prop="host">
+      <el-radio v-model="form.type" label="公开">公开</el-radio>
+      <el-radio v-model="form.type" label="私有" >私有</el-radio>
+      <span style="color: #C0C0C0;margin-left: 10px;">公开和私有仅对 Bucket 的读文件生效，修改、删除、写入等对 Bucket 的操作均需要拥有者的授权才能进行操作</span>
+    </el-form-item>
+    <el-button :loading="loading" style="margin-left:5%;" size="medium" type="success" @click="doSubmit">保存配置</el-button>
+  </el-form>
+</template>
+
+<script>
+import { get, update } from '@/api/qiniu'
+export default {
+  name: 'Config',
+  data() {
+    return {
+      zones: ['华东', '华北', '华南', '北美', '东南亚'],
+      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' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res
+      })
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          update(this.form).then(res => {
+            this.$notify({
+              title: '修改成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/tools/qiniu/module/description.vue
+++ b/src/views/tools/qiniu/module/description.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <blockquote class="my-blockquote">注意</blockquote>
+    <pre class="my-code">
+1、尽量使用英文文件名进行上传，中文文件名在私有空间下下载会出现问题
+2、配置时外链域名需带上协议，也就是必须http/https开头
+3、如果七牛云中存在数据，使用同步按钮即可将数据同步到数据库
+4、本次集成了七牛云的常用操作，如：上传，下载，删除，同步，支持私有空间上传下载
+5、项目中配置存入数据库，如需测试，请使用临时空间进行测试，测试完成及时修改配置，反正数据泄露</pre>
+    <blockquote class="my-blockquote"> 开始使用</blockquote>
+    <pre class="my-code">
+#引入依赖
+&lt;dependency&gt;
+  &lt;groupId&gt;com.qiniu&lt;/groupId&gt;
+  &lt;artifactId&gt;qiniu-java-sdk&lt;/artifactId&gt;
+  &lt;version&gt;[7.2.0, 7.2.99]&lt;/version&gt;
+&lt;dependency&gt;
+#简单的上传文件
+//构造一个带指定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";
+//默认不指定key的情况下，以文件内容的hash值作为文件名
+String key = null;
+try {
+    byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
+    Auth auth = Auth.create(accessKey, secretKey);
+    String upToken = auth.uploadToken(bucket);
+    try {
+        Response response = uploadManager.put(uploadBytes, 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
+        }
+    }
+} catch (UnsupportedEncodingException ex) {
+    //ignore
+}</pre>
+    <blockquote class="my-blockquote">更多帮助</blockquote>
+    <pre class="my-code">更多帮助请查看系统源码，或者七牛云java开发文档
+七牛云官网：<a style="color: #00a2d4" href="https://sso.qiniu.com/" target="_blank">https://sso.qiniu.com/</a>
+七牛云java开发文档：<a style="color: #00a2d4" href="https://developer.qiniu.com/kodo/sdk/1239/java#3" target="_blank">https://developer.qiniu.com/kodo/sdk/1239/java#3</a></pre>
+  </div>
+</template>
+
+<script>
+import '@/styles/description.scss'
+export default {
+  name: 'Description'
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tools/qiniu/module/list.vue
+++ b/src/views/tools/qiniu/module/list.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <search :query="query"/>
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
+      <el-table-column :show-overflow-tooltip="true" prop="key" label="文件名"/>
+      <el-table-column prop="bucket" label="空间名称"/>
+      <el-table-column :show-overflow-tooltip="true" prop="url" label="地址/私有空间需下载访问">
+        <template slot-scope="scope">
+          <a :href="scope.row.url" style="color: #42b983" target="_blank">{{ scope.row.url }}</a>
+        </template>
+      </el-table-column>
+      <el-table-column prop="size" label="文件大小"/>
+      <el-table-column prop="type" label="空间类型"/>
+      <el-table-column width="180px" prop="updateTime" label="更新日期">
+        <template slot-scope="scope">
+          <span>{{ time(scope.row.updateTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160px" align="center">
+        <template slot-scope="scope">
+          <el-button
+            :loading="downloadLoading"
+            size="mini"
+            @click="download(scope.row.id)">下载</el-button>
+          <el-popover
+            v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_DELETE'])"
+            v-model="scope.row.delPopover"
+            placement="top"
+            width="180">
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.delPopover = false">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" size="mini" @click="scope.row.delPopover = true">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"/>
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission' // 权限判断函数
+import initData from '../../../../mixins/initData'
+import { del, download } from '@/api/qiniu'
+import { parseTime } from '@/utils/index'
+import search from './module/search'
+export default {
+  components: { search },
+  mixins: [initData],
+  data() {
+    return {
+      url: '',
+      // 新窗口的引用
+      newWin: null,
+      downloadLoading: false, delLoading: false, sup_this: this
+    }
+  },
+  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.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/qiNiuContent'
+      const sort = 'id,desc'
+      const query = this.query
+      const value = query.value
+      this.params = { page: this.page, size: this.size, sort: sort }
+      if (value) { this.params['key'] = value }
+      return true
+    },
+    subDelete(index, row) {
+      this.delLoading = true
+      del(row.id).then(res => {
+        this.delLoading = false
+        row.delPopover = false
+        this.init()
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+      }).catch(err => {
+        this.delLoading = false
+        row.delPopover = false
+        console.log(err.response.data.message)
+      })
+    },
+    download(id) {
+      this.downloadLoading = true
+      // 先打开一个空的新窗口，再请求
+      this.newWin = window.open()
+      download(id).then(res => {
+        this.downloadLoading = false
+        this.url = res
+      }).catch(err => {
+        this.downloadLoading = false
+        console.log(err.response.data.message)
+      })
+    },
+    time(time) {
+      return parseTime(time)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/tools/qiniu/module/module/add.vue
+++ b/src/views/tools/qiniu/module/module/add.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
+    <el-dialog :visible.sync="dialog" width="400px" @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;width: 330px" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { del } from '@/api/qiniu'
+import { getToken } from '@/utils/auth'
+export default {
+  data() {
+    return {
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      },
+      dialog: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList: [],
+      files: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'qiNiuUploadApi'
+    ])
+  },
+  methods: {
+    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) {
+          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.$parent.$parent.init()
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  div{
+    display: inline-block;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+</style>
--- a/src/views/tools/qiniu/module/module/search.vue
+++ b/src/views/tools/qiniu/module/module/search.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
+    <add/>
+    <el-button :icon="icon" class="filter-item" size="mini" type="primary" @click="synchronize">{{ buttonName }}</el-button>
+  </div>
+</template>
+
+<script>
+import add from './add'
+import { sync } from '@/api/qiniu'
+// 查询条件
+export default {
+  components: { add },
+  props: {
+    query: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      icon: 'el-icon-refresh',
+      buttonName: '同步数据'
+    }
+  },
+  methods: {
+    toQuery() {
+      this.$parent.page = 0
+      this.$parent.init()
+    },
+    synchronize() {
+      this.icon = 'el-icon-loading'
+      this.buttonName = '同步中'
+      sync().then(res => {
+        this.icon = 'el-icon-refresh'
+        this.buttonName = '同步数据'
+        this.$message({
+          showClose: true,
+          message: '数据同步成功',
+          type: 'success',
+          duration: 1500
+        })
+        this.toQuery()
+      }).catch(err => {
+        this.icon = 'el-icon-refresh'
+        this.buttonName = '同步数据'
+        console.log(err.response.data.message)
+      })
+    }
+  }
+}
+</script>
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546239206365" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1468" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M907 378.05l-12.4-14.33c-61-70.41-166.93-177.81-236.2-239.4l-14.12-12.58C609.07 80.37 562.07 63.09 512 63.09s-97.08 17.28-132.32 48.65l-14.12 12.57c-69.28 61.61-175.24 169-236.2 239.41l-12.41 14.33c-63.92 73.87-63.92 194 0 267.87l12.41 14.33C190.24 730.6 296.2 838 365.54 899.69l14.14 12.57c35.24 31.37 82.23 48.65 132.32 48.65s97.06-17.28 132.32-48.65l14.13-12.57 8.15-7.25c21.93-19.46 31.93-28.35 62.69-58.93l7.27-7.36-1.16-1.22a28.35 28.35 0 0 0-45.87-32.14c-2.92 2.78-43.63 41.53-68.73 63.91l-14.1 12.56c-24.89 22.1-58.53 34.28-94.7 34.28s-69.82-12.19-94.69-34.31l-14.14-12.58c-67.85-60.34-171.47-165.38-231-234.14l-12.4-14.32c-21.73-25.12-33.7-59.29-33.7-96.2s12-71.07 33.7-96.17l12.41-14.33c59.5-68.75 163.12-173.79 231-234.15l14.1-12.57c24.86-22.12 58.49-34.31 94.68-34.31s69.83 12.19 94.7 34.3l14.12 12.58c67.86 60.37 171.49 165.41 231 234.14l12.39 14.34c45.22 52.21 45.34 143.76 0.26 192.07l-7.15 7.69c-20.35 21.94-32.64 35.19-45.62 39.1-12.3 3.71-27.89-0.23-57.53-14.54-49.55-23.94-119.64-64-144-78 9.87-19.61 32.46-67.6 43.11-115.62l2.86-12.87H534.5v-15.06h154.78v-57.37H534.5v-72.41h-56.89v72.41H322.83v57.37h154.78v15.05H358.54V491H573c-4.63 14.52-13.16 32.57-19.19 44.37-22.13-8.73-80.75-29.33-141-29.33-37.94 0-69.92 10.28-92.49 29.71-22.37 19.27-34.19 46-34.19 77.42s11.32 58.29 32.75 77.74c21.9 19.89 53 30.41 90 30.41 42.76 0 87.09-19 128.18-54.78a326.76 326.76 0 0 0 43.61-46.35c22.9 12.75 90 50 152.61 83.47 40.83 21.85 69.5 26.18 95.87 14.47 25.09-11.14 47.07-36.53 77.49-71.68l0.47-0.54C971 572.07 971 451.9 907 378.05zM407.83 662c-60.15 0-64.83-37.38-64.83-48.82a48.21 48.21 0 0 1 12.15-31.36c11.06-12.2 28.45-18.39 51.69-18.39 50 0 95 17.21 115.39 26.35C503.71 611.69 456 662 407.83 662z" p-id="1469"></path></svg>