update

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://localhost:8000'
-#VUE_APP_BASE_API = 'http://api.reghao.cn'
-FILE_SERVER = 'http://localhost:8002'
+#VUE_APP_BASE_API = 'http://localhost:8000'
+VUE_APP_BASE_API = 'http://api.reghao.cn'
+FILE_SERVER = 'http://file.reghao.cn

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'http://api.reghao.cn'
+VUE_APP_BASE_API = 'https://api.reghao.cn'

Dockerfile

@@ -1,4 +1,4 @@
 FROM docker.reghao.cn/nginx/tnb:1.21
 
-RUN sed -i 's/8080/8081/' /etc/nginx/conf.d/http.conf
+RUN sed -i 's/8080/8082/' /etc/nginx/conf.d/http.conf
 COPY ./dist/ /opt/webroot/

src/components/comment/video-comment.vue

@@ -26,6 +26,7 @@
       </v-col>
       <v-col style="padding-top: 0px;">
         <v-textarea
+            v-model="videoComment"
           placeholder="发表公开评论"
           label="评论"
           rows="2"
@@ -35,7 +36,7 @@
     </v-row>
     <v-row>
       <v-col>
-        <v-btn color="primary" style=" float:right ">评论</v-btn>
+        <v-btn color="primary" style=" float:right " @click="submitComment">评论</v-btn>
       </v-col>
     </v-row>
     <v-divider />
@@ -58,7 +59,19 @@ export default {
   },
   data() {
     return {
-      commentCount: this.count
+      commentCount: this.count,
+      videoComment: ''
+    }
+  },
+  created() {
+    this.getComments()
+  },
+  methods: {
+    getComments() {
+      console.log('获取评论')
+    },
+    submitComment() {
+      console.log('发布评论: ' + this.videoComment)
     }
   }
 }

src/components/player/player.vue

@@ -8,6 +8,7 @@ const hls = require('hls.js')
 const dashjs = require('dashjs')
 const flv = require('flv.js')
 const DPlayer = require('dplayer')
+
 export default {
   name: 'Play',
   data() {
@@ -17,16 +18,16 @@ export default {
       flv,
       DPlayer,
       userId: 0,
-      videoId: ''
+      videoId: '',
+      playRecord: null
     }
   },
   mounted() {
     const userInfo = this.$store.state.user.userInfo
     if (userInfo != null) {
-      this.userId = userInfo.userId.toString()
-    } else {
-      this.userId = 110101
+      this.userId = userInfo.userId
     }
+
     this.videoId = this.$route.params.id
     videoUrl(this.$route.params.id)
       .then(res => {
@@ -36,7 +37,7 @@ export default {
           var videoUrl = res.data.videoUrl
           var urlType = res.data.urlType
           if (urlType === 'mp4') {
-            this.initMp4Player(this.videoId, coverUrl, videoUrl)
+            this.initMp4Player(this.userId, this.videoId, coverUrl, videoUrl)
           } else if (urlType === 'hls') {
             this.initHlsPlayer(this.videoId, coverUrl, videoUrl)
           } else if (urlType === 'dash') {
@@ -54,8 +55,7 @@ export default {
             duration: 500
           })
         }
-      })
-      .catch(error => {
+      }).catch(error => {
         console.error(error.message)
       })
   },
@@ -63,136 +63,126 @@ export default {
     // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     danmakuConfig() {
     },
-    initMp4Player(videoId, coverUrl, videoUrl) {
+    submitVideoPlayRecord(currentTime) {
+      if (this.playRecord == null) {
+        return
+      }
+
+      this.playRecord.currentTime = currentTime
+      submitPlayRecord(this.playRecord)
+        .then(res => {
+          if (res.code === 0) {
+            console.log('播放进度已发送')
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        }).catch(error => {
+          console.error(error.message)
+        })
+    },
+    initMp4Player(userId, videoId, coverUrl, videoUrl) {
       const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
+        logo: '/logo.png',
         autoplay: false,
         screenshot: true,
         video: {
           pic: coverUrl,
           url: videoUrl,
           type: 'auto'
-          // type: 'dash'
         },
-        logo: '/logo.png',
         danmaku: {
           id: videoId,
           maximum: 10000,
           api: '//api.reghao.cn/api/comment/danmaku/',
           token: 'hertube',
-          user: this.userId,
+          user: userId,
           bottom: '15%',
           unlimited: true
         }
       })
 
-      // 跳转到指定秒
-      // dp.seek(100)
-
-      const playRecord1 = {
-        'userId': 110110,
-        'videoId': videoId,
-        'currentTime': 0.0
+      if (userId !== 0) {
+        console.log('初始化 playRecord')
+        this.playRecord = {
+          'userId': this.userId,
+          'videoId': this.videoId,
+          'currentTime': 0.0
+        }
       }
 
+      // 跳转到指定秒
+      // dp.seek(100)
       player.on('play', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        console.log('mp4Player 开始播放事件' + this.userId)
+        console.log(this.playRecord)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('pause', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('ended', function() {
         // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('seeking', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('seeked', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
@@ -201,22 +191,14 @@ export default {
       player.on('progress', function() {
         console.log('i = ' + i)
         if (i % 5 === 0) {
-          playRecord1.currentTime = player.video.currentTime
-          submitPlayRecord(playRecord1)
+          if (this.playRecord == null) {
+            return
+          }
+
+          this.playRecord.currentTime = player.video.currentTime
+          submitPlayRecord(this.playRecord)
             .then(res => {
-              // eslint-disable-next-line no-empty
-              if (res.code === 0) {
-                console.log('播放进度已发送: ' + i)
-              } else {
-                this.$notify({
-                  title: res.code,
-                  message: res.msg,
-                  type: 'warning',
-                  duration: 500
-                })
-              }
-            })
-            .catch(error => {
+            }).catch(error => {
               console.error(error.message)
             })
         }
@@ -247,109 +229,68 @@ export default {
         }
       })
 
-      const playRecord1 = {
-        'userId': 110110,
-        'videoId': videoId,
-        'currentTime': 0.0
-      }
-
       player.on('play', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('pause', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('ended', function() {
         // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('seeking', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
 
       player.on('seeked', function() {
-        playRecord1.currentTime = player.video.currentTime
-        submitPlayRecord(playRecord1)
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
           .then(res => {
-            // eslint-disable-next-line no-empty
-            if (res.code === 0) {
-            } else {
-              this.$notify({
-                title: res.code,
-                message: res.msg,
-                type: 'warning',
-                duration: 500
-              })
-            }
-          })
-          .catch(error => {
+          }).catch(error => {
             console.error(error.message)
           })
       })
@@ -358,22 +299,14 @@ export default {
       player.on('progress', function() {
         console.log('i = ' + i)
         if (i % 5 === 0) {
-          playRecord1.currentTime = player.video.currentTime
-          submitPlayRecord(playRecord1)
+          if (this.playRecord == null) {
+            return
+          }
+
+          this.playRecord.currentTime = player.video.currentTime
+          submitPlayRecord(this.playRecord)
             .then(res => {
-              // eslint-disable-next-line no-empty
-              if (res.code === 0) {
-                console.log('播放进度已发送: ' + i)
-              } else {
-                this.$notify({
-                  title: res.code,
-                  message: res.msg,
-                  type: 'warning',
-                  duration: 500
-                })
-              }
-            })
-            .catch(error => {
+            }).catch(error => {
               console.error(error.message)
             })
         }

src/layout/index.vue

@@ -48,6 +48,7 @@
               icon
               v-bind="attrs"
               v-on="on"
+              @click="goToMessage"
             >
               <v-icon>mdi-bell</v-icon>
             </v-btn>
@@ -148,6 +149,9 @@ export default {
     goToLoginPage() {
       this.$router.push('/login')
     },
+    goToMessage() {
+      this.$router.push('/message')
+    },
     goToPublish() {
       this.$router.push('/studio/upload')
     },

src/router/index.js

@@ -263,8 +263,14 @@ const routes = [
           {
             path: '/message',
             name: 'Message',
-            component: () => import('@/views/user/index.vue'),
+            component: () => import('@/views/message/home.vue'),
             meta: { title: '消息主页' }
+          },
+          {
+            path: '/message/setting',
+            name: 'MessageSetting',
+            component: () => import('@/views/message/setting.vue'),
+            meta: { title: '消息设置' }
           }
         ]
       },

src/utils/index.js

@@ -11,5 +11,5 @@ export function randomString(len) {
 // 获取 captcha url
 export function getCaptchaUrl(r) {
   // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
-  return process.env.VUE_APP_BASE_API + '/api/user/captcha?r=' + r
+  return process.env.VUE_APP_BASE_API + '/api/auth/code/captcha?r=' + r
 }

src/views/admin/web-setting.vue

@@ -129,7 +129,6 @@ export default {
         })
     }
   }
-
 }
 </script>
 

src/views/home/search-result.vue

@@ -55,7 +55,7 @@ export default {
       videoQuery(keyword)
         .then(res => {
           if (res.code === 0) {
-            for (const item of res.data.list) {
+            for (const item of res.data) {
               this.videoList.push(item)
             }
           } else {

src/views/message/home.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-container>
+  </v-container>
+</template>
+
+<script>
+
+export default {
+  data: () => ({
+    drawer: true,
+    items: [
+      { icon: 'mdi-filmstrip-box-multiple', text: '稿件列表', link: '/studio' },
+      { icon: 'mdi-upload', text: '投稿', link: '/studio/upload' },
+      { icon: 'mdi-database', text: '数据统计', link: '/studio/statistics' }
+    ]
+  }),
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/message/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <v-container fill-height fluid style="padding-left: 24px; padding-right: 24px">
+  <v-container>
     <v-row>
       <v-col cols="2">
         <v-sheet rounded="lg">
           <v-list color="transparent">
-            <v-list-item
-              v-for="n in 5"
-              :key="n"
-              link
-            >
-              <v-list-item-content>
-                <v-list-item-title>
-                  List Item {{ n }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
+            <router-link v-for="item in items" :key="item.text" :to="item.link">
+              <v-list-item
+                link
+              >
+                <v-list-item-action>
+                  <v-icon>{{ item.icon }}</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.text }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </router-link>
 
             <v-divider class="my-2" />
 
@@ -31,13 +34,12 @@
           </v-list>
         </v-sheet>
       </v-col>
-
       <v-col>
         <v-sheet
           min-height="70vh"
           rounded="lg"
         >
-          <!--  -->
+          <router-view />
         </v-sheet>
       </v-col>
     </v-row>
@@ -45,14 +47,31 @@
 </template>
 
 <script>
+
 export default {
   data: () => ({
-    links: [
-      'Dashboard',
-      'Messages',
-      'Profile',
-      'Updates'
+    drawer: true,
+    items: [
+      { icon: 'mdi-filmstrip-box-multiple', text: '回复我的', link: '/message' },
+      { icon: 'mdi-upload', text: '@我的', link: '/message/setting' },
+      { icon: 'mdi-upload', text: '受到的赞', link: '/message/setting' },
+      { icon: 'mdi-upload', text: '系统消息', link: '/message/setting' },
+      { icon: 'mdi-upload', text: '我的消息', link: '/message/setting' },
+      { icon: 'mdi-upload', text: '私信存档', link: '/message/setting' },
+      { icon: 'mdi-database', text: '消息设置', link: '/message/setting' }
     ]
-  })
+  }),
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
 }
 </script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/message/setting.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-container>
+    消息设置
+  </v-container>
+</template>
+
+<script>
+
+export default {
+  data: () => ({
+  }),
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/user/home.vue

@@ -25,7 +25,7 @@
           </h2>
         </v-col>
         <v-col
-          v-if="userInfo && userInfo.userId !== userId"
+          v-if="userInfo && userInfo.userId !== loginUserId"
           cols="6"
           md="4"
           class="hidden-sm-and-down ml-0 pl-4"
@@ -57,7 +57,7 @@
     </v-container>
     <v-divider />
     <v-container fill-height>
-      <div id="top" />
+      <div id="top"></div>
       <div v-if="type === 4">
         <v-row>
           <v-col>
@@ -94,9 +94,9 @@
         <v-col
           v-for="item in videoList"
           :key="item.id"
-          cols="12"
         >
-          <VideoList :video="item" />
+          <!--<VideoList :video="item" />-->
+          <ItemCard :item="item" />
         </v-col>
       </v-row>
       <v-row justify="center">
@@ -114,18 +114,20 @@
 import { userVideoList } from '@/api/media/video'
 import { getUserInfo } from '@/api/user/account'
 import Power from '@/utils/check-power.vue'
-import VideoList from '@/components/player/video-card.vue'
+/* import VideoList from '@/components/player/video-card.vue'*/
+import ItemCard from '@/components/item-card.vue'
 import TimeUtil from '@/utils/time-util.vue'
 
 export default {
   name: 'UserHome',
   components: {
-    VideoList
+    ItemCard
   },
   data() {
     return {
       TimeUtil,
       Power,
+      loginUserId: 0,
       userId: 0,
       userInfo: {},
       videoList: [],
@@ -137,9 +139,13 @@ export default {
     }
   },
   created() {
+    if (this.$store.state.user.userInfo !== null) {
+      this.loginUserId = this.$store.state.user.userInfo.userId
+    }
     this.userId = parseInt(this.$route.params.userId)
     this.getUserInfo()
     this.getVideoList()
+    document.title = this.userId + ' 的主页'
   },
   methods: {
     getUserInfo() {

src/views/video/video.vue

@@ -26,9 +26,9 @@
               <router-link :to="`/v/${videoData.childrenCategory.id}`" class="category-link">
                 <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)" />
+              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
+              <span v-text="videoData.viewCount"></span> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+              <span v-text="TimeUtil.renderTime(videoData.pubDate)"></span>
             </v-col>
           </v-row>
           <v-divider />
@@ -40,7 +40,7 @@
                 <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
               </span><br>
               <br>
-              <span v-text="videoData.desc" />
+              <span v-text="videoData.desc"></span>
             </v-col>
           </v-row>
           <v-divider />
@@ -54,13 +54,13 @@
             </v-col>
             <v-col>
               <router-link :to="`/u/${videoData.userId}`">
-                <span v-text="videoData.username" />
+                <span v-text="videoData.username"></span>
               </router-link>
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
               <v-btn small outlined color="primary">
                 <span>关注</span>
-                <span v-html="'&nbsp;&nbsp;'" />
-                <span v-text="videoData.followerCount" />
+                <span v-html="'&nbsp;&nbsp;'"></span>
+                <span v-text="videoData.followerCount"></span>
               </v-btn>
             </v-col>
           </v-row>

vue.config.js

@@ -10,7 +10,8 @@ module.exports = {
   productionSourceMap: false,
   // options...
   devServer: {
-    port: 8080
+    port: 8080,
+    disableHostCheck: true
     // TODO 部署到 nginx 中后，使用 rewrite 指令配置
     /*    proxy: {
       '/tnb': {