添加 docker 打包及 nginx 转发配置

Dockerfile

@@ -1,4 +1,4 @@
-FROM debian10/nginx
+FROM nginx/tnb
 
-RUN sed -i 's/8080/8091/' /etc/nginx/conf.d/http.conf
-COPY ./dist /opt/webroot/
+RUN sed -i 's/8080/8081/' /etc/nginx/conf.d/http.conf
+COPY ./dist/ /opt/webroot/

src/views/home/index.vue

@@ -80,7 +80,7 @@ export default {
       const scrollHeight = document.documentElement.scrollHeight
       // 页面滚动到底部，逻辑代码
       if (scrollTop + clientHeight >= scrollHeight) {
-        // 事件处理
+        // TODO 页面滚动到底部时请求数据并渲染当前页面
         console.log('滚动到底部，触发')
         this.getVideoList()
       }

src/views/video/video.vue

@@ -36,6 +36,7 @@
             <v-col>
               标签：
               <span v-for="item in videoData.tags" :key="item">
+                <!-- TODO 点击标签 button 时请求后端返回具有相同标签的所有视频并在新页面显示 -->
                 <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
               </span><br>
               <br>
@@ -141,6 +142,17 @@ export default {
       colsWidth: 8
     }
   },
+  watch: {
+    // TODO 监听地址栏路由，发生变化时重新加载当前页面
+    $route: {
+      handler(newName, oldName) {
+        console.log(newName.path)
+        console.log('----------------')
+        console.log(oldName.path)
+      },
+      deep: true
+    }
+  },
   created() {
     // 获取 url 上的 path 参数
     this.videoId = this.$route.params.id
@@ -159,28 +171,6 @@ export default {
         this.colsWidth = 8
       }
     },
-    /*    videoInfo1() {
-      fetch(`/api/media/video/post/${this.videoId}`, {
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8',
-          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
-        },
-        method: 'GET',
-        credentials: 'include'
-      }).then(response => response.json())
-        .then(json => {
-          if (json.code === 0) {
-            this.videoData = json.data
-            document.title = json.data.title
-          } else {
-            // TODO 显示 404
-            this.$router.push('/')
-          }
-        })
-        .catch(e => {
-          return null
-        })
-    },*/
     // 获取视频的详细信息
     getVideoInfo(videoId) {
       videoInfo(videoId)
@@ -201,22 +191,6 @@ export default {
           this.$message.error(error.message)
         })
     },
-    /* getSimilarVideos1(videoId) {
-      fetch(`/api/media/video/post/similar?videoId=${videoId}`, {
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8',
-          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
-        },
-        method: 'GET',
-        credentials: 'include'
-      }).then(response => response.json())
-        .then(json => {
-          this.videoList = json.data.list
-        })
-        .catch(e => {
-          return null
-        })
-    },*/
     // 获取和当前视频类似的其他视频
     getSimilarVideos(videoId) {
       similarVideo(videoId)

vue.config.js

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