调整配置，请求 http 使用 axios 替换 fetch

.env.development

@@ -0,0 +1,5 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = 'http://localhost:8000'

.env.production

@@ -0,0 +1,5 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = 'http://api.reghao.icu'

.env.staging

@@ -0,0 +1,7 @@
+# NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = 'http://api.reghao.icu'

package-lock.json

@@ -2433,6 +2433,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2517,6 +2525,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz?cache=0&sync_timestamp=1584715910722&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.1.0.tgz",
@@ -2539,6 +2552,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/download/core-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -4166,8 +4200,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1572279556265&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4624,6 +4657,19 @@
       "integrity": "sha1-LnAjRITgPXx+kDENfXn9N3U3nDQ=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmmirror.com/element-ui/download/element-ui-2.13.2.tgz",
+      "integrity": "sha1-WCv0eqqqr+I+oZWPriF6aHrQZEc=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz?cache=0&sync_timestamp=1592492844326&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.3.tgz",
@@ -7668,6 +7714,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9420,6 +9471,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.17.0.tgz",
@@ -10632,6 +10688,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313880785&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.1.1",
     "dplayer": "^1.26.0",
+    "element-ui": "2.13.2",
     "filepond": "^4.20.1",
     "filepond-plugin-file-validate-size": "^2.2.1",
     "filepond-plugin-file-validate-type": "^1.2.5",

src/api/index.js

@@ -0,0 +1,114 @@
+import axios from 'axios'
+import store from '@/store'
+import router from '@/router'
+import Vue from 'vue'
+import { Message } from 'element-ui' // 引用element-ui的加载和消息提示组件
+
+const $axios = axios.create({
+  // 5 分钟超时
+  timeout: 300000,
+  // 域名
+  baseURL: process.env.VUE_APP_BASE_API,
+  headers: {
+    'Content-Type': 'application/json; charset=UTF-8'
+  }
+})
+Vue.prototype.$http = axios // 并发请求
+// 在全局请求和响应拦截器中添加请求状态
+const loading = null
+
+// 请求拦截器
+$axios.interceptors.request.use(
+  config => {
+    const token = store.getters.token
+    if (token) {
+      // 在请求的 Authorization 首部添加 token
+      config.headers.Authorization = token
+      // config.headers.Authorization = 'Bearer ' + token
+    }
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+// 响应拦截器
+$axios.interceptors.response.use(
+  response => {
+    if (loading) {
+      loading.close()
+    }
+    const code = response.status
+    if ((code >= 200 && code < 300) || code === 304) {
+      return Promise.resolve(response.data)
+    } else {
+      return Promise.reject(response)
+    }
+  },
+  error => {
+    if (loading) {
+      loading.close()
+    }
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          // 返回401 清除token信息并跳转到登陆页面
+          console.log('401 错误...')
+          store.commit('delToken')
+          router.replace({
+            path: '/login',
+            query: {
+              redirect: router.currentRoute.fullPath
+            }
+          })
+          break
+        case 404:
+          Message.error('网络请求不存在')
+          break
+        default:
+          Message.error(error.response.data.message)
+      }
+    } else {
+      // 请求超时或者网络有问题
+      if (error.message.includes('timeout')) {
+        Message.error('请求超时！请检查网络是否正常')
+      } else {
+        Message.error(error.message)
+        Message.error('请求失败，请检查服务器是否已启动')
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+// HTTP 请求
+export default {
+  get(url, params) {
+    return $axios({
+      method: 'get',
+      url,
+      params
+    })
+  },
+  post(url, data) {
+    return $axios({
+      method: 'post',
+      url,
+      data: JSON.stringify(data)
+    })
+  },
+  put(url, data) {
+    return $axios({
+      method: 'put',
+      url,
+      data: JSON.stringify(data)
+    })
+  },
+  delete(url, data) {
+    return $axios({
+      method: 'delete',
+      url,
+      data: JSON.stringify(data)
+    })
+  }
+}

src/api/media/video.js

@@ -0,0 +1,28 @@
+import $axios from '../index'
+
+const videoApi = {
+  videoRecommendApi: '/api/media/video/post/recommend',
+  similarVideoApi: '/api/media/video/post/similar',
+  videoInfoApi: '/api/media/video/post',
+  videoUrlApi: '/api/media/video/url'
+}
+
+// 视频推荐接口
+export function videoRecommend() {
+  return $axios.get(videoApi.videoRecommendApi)
+}
+
+// 相似视频接口
+export function similarVideo(videoId) {
+  return $axios.get(videoApi.similarVideoApi + '?videoId=' + videoId)
+}
+
+// 视频详情接口
+export function videoInfo(videoId) {
+  return $axios.get(videoApi.videoInfoApi + '/' + videoId)
+}
+
+// 视频 URL 接口
+export function videoUrl(videoId) {
+  return $axios.get(videoApi.videoUrlApi + '/' + videoId)
+}

src/components/player/player.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { videoUrl } from '@/api/media/video'
 import DPlayer from 'dplayer'
 const hls = require('hls.js')
 export default {
@@ -14,15 +15,21 @@ export default {
     }
   },
   mounted() {
-    this.userId = this.$store.state.userInfo.id.toString()
+    const userInfo = this.$store.state.userInfo
+    if (userInfo != null) {
+      this.userId = userInfo.id.toString()
+    } else {
+      this.userId = 111222333
+    }
+
     this.videoId = this.$route.params.id
-    this.videoUrl()
+    this.getVideoUrl(this.videoId)
   },
   methods: {
     // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     danmakuConfig() {
     },
-    videoUrl() {
+    /* videoUrl() {
       fetch(`/api/media/video/url/${this.videoId}`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
@@ -44,6 +51,26 @@ export default {
         .catch(e => {
           return null
         })
+    },*/
+    getVideoUrl(videoId) {
+      videoUrl(videoId)
+        .then(res => {
+          if (res.code === 0) {
+            var coverUrl = res.data.coverUrl
+            var videoUrl = res.data.videoUrl
+            this.initDplayer(this.videoId, coverUrl, videoUrl)
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
     },
     initDplayer(videoId, coverUrl, videoUrl) {
       new DPlayer({

src/views/home/index.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { videoRecommend } from '@/api/media/video'
 import VideoCared from '@/components/player/video-card.vue'
 
 export default {
@@ -29,7 +30,7 @@ export default {
     window.addEventListener('scroll', this.lazyLoading, true)
   },
   created() {
-    this.getVideoList()
+    this.getRecommendVideo()
   },
   destroyed() {
     // 页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
@@ -52,6 +53,24 @@ export default {
           return null
         })
     },
+    getRecommendVideo() {
+      videoRecommend()
+        .then(res => {
+          if (res.code === 0) {
+            this.videoList = res.data.list
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    },
     // 滚动操作
     lazyLoading() {
       // 滚动到底部，再加载的处理事件

src/views/video/video.vue

@@ -116,6 +116,7 @@
 </template>
 
 <script>
+import { similarVideo, videoInfo } from '@/api/media/video'
 import VideoCared from '@/components/player/video-card.vue'
 import VideoPlayer from '@/components/player/player.vue'
 import TimeUtil from '@/utils/time-util.vue'
@@ -144,7 +145,7 @@ export default {
     // 获取 url 上的 path 参数
     this.videoId = this.$route.params.id
     // 请求后端获取数据
-    this.videoInfo()
+    this.getVideoInfo(this.videoId)
     this.onResize()
     this.getSimilarVideos(this.videoId)
   },
@@ -158,7 +159,7 @@ export default {
         this.colsWidth = 8
       }
     },
-    videoInfo() {
+    /*    videoInfo1() {
       fetch(`/api/media/video/post/${this.videoId}`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
@@ -179,9 +180,28 @@ export default {
         .catch(e => {
           return null
         })
+    },*/
+    // 获取视频的详细信息
+    getVideoInfo(videoId) {
+      videoInfo(videoId)
+        .then(res => {
+          if (res.code === 0) {
+            this.videoData = res.data
+            document.title = res.data.title
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
     },
-    // 获取和当前视频类似的其他视频
-    getSimilarVideos(videoId) {
+    /* getSimilarVideos1(videoId) {
       fetch(`/api/media/video/post/similar?videoId=${videoId}`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
@@ -192,12 +212,29 @@ export default {
       }).then(response => response.json())
         .then(json => {
           this.videoList = json.data.list
-          this.page = json.data.totalSize
-          this.length = json.data.totalSize
         })
         .catch(e => {
           return null
         })
+    },*/
+    // 获取和当前视频类似的其他视频
+    getSimilarVideos(videoId) {
+      similarVideo(videoId)
+        .then(res => {
+          if (res.code === 0) {
+            this.videoList = res.data.list
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
     }
   }
 }

vue.config.js

@@ -11,21 +11,24 @@ module.exports = {
   // options...
   devServer: {
     port: 8080,
+    // 部署到 nginx 中后，使用 rewrite 指令配置
     proxy: {
-      '/api': {
-        target: 'http://127.0.0.1:8000',
+      // 静态资源地址
+      '/tnb': {
+        target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         ws: true,
         pathRewrite: {
-          '^/api': '/api'
+          '^/tnb': '/tnb'
         }
       },
-      '/tnb': {
-        target: 'http://127.0.0.1:8000',
+      // 弹幕接口
+      '/api/media/danmaku': {
+        target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         ws: true,
         pathRewrite: {
-          '^/tnb': '/tnb'
+          '^/api/media/danmaku': '/api/media/danmaku'
         }
       }
     }