更新

src/components/login-form.vue

@@ -79,7 +79,8 @@ export default {
       this.$emit('login', user)
     },
     getVerifyImage() {
-      this.captchaUrl = '/api/user/account/captcha'
+      // 点击事件发生时，captchaUrl 的值发生变化，然后才去请求后端
+      this.captchaUrl = '/api/user/account/captcha?t=' + new Date().getTime()
     }
   }
 }

src/components/player/player.vue

@@ -7,24 +7,23 @@ import DPlayer from 'dplayer'
 const hls = require('hls.js')
 export default {
   name: 'Play',
-  props: {
-    videoid: {
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       hls,
-      dplayer: {}
+      videoId: ''
     }
   },
   mounted() {
+    this.userId = this.$store.state.userInfo.id.toString()
+    this.videoId = this.$route.params.id
     this.videoUrl()
   },
   methods: {
+    // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
+    danmakuConfig() {
+    },
     videoUrl() {
-      fetch(`/api/media/video/url/${this.videoid}`, {
+      fetch(`/api/media/video/url/${this.videoId}`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
           'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
@@ -36,42 +35,33 @@ export default {
           if (json.code === 0) {
             var coverUrl = json.data.coverUrl
             var videoUrl = json.data.videoUrl
-            this.init(coverUrl, videoUrl)
+            this.initDplayer(this.videoId, coverUrl, videoUrl)
           } else {
-            // TODO 显示 404
-            this.$router.push('/')
+            // TODO 显示错误信息
+            // this.$router.push('/')
           }
         })
         .catch(e => {
           return null
         })
     },
-    init(coverUrl, videoUrl) {
+    initDplayer(videoId, coverUrl, videoUrl) {
       new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         screenshot: true,
         video: {
           pic: coverUrl,
-          // 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-          // url: this.videoData.videoUrl + '?key=' + encodeURIComponent(this.videoData.key),
-          // url: this.videoData.videoUrl,
-          url: videoUrl
+          url: videoUrl,
+          type: 'auto'
         },
         logo: '/logo.png',
         danmaku: {
-          videoId: 'daljfa',
+          id: videoId,
+          maximum: 10000,
           api: '/api/media/danmaku/',
           token: 'hertube',
-          maximum: 1000,
-          // addition: ['/api/danmaku/post'],
-          user: () => {
-            if (this.$store.state.userInfo.id == null) {
-              return 'null'
-            } else {
-              return this.$store.state.userInfo.id
-            }
-          },
+          user: this.userId,
           bottom: '15%',
           unlimited: true
         }

src/components/player/video-card.vue

@@ -18,13 +18,12 @@
       </v-col>
       <v-col cols="10">
         <p style="font-size: 20px; margin-bottom: 0px;color: black;">
-          <router-link :to="`/video/${videoInfo.id}`" style="color: black;"> {{ videoInfo.title }} </router-link>
+          <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
         </p>
         <p style="font-size: 10px; color: #606060;">
-          {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
-          {{ videoInfo.danmukuCount }} 条弹幕 <br>
           <router-link :to="`/user/${videoInfo.userId}`"> {{ videoInfo.username }}</router-link>
           <br>
+          {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
           <span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)" />
         </p>
       </v-col>

src/components/upload/upload-video.vue

@@ -49,14 +49,14 @@
             <v-select
               :items="category"
               label="主分区"
-              @change="getMainCategory"
+              @change="getCategory"
             />
           </v-col>
           <v-col cols="5">
             <v-select
-              :items="categoryChildren"
+              :items="childCategory"
               label="分区"
-              @change="getVideoCategory"
+              @change="getChildCategory"
             />
           </v-col>
         </v-row>
@@ -94,7 +94,7 @@
         </v-row>
         <v-row justify="center">
           <v-col cols="10">
-            <v-btn large color="primary" @click="publis">立即投稿</v-btn>
+            <v-btn large color="primary" @click="publish">立即投稿</v-btn>
           </v-col>
         </v-row>
       </v-card>
@@ -133,13 +133,14 @@ export default {
         value => !value || value.size < 2000000 || 'Avatar size should be less than 2 MB!'
       ],
       videoInfo: {
-        fileId: '',
+        videoInfoId: '',
         title: '',
         desc: '',
         coverUrl: '',
         duration: 0,
-        category: -1,
-        tags: []
+        categoryId: -1,
+        tags: [],
+        fileId: ''
       },
       categoryMap: {
         Set: function(key, value) { this[key] = value },
@@ -148,7 +149,7 @@ export default {
         Remove: function(key) { delete this[key] }
       },
       category: [],
-      categoryChildren: [],
+      childCategory: [],
       nowCategory: {},
       files: [],
       showMessage: false,
@@ -156,10 +157,10 @@ export default {
     }
   },
   created() {
-    this.getCategory()
+    this.getCategoryList()
   },
   methods: {
-    publis() {
+    publish() {
       if (!this.videoInfo.fileId) {
         this.message = '你还没有上传视频'
         this.showMessage = true
@@ -205,10 +206,11 @@ export default {
     },
     videoUploadSuccess(value) {
       if (value.code === 0) {
-        this.videoInfo.fileId = value.data[0].fileId
+        this.videoInfo.videoInfoId = value.data[0].videoInfoId
         this.setTitle(value.data[0].filename)
         this.videoInfo.duration = value.data[0].duration
-        this.videoInfo.coverUrl = 'http://localhost:8000' + value.data[0].coverUrl
+        this.videoInfo.coverUrl = value.data[0].coverUrl
+        this.videoInfo.fileId = value.data[0].fileId
 
         this.message = '视频上传成功'
         this.showMessage = true
@@ -244,7 +246,7 @@ export default {
       }).then(response => response.json())
         .then(json => {
           if (json.code === 0) {
-            this.videoInfo.coverUrl = 'http://localhost:8000' + json.data[0].url
+            this.videoInfo.coverUrl = json.data[0].url
           } else {
             this.message = '上传失败，请重试！' + json.message
             this.showMessage = true
@@ -254,7 +256,7 @@ export default {
           return null
         })
     },
-    getCategory() {
+    getCategoryList() {
       fetch(`/api/media/video/category`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
@@ -275,19 +277,19 @@ export default {
           return null
         })
     },
-    getMainCategory(value) {
-      this.categoryChildren = []
+    getCategory(value) {
+      this.childCategory = []
       this.nowCategory = this.categoryMap.Get(value)
       this.videoInfo.category = this.nowCategory.id
 
       const c = this.nowCategory.children
       if (c) {
         for (let i = 0; i < c.length; i++) {
-          this.categoryChildren.push(c[i].name)
+          this.childCategory.push(c[i].name)
         }
       }
     },
-    getVideoCategory(value) {
+    getChildCategory(value) {
       const c = this.nowCategory.children
       for (let i = 0; i < c.length; i++) {
         if (c[i].name === value) {

src/router/index.js

@@ -198,6 +198,8 @@ router.beforeEach((to, from, next) => {
   // console.log(this.$store.state.webInfo.name)
   // router.app.$options.store
   // 获取网页信息
+  /*
+  // TODO 网站信息暂时不从后端获取
   if (router.app.$options.store.state.webInfo.name == null) {
     fetch(`/api/media/web/info`, {
       headers: {
@@ -212,7 +214,7 @@ router.beforeEach((to, from, next) => {
       .catch(e => {
         return null
       })
-  }
+  }*/
   // 路由发生变化修改页面title
   if (to.meta.title) {
     document.title = to.meta.title

src/store/index.js

@@ -6,16 +6,16 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     webInfo: {
-      // name: 'HerTube',
-      // openNoVipLimit: 1,
-      // noVipViewCount: 5,
-      // logoUrl: '/logo.png',
-      // openInvitationRegister: 1,
-      // describe: '一个牛逼的视频网站',
-      // openUploadVideoAddViewCount: 1,
-      // openExamine: 1,
-      // id: 1,
-      // createTime: 0
+      name: 'HerTube',
+      openNoVipLimit: 1,
+      noVipViewCount: 5,
+      logoUrl: '/logo.png',
+      openInvitationRegister: 1,
+      describe: '一个牛逼的视频网站',
+      openUploadVideoAddViewCount: 1,
+      openExamine: 1,
+      id: 1,
+      createTime: 0
     },
     darkThemOpen: false,
     userInfo: (localStorage.getItem('user') != null &&

src/views/admin/web-setting.vue

@@ -93,7 +93,7 @@ export default {
     }
   },
   created() {
-    this.getSetting()
+    // this.getSetting()
   },
   methods: {
     getSetting() {
@@ -134,5 +134,4 @@ export default {
 </script>
 
 <style>
-
 </style>

src/views/video/video.vue

@@ -3,7 +3,7 @@
     <v-container fill-height fluid style="padding-bottom: 0px;">
       <v-row>
         <v-col style="padding-bottom: 0px;">
-          <VideoPlayer :videoid="videoId" />
+          <VideoPlayer/>
         </v-col>
       </v-row>
     </v-container>
@@ -17,9 +17,7 @@
           </v-row>
           <v-row>
             <v-col style="color: #999;font-size: 12px;padding-top: 0px;">
-              <!--
-              TODO 暂时不显示分类
-              <router-link v-if="videoData.childrenCategory.fatherId !== 0" :to="`/v/${videoData.fatherCategory.id}`" class="category-link">
+              <!--<router-link v-if="videoData.childrenCategory.fatherId !== 0" :to="`/v/${videoData.fatherCategory.id}`" class="category-link">
                 <span v-text="videoData.fatherCategory.name" />
               </router-link>
               /
@@ -27,10 +25,19 @@
                 <span v-text="videoData.childrenCategory.name" />
               </router-link>-->
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              发布于：
+              <span v-text="videoData.viewCount" /> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
               <span v-text="TimeUtil.renderTime(videoData.pubDate)" />
+            </v-col>
+          </v-row>
+          <v-divider />
+          <v-row>
+            <v-col>
+              标签：
+              <span v-for="item in videoData.tags" :key="item">
+                <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
+              </span><br>
               <br>
-              <span v-text="videoData.viewCount" /> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" /> <span v-text="videoData.danmukuCount" /> 弹幕
+              <span v-text="videoData.desc" />
             </v-col>
           </v-row>
           <v-divider />
@@ -47,22 +54,10 @@
                 <span v-text="videoData.username" />
               </router-link>
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <span style="color: #999;font-size: 12px;" v-text="videoData.intro" /><span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
               <v-btn small outlined color="primary">
                 <span>关注</span><span v-html="'&nbsp;&nbsp;'" />
                 <span v-text="videoData.followerCount" />
-              </v-btn><br>
-              <br>
-              <span v-text="videoData.desc" />
-            </v-col>
-          </v-row>
-          <v-divider />
-          <v-row>
-            <v-col>
-              标签：
-              <span v-for="item in videoData.tag" :key="item">
-                <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
-              </span>
+              </v-btn>
             </v-col>
           </v-row>
         </v-col>
@@ -73,7 +68,6 @@
             <template v-slot:activator="{ on, attrs }">
               <v-btn
                 icon
-
                 v-bind="attrs"
                 v-on="on"
               >
@@ -88,7 +82,6 @@
             <template v-slot:activator="{ on, attrs }">
               <v-btn
                 icon
-
                 v-bind="attrs"
                 v-on="on"
               >
@@ -98,7 +91,6 @@
             </template>
             <span>踩一下</span>
           </v-tooltip>
-
         </v-col>
       </v-row>
       <v-row>
@@ -128,7 +120,7 @@ export default {
     return {
       score: 0,
       TimeUtil,
-      videoId: '0',
+      videoId: '',
       videoData: {},
       windowSize: {
       },
@@ -136,13 +128,11 @@ export default {
     }
   },
   created() {
-    console.log('1.########################')
-    // 获取 url 上的参数
+    // 获取 url 上的 path 参数
     this.videoId = this.$route.params.id
     // 请求后端获取数据
     this.videoInfo()
     this.onResize()
-    console.log('2.########################')
   },
   methods: {
     // 控制页面大小

vue.config.js

@@ -19,8 +19,15 @@ module.exports = {
         pathRewrite: {
           '^/api': '/api'
         }
+      },
+      '/tnb': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/tnb': '/tnb'
+        }
       }
-
     }
   },
   configureWebpack: {