update

src/main.js

@@ -4,14 +4,15 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
-import { configure } from '@/util/http'
+import {axios, serverName} from '@/util/http'
 
 Vue.config.productionTip = false
+Vue.prototype.$serverName = serverName
+Vue.prototype.$http = axios
 
 Vue.use(ElementUI)
 
 // console.log(configure)
-configure(Vue, router, ElementUI)
 
 /* eslint-disable no-new */
 new Vue({

src/pages/add/index.vue

@@ -4,12 +4,12 @@
       <el-input v-model="name"></el-input>
     </el-form-item>
 
-    <el-form-item label="配置地址">
+    <!-- <el-form-item label="配置地址">
       <el-input v-model="url"></el-input>
-    </el-form-item>
+    </el-form-item> -->
 
     <el-form-item label="场景文件">
-      <input id="fileFolder" name="fileFolder" type="file" webkitdirectory @change="changeHandle($event)">
+      <input id="fileFolder" :disabled="uploading" name="fileFolder" type="file" webkitdirectory @change="changeHandle($event)">
     </el-form-item>
 
     <el-form-item label="上传状态">
@@ -18,7 +18,7 @@
 
     <el-form-item>
       <el-button type="primary" @click="onSubmit" :disabled="uploading">立即创建</el-button>
-      <el-button @click="$router.back()">取消</el-button>
+      <el-button @click="cancel">取消</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -35,9 +35,11 @@ export default {
       name: '',
       url: '',
       files: [],
+      uploadId: '',
       msg: '暂未上传',
       uploading: false,
-      maxUploadCount: 500
+      maxUploadCount: 500,
+      stopUpload: false
     }
   },
   methods: {
@@ -45,6 +47,18 @@ export default {
       this.files = ev.target.files
     },
 
+    async cancel () {
+      if (!this.uploading) {
+        return this.$router.push({path: '/'})
+      }
+
+      if (confirm('删除后将无法恢复！你确定要删除这个场景吗?')) {
+        await this.$http.get(`/manage/scene/delete/${this.uploadId}`)
+        this.stopUpload = true
+        this.$router.push({path: '/'})
+      }
+    },
+
     async onSubmit () {
       this.name = this.name.trim()
       this.uploading = true
@@ -64,7 +78,7 @@ export default {
       try {
         await this.createScene()
         await this.uploadFiles()
-        await this.tranform()
+        // await this.tranform()
         this.$router.back()
       } catch (e) {
         console.error(e)
@@ -73,10 +87,8 @@ export default {
     },
 
     async createScene () {
-      await this.$http.post('addscene', {
-        name: this.name
-      })
-
+      let result = await this.$http.get(`/manage/scene/createSceneCode/${this.name}`)
+      this.uploadId = result.data.id
       this.msg = '成功创建场景，准备上传'
     },
 
@@ -93,6 +105,9 @@ export default {
           for (; task.length < maxCount && currCount < files.length; currCount++) {
             let count = currCount
             let index = task.length
+            if (this.stopUpload) {
+              return
+            }
             task[index] = this.uploadFile(files[currCount])
               .then(() => success(index, count))
               .catch(() => error(index, count))
@@ -125,19 +140,24 @@ export default {
     uploadFile (file) {
       let formData = new FormData()
       let paths = file.webkitRelativePath.split('/')
-      paths = paths.slice(1, paths.length - 1)
-
-      formData.append('name', this.name)
-      formData.append('dir', paths.join('/'))
+      paths.shift()
+      formData.append('path', `${this.name}/${paths.join('/')}`)
       formData.append('file', file)
 
-      console.log(formData)
-
       return this.$http.post(
-        '/uploadFile',
+        '/manage/scene/uploads',
         formData,
         {'Content-Type': 'multipart/form-data'}
       )
+
+      // return this.$http({
+      //   method: 'post',
+      //   url: '/manage/scene/uploads',
+      //   data: {formData},
+      //   headers: {
+      //     'Content-Type': 'multipart/form-data'
+      //   }
+      // })
     },
 
     async tranform () {

src/pages/list/index.vue

@@ -3,12 +3,12 @@
     <el-row type="flex" justify="space-between"  class="toolbar">
       <!--工具条-->
       <el-row type="flex">
-        <el-form :inline="true" :model="filters">
+        <el-form :inline="true">
           <el-form-item>
-            <el-input v-model="filters" placeholder="场景名称" @change="getUsers()"></el-input>
+            <el-input @keydown.enter.native='search' v-model="searchKey" placeholder="场景名称"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" v-on:click="getUsers">查询</el-button>
+            <el-button type="primary" v-on:click="search">查询</el-button>
           </el-form-item>
         </el-form>
         <router-link :to="{name: 'add'}" class="button">添加场景</router-link>
@@ -16,27 +16,32 @@
       <!-- 生成大场景someData -->
       <el-row type="flex" class="addScene">
         <el-button type="warning" style="margin-right:20px;" @click="logout">登出</el-button>
-        <el-input placeholder="输入编码生成someData" v-model="url">
+        <!-- <el-input placeholder="输入编码生成someData" v-model="url">
           <template slot="append">
             <a :href="'/getSomeData?url=https://my.matterportvr.cn/api/player/models/'+url+'/?format=json'" target="_block">生成</a>
           </template>
-        </el-input>
+        </el-input> -->
       </el-row>
     </el-row>
     <!-- 表格 -->
     <el-table :data="scenes" style="width: 100%" >
-      <el-table-column prop="name"  width="80" label="场景">
+      <el-table-column prop="sceneCode"  width="200" label="场景">
       </el-table-column>
-      <el-table-column prop="title" label="名称">
+      <el-table-column prop="sceneTitle" label="名称">
       </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
       <template slot-scope="scope">
-        <a :href="scope.row.query" target="_blank">查看</a>
-        <a :href="scope.row.edit" target="_blank">编辑</a>
-        <a @click="delScene(scope.row.name)" target="_blank">删除</a>
+        <a :href="scope.row.webSite" target="_blank">查看</a>
+        <a :href="`${$serverName}/editPage/edit.html?m=${scope.row.sceneCode}`" target="_blank">编辑</a>
+        <a @click="delScene(scope.row.id)" target="_blank">删除</a>
       </template>
     </el-table-column>
     </el-table>
+
+    <div class="p-con">
+      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size" layout="prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -45,41 +50,72 @@ export default {
   name: 'list',
   data () {
     return {
-      filters: '',
+      searchKey: '',
       scenes: [],
-      url: ''
+      url: '',
+      currentPage: 1,
+      total: 0,
+      size: 15
     }
   },
   async created () {
     this.getScenes()
   },
+  watch: {
+    currentPage () {
+      this.getScenes()
+    }
+  },
   methods: {
+    search () {
+      this.currentPage === 1 ? this.getScenes() : this.currentPage = 1
+    },
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
     async getScenes () {
-      let scenes = (await this.$http.get('/list')).content
-      let scenesLast = scenes.pop()
-      scenes.unshift(scenesLast)
-      this.origin = scenes
-      this.scenes = scenes
+      let params = {
+        pageNum: this.currentPage,
+        pageSize: this.size,
+        searchKey: this.searchKey
+      }
+      let res = (await this.$http.post('/manage/scene/list', params))
+      this.scenes = res.data.list
+      this.total = res.data.total
+      this.currentPage = res.data.pageNum
     },
     async delScene (name) {
       if (confirm('删除后将无法恢复！你确定要删除这个场景吗?')) {
-        await this.$http.post('/delscene', {name})
+        await this.$http.get(`/manage/scene/removes/${name}`)
         this.getScenes()
       }
     },
     logout () {
-      window.localStorage.setItem('dcj_token', '')
-      this.$router.go(0)
-    },
-    getUsers () {
-      this.scenes = this.origin.filter(item => (~item.name.indexOf(this.filters) || ~item.title.indexOf(this.filters)))
-      console.log(this.scenes)
-    },
-    truncate (arr) {
-      var m = arr.slice(0)
-      m.splice(m.length - 1, 1)
-      return m
+      this.$http({
+        method: 'get',
+        url: '/admin/logout',
+        headers: {
+          Authorization: window.localStorage.getItem('token')
+        }
+      }).then(res => {
+        if (res.code === 5001 || res.code === 5002) return
+        if (res.code === 0) {
+          window.localStorage.setItem('dcj_token', '')
+          this.$token = ''
+          this.$alert('退出成功', '提示', {
+            confirmButtonText: '确定',
+            callback: action => {
+              window.localStorage.setItem('menu', '')
+              this.$router.push('/login')
+            }
+          })
+        }
+      })
     }
+
   }
 }
 </script>
@@ -98,6 +134,10 @@ export default {
     margin-bottom: 0;
   }
   .addScene{
-    width: 300px;
+    width: 80px;
+  }
+  .p-con{
+    text-align: center;
+    padding: 20px 0;
   }
 </style>

src/pages/login/index.vue

@@ -120,15 +120,23 @@ export default {
     this.ruleForm2.pass = window.localStorage.getItem('dcj_pass') || ''
   },
   methods: {
-    login () {
+    async login () {
       let {username, pass} = this.ruleForm2
+      this.fullscreenLoading = true
 
-      if (username === '4dage' && pass === 'pass4dage') {
-        window.localStorage.setItem('dcj_token', Math.random())
+      let res = await this.$http.post('/admin/login', {
+        username,
+        password: pass
+      })
+      this.fullscreenLoading = false
+
+      if (res.code === 0) {
+        let data = res.data
+        window.localStorage.setItem('dcj_token', data.token)
         if (this.checked) {
           window.localStorage.setItem(
             'dcj_username',
-            this.ruleForm2.username
+            username
           )
           window.localStorage.setItem('dcj_pass', pass)
         } else {
@@ -139,7 +147,7 @@ export default {
       } else {
         this.$notify.error({
           title: '错误',
-          message: '登录失败'
+          message: res.msg
         })
       }
     },

src/util/http.js

@@ -1,80 +1,90 @@
 import axios from 'axios'
+import Vue from 'vue'
+import router from '../router'
 
-// const root = '/apis'
-const root = 'http://139.159.225.37:85/'
-// 配置请求域名
-axios.defaults.baseURL = root
+var isProduction = process.env.NODE_ENV === 'production'
+const serverName = isProduction ? '' : 'http://47.107.252.54:8105'
+// const serverName = isProduction ? '' : 'http://192.168.0.135:8105'
+
+const vue = new Vue()
+
+axios.defaults.baseURL = serverName
+axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
+
+// 拦截请求，做登陆，或head处理
+axios.interceptors.request.use(
+  function (config) {
+    if (config.method === 'post') {
+      config.data.rnd = Math.random()
+    }
+    config.headers['token'] = window.localStorage.getItem('dcj_token')
 
-const configure = (Vue, router, { Message }) => {
-  axios.interceptors.request.use(function (config) {
-    // config.data = qs.stringify(config.data)
     return config
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error)
-  })
+  }
+)
 
-  // 配置response拦截器
-  axios.interceptors.response.use(
-    response => {
-      let data = response.data
-      let code = Number(data)
+// 拦截返回，做错误统一处理
+axios.interceptors.response.use(
+  response => {
+    let data = response.data
+    let code = Number(response.data.code)
 
-      if (data.code !== 200) {
-        Message({
-          type: 'error',
-          message: data.msg
+    switch (code) {
+      case -1:
+        break
+      case 4500:
+        vue.$alert('没有获得授权，请联系系统管理员', '提示', {
+          confirmButtonText: '确定',
+          callback: function () {
+          }
         })
-
-        return Promise.reject(data)
-      }
-
-      switch (code) {
-        case -100:
-          break
-        case -10:
-          Message({
-            type: 'error',
-            message: '登陆状态失效，请重新登陆'
+        break
+      case 5001:
+        if (window.localStorage.getItem('dcj_token')) {
+          window.localStorage.setItem('dcj_token', '')
+          vue.$alert('登录状态失效，请重新登录', '提示', {
+            confirmButtonText: '确定',
+            callback: function () {
+              router.push('/login')
+            }
           })
-          router.replace({
-            name: 'login'
-          })
-          break
-
-        case -101:
-          Message({
-            type: 'error',
-            message: '服务器异常，请稍后再试！'
-          })
-          break
-
-        case -102:
-          Message({
-            type: 'error',
-            message: '缺少必要参数！'
+        }
+        break
+      case 5002:
+        if (window.localStorage.getItem('token')) {
+          window.localStorage.setItem('token', '')
+          vue.$alert('登录状态失效，请重新登录', '提示', {
+            confirmButtonText: '确定',
+            callback: function () {
+              router.push('/login')
+            }
           })
-          break
-      }
-      return data
-    },
-    error => {
-      if (error.response) {
-        switch (error.response.status) {
-          case 500:
-            Message({
-              customClass: 'system-err',
-              type: 'error',
-              message: '服务器错误!'
-            })
-            break
         }
-      }
-      return Promise.reject(error.response.data)
+        break
+      case 500:
+        vue.$alert('服务器错误', '提示', {
+          confirmButtonText: '确定',
+          callback: function () {
+          }
+        })
+        break
+      case 0:
+        break
     }
-  )
-  Vue.prototype.$http = axios
-}
+    // tryHideFullScreenLoading()
+    return data
+  },
+  error => {
+    vue.$alert('服务器错误', '提示', {
+      confirmButtonText: '确定',
+      callback: function () {
+      }
+    })
+    return Promise.reject(error)
+  }
+)
 
-export default axios
-export { configure, root }
+export { serverName, axios }