├── README.md
└── vue-front
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── assets
        │   ├── images
        │   │   ├── img2.png
        │   │   └── userAvatar.png
        │   └── video
        │   │   ├── 1.吉尼斯世界纪录里最甜的物质是什么？它究竟有多甜？(Av466923503,P1).mp4
        │   │   ├── test.mp4
        │   │   └── 新建文本文档.mp4
        ├── favicon.ico
        └── index.html
    └── src
        ├── App.vue
        ├── api
            ├── axios.js
            ├── permission.js
            ├── statisticApi.js
            └── videoApi.js
        ├── assets
            ├── icon
            │   ├── iconfont.css
            │   ├── iconfont.js
            │   ├── iconfont.json
            │   ├── iconfont.ttf
            │   ├── iconfont.woff
            │   └── iconfont.woff2
            └── images
            │   ├── QQ图片20220414140054.jpg
            │   ├── img1.png
            │   ├── img111.png
            │   ├── img2.png
            │   ├── img3.png
            │   ├── img4.png
            │   ├── img444.png
            │   ├── logo.png
            │   ├── logo1.png
            │   ├── pp1.jpg
            │   ├── pp2.jpg
            │   ├── pp3.jpg
            │   ├── pp4.jpg
            │   ├── video1.png
            │   ├── video2.png
            │   ├── video3.png
            │   ├── video4.png
            │   ├── video5.png
            │   ├── video6.png
            │   ├── video7.png
            │   └── video8.png
        ├── components
            ├── Header.vue
            ├── headerComponent.vue
            ├── videoUpload.vue
            └── videoUpload
            │   ├── projectFileUpload.vue
            │   └── uploadFile.vue
        ├── main.js
        ├── router
            └── index.js
        ├── store
            ├── index.js
            └── user.js
        └── views
            ├── BlogDetail
                └── index.vue
            ├── BlogEdit
                └── index.vue
            ├── Blogs
                └── index.vue
            ├── LabelPage
                ├── index.vue
                └── labelContent.vue
            ├── LabelPage2
                └── index.vue
            ├── LabelPage3
                └── index.vue
            ├── LabelPage4
                └── index.vue
            ├── LabelPage5
                └── index.vue
            ├── LabelPage6
                └── index.vue
            ├── Layout
                └── index.vue
            ├── Login
                └── index.vue
            ├── MessagePage
                ├── index.vue
                └── messageContent.vue
            ├── PersonHome
                ├── index.vue
                ├── noteContent.vue
                ├── noteList.vue
                └── personContent.vue
            ├── PublicPage
                └── index.vue
            ├── RegisterPage
                └── index.vue
            ├── SearchPage
                └── index.vue
            ├── SpacePage
                └── index.vue
            ├── VideoClassify
                └── index.vue
            └── VideoPage
                └── index.vue


/README.md:
--------------------------------------------------------------------------------
1 | # video-web
2 | 基于Vue+Springboot+Flask+Pytorch的视频网站，其中业务服务使用Springboot框架，深度学习部分使用Flask封装Pytorch代码接口，方便Vue前端调用
3 | 


--------------------------------------------------------------------------------
/vue-front/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: [
3 |         '@vue/cli-plugin-babel/preset'
4 |     ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-front/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vueblog-vue",
 3 |     "version": "0.1.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "serve": "vue-cli-service serve",
 7 |         "build": "vue-cli-service build"
 8 |     },
 9 |     "dependencies": {
10 |         "axios": "^0.26.0",
11 |         "core-js": "^3.6.5",
12 |         "element-ui": "^2.15.6",
13 |         "github-markdown-css": "^5.1.0",
14 |         "less-loader": "^5.0.0",
15 |         "markdown-it": "^12.3.2",
16 |         "mavon-editor": "^2.10.4",
17 |         "spark-md5": "^3.0.2",
18 |         "video.js": "^7.18.1",
19 |         "vue": "^2.6.11",
20 |         "vue-router": "^3.2.0",
21 |         "vue-simple-uploader": "^0.7.6",
22 |         "vuex": "^3.4.0"
23 |     },
24 |     "devDependencies": {
25 |         "@vue/cli-plugin-babel": "~4.5.0",
26 |         "@vue/cli-plugin-router": "~4.5.0",
27 |         "@vue/cli-plugin-vuex": "~4.5.0",
28 |         "@vue/cli-service": "~4.5.0",
29 |         "less": "^4.1.2",
30 |         "vue-template-compiler": "^2.6.11",
31 |         "webpack": "^4.0.0"
32 |     },
33 |     "browserslist": [
34 |         "> 1%",
35 |         "last 2 versions",
36 |         "not dead"
37 |     ]
38 | }
39 | 


--------------------------------------------------------------------------------
/vue-front/public/assets/images/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/assets/images/img2.png


--------------------------------------------------------------------------------
/vue-front/public/assets/images/userAvatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/assets/images/userAvatar.png


--------------------------------------------------------------------------------
/vue-front/public/assets/video/1.吉尼斯世界纪录里最甜的物质是什么？它究竟有多甜？(Av466923503,P1).mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/assets/video/1.吉尼斯世界纪录里最甜的物质是什么？它究竟有多甜？(Av466923503,P1).mp4


--------------------------------------------------------------------------------
/vue-front/public/assets/video/test.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/assets/video/test.mp4


--------------------------------------------------------------------------------
/vue-front/public/assets/video/新建文本文档.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/assets/video/新建文本文档.mp4


--------------------------------------------------------------------------------
/vue-front/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/public/favicon.ico


--------------------------------------------------------------------------------
/vue-front/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue-front/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" v-cloak>
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | 
 8 | <style>
 9 | #app {
10 |   /* 960px */
11 |   /* max-width: 2000px;
12 |     margin: 0 auto;
13 |     text-align: center; */
14 |   /*padding: 5px 5px 40px 40px;*/
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/vue-front/src/api/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import Element from 'element-ui'
 3 | import store from '../store'
 4 | import router from '../router'
 5 | 
 6 | axios.defaults.baseURL = "http://172.22.173.94:8081"
 7 | 
 8 | // 前置拦截
 9 | axios.interceptors.request.use(config => {
10 |     if (!['/login/login', '/login/register'].includes(config.url)) {
11 |         config.headers.token = localStorage.getItem('token')
12 |     }
13 |     // console.log('config  : ', config)
14 |     return config
15 | })
16 | 
17 | // 后置拦截
18 | axios.interceptors.response.use(response => {
19 |     let res = response.data
20 | 
21 |     if (res.code === 200) {
22 |         return response
23 |     } else {
24 |         Element.Message.error(response.data.msg, { duration: 1 * 1000 })
25 |         return Promise.reject(response.data.msg)
26 |     }
27 | 
28 | }, error => {
29 |     console.log(error)
30 |     if (error.response.data) {
31 |         error.message = error.response.data.msg
32 |     }
33 | 
34 |     if (error.response === 401) {
35 |         store.commit("REMOVE_INFO")
36 |         router.push("/login")
37 |     }
38 | 
39 |     Element.Message.error(error.message, { duration: 1 * 1000 })
40 |     return Promise.reject(error.message)
41 | 
42 | })
43 | 
44 | export default axios
45 | 


--------------------------------------------------------------------------------
/vue-front/src/api/permission.js:
--------------------------------------------------------------------------------
 1 | import router from "../router";
 2 | 
 3 | // 路由判断登录 根据路由配置文件的参数
 4 | router.beforeEach((to,from,next) => {
 5 |     if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
 6 |         // const token = localStorage.getItem("token")
 7 |         // console.log("------------token : " + token)
 8 |         const userInfo = sessionStorage.getItem("userInfo")
 9 |         console.log("------------userInfo : " + userInfo)
10 |         if(userInfo) {
11 |             if(to.path === '/login') {
12 | 
13 |             } else {
14 |                 next()
15 |             }
16 |         } else {
17 |             next({
18 |                 path: '/login'
19 |             })
20 |         }
21 |     } else {
22 |         next()
23 |     }
24 | })


--------------------------------------------------------------------------------
/vue-front/src/api/statisticApi.js:
--------------------------------------------------------------------------------
 1 | import axios from './axios'
 2 | 
 3 | const statisticApi = {
 4 |     insertLike (videoId) {
 5 |         return axios.get('/statistic/insertLike?videoId=' + (videoId || 0))
 6 |     },
 7 | 
 8 |     deleteLike (videoId) {
 9 |         return axios.get('/statistic/deleteLike?videoId=' + (videoId || 0))
10 |     }
11 | 
12 | }
13 | 
14 | export default statisticApi
15 | 


--------------------------------------------------------------------------------
/vue-front/src/api/videoApi.js:
--------------------------------------------------------------------------------
 1 | import axios from './axios'
 2 | 
 3 | const videoApi = {
 4 | 
 5 |     checkVideoName(fileName) {
 6 |         return axios.get('/video/upload/nameCheck?fileName=' + (fileName || ''))
 7 |     },
 8 | 
 9 |     mergeVideo(fileInfo, videoInfo) {
10 |         return axios.post('/video/upload/mergeVideo', { fileInfo: fileInfo, videoInfo: videoInfo })
11 |     },
12 | 
13 |     getVideoListByLabel(label) {
14 |         return axios.post('/video/getVideoListByLabel', { label: label })
15 |     }
16 | 
17 | }
18 | 
19 | export default videoApi


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "iconfont"; /* Project id 3336397 */
 3 |   src: url('iconfont.woff2?t=1650202339785') format('woff2'),
 4 |        url('iconfont.woff?t=1650202339785') format('woff'),
 5 |        url('iconfont.ttf?t=1650202339785') format('truetype');
 6 | }
 7 | 
 8 | .icon {
 9 |   width: 2em;
10 |   height: 2em;
11 |   vertical-align: -0.15em;
12 |   fill: currentColor;
13 |   overflow: hidden;
14 | }
15 | 
16 | .iconfont {
17 |   font-family: "iconfont" !important;
18 |   font-size: 16px;
19 |   font-style: normal;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 | }
23 | 
24 | .icon-shoucang:before {
25 |   content: "\e626";
26 | }
27 | 
28 | .icon-shoucang1:before {
29 |   content: "\e613";
30 | }
31 | 
32 | .icon-dianzan:before {
33 |   content: "\e630";
34 | }
35 | 
36 | .icon-dianzan1:before {
37 |   content: "\e632";
38 | }
39 | 
40 | 


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.js:
--------------------------------------------------------------------------------
1 | !function(t){var e,l,c,n,i,o='<svg><symbol id="icon-shoucang" viewBox="0 0 1024 1024"><path d="M511.7 209.1l72 145.9c18.2 36.8 53.3 62.3 93.9 68.2l161 23.4-116.5 113.6c-29.4 28.7-42.8 70-35.9 110.4L713.7 831l-144-75.7c-17.8-9.4-37.9-14.3-58-14.3s-40.2 5-58 14.3l-144 75.7 27.5-160.4c6.9-40.5-6.5-81.8-35.9-110.4L184.7 446.6l161-23.4c40.6-5.9 75.7-31.4 93.9-68.2l72.1-145.9m0-124.4c-16 0-31.9 8.3-40.1 24.9L368 319.6c-6.5 13.2-19.1 22.4-33.7 24.5l-231.7 33.7c-36.7 5.3-51.4 50.5-24.8 76.4l167.6 163.4a44.61 44.61 0 0 1 12.9 39.6l-39.6 230.7c-5 28.9 18 52.4 44.1 52.4 6.9 0 14-1.6 20.8-5.2l207.3-109c6.5-3.4 13.7-5.1 20.8-5.1s14.3 1.7 20.8 5.1l207.3 109c6.9 3.6 13.9 5.2 20.8 5.2 26.1 0 49.1-23.5 44.1-52.4l-39.6-230.7a44.61 44.61 0 0 1 12.9-39.6l167.6-163.4c26.6-25.9 11.9-71-24.8-76.4l-231.7-33.7c-14.6-2.1-27.2-11.3-33.7-24.5l-103.6-210c-8.2-16.6-24.2-24.9-40.1-24.9z" fill="#2C2C2C" ></path><path d="M635.7 434.8c-14.6-2.1-27.2-11.3-33.7-24.5l-71.7 35.4c18.2 36.8 53.3 62.3 93.9 68.2l11.5-79.1z" fill="#5ABE64" ></path></symbol><symbol id="icon-shoucang1" viewBox="0 0 1024 1024"><path d="M517.44768 24.9856c267.4688 5.12 472.61696 207.81056 473.31328 470.1184 0.69632 269.43488-197.34528 476.672-470.56896 478.9248-268.14464 2.21184-474.64448-199.96672-475.87328-473.33376C43.13088 232.67328 249.77408 30.33088 517.44768 24.9856z" fill="#FCEBB8" ></path><path d="M314.44992 763.61728c8.00768-51.69152 12.16512-98.7136 23.4496-143.93344 6.656-26.66496-0.53248-42.35264-18.24768-59.35104-27.62752-26.48064-53.92384-54.41536-80.56832-81.94048-15.81056-16.32256-34.67264-33.54624-26.56256-58.44992 9.23648-28.38528 35.47136-35.328 62.58688-39.05536 34.34496-4.7104 68.42368-11.61216 102.8096-15.83104 27.2384-3.33824 41.984-16.71168 51.79392-42.88512 14.0288-37.31456 31.744-73.5232 50.9952-108.50304 23.57248-42.86464 59.33056-43.25376 83.31264-1.18784 17.2032 30.14656 35.4304 61.11232 44.50304 94.12608 13.14816 47.8208 45.7728 59.84256 88.22784 63.7952 29.30688 2.72384 58.7776 6.47168 87.53152 12.67712 51.79392 11.20256 69.632 55.02976 28.81536 85.27872-102.01088 75.65312-123.1872 167.07584-84.31616 283.72992 13.45536 40.36608-33.34144 73.17504-68.42368 47.26784-93.65504-69.20192-180.61312-72.54016-274.49344-0.47104-33.03424 25.41568-71.0656-0.55296-71.41376-35.26656z" fill="#FEC73C" ></path><path d="M485.0688 412.52864c8.2944 0.55296 19.06688-1.65888 22.44608 7.80288 4.75136 13.23008-6.656 19.2512-16.30208 21.0944-36.59776 7.02464-58.24512 27.42272-63.46752 64.75776-1.26976 9.09312-6.53312 18.37056-15.72864 17.42848-12.30848-1.26976-14.29504-12.63616-14.49984-23.73632-0.77824-40.3456 46.2848-87.47008 87.552-87.3472z" fill="#FEF9EE" ></path></symbol><symbol id="icon-dianzan" viewBox="0 0 1024 1024"><path d="M512.12 99C283.41 99 98 284.41 98 513.12s185.41 414.11 414.11 414.11 414.11-185.41 414.11-414.11S740.83 99 512.12 99z m247.57 661.68c-32.17 32.17-69.62 57.43-111.31 75.06-43.12 18.24-88.97 27.49-136.26 27.49s-93.14-9.25-136.26-27.49c-41.68-17.63-79.13-42.88-111.31-75.06-32.17-32.17-57.43-69.62-75.06-111.31C171.25 606.25 162 560.41 162 513.12s9.25-93.14 27.49-136.26c17.63-41.68 42.88-79.13 75.06-111.31 32.17-32.17 69.62-57.43 111.31-75.06C418.98 172.25 464.83 163 512.12 163s93.14 9.25 136.26 27.49c41.68 17.63 79.13 42.88 111.31 75.06 32.17 32.17 57.43 69.62 75.06 111.31 18.24 43.12 27.49 88.97 27.49 136.26s-9.25 93.14-27.49 136.26c-17.64 41.68-42.89 79.13-75.06 111.3z" fill="#333333" ></path><path d="M614.65 322.84c-34.94 0-68.03 13.36-93.17 37.62-3.14 3.03-6.12 6.2-8.93 9.48-2.81-3.28-5.78-6.45-8.93-9.48-25.14-24.26-58.22-37.62-93.17-37.62-73.99 0-134.18 60.19-134.18 134.18 0 84.51 39.19 161.03 113.34 221.3 54.32 44.15 108.49 64.14 110.77 64.97l11.41 4.15 11.29-4.46c2.29-0.9 56.67-22.65 111.29-67.5 74.87-61.46 114.44-137.01 114.44-218.47 0.01-73.97-60.18-134.17-134.16-134.17z m-19.59 302.12c-33.25 27.56-67.09 45.34-84.16 53.43-39.84-17.84-170.63-86.69-170.63-221.37 0-38.7 31.48-70.18 70.18-70.18 63.54 0 100.21 56.31 101.64 94.14 1.43-37.83 43.23-94.14 102.55-94.14 38.7 0 70.18 31.48 70.18 70.18 0 62.08-30.2 118.58-89.76 167.94z" fill="#333333" ></path></symbol><symbol id="icon-dianzan1" viewBox="0 0 1024 1024"><path d="M511.4 511.9m-426.3 0a426.3 426.3 0 1 0 852.6 0 426.3 426.3 0 1 0-852.6 0Z" fill="#FFFFFF" ></path><path d="M511.4 958.2c-60.2 0-118.7-11.8-173.7-35.1-53.1-22.5-100.9-54.7-141.9-95.6-41-41-73.2-88.7-95.6-141.9-23.3-55-35.1-113.5-35.1-173.7s11.8-118.7 35.1-173.7c22.5-53.1 54.7-100.9 95.6-141.9 41-41 88.7-73.2 141.9-95.6 55-23.3 113.5-35.1 173.7-35.1 60.2 0 118.7 11.8 173.7 35.1 53.1 22.5 100.9 54.7 141.9 95.6 41 41 73.2 88.7 95.6 141.9 23.3 55 35.1 113.5 35.1 173.7s-11.7 118.7-35 173.7C900.2 738.8 868 786.5 827 827.5s-88.7 73.2-141.9 95.6c-55 23.3-113.4 35.1-173.7 35.1z m0-852.6c-224 0-406.3 182.3-406.3 406.3s182.3 406.3 406.3 406.3 406.3-182.3 406.3-406.3c0.1-224-182.2-406.3-406.3-406.3z" fill="#FF7A4E" ></path><path d="M716.2 547.3l-196 204.1L340.8 579l0.6-0.7-27.2-25.4c-50.3-46.9-53-125.6-6.2-175.9 46.9-50.3 125.6-53 175.9-6.2l29.9 27.9 22.9-23.9c19.5-20.3 44.2-32.6 70.1-36.7 37.2-5.9 76.6 5 105.9 33.1 49.5 47.7 51.1 126.5 3.5 176.1z" fill="#FF7A4E" ></path></symbol></svg>',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),d=function(t,e){e.parentNode.insertBefore(t,e)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}function s(){i||(i=!0,c())}function h(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}e=function(){var t,e=document.createElement("div");e.innerHTML=o,o=null,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),e()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(c=e,n=t.document,i=!1,h(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,s())})}(window);


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "3336397",
 3 |   "name": "no name",
 4 |   "font_family": "iconfont",
 5 |   "css_prefix_text": "icon-",
 6 |   "description": "",
 7 |   "glyphs": [
 8 |     {
 9 |       "icon_id": "9642297",
10 |       "name": "收藏",
11 |       "font_class": "shoucang",
12 |       "unicode": "e626",
13 |       "unicode_decimal": 58918
14 |     },
15 |     {
16 |       "icon_id": "9855911",
17 |       "name": "收藏",
18 |       "font_class": "shoucang1",
19 |       "unicode": "e613",
20 |       "unicode_decimal": 58899
21 |     },
22 |     {
23 |       "icon_id": "17379586",
24 |       "name": "点赞",
25 |       "font_class": "dianzan",
26 |       "unicode": "e630",
27 |       "unicode_decimal": 58928
28 |     },
29 |     {
30 |       "icon_id": "26308644",
31 |       "name": "点赞",
32 |       "font_class": "dianzan1",
33 |       "unicode": "e632",
34 |       "unicode_decimal": 58930
35 |     }
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/icon/iconfont.ttf


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/icon/iconfont.woff


--------------------------------------------------------------------------------
/vue-front/src/assets/icon/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/icon/iconfont.woff2


--------------------------------------------------------------------------------
/vue-front/src/assets/images/QQ图片20220414140054.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/QQ图片20220414140054.jpg


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img1.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img111.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img111.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img2.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img3.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img4.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/img444.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/img444.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/logo.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/logo1.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/pp1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/pp1.jpg


--------------------------------------------------------------------------------
/vue-front/src/assets/images/pp2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/pp2.jpg


--------------------------------------------------------------------------------
/vue-front/src/assets/images/pp3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/pp3.jpg


--------------------------------------------------------------------------------
/vue-front/src/assets/images/pp4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/pp4.jpg


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video1.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video2.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video3.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video4.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video5.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video6.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video7.png


--------------------------------------------------------------------------------
/vue-front/src/assets/images/video8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guo-admin-lab/video-web/0020d701d467c24d19efa9b32ba6494f5375eed2/vue-front/src/assets/images/video8.png


--------------------------------------------------------------------------------
/vue-front/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="m-content-header">
 3 |         <h3>欢迎来到Ping-pong Sports学习交流</h3>
 4 |         <div class="block">
 5 |             <el-avatar :size="50" :src="user.avatar"></el-avatar>
 6 |             <div>{{ user.username }}</div>
 7 | 
 8 |         </div>
 9 |         <div class="m-action">
10 |             <span><el-link href="/blogs">主页</el-link></span>
11 |             <el-divider direction="vertical"></el-divider>
12 |             <span><el-link type="success" href="/blog/add">发表文章</el-link></span>
13 |             <el-divider direction="vertical"></el-divider>
14 |             <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>
15 |             <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
16 |         </div>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |     name: "Header",
23 |     data() {
24 |         return {
25 |             user: {
26 |                 username: '',
27 |                 avatar: ''
28 |             },
29 |             hasLogin: false
30 |         }
31 |     },
32 |     created() {
33 |         if(this.$store.getters.getUser.username) {
34 |             this.user.username = this.$store.getters.getUser.username
35 |             this.user.avatar = this.$store.getters.getUser.avatar
36 |             
37 |             this.hasLogin = true
38 |         }
39 |     },
40 |     methods: {
41 |         logout() {
42 |             const _this = this
43 |             _this.$axios.get("/logout", {
44 |                 headers: {
45 |                     "Authorization": localStorage.getItem("token")
46 |                 }
47 |             }).then(res => {
48 |                 _this.$store.commit("REMOVE_INFO")
49 |                 _this.$router.push("/login")
50 |             })
51 |         }
52 |     }
53 | }
54 | </script>
55 | 
56 | <style scoped>
57 | .m-content-header {
58 |     padding: 5px;
59 |     /* background-color: aliceblue; */
60 |     /* max-width: 960px; */
61 |     /* margin: 0 auto; */
62 |     text-align: center;
63 | }
64 | 
65 | .m-action {
66 |     margin: 10px;
67 | }
68 | </style>


--------------------------------------------------------------------------------
/vue-front/src/components/headerComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-dialog title="上传视频" :visible.sync="dialogTableVisible">
  4 |       <div v-if="dialogTableVisible">
  5 |         <project-file-upload ref="uploadProjectFileModal" @showButton="isOpenUploadButton = true"
  6 |                              @mergeUploadProjectSuccess="mergeUploadProjectSuccess" @removeFile="isOpenUploadButton = false">
  7 |         </project-file-upload>
  8 |       </div>
  9 |       <span slot="footer" class="dialog-footer">
 10 |           <el-button v-if="isOpenCompleteButton" @click="closeUploadModal">完成</el-button>
 11 |           <el-button type="primary" v-if="isOpenUploadButton" @click="computeMD5ProjectFile">开始上传</el-button>
 12 |       </span>
 13 |     </el-dialog>
 14 |     <el-card class="box-card" body-style="padding: 5px">
 15 |       <div style="display: flex; justify-content: space-between; align-items: center;">
 16 |         <!--logo  + menu    -->
 17 |         <div style="display: flex; justify-content: space-between; align-items: center; width: 30%; margin-left: 50px">
 18 |           <img src="../assets/images/logo1.png" alt="gotube" width="40%" height="50px"/>
 19 |           <el-menu class="el-menu-demo" mode="horizontal" background-color="#FFFFFF" text-color="#303133" active-text-color="#606266">
 20 |             <el-menu-item index="2" @click="toPublicPage"><span class="titlestyle">首页</span></el-menu-item>
 21 |             <el-menu-item index="3" @click="toMessagePage"><span class="titlestyle">消息</span></el-menu-item>
 22 |             <el-menu-item index="4" @click="toSpacePage"><span class="titlestyle">笔记广场</span></el-menu-item>
 23 |           </el-menu>
 24 |         </div>
 25 |         <!-- 搜索框 + 头像 + 上传 + 退出 -->
 26 |         <div style="display: flex; justify-content: space-between; align-items: center; width: 70%; margin-left: 100px; margin-top: 10px">
 27 |           <p style="display: flex; justify-content: space-between; align-items: center; width: 80%">
 28 |             <el-input v-model="searchInput" placeholder="请输入搜索内容" style="width: 70%"></el-input>
 29 |             <el-button type="warning" plain round @click="toSearchPage" style="margin-left: 10px">搜索</el-button>
 30 |             <el-card shadow="hover" body-style="padding: 0;" style="border-radius: 20px;">
 31 |               <el-avatar @click.native="toPersonHome" :src="avatarAddr"></el-avatar>
 32 |             </el-card>
 33 |             <el-button type="danger" round @click="dialogTableVisible = true">上传视频</el-button>
 34 |           </p>
 35 |           <el-button type="info" plain @click="toLogin" style="margin-right: 20px">退出登录</el-button>
 36 |         </div>
 37 |       </div>
 38 |     </el-card>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | // import videoUpload from "./videoUpload.vue";
 44 | import projectFileUpload from "./videoUpload/projectFileUpload.vue";
 45 | export default {
 46 |   name: "headerComponent",
 47 |   components: { projectFileUpload },
 48 |   data() {
 49 |     return {
 50 |       dialogTableVisible: false,
 51 |       isOpenCompleteButton: false,
 52 |       isOpenUploadButton: false,
 53 |       searchInput: "",
 54 |       avatarAddr: "",
 55 |     };
 56 |   },
 57 |   created() {
 58 |     console.log("创建headerCompontent");
 59 |     console.log("头部信息-路由：", this.$route.name);
 60 |     // 加this是因为这个是在data里的，store里放的是全局的
 61 |     this.avatarAddr = "http://172.22.173.94:8081/" + localStorage.avatarAddr;
 62 |     // this.avatarAddr =
 63 |     //   "http://172.22.173.94:8081/" + this.$store.state.avatarAddr;
 64 |   },
 65 |   methods: {
 66 |     // 上传项目文件成功
 67 |     mergeUploadProjectSuccess() {
 68 |       this.isOpenCompleteButton = true
 69 |       this.isOpenUploadButton = false
 70 |     },
 71 |     // 对选择的文件进行切片计算
 72 |     computeMD5ProjectFile() {
 73 |       this.$refs.uploadProjectFileModal.computeMD5ProjectFile()
 74 |     },
 75 |     // 关闭上传项目文件的Modal
 76 |     closeUploadModal() {
 77 |       this.dialogTableVisible = false
 78 |       this.isOpenCompleteButton = false
 79 |       this.$router.go(0)
 80 |     },
 81 |     // ****************** 跳转界面
 82 |     toPersonHome() {
 83 |       console.log("跳转个人页");
 84 |       this.$router.push("/personHome");
 85 |     },
 86 |     toLogin() {
 87 |       localStorage.removeItem("token")
 88 |       localStorage.removeItem("avatarAddr")
 89 |       localStorage.removeItem("userId")
 90 |       this.$router.push("/login");
 91 |     },
 92 |     toMessagePage() {
 93 |       this.$router.push("/messagePage");
 94 |     },
 95 |     toSpacePage() {
 96 |       this.$router.push("/spacePage");
 97 |     },
 98 |     toPublicPage() {
 99 |       this.$router.push("/publicPage");
100 |     },
101 |     toSearchPage() {
102 |       if (this.$route.name !== "SearchPage") {
103 |         this.$router.push({
104 |           path: "/searchPage",
105 |           query: {
106 |             searchInput: this.searchInput,
107 |           },
108 |         });
109 |       } else {
110 |         this.$emit("toSearch", this.searchInput);
111 |       }
112 |     }
113 |   },
114 | };
115 | </script>
116 | 
117 | <style scoped>
118 | .titlestyle {
119 |   font-weight: bold;
120 |   font-size: 15px;
121 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/vue-front/src/components/videoUpload.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-form
  4 |       ref="form"
  5 |       v-show="isOpenVideoForm"
  6 |       :model="submitVideoData"
  7 |       :rules="rules"
  8 |       label-width="80px"
  9 |     >
 10 |       <el-form-item label="标题" prop="title">
 11 |         <el-input v-model="submitVideoData.title"></el-input>
 12 |       </el-form-item>
 13 |       <el-form-item label="简介" prop="desc">
 14 |         <el-input type="textarea" v-model="submitVideoData.desc"></el-input>
 15 |       </el-form-item>
 16 |       <el-form-item label="标签" prop="label">
 17 |         <el-select v-model="submitVideoData.label" placeholder="请选择视频标签">
 18 |           <el-option label="科学科普" value="label1"></el-option>
 19 |           <el-option label="社科·法律·心理" value="label2"></el-option>
 20 |           <el-option label="人文历史" value="label3"></el-option>
 21 |           <el-option label="财经商业" value="label4"></el-option>
 22 |           <el-option label="校园学习" value="label5"></el-option>
 23 |           <el-option label="职业职场" value="label6"></el-option>
 24 |         </el-select>
 25 |       </el-form-item>
 26 |       <el-form-item label="用户ID" prop="userId">
 27 |         <el-input v-model="submitVideoData.userId"></el-input>
 28 |       </el-form-item>
 29 |       <el-form-item>
 30 |         <el-button type="primary" @click="onSubmit">立即创建</el-button>
 31 |         <el-button>取消</el-button>
 32 |       </el-form-item>
 33 |     </el-form>
 34 |     <!-- :data="{ SavePath: this.Path.url }" -->
 35 |     <el-upload
 36 |       :drag="Plus"
 37 |       action="http://172.22.173.94:8081/video/upload"
 38 |       multiple
 39 |       show-file-list
 40 |       :data="submitVideoData"
 41 |       :on-success="handleVideoSuccess"
 42 |       :before-upload="beforeUploadVideo"
 43 |       :on-progress="uploadVideoProcess"
 44 |     >
 45 |       <i v-if="Plus" class="el-icon-upload"></i>
 46 |       <div v-if="Plus" class="el-upload__text">
 47 |         将文件拖到此处，或
 48 |         <em>点击上传</em>
 49 |       </div>
 50 |       <el-progress
 51 |         v-if="videoFlag"
 52 |         type="circle"
 53 |         :percentage="videoUploadPercent"
 54 |         style="margin-top: 30px"
 55 |       ></el-progress>
 56 |       <div v-if="Plus" class="el-upload__tip" slot="tip">
 57 |         只能上传mp4/flv/avi文件, 且不超过300M
 58 |       </div>
 59 |     </el-upload>
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | export default {
 65 |   name: "videoUpload",
 66 |   data() {
 67 |     return {
 68 |       Plus: false,
 69 |       isOpenVideoForm: true,
 70 |       videoFlag: false,
 71 |       submitVideoData: {
 72 |         title: "test1Video",
 73 |         desc: "test1Videodesc",
 74 |         label: "label1",
 75 |         userId: "1",
 76 |       },
 77 |       rules: {
 78 |         title: [
 79 |           { required: true, message: "请输入视频名称", trigger: "blur" },
 80 |           {
 81 |             min: 3,
 82 |             max: 10,
 83 |             message: "长度在 3 到 10 个字符",
 84 |             trigger: "blur",
 85 |           },
 86 |         ],
 87 |         desc: [
 88 |           { required: true, message: "请输入视频简介", trigger: "blur" },
 89 |           {
 90 |             min: 3,
 91 |             max: 30,
 92 |             message: "长度在 3 到 30 个字符",
 93 |             trigger: "blur",
 94 |           },
 95 |         ],
 96 |         label: [
 97 |           { required: true, message: "请选择视频标签", trigger: "change" },
 98 |         ],
 99 |         userId: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
100 |       },
101 |       videoForm: {
102 |         videoId: "",
103 |         videoUrl: "",
104 |       },
105 |       Path: {
106 |         url: "D:/Video",
107 |       },
108 |       videoUploadPercent: 0,
109 |     };
110 |   },
111 |   methods: {
112 |     // 视频上传前执行
113 |     beforeUploadVideo(file) {
114 |       const isLt300M = file.size / 1024 / 1024 < 300;
115 |       if (
116 |         [
117 |           "video/mp4",
118 |           "video/ogg",
119 |           "video/flv",
120 |           "video/avi",
121 |           "video/wmv",
122 |           "video/rmvb",
123 |         ].indexOf(file.type) === -1
124 |       ) {
125 |         this.$message.error("请上传正确的视频格式");
126 |         return false;
127 |       }
128 |       if (!isLt300M) {
129 |         this.$message.error("上传视频大小不能超过300MB哦!");
130 |         return false;
131 |       }
132 |     },
133 |     // 视频上传过程中执行
134 |     uploadVideoProcess(event, file, fileList) {
135 |       this.Plus = false;
136 |       this.videoFlag = true;
137 |       this.videoUploadPercent = parseInt(file.percentage.toFixed(0));
138 |     },
139 |     // 视频上传成功时执行
140 |     handleVideoSuccess(res, file) {
141 |       this.Plus = false;
142 |       this.videoUploadPercent = 100;
143 |       console.log(res);
144 |       // 如果为200代表视频保存成功
145 |       if (res.resCode === "200") {
146 |         // 接收视频传回来的名称和保存地址
147 |         // 至于怎么使用看你啦~
148 |         this.videoForm.videoId = res.newVidoeName;
149 |         this.videoForm.videoUrl = res.VideoUrl;
150 |         this.$message.success("视频上传成功！");
151 |       } else {
152 |         this.$message.error("视频上传失败，请重新上传！");
153 |       }
154 |     },
155 |     onSubmit() {
156 |       this.$refs["form"].validate((value) => {
157 |         if (value) {
158 |           this.isOpenVideoForm = false;
159 |           this.Plus = true;
160 |         } else {
161 |           this.$message.error("请完善视频信息！");
162 |         }
163 |       });
164 |     },
165 |   },
166 | };
167 | </script>


--------------------------------------------------------------------------------
/vue-front/src/components/videoUpload/projectFileUpload.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-form
  4 |                 v-loading="loading"
  5 |                 ref="form"
  6 |                 v-if="isOpenVideoForm"
  7 |                 :model="submitVideoData"
  8 |                 :rules="rules"
  9 |                 label-width="80px"
 10 |         >
 11 |             <el-form-item label="标题" prop="title">
 12 |                 <el-input v-model="submitVideoData.title"></el-input>
 13 |             </el-form-item>
 14 |             <el-form-item label="简介" prop="desc">
 15 |                 <el-input type="textarea" v-model="submitVideoData.desc"></el-input>
 16 |             </el-form-item>
 17 |             <el-form-item label="标签" prop="label">
 18 |                 <el-select v-model="submitVideoData.label" placeholder="请选择视频标签">
 19 |                     <el-option label="科学科普" value="科学科普"></el-option>
 20 |                     <el-option label="社科·法律·心理" value="社科·法律·心理"></el-option>
 21 |                     <el-option label="人文历史" value="人文历史"></el-option>
 22 |                     <el-option label="财经商业" value="财经商业"></el-option>
 23 |                     <el-option label="校园学习" value="校园学习"></el-option>
 24 |                     <el-option label="职业职场" value="职业职场"></el-option>
 25 |                 </el-select>
 26 |             </el-form-item>
 27 |             <el-form-item>
 28 |                 <el-button type="primary" @click="onSubmit">立即创建</el-button>
 29 |                 <el-button>取消</el-button>
 30 |             </el-form-item>
 31 |         </el-form>
 32 |         <uploadFile ref="uploadFile" v-loading="loading" v-if="isOpenUploadModal" @checkFileSuccess="checkFileSuccess" @computeMD5FileSuccess="computeMD5FileSuccess"
 33 |             @removeFile="removeFile"></uploadFile>
 34 |     </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import uploadFile from "./uploadFile.vue"
 39 | import videoApi from "../../api/videoApi"
 40 | export default {
 41 |     name: 'projectFileUpload',
 42 |     components: { uploadFile },
 43 |     data() {
 44 |         return {
 45 |             loading: false,
 46 |             isOpenVideoForm: true,
 47 |             isOpenUploadModal: false,
 48 |             submitVideoData: {
 49 |                 title: "test1Video",
 50 |                 desc: "test1Videodesc",
 51 |                 label: ""
 52 |             },
 53 |             rules: {
 54 |                 title: [
 55 |                     { required: true, message: "请输入视频名称", trigger: "blur" },
 56 |                     {
 57 |                         min: 3,
 58 |                         max: 20,
 59 |                         message: "长度在 3 到 20 个字符",
 60 |                         trigger: "blur",
 61 |                     },
 62 |                 ],
 63 |                 desc: [
 64 |                     { required: true, message: "请输入视频简介", trigger: "blur" },
 65 |                     {
 66 |                         min: 3,
 67 |                         max: 30,
 68 |                         message: "长度在 3 到 30 个字符",
 69 |                         trigger: "blur",
 70 |                     },
 71 |                 ],
 72 |                 label: [
 73 |                     { required: true, message: "请选择视频标签", trigger: "change" },
 74 |                 ],
 75 |                 userId: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
 76 |             },
 77 |             file: null, // 用于接收uploadFile.vue中onFileAdded方法中传来的已经验证过重名的file信息（在uploadProjectFile方法中传入用于切片上传）(原始文件)
 78 |             fileInfo: '' // 用于接收uploadFile.vue中onFileSuccess方法传来的已经切片计算过的文件信息（切片后的文件信息）
 79 |         }
 80 |     },
 81 |     methods: {
 82 |         // 表单验证部分
 83 |         onSubmit() {
 84 |             this.loading = true
 85 |             this.$refs["form"].validate((value) => {
 86 |                 if (value) {
 87 |                     videoApi.checkVideoName(this.submitVideoData.title).then((response) => {
 88 |                         console.log(response.data)
 89 |                         if (response.data.code === 200) {
 90 |                             this.isOpenVideoForm = false;
 91 |                             this.isOpenUploadModal = true;
 92 |                             this.$message.success('视频名称验证成功！')
 93 |                         } else {
 94 |                             this.$message.error('projectFileUpload.vue - onSubmit - response.data.code != 200')
 95 |                         }
 96 |                     }).catch(error => {
 97 |                         console.log('projectFileUpload.vue - onSubmit - 后端抛出异常, error : ', error)
 98 |                     }).finally(() => {
 99 |                         this.loading = false
100 |                     })
101 |                 } else {
102 |                     this.$message.error("请完善视频信息！");
103 |                     this.loading = false
104 |                 }
105 |             });
106 |         },
107 |         // ********************* 文件上传部分
108 |         // 当uploadFile.vue中选择了文件，并通过check接口验证了文件名后立即执行，作用：让上传Modal右下角的“开始上传”按钮显示出来
109 |         // 文件验证成功之后，可以开始上传文件
110 |         checkFileSuccess(file) {
111 |             this.file = file
112 |             // 下面传递的 file 用于voListTable.vue中
113 |             this.$emit('showButton')
114 |         },
115 |         // 文件重名检查完后，开始分片计算
116 |         computeMD5ProjectFile() {
117 |             this.$refs.uploadFile.computeMD5(this.file)
118 |             console.log('开始执行computeMD5方法')
119 |         },
120 |         // 当点击上传Modal右下角“开始上传”，并执行computeMD5（文件上传成功）之后（即执行uploadFile.vue中的onFileSuccess方法之后），开始执行
121 |         computeMD5FileSuccess(fileInfo) {
122 |             this.fileInfo = fileInfo
123 |             this.mergeProjectFile()
124 |         },
125 |         // 对切片后的文件进行合并，并上传
126 |         mergeProjectFile() { // 上传资源，验证信息填写是否完整
127 |             console.log('开始合并上传')
128 |             this.loading = true
129 |             // this.$Spin.show()
130 |             // console.log('fileInfo(in projectFileUpload.vue、mergeProjectFile())', this.fileInfo)
131 |             let videoInfo = {
132 |                 title: this.submitVideoData.title,
133 |                 description: this.submitVideoData.desc,
134 |                 label: this.submitVideoData.label
135 |             }
136 |             // projectFileVO内包含内容包括：name, privacy, description, username, projectId
137 |             console.log('videoInfo: ', videoInfo)
138 |             console.log('fileInfo: ', this.fileInfo)
139 |             videoApi.mergeVideo(this.fileInfo, videoInfo).then(response => { // 分片上传成功以后合并文件
140 |                 // this.$Spin.hide()
141 |                 console.log("合并上传后的相应：", response)
142 |                 if (response.data.code === 200) {
143 |                     this.$message.success('项目文件上传' + response.data.msg)
144 |                     this.$emit('mergeUploadProjectSuccess')
145 |                 } else {
146 |                     this.$message.error('错误信息为：' + response.data.msg + ', 错误码为：' + response.data.code)
147 |                 }
148 |             }).catch(error => {
149 |                 console.log('合并后捕获的未知异常：' + error)
150 |                 // this.$Spin.hide()
151 |                 setTimeout(() => {
152 |                     this.$router.go(0)
153 |                 } , 3000)
154 |                 this.$message.error({ message: error.msg, duration: 7 })
155 |             }).finally(() => {
156 |                 this.loading = false
157 |             })
158 |         },
159 |         removeFile () {
160 |             this.$emit('removeFile')
161 |         }
162 |     }
163 | }
164 | </script>
165 | 


--------------------------------------------------------------------------------
/vue-front/src/components/videoUpload/uploadFile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 博客地址 -->
  3 |   <!-- https://blog.csdn.net/outlierQiqi/article/details/106538216?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164995174816782089346452%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164995174816782089346452&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-106538216.142^v8^control,157^v4^control&utm_term=vue-simple-uploader%E7%9A%84%E5%8F%82%E6%95%B0&spm=1018.2226.3001.4187 -->
  4 |   <div>
  5 |     <!-- 上传器 -->
  6 |     <!-- 把uploader组件的autoStart设为false，即选择文件后不会自动开始上传-->
  7 |     <uploader
  8 |       ref="uploader"
  9 |       v-loading="loading"
 10 |       element-loading-text="正在合成视频文件，请稍等~"
 11 |       :options="options"
 12 |       :autoStart="false"
 13 |       :file-status-text="fileStatusText"
 14 |       @file-added="onFileAdded"
 15 |       @file-success="onFileSuccess"
 16 |       @file-progress="onFileProgress"
 17 |       @file-error="onFileError"
 18 |       @file-removed="fileRemoved"
 19 |       class="uploader-ui"
 20 |     >
 21 |       <uploader-unsupport></uploader-unsupport>
 22 |       <uploader-drop>
 23 |         <div>
 24 |           <uploader-btn
 25 |             id="global-uploader-btn"
 26 |             ref="uploadBtn"
 27 |             v-show="!fileSuccess"
 28 |           >
 29 |             选择文件
 30 |             <i class="el-icon-upload el-icon--right"></i>
 31 |           </uploader-btn>
 32 |         </div>
 33 |       </uploader-drop>
 34 |       <uploader-list></uploader-list>
 35 |     </uploader>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | import SparkMD5 from "spark-md5";
 41 | export default {
 42 |   name: "uploadFile",
 43 |   data() {
 44 |     return {
 45 |       loading: false,
 46 |       fileSuccess: false, // 用来控制按钮“选择文件”，如果文件上传成功，则不在显示此按钮（如果没有上传成功则显示，与正常逻辑相反）
 47 |       options: {
 48 |         // 目标上传 URL，默认POST
 49 |         // target 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认值为 '/'。
 50 |         // target: 'http://localhost:8081/video/upload/chunk',
 51 |         target: "http://172.22.173.94:8081/video/upload/chunk",
 52 |         headers: {
 53 |           token: localStorage.getItem("token"),
 54 |         },
 55 |         // 单文件上传,覆盖式
 56 |         singleFile: true,
 57 |         // 分块大小(单位：字节)
 58 |         // chunkSize 分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小，可见这个 Issue #51，默认 1*1024*1024。
 59 |         chunkSize: "2048000",
 60 |         // 上传文件时文件内容的参数名，对应chunk里的Multipart对象名，默认对象名为file
 61 |         fileParameterName: "chunkFile",
 62 |         // 失败后最多自动重试上传次数
 63 |         // maxChunkRetries 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次，默认 0
 64 |         maxChunkRetries: 3,
 65 |         // 是否开启服务器分片校验，对应GET类型同名的target URL
 66 |         // testChunks 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
 67 |         testChunks: false, // 不进行校验
 68 |       },
 69 |       fileStatusText: {
 70 |         // 上传时的提示语句
 71 |         success: "上传成功",
 72 |         error: "上传失败",
 73 |         uploading: "上传中",
 74 |         paused: "暂停",
 75 |         waiting: "等待上传",
 76 |       },
 77 |     };
 78 |   },
 79 |   methods: {
 80 |     onFileAdded(file) {
 81 |       this.loading = true;
 82 |       if (
 83 |         [
 84 |           "video/mp4",
 85 |           "video/ogg",
 86 |           "video/flv",
 87 |           "video/avi",
 88 |           "video/wmv",
 89 |           "video/rmvb",
 90 |         ].indexOf(file.fileType) === -1
 91 |       ) {
 92 |         this.$message.error("请上传正确的视频格式");
 93 |         file.ignored = true;
 94 |       } else {
 95 |         this.$message.success("视频文件格式验证成功！");
 96 |         this.$emit("checkFileSuccess", file);
 97 |       }
 98 |       this.loading = false;
 99 |       // videoApi.checkVideoName(file.name).then(response => {
100 |       //     console.log(response)
101 |       //     this.$message.success('文件名称验证' + response.data.msg)
102 |       //     this.$emit('checkFileSuccess', file)
103 |       // }).catch((error) => { // 验证不通过后台返回错误码,前端在http.js中拦截并提示msg
104 |       //     file.cancel()
105 |       //     console.log('error', error)
106 |       //     this.$message.error('出现文件重名问题，请更换文件名后重试 (' + error.msg + ')')
107 |       // })
108 |     },
109 |     /**
110 |      * 计算md5，实现断点续传及秒传
111 |      * 在验证文件重名后，首先执行
112 |      * 目前只实现了切片上传,testChunks: false // 不进行服务器端验证
113 |      * @param file
114 |      */
115 |     computeMD5(file) {
116 |       console.log("file=", file); // 获取用户选择上传的文件
117 |       file.pause(); // 先通过 file.pause()暂停文件，然后通过H5的FileReader接口读取文件
118 |       // 单个文件的大小限制50G
119 |       let fileSizeLimit = 50 * 1024 * 1024 * 1024;
120 |       console.log("文件大小：" + file.size);
121 |       console.log("限制大小：" + fileSizeLimit);
122 |       if (file.size > fileSizeLimit) {
123 |         this.$message({
124 |           duration: 7,
125 |           message: "文件大小不能超过50G",
126 |           type: "warning",
127 |         });
128 |         file.cancel();
129 |       }
130 | 
131 |       let fileReader = new FileReader();
132 |       /*
133 |        * FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
134 |        * FileReader.onerror处理error事件。该事件在读取操作发生错误时触发。
135 |        * FileReader.onload处理load事件。该事件在读取操作完成时触发。
136 |        * FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result属性中保存的将是被读取文件的ArrayBuffer数据对象.
137 |        * */
138 |       let time = new Date().getTime();
139 |       // 利用js中File对象的slice( )方法（File.prototype.slice( )）将文件分片后逐个传入spark.appendBinary( )方法来计算、最后通过spark.end( )方法输出结果
140 |       // 很明显，这种方法对于大型文件会非常有利——不容易出错，并且能够提供计算的进度信息
141 |       let blobSlice =
142 |         File.prototype.slice ||
143 |         File.prototype.mozSlice ||
144 |         File.prototype.webkitSlice;
145 |       console.log("blobSlice=", blobSlice);
146 |       let currentChunk = 0; // 初始块数为0
147 |       const chunkSize = 10 * 1024 * 1000; // 分片大小 chunkSize, 每一个分片文件的大小变量为 chunkSize
148 |       let chunks = Math.ceil(file.size / chunkSize); // 分片数量 chunks
149 |       console.log("chunks=", chunks);
150 |       console.log("chunkSize=", chunkSize);
151 |       let spark = new SparkMD5.ArrayBuffer(); // 创建SparkMD5的实例
152 |       // 由于计算整个文件的Md5太慢，因此采用只计算第1块文件的md5的方式
153 |       let chunkNumberMD5 = 1;
154 | 
155 |       loadNext();
156 | 
157 |       fileReader.onload = (e) => {
158 |         spark.append(e.target.result);
159 | 
160 |         if (currentChunk < chunkNumberMD5) {
161 |           loadNext();
162 |         } else {
163 |           let md5 = spark.end(); // 将异步读取文件的结果进行MD5，这里我用的加密工具是spark-md5，你可以通过npm install spark-md5 --save来安装，也可以使用其他MD5加密工具。
164 |           file.uniqueIdentifier = md5; // file有个属性是uniqueIdentifier，代表文件唯一标示，我们把计算出来的MD5赋值给这个属性 file.uniqueIdentifier = md5，这就实现了我们最终的目的。
165 |           file.resume(); // 通过file.resume()开始/继续文件上传
166 |           console.log(
167 |             `MD5计算完毕：${
168 |               file.name
169 |             } \nMD5：${md5} \n分片数量：${chunks} 文件大小:${
170 |               file.size
171 |             } 分片用时：${new Date().getTime() - time} ms`
172 |           );
173 |         }
174 |       };
175 | 
176 |       fileReader.onerror = function () {
177 |         this.$message.error(`文件${file.name}读取出错，请检查该文件`);
178 |         file.cancel();
179 |       };
180 | 
181 |       function loadNext() {
182 |         // 继续进行下一块
183 |         let start = currentChunk * chunkSize;
184 |         let end =
185 |           start + chunkSize >= file.size ? file.size : start + chunkSize;
186 |         /*
187 |          * 当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，
188 |          * 会触发一个 load 事件。从而可以使用  FileReader.onload 属性对该事件进行处理。
189 |          * FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。
190 |          * 当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
191 |          * */
192 |         fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
193 |         currentChunk++;
194 |         console.log("计算第" + currentChunk + "块");
195 |       }
196 |     },
197 |     /*
198 |         上传成功后的响应
199 |         第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
200 |         第二个参数 file 就是当前成功的 Uploader.File 对象本身；
201 |         第三个参数就是 message 就是服务端响应内容，永远都是字符串；
202 |         第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status就是
203 |         */
204 |     onFileSuccess(rootFile, file, response, chunk) {
205 |       console.log({
206 |         "success-rootFile: ": rootFile,
207 |         "success-file: ": file,
208 |         "success-response: ": response,
209 |         "success-chunk: ": chunk,
210 |       });
211 |       console.log("文件上传成功-success");
212 |       // this.fileSuccess = true
213 |       let fileInfo = {};
214 |       fileInfo.id = file.id;
215 |       fileInfo.fileType = file.fileType;
216 |       fileInfo.name = file.name;
217 |       fileInfo.size = file.size;
218 |       fileInfo.relativePath = file.relativePath;
219 |       fileInfo.uniqueIdentifier = file.uniqueIdentifier;
220 |       this.$emit("computeMD5FileSuccess", fileInfo);
221 |     },
222 |     // 文件进度的回调
223 |     onFileProgress(rootFile, file, chunk) {
224 |       // console.log({'progress-rootFile: ': rootFile, 'progress-file: ': file, 'progress-response: ': response, 'progress-chunk: ': chunk})
225 |       console.log(
226 |         `上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${
227 |           chunk.endByte / 1024 / 1024
228 |         }`
229 |       );
230 |     },
231 |     // 上传失败后的响应
232 |     onFileError(rootFile, file, response, chunk) {
233 |       console.log("上传完成后异常信息：" + response);
234 |       console.log({
235 |         "error-rootFile: ": rootFile,
236 |         "error-file: ": file,
237 |         "error-response: ": response,
238 |         "error-chunk: ": chunk,
239 |       });
240 |     },
241 |     // 将所选文件删掉后
242 |     fileRemoved() {
243 |       this.$emit("removeFile");
244 |     },
245 |   },
246 | };
247 | </script>
248 | 


--------------------------------------------------------------------------------
/vue-front/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import ElementUI from 'element-ui';
 6 | import 'element-ui/lib/theme-chalk/index.css';
 7 | import axios from 'axios'
 8 | import "./api/axios"
 9 | import "./api/permission"
10 | import mavonEditor from 'mavon-editor'
11 | import 'mavon-editor/dist/css/index.css'
12 | import Video from 'video.js'
13 | import 'video.js/dist/video-js.css'
14 | import uploader from 'vue-simple-uploader'
15 | import "./assets/icon/iconfont.css"
16 | import "./assets/icon/iconfont.js"
17 | 
18 | Vue.config.productionTip = false
19 | Vue.prototype.$axios = axios
20 | Vue.prototype.$video = Video
21 | 
22 | Vue.use(ElementUI);
23 | Vue.use(mavonEditor);
24 | Vue.use(uploader);
25 | 
26 | new Vue({
27 |     router,
28 |     store,
29 |     render: h => h(App)
30 | }).$mount('#app')
31 | 


--------------------------------------------------------------------------------
/vue-front/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import Login from '../views/Login'
  4 | import BlogDetail from '../views/BlogDetail'
  5 | import BlogEdit from '../views/BlogEdit'
  6 | import PublicPage from '../views/PublicPage'
  7 | import VideoPage from '../views/VideoPage'
  8 | import PersonHome from "../views/PersonHome"
  9 | import MessagePage from "../views/MessagePage"
 10 | import SpacePage from "../views/SpacePage"
 11 | import LabelPage2 from "../views/LabelPage2"
 12 | import LabelPage3 from "../views/LabelPage3"
 13 | import LabelPage4 from "../views/LabelPage4"
 14 | import LabelPage5 from "../views/LabelPage5"
 15 | import LabelPage6 from "../views/LabelPage6"
 16 | import LabelPage from "../views/LabelPage"
 17 | import RegisterPage from "../views/RegisterPage"
 18 | import VideoClassify from "../views/VideoClassify"
 19 | import SearchPage from "../views/SearchPage"
 20 | import Layout from "../views/Layout"
 21 | 
 22 | Vue.use(VueRouter)
 23 | 
 24 | const routes = [
 25 |     {
 26 |         path: '/',
 27 |         name: 'Index',
 28 |         redirect: { name: 'Login' }
 29 |     },
 30 |     {
 31 |         path: '/login',
 32 |         name: 'Login',
 33 |         component: Login
 34 |     },
 35 |     {
 36 |         path: '/registerPage',
 37 |         name: 'RegisterPage',
 38 |         component: RegisterPage
 39 |     },
 40 |     {
 41 |         path: '/searchPage',
 42 |         name: 'SearchPage',
 43 |         component: SearchPage
 44 |     },
 45 |     {
 46 |         path: '/layout',
 47 |         name: 'Layout',
 48 |         component: Layout,
 49 |         redirect: '/publicPage',
 50 |         children: [
 51 |             {
 52 |                 path: '/publicPage',
 53 |                 name: 'PublicPage',
 54 |                 component: PublicPage
 55 |             },
 56 |             {
 57 |                 path: '/labelPage',
 58 |                 name: 'LabelPage',
 59 |                 component: LabelPage
 60 |             },
 61 |             {
 62 |                 path: '/labelPage2',
 63 |                 name: 'LabelPage2',
 64 |                 component: LabelPage2
 65 |             },
 66 |             {
 67 |                 path: '/videoClassify',
 68 |                 name: 'VideoClassify',
 69 |                 component: VideoClassify
 70 |             },
 71 |             {
 72 |                 path: '/labelPage3',
 73 |                 name: 'LabelPage3',
 74 |                 component: LabelPage3
 75 |             },
 76 |             {
 77 |                 path: '/labelPage4',
 78 |                 name: 'LabelPage4',
 79 |                 component: LabelPage4
 80 |             },
 81 |             {
 82 |                 path: '/labelPage5',
 83 |                 name: 'LabelPage5',
 84 |                 component: LabelPage5
 85 |             },
 86 |             {
 87 |                 path: '/labelPage6',
 88 |                 name: 'LabelPage6',
 89 |                 component: LabelPage6
 90 |             },
 91 |             {
 92 |                 path: '/videoPage',
 93 |                 name: 'VideoPage',
 94 |                 component: VideoPage
 95 |             },
 96 |             {
 97 |                 path: '/personHome', // 待会要跳转的路径，随便取
 98 |                 name: 'PersonHome', // 加一个名称，有时候可以根据这个跳转，随便取
 99 |                 component: PersonHome // 路由跳转对应的组件，在import导入
100 |             },
101 |             {
102 |                 path: '/messagePage',
103 |                 name: 'MessagePage',
104 |                 component: MessagePage
105 |             },
106 |             {
107 |                 path: '/spacePage',
108 |                 name: 'SpacePage',
109 |                 component: SpacePage
110 |             },
111 |         ]
112 |     },
113 |     {
114 |         path: '/blogs',
115 |         name: 'Blogs',
116 |         // 懒加载
117 |         component: () => import('../views/Blogs')
118 |     },
119 |     {
120 |         path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
121 |         name: 'BlogAdd',
122 |         meta: {
123 |             requireAuth: true
124 |         },
125 |         component: BlogEdit
126 |     },
127 |     {
128 |         path: '/blog/:blogId',
129 |         name: 'BlogDetail',
130 |         component: BlogDetail
131 |     },
132 |     {
133 |         path: '/blog/:blogId/edit',
134 |         name: 'BlogEdit',
135 |         meta: {
136 |             requireAuth: true
137 |         },
138 |         component: BlogEdit
139 |     }
140 | ]
141 | 
142 | const router = new VueRouter({
143 |     mode: 'history',
144 |     base: process.env.BASE_URL,
145 |     routes
146 | })
147 | 
148 | export default router
149 | 


--------------------------------------------------------------------------------
/vue-front/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import user from './user'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |     state: {
 9 |         token: '',
10 |         userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
11 |     },
12 |     mutations: {
13 |         // set
14 |         SET_TOKEN: (state, token) => {
15 |             state.token = token
16 |             localStorage.setItem("token",token)
17 |         },
18 |         SET_USERINFO: (state, userInfo) => {
19 |             state.userInfo = userInfo
20 |             sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
21 |         },
22 |         REMOVE_INFO: (state) => {
23 |             state.token = ''
24 |             state.userInfo = {}
25 |             localStorage.setItem("token",'')
26 |             // localStorage.removeItem("token")
27 |             sessionStorage.setItem("userInfo",JSON.stringify(''))
28 |             // sessionStorage.removeItem("userInfo")
29 |         }
30 |     },
31 |     getters: {
32 |         // get
33 |         getUser: state => {
34 |             return state.userInfo
35 |         }
36 |     },
37 |     actions: {
38 |     },
39 |     modules: {
40 |         user
41 |     }
42 | })
43 | 


--------------------------------------------------------------------------------
/vue-front/src/store/user.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state: {
 3 |         userId: '',
 4 |         avatarAddr: '',
 5 |         token: ''
 6 |     },
 7 |     mutations: {
 8 | 
 9 |     }
10 | }


--------------------------------------------------------------------------------
/vue-front/src/views/BlogDetail/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Header></Header>
 4 |         <div class="mblog">
 5 |             <div class="mtitle">
 6 |                 <h2>{{ blog.title }}</h2>
 7 |                 <router-link :to="{ name: 'BlogEdit', params: { blogId: blog.id } }">
 8 |                     <el-button plain v-show="ownBlog">编辑</el-button>
 9 |                 </router-link>
10 |             </div>
11 |             <el-divider></el-divider>
12 |             <div class="markdown-body" v-html="blog.content"></div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | import Header from "../../components/Header.vue"
19 | import "github-markdown-css/github-markdown.css"
20 | export default {
21 |     name: "BlogDetail",
22 |     components: { Header },
23 |     data() {
24 |         return {
25 |             blog: {
26 |                 id: "",
27 |                 title: "",
28 |                 content: ""
29 |             },
30 |             ownBlog: false
31 | 
32 |         }
33 |     },
34 |     created() {
35 |         const blogId = this.$route.params.blogId
36 |         // console.log(blogId)
37 |         const _this = this
38 |         this.$axios.get('/blogs/' + blogId).then(res => {
39 |             console.log("< ----------------- : ", blogId, res)
40 |             const blog = res.data.data
41 |             _this.blog.id = blog.id
42 |             _this.blog.title = blog.title
43 |             // _this.ruleForm.description = blog.description
44 |             // 对 content 进行渲染
45 |             var MardownIt = require("markdown-it")
46 |             var md = new MardownIt()
47 |             var result = md.render(blog.content)
48 |             _this.blog.content = result
49 |             _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
50 |         })
51 |     }
52 | }
53 | </script>
54 | 
55 | <style lang="less" scoped>
56 | .mblog {
57 |     display: flex;
58 |     flex-direction: column;
59 |     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
60 |     width: 100%;
61 |     min-height: 600px;
62 |     padding: 20px 15px;
63 |     justify-content: flex-start;
64 | 
65 |     .mtitle {
66 |         // background: red;
67 |         display: flex;
68 |         align-items: center;
69 |         justify-content: space-between;
70 |     }
71 | }
72 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/BlogEdit/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <Header></Header>
  4 |         <div class="m-content">
  5 |             <el-form
  6 |                 :model="ruleForm"
  7 |                 :rules="rules"
  8 |                 ref="ruleForm"
  9 |                 label-width="100px"
 10 |                 class="demo-ruleForm"
 11 |             >
 12 |                 <el-form-item label="标题" prop="title">
 13 |                     <el-input v-model="ruleForm.title"></el-input>
 14 |                 </el-form-item>
 15 | 
 16 |                 <el-form-item label="摘要" prop="description">
 17 |                     <el-input type="textarea" v-model="ruleForm.description"></el-input>
 18 |                 </el-form-item>
 19 | 
 20 |                 <el-form-item label="内容" prop="content">
 21 |                     <mavon-editor v-model="ruleForm.content"></mavon-editor>
 22 |                 </el-form-item>
 23 | 
 24 |                 <el-form-item>
 25 |                     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
 26 |                     <el-button @click="resetForm('ruleForm')">重置</el-button>
 27 |                 </el-form-item>
 28 |             </el-form>
 29 |         </div>
 30 |     </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import Header from "../../components/Header"
 35 | export default {
 36 |     name: "BlogEdit",
 37 |     components: { Header },
 38 |     data() {
 39 |         return {
 40 |             ruleForm: {
 41 |                 id: '',
 42 |                 title: '',
 43 |                 description: '',
 44 |                 content: ''
 45 |             },
 46 |             rules: {
 47 |                 title: [
 48 |                     { required: true, message: '请输入标题', trigger: 'blur' },
 49 |                     { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
 50 |                 ],
 51 |                 description: [
 52 |                     { required: true, message: '请输入摘要', trigger: 'blur' }
 53 |                 ],
 54 |                 content: [
 55 |                     { required: true, message: '请输入内容', trigger: 'blur' }
 56 |                 ]
 57 |             }
 58 |         };
 59 |     },
 60 |     created() {
 61 |         const blogId = this.$route.params.blogId
 62 |         // console.log(blogId)
 63 |         if(blogId) {
 64 |             const _this = this
 65 |             this.$axios.get('/blogs/' + blogId).then(res => {
 66 |                 const blog = res.data.data
 67 |                 _this.ruleForm.id = blog.id
 68 |                 _this.ruleForm.title = blog.title
 69 |                 _this.ruleForm.description = blog.description
 70 |                 _this.ruleForm.content = blog.content
 71 |             })
 72 |         }
 73 |     },
 74 |     methods: {
 75 |         submitForm(formName) {
 76 |             this.$refs[formName].validate((valid) => {
 77 |                 if (valid) {
 78 |                     const _this = this
 79 |                     this.$axios.post("/blogs/edit", this.ruleForm, {
 80 |                         headers: {
 81 |                             "Authorization": localStorage.getItem("token")
 82 |                         }
 83 |                     }).then(res => {
 84 |                         // console.log(res);
 85 |                         _this.$alert('操作成功', '提示', {
 86 |                             confirmButtonText: '确定',
 87 |                             callback: action => {
 88 |                                 _this.$router.push("/blogs")
 89 |                             }
 90 |                         });
 91 |                     })
 92 |                 } else {
 93 |                     console.log('error submit!!');
 94 |                     return false;
 95 |                 }
 96 |             });
 97 |         },
 98 |         resetForm(formName) {
 99 |             this.$refs[formName].resetFields();
100 |         }
101 |     }
102 | }
103 | </script>
104 | 
105 | <style lang="less" scoped>
106 | .m-content {
107 |     text-align: center;
108 | }
109 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/Blogs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="m-content">
 3 |         <Header></Header>
 4 |         <div class="block">
 5 |             <el-timeline>
 6 |                 <el-timeline-item
 7 |                     :timestamp="blog.created"
 8 |                     placement="top"
 9 |                     v-for="blog in blogs"
10 |                     :key="blog.id"
11 |                 >
12 |                     <el-card>
13 |                         <h4>
14 |                             <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
15 |                                 {{ blog.title }}
16 |                             </router-link>
17 |                         </h4>
18 |                         <p>{{ blog.description }}</p>
19 |                     </el-card>
20 |                 </el-timeline-item>
21 |             </el-timeline>
22 | 
23 |             <el-pagination 
24 |                 class="mpage" 
25 |                 background 
26 |                 layout="prev, pager, next" 
27 |                 :current-page="currentPage"
28 |                 :page-size="pageSize"
29 |                 :total="total"
30 |                 @current-change="page"
31 |             ></el-pagination>
32 |         </div>
33 |     </div>
34 | </template>
35 | 
36 | <script>
37 | import Header from "../../components/Header"
38 | export default {
39 |     name: "Blogs",
40 |     components: {
41 |         Header
42 |     },
43 |     data() {
44 |         return {
45 |             blogs: {},
46 |             currentPage: 1,
47 |             total: 0,
48 |             pageSize: 5
49 |         }
50 |     },
51 |     created() {
52 |         this.page(1)
53 |     },
54 |     methods: {
55 |         page(currentPage) {
56 |             const _this = this
57 |             _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
58 |                 console.log(res)
59 |                 _this.blogs = res.data.data.records
60 |                 _this.currentPage = res.data.data.current
61 |                 _this.total = res.data.data.total
62 |                 _this.pageSize = res.data.data.size
63 |             })
64 |         }
65 |     }
66 | }
67 | </script>
68 | 
69 | <style lang="less" scoped>
70 | .m-content {
71 |     padding: 10px;
72 |     /* text-align: center; */
73 |     .mpage {
74 |         text-align: center;
75 |     }
76 | }
77 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 标签的header -->
  4 |     <el-card>
  5 |       <el-row>
  6 |         <!-- <el-col span="3" offset="3">
  7 |           <el-avatar
  8 |             shape="square"
  9 |             :size="100"
 10 |             :fit="contain"
 11 |             src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fseopic.699pic.com%2Fphoto%2F50101%2F8651.jpg_wh1200.jpg&refer=http%3A%2F%2Fseopic.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651155409&t=da7ec899488411d05890128aa5cf9d44"
 12 |           ></el-avatar>
 13 |         </el-col> -->
 14 |         <el-col :span="10" :offset="1">
 15 |           <p
 16 |             style="
 17 |               font-size: 20px;
 18 |               font-weight: bold;
 19 |               font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
 20 |                 sans-serif;
 21 |             "
 22 |           >
 23 |             {{ this.label }}
 24 |           </p>
 25 |         </el-col>
 26 |       </el-row>
 27 |     </el-card>
 28 |     <!-- 标签内的视频 -->
 29 |     <el-card>
 30 |       <el-row class="tac" :gutter="40">
 31 |         <el-col>
 32 |           <div>
 33 |             <el-row :gutter="20">
 34 |               <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 35 |                 <div class="grid-content bg-purple">
 36 |                   <el-card>
 37 |                     <el-image
 38 |                       style="width: 100%; height: 200px"
 39 |                       :src="item.url"
 40 |                     ></el-image>
 41 |                     <div style="height: 20%; width: 100%">
 42 |                       <p class="videotitle">{{ item.title }}</p>
 43 |                       <p style="color: #606266">
 44 |                         {{ item.name }} {{ item.time }}
 45 |                       </p>
 46 |                     </div>
 47 |                   </el-card>
 48 |                 </div>
 49 |               </el-col>
 50 |             </el-row>
 51 |           </div>
 52 |         </el-col>
 53 |       </el-row>
 54 |     </el-card>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script>
 59 | import headerComponent from "../../components/headerComponent";
 60 | import videoApi from "../../api/videoApi";
 61 | 
 62 | export default {
 63 |   name: "labelPage",
 64 |   components: { headerComponent },
 65 |   data() {
 66 |     return {
 67 |       label: "",
 68 |       cardData: [
 69 |         {
 70 |           url: "video3.png",
 71 |           title: "叶利钦の小曲《爱国歌》",
 72 |           // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |           name: "快乐茄子人",
 74 |           time: "2021-8-28",
 75 |         },
 76 |       ],
 77 |     };
 78 |   },
 79 |   created() {
 80 |     this.init();
 81 |   },
 82 |   methods: {
 83 |     init() {
 84 |       this.label = this.$route.query.label;
 85 |       console.log("公共-标签", this.label);
 86 |       videoApi
 87 |         .getVideoListByLabel(this.label)
 88 |         .then((response) => {
 89 |           console.log(response.data.data);
 90 |           this.cardData = [];
 91 |           for (let i = 0; i < response.data.data.length; i++) {
 92 |             let pointPos = response.data.data[i].videoAddr.indexOf(".");
 93 |             let videoImageUrl =
 94 |               "http://172.22.173.94:8081/" +
 95 |               response.data.data[i].videoAddr.substr(0, pointPos) +
 96 |               ".jpg";
 97 |             console.log("图像", videoImageUrl);
 98 |             this.cardData.push({
 99 |               url: videoImageUrl,
100 |               title: response.data.data[i].title,
101 |               name: response.data.data[i].username,
102 |               time: response.data.data[i].createTime,
103 |             });
104 |           }
105 |         })
106 |         .catch((error) => {
107 |           console.log(error);
108 |         });
109 |     },
110 |   },
111 | };
112 | </script>
113 | 
114 | 


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage/labelContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     
 4 | </div>
 5 | 
 6 | 
 7 | 
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     name: "content",
13 |     props: {
14 |         type: "reply",
15 |     },
16 |     data(){
17 |         return{
18 | 
19 |         }
20 |     }
21 | };
22 | </script>


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage2/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <!-- 科学科普 -->
  3 |     <div>
  4 |         <!-- <header-component></header-component> -->
  5 |         <!-- 标签的header -->
  6 |         <el-card>
  7 |             <el-row>
  8 |                 <el-col span="3" offset="3">
  9 |                     <el-avatar shape="square" :size="100" :fit="contain" src='https://img2.baidu.com/it/u=287485602,537568457&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480'></el-avatar>
 10 |                 </el-col>
 11 |                 <el-col span="10" offset="1">
 12 |                     <p style="font-size:20px;font-weight:bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">科学科普</p>
 13 |                 </el-col>
 14 |             </el-row>           
 15 |         </el-card>
 16 |         <!-- 标签内的视频 --> 
 17 |         <el-card>
 18 |         <el-row class="tac" :gutter="40">       
 19 |             <el-col>
 20 |             <div>
 21 |                 <el-row :gutter="20">
 22 |                 <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 23 |                     <div class="grid-content bg-purple">
 24 |                     <el-card>
 25 |                         <el-image
 26 |                         @click="toVideoPage"
 27 |                         style="width: 100%; height: 100%"
 28 |                         :src="require('../../assets/images/' + item.url)"
 29 |                         ></el-image>
 30 |                         <div style="height: 20%; width: 100%">
 31 |                         <p class="videotitle">{{ item.title }}</p>
 32 |                         <p style="color: #606266">
 33 |                             {{ item.name }} {{ item.time }}
 34 |                         </p>
 35 |                         </div>
 36 |                     </el-card>
 37 |                     </div>
 38 |                 </el-col>
 39 |                 </el-row>
 40 |             </div>
 41 |             </el-col>
 42 |         </el-row>
 43 |         </el-card>        
 44 |     </div>
 45 |     
 46 | </template>
 47 | 
 48 | <script>
 49 | import headerComponent from '../../components/headerComponent'
 50 | 
 51 | export default({
 52 |     name: "labelPage2",
 53 |     components: {headerComponent},
 54 |     data(){
 55 |         return{
 56 |             cardData: [
 57 |                 {
 58 |                 url: "video1.png",
 59 |                 title: "吉尼斯世界纪录最甜的物质是？",
 60 |                 name: "小魏科普",
 61 |                 time: "3-2",
 62 |                 },
 63 |                 // {
 64 |                 // url: "video2.png",
 65 |                 // title: "再有人欠你钱不还，一招拘留他！\n",
 66 |                 // name: "张鹏宇律师",
 67 |                 // time: "2-22",
 68 |                 // },
 69 |                 // {
 70 |                 // url: "video3.png",
 71 |                 // title: "叶利钦の小曲《爱国歌》",
 72 |                 // // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |                 // name: "快乐茄子人",
 74 |                 // time: "2021-8-28",
 75 |                 // },
 76 |                 // {
 77 |                 // url: "video4.png",
 78 |                 // title: "20年后，中国什么最值钱？\n",
 79 |                 // name: "财富研究院",
 80 |                 // time: "3-4",
 81 |                 // },
 82 |                 // {
 83 |                 // url: "video5.png",
 84 |                 // title: "你听说过英语的限定词吗？",
 85 |                 // name: "英语兔",
 86 |                 // time: "3-5",
 87 |                 // },
 88 |                 // {
 89 |                 // url: "video6.png",
 90 |                 // title: "工作中总要麻烦其他领导怎么办？",
 91 |                 // name: "体制内老秘书",
 92 |                 // time: "3-4",
 93 |                 // },
 94 |                 // {
 95 |                 // url: "video7.png",
 96 |                 // title: "七种未定式的计算—1的∞次幂型",
 97 |                 // name: "张宇考研数学",
 98 |                 // time: "3-20",
 99 |                 // },
100 |                 // {
101 |                 // url: "video8.png",
102 |                 // title: "说说这8种产品经理",
103 |                 // name: "产品经理王学姐",
104 |                 // time: "3-9",
105 |                 // },
106 |             ]
107 |         }
108 |     }
109 | })
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage3/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <!-- 社科 -->
  3 |     <div>
  4 |         <!-- <header-component></header-component> -->
  5 |         <!-- 标签的header -->
  6 |         <el-card>
  7 |             <el-row>
  8 |                 <el-col span="3" offset="3">
  9 |                     <el-avatar shape="square" :size="100" :fit="contain" src='https://img0.baidu.com/it/u=3871505210,827136268&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'></el-avatar>
 10 |                 </el-col>
 11 |                 <el-col span="10" offset="1">
 12 |                     <p style="font-size:20px;font-weight:bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">社科·法律·心理</p>
 13 |                 </el-col>
 14 |             </el-row>           
 15 |         </el-card>
 16 |         <!-- 标签内的视频 --> 
 17 |         <el-card>
 18 |         <el-row class="tac" :gutter="40">       
 19 |             <el-col>
 20 |             <div>
 21 |                 <el-row :gutter="20">
 22 |                 <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 23 |                     <div class="grid-content bg-purple">
 24 |                     <el-card>
 25 |                         <el-image
 26 |                         @click="toVideoPage"
 27 |                         style="width: 100%; height: 100%"
 28 |                         :src="require('../../assets/images/' + item.url)"
 29 |                         ></el-image>
 30 |                         <div style="height: 20%; width: 100%">
 31 |                         <p class="videotitle">{{ item.title }}</p>
 32 |                         <p style="color: #606266">
 33 |                             {{ item.name }} {{ item.time }}
 34 |                         </p>
 35 |                         </div>
 36 |                     </el-card>
 37 |                     </div>
 38 |                 </el-col>
 39 |                 </el-row>
 40 |             </div>
 41 |             </el-col>
 42 |         </el-row>
 43 |         </el-card>        
 44 |     </div>
 45 |     
 46 | </template>
 47 | 
 48 | <script>
 49 | import headerComponent from '../../components/headerComponent'
 50 | 
 51 | export default({
 52 |     name: "labelPage3",
 53 |     components: {headerComponent},
 54 |     data(){
 55 |         return{
 56 |             cardData: [
 57 |                 // {
 58 |                 // url: "video1.png",
 59 |                 // title: "吉尼斯世界纪录最甜的物质是？",
 60 |                 // name: "小魏科普",
 61 |                 // time: "3-2",
 62 |                 // },
 63 |                 {
 64 |                 url: "video2.png",
 65 |                 title: "再有人欠你钱不还，一招拘留他！\n",
 66 |                 name: "张鹏宇律师",
 67 |                 time: "2-22",
 68 |                 },
 69 |                 // {
 70 |                 // url: "video3.png",
 71 |                 // title: "叶利钦の小曲《爱国歌》",
 72 |                 // // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |                 // name: "快乐茄子人",
 74 |                 // time: "2021-8-28",
 75 |                 // },
 76 |                 // {
 77 |                 // url: "video4.png",
 78 |                 // title: "20年后，中国什么最值钱？\n",
 79 |                 // name: "财富研究院",
 80 |                 // time: "3-4",
 81 |                 // },
 82 |                 // {
 83 |                 // url: "video5.png",
 84 |                 // title: "你听说过英语的限定词吗？",
 85 |                 // name: "英语兔",
 86 |                 // time: "3-5",
 87 |                 // },
 88 |                 // {
 89 |                 // url: "video6.png",
 90 |                 // title: "工作中总要麻烦其他领导怎么办？",
 91 |                 // name: "体制内老秘书",
 92 |                 // time: "3-4",
 93 |                 // },
 94 |                 // {
 95 |                 // url: "video7.png",
 96 |                 // title: "七种未定式的计算—1的∞次幂型",
 97 |                 // name: "张宇考研数学",
 98 |                 // time: "3-20",
 99 |                 // },
100 |                 // {
101 |                 // url: "video8.png",
102 |                 // title: "说说这8种产品经理",
103 |                 // name: "产品经理王学姐",
104 |                 // time: "3-9",
105 |                 // },
106 |             ]
107 |         }
108 |     }
109 | })
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage4/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <!-- 人文历史 -->
  3 |     <div>
  4 |         <!-- <header-component></header-component> -->
  5 |         <!-- 标签的header -->
  6 |         <el-card>
  7 |             <el-row>
  8 |                 <el-col span="3" offset="3">
  9 |                     <el-avatar shape="square" :size="100" :fit="contain" src='https://img2.baidu.com/it/u=1039101084,650182404&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400'></el-avatar>
 10 |                 </el-col>
 11 |                 <el-col span="10" offset="1">
 12 |                     <p style="font-size:20px;font-weight:bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">人文历史</p>
 13 |                 </el-col>
 14 |             </el-row>           
 15 |         </el-card>
 16 |         <!-- 标签内的视频 --> 
 17 |         <el-card>
 18 |         <el-row class="tac" :gutter="40">       
 19 |             <el-col>
 20 |             <div>
 21 |                 <el-row :gutter="20">
 22 |                 <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 23 |                     <div class="grid-content bg-purple">
 24 |                     <el-card>
 25 |                         <el-image
 26 |                         @click="toVideoPage"
 27 |                         style="width: 100%; height: 100%"
 28 |                         :src="require('../../assets/images/' + item.url)"
 29 |                         ></el-image>
 30 |                         <div style="height: 20%; width: 100%">
 31 |                         <p class="videotitle">{{ item.title }}</p>
 32 |                         <p style="color: #606266">
 33 |                             {{ item.name }} {{ item.time }}
 34 |                         </p>
 35 |                         </div>
 36 |                     </el-card>
 37 |                     </div>
 38 |                 </el-col>
 39 |                 </el-row>
 40 |             </div>
 41 |             </el-col>
 42 |         </el-row>
 43 |         </el-card>        
 44 |     </div>
 45 |     
 46 | </template>
 47 | 
 48 | <script>
 49 | import headerComponent from '../../components/headerComponent'
 50 | 
 51 | export default({
 52 |     name: "labelPage4",
 53 |     components: {headerComponent},
 54 |     data(){
 55 |         return{
 56 |             cardData: [
 57 |                 // {
 58 |                 // url: "video1.png",
 59 |                 // title: "吉尼斯世界纪录最甜的物质是？",
 60 |                 // name: "小魏科普",
 61 |                 // time: "3-2",
 62 |                 // },
 63 |                 // {
 64 |                 // url: "video2.png",
 65 |                 // title: "再有人欠你钱不还，一招拘留他！\n",
 66 |                 // name: "张鹏宇律师",
 67 |                 // time: "2-22",
 68 |                 // },
 69 |                 {
 70 |                 url: "video3.png",
 71 |                 title: "叶利钦の小曲《爱国歌》",
 72 |                 // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |                 name: "快乐茄子人",
 74 |                 time: "2021-8-28",
 75 |                 },
 76 |                 // {
 77 |                 // url: "video4.png",
 78 |                 // title: "20年后，中国什么最值钱？\n",
 79 |                 // name: "财富研究院",
 80 |                 // time: "3-4",
 81 |                 // },
 82 |                 // {
 83 |                 // url: "video5.png",
 84 |                 // title: "你听说过英语的限定词吗？",
 85 |                 // name: "英语兔",
 86 |                 // time: "3-5",
 87 |                 // },
 88 |                 // {
 89 |                 // url: "video6.png",
 90 |                 // title: "工作中总要麻烦其他领导怎么办？",
 91 |                 // name: "体制内老秘书",
 92 |                 // time: "3-4",
 93 |                 // },
 94 |                 // {
 95 |                 // url: "video7.png",
 96 |                 // title: "七种未定式的计算—1的∞次幂型",
 97 |                 // name: "张宇考研数学",
 98 |                 // time: "3-20",
 99 |                 // },
100 |                 // {
101 |                 // url: "video8.png",
102 |                 // title: "说说这8种产品经理",
103 |                 // name: "产品经理王学姐",
104 |                 // time: "3-9",
105 |                 // },
106 |             ]
107 |         }
108 |     }
109 | })
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage5/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <!-- 财经商业 -->
  3 |     <div>
  4 |         <!-- <header-component></header-component> -->
  5 |         <!-- 标签的header -->
  6 |         <el-card>
  7 |             <el-row>
  8 |                 <el-col span="3" offset="3">
  9 |                     <el-avatar shape="square" :size="100" :fit="contain" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fbg_w1180%2F00%2F20%2F18%2FWcFAfUzGoR.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651155317&t=8e77bc02d91a072ad46bf1da074b6860'></el-avatar>
 10 |                 </el-col>
 11 |                 <el-col span="10" offset="1">
 12 |                     <p style="font-size:20px;font-weight:bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">财经商业</p>
 13 |                 </el-col>
 14 |             </el-row>           
 15 |         </el-card>
 16 |         <!-- 标签内的视频 --> 
 17 |         <el-card>
 18 |         <el-row class="tac" :gutter="40">       
 19 |             <el-col>
 20 |             <div>
 21 |                 <el-row :gutter="20">
 22 |                 <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 23 |                     <div class="grid-content bg-purple">
 24 |                     <el-card>
 25 |                         <el-image
 26 |                         @click="toVideoPage"
 27 |                         style="width: 100%; height: 100%"
 28 |                         :src="require('../../assets/images/' + item.url)"
 29 |                         ></el-image>
 30 |                         <div style="height: 20%; width: 100%">
 31 |                         <p class="videotitle">{{ item.title }}</p>
 32 |                         <p style="color: #606266">
 33 |                             {{ item.name }} {{ item.time }}
 34 |                         </p>
 35 |                         </div>
 36 |                     </el-card>
 37 |                     </div>
 38 |                 </el-col>
 39 |                 </el-row>
 40 |             </div>
 41 |             </el-col>
 42 |         </el-row>
 43 |         </el-card>        
 44 |     </div>
 45 |     
 46 | </template>
 47 | 
 48 | <script>
 49 | import headerComponent from '../../components/headerComponent'
 50 | 
 51 | export default({
 52 |     name: "labelPage5",
 53 |     components: {headerComponent},
 54 |     data(){
 55 |         return{
 56 |             cardData: [
 57 |                 // {
 58 |                 // url: "video1.png",
 59 |                 // title: "吉尼斯世界纪录最甜的物质是？",
 60 |                 // name: "小魏科普",
 61 |                 // time: "3-2",
 62 |                 // },
 63 |                 // {
 64 |                 // url: "video2.png",
 65 |                 // title: "再有人欠你钱不还，一招拘留他！\n",
 66 |                 // name: "张鹏宇律师",
 67 |                 // time: "2-22",
 68 |                 // },
 69 |                 // {
 70 |                 // url: "video3.png",
 71 |                 // title: "叶利钦の小曲《爱国歌》",
 72 |                 // // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |                 // name: "快乐茄子人",
 74 |                 // time: "2021-8-28",
 75 |                 // },
 76 |                 {
 77 |                 url: "video4.png",
 78 |                 title: "20年后，中国什么最值钱？\n",
 79 |                 name: "财富研究院",
 80 |                 time: "3-4",
 81 |                 },
 82 |                 // {
 83 |                 // url: "video5.png",
 84 |                 // title: "你听说过英语的限定词吗？",
 85 |                 // name: "英语兔",
 86 |                 // time: "3-5",
 87 |                 // },
 88 |                 // {
 89 |                 // url: "video6.png",
 90 |                 // title: "工作中总要麻烦其他领导怎么办？",
 91 |                 // name: "体制内老秘书",
 92 |                 // time: "3-4",
 93 |                 // },
 94 |                 // {
 95 |                 // url: "video7.png",
 96 |                 // title: "七种未定式的计算—1的∞次幂型",
 97 |                 // name: "张宇考研数学",
 98 |                 // time: "3-20",
 99 |                 // },
100 |                 // {
101 |                 // url: "video8.png",
102 |                 // title: "说说这8种产品经理",
103 |                 // name: "产品经理王学姐",
104 |                 // time: "3-9",
105 |                 // },
106 |             ]
107 |         }
108 |     }
109 | })
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------
/vue-front/src/views/LabelPage6/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <!-- 职业职场 -->
  3 |     <div>
  4 |         <!-- <header-component></header-component> -->
  5 |         <!-- 标签的header -->
  6 |         <el-card>
  7 |             <el-row>
  8 |                 <el-col span="3" offset="3">
  9 |                     <el-avatar shape="square" :size="100" :fit="contain" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsrc.sotu114.com%2Fdata%2Fattachment%2Fforum%2F202003%2F07%2F142634ew1ivqvrxqhrhjm2.item.jpg-ture&refer=http%3A%2F%2Fsrc.sotu114.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651155454&t=4b28667a205d6d32b9776b5207ff1fd2'></el-avatar>
 10 |                 </el-col>
 11 |                 <el-col span="10" offset="1">
 12 |                     <p style="font-size:20px;font-weight:bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">职业职场</p>
 13 |                 </el-col>
 14 |             </el-row>           
 15 |         </el-card>
 16 |         <!-- 标签内的视频 --> 
 17 |         <el-card>
 18 |         <el-row class="tac" :gutter="40">       
 19 |             <el-col>
 20 |             <div>
 21 |                 <el-row :gutter="20">
 22 |                 <el-col v-for="(item, index) in cardData" :key="index" :span="6">
 23 |                     <div class="grid-content bg-purple">
 24 |                     <el-card>
 25 |                         <el-image
 26 |                         @click="toVideoPage"
 27 |                         style="width: 100%; height: 100%"
 28 |                         :src="require('../../assets/images/' + item.url)"
 29 |                         ></el-image>
 30 |                         <div style="height: 20%; width: 100%">
 31 |                         <p class="videotitle">{{ item.title }}</p>
 32 |                         <p style="color: #606266">
 33 |                             {{ item.name }} {{ item.time }}
 34 |                         </p>
 35 |                         </div>
 36 |                     </el-card>
 37 |                     </div>
 38 |                 </el-col>
 39 |                 </el-row>
 40 |             </div>
 41 |             </el-col>
 42 |         </el-row>
 43 |         </el-card>        
 44 |     </div>
 45 |     
 46 | </template>
 47 | 
 48 | <script>
 49 | import headerComponent from '../../components/headerComponent'
 50 | 
 51 | export default({
 52 |     name: "labelPage6",
 53 |     components: {headerComponent},
 54 |     data(){
 55 |         return{
 56 |             cardData: [
 57 |                 // {
 58 |                 // url: "video1.png",
 59 |                 // title: "吉尼斯世界纪录最甜的物质是？",
 60 |                 // name: "小魏科普",
 61 |                 // time: "3-2",
 62 |                 // },
 63 |                 // {
 64 |                 // url: "video2.png",
 65 |                 // title: "再有人欠你钱不还，一招拘留他！\n",
 66 |                 // name: "张鹏宇律师",
 67 |                 // time: "2-22",
 68 |                 // },
 69 |                 // {
 70 |                 // url: "video3.png",
 71 |                 // title: "叶利钦の小曲《爱国歌》",
 72 |                 // // 俄罗斯联邦1991—2000国歌《爱国歌》
 73 |                 // name: "快乐茄子人",
 74 |                 // time: "2021-8-28",
 75 |                 // },
 76 |                 // {
 77 |                 // url: "video4.png",
 78 |                 // title: "20年后，中国什么最值钱？\n",
 79 |                 // name: "财富研究院",
 80 |                 // time: "3-4",
 81 |                 // },
 82 |                 // {
 83 |                 // url: "video5.png",
 84 |                 // title: "你听说过英语的限定词吗？",
 85 |                 // name: "英语兔",
 86 |                 // time: "3-5",
 87 |                 // },
 88 |                 {
 89 |                 url: "video6.png",
 90 |                 title: "工作中总要麻烦其他领导怎么办？",
 91 |                 name: "体制内老秘书",
 92 |                 time: "3-4",
 93 |                 },
 94 |                 // {
 95 |                 // url: "video7.png",
 96 |                 // title: "七种未定式的计算—1的∞次幂型",
 97 |                 // name: "张宇考研数学",
 98 |                 // time: "3-20",
 99 |                 // },
100 |                 {
101 |                 url: "video8.png",
102 |                 title: "说说这8种产品经理",
103 |                 name: "产品经理王学姐",
104 |                 time: "3-9",
105 |                 },
106 |             ]
107 |         }
108 |     }
109 | })
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------
/vue-front/src/views/Layout/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <header-component></header-component>
 4 |         <div>
 5 |             <router-view></router-view>
 6 |         </div>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import headerComponent from '../../components/headerComponent.vue'
12 | export default {
13 |     name: 'Layout',
14 |     components: {headerComponent},
15 |     mounted () {
16 |         console.log('layout-router-params: ', this.$route.query.msg)
17 |     }
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/vue-front/src/views/Login/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main">
  3 |     <el-container>
  4 |       <el-header>
  5 |         <div class="mlogo">
  6 |           <h2><img src="../../assets/images/logo.png" alt />Ping-pong Net</h2>
  7 |         </div>
  8 |       </el-header>
  9 |       <el-main>
 10 |         <el-form
 11 |           :model="ruleForm"
 12 |           :rules="rules"
 13 |           ref="ruleForm"
 14 |           label-width="100px"
 15 |           class="demo-ruleForm"
 16 |         >
 17 |           <el-form-item label="用户名" prop="username">
 18 |             <el-input v-model="ruleForm.username"></el-input>
 19 |           </el-form-item>
 20 |           <el-form-item label="密码" prop="password">
 21 |             <el-input type="password" v-model="ruleForm.password"></el-input>
 22 |           </el-form-item>
 23 |           <el-form-item>
 24 |             <el-button
 25 |               type="primary"
 26 |               @click="login"
 27 |               v-loading.fullscreen.lock="fullscreenLoading"
 28 |               >登录</el-button
 29 |             >
 30 |             <el-button @click="register">注册</el-button>
 31 |           </el-form-item>
 32 |         </el-form>
 33 |       </el-main>
 34 |     </el-container>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | export default {
 40 |   name: "Login",
 41 |   data() {
 42 |     return {
 43 |       fullscreenLoading: false,
 44 |       ruleForm: {
 45 |         username: "test",
 46 |         password: "2123",
 47 |       },
 48 |       rules: {
 49 |         username: [
 50 |           { required: true, message: "请输入用户名", trigger: "blur" },
 51 |           {
 52 |             min: 2,
 53 |             max: 15,
 54 |             message: "长度在 2 到 15 个字符",
 55 |             trigger: "blur",
 56 |           },
 57 |         ],
 58 |         password: [
 59 |           { required: true, message: "请输入密码", trigger: "change" },
 60 |         ],
 61 |       },
 62 |     };
 63 |   },
 64 |   methods: {
 65 |     login() {
 66 |       // ***********
 67 |       // this.$router.push("/layout");
 68 |       // ***********
 69 |       this.fullscreenLoading = true;
 70 |       this.$refs["ruleForm"].validate((valid) => {
 71 |         if (valid) {
 72 |           this.$axios.post("/login/login", this.ruleForm).then((response) => {
 73 |               console.log(response.data);
 74 |               if (response.data.code === 200) {
 75 |                 this.$message({
 76 |                   message: "登录成功",
 77 |                   type: "success",
 78 |                 });
 79 |                 this.$router.push("/layout");
 80 |                 localStorage.setItem("userId", response.data.data.userInfo.id);
 81 |                 localStorage.setItem(
 82 |                   "avatarAddr",
 83 |                   response.data.data.userInfo.avatarAddr
 84 |                 );
 85 |                 localStorage.setItem("token", response.data.data.token);
 86 |                 console.log(localStorage);
 87 |                 // this.$store.state.userId = response.data.data.id;
 88 |                 // this.$store.state.avatarAddr = response.data.data.avatarAddr;
 89 |               }
 90 |             }).catch((error) => {
 91 |               this.$message.error("登录失败！");
 92 |               console.log("error", error);
 93 |             }).finally(() => {
 94 |             this.fullscreenLoading = false;
 95 |           })
 96 |         } else {
 97 |           console.log("error submit!!");
 98 |           return false;
 99 |         }
100 |       });
101 |     },
102 |     register() {
103 |       this.$router.push("/registerPage");
104 |     },
105 |   },
106 | };
107 | </script>
108 | 
109 | <style lang="less" scoped>
110 | .main {
111 |   padding: 50px;
112 | }
113 | .el-header {
114 |   text-align: center;
115 | 
116 |   .mlogo {
117 |     margin-top: -10px;
118 |     img {
119 |       height: 20px;
120 |       width: 20px;
121 |       margin-right: 20px;
122 |     }
123 |   }
124 | }
125 | 
126 | .el-main {
127 |   text-align: center;
128 | 
129 |   .demo-ruleForm {
130 |     max-width: 500px;
131 |     margin: 0 auto;
132 |   }
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/vue-front/src/views/MessagePage/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!--导航-->
 4 |     <!-- <header-component></header-component> -->
 5 | 
 6 |     <el-row class="tac">
 7 |       <!-- 左侧导航栏 -->      
 8 |       <el-col :span="5">
 9 |         <el-menu
10 |           :default-openeds="['1']"
11 |           default-active="2"
12 |           class="el-menu-vertical-demo"
13 |           @open="handleOpen"
14 |           @close="handleClose"
15 |           background-color="Transparent"
16 |           text-color="#303133"
17 |           active-text-color="#ffd04b"
18 |         >
19 |           <el-submenu index="1">
20 |             <template slot="title">
21 |               <span class="navstyle"><i class="el-icon-s-promotion"></i>消息中心</span>
22 |             </template>
23 |             <el-menu-item-group>
24 |               <el-menu-item index="1-1" @click="changeType('reply')"><span class="navstyle">● 回复我的</span></el-menu-item>
25 |               <el-menu-item index="1-2" @click="changeType('who')"><span class="navstyle">● 收到的赞</span></el-menu-item>
26 |               <el-menu-item index="1-2" @click="changeType('system')"><span class="navstyle">● 系统通知</span></el-menu-item>
27 |             </el-menu-item-group>
28 |           </el-submenu>
29 |         </el-menu>
30 |       </el-col>
31 |       <!-- main界面 -->
32 |       <el-col :span="19">
33 |         <message-content :type="type"></message-content>
34 |       </el-col>
35 |     </el-row>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | import headerComponent from "../../components/headerComponent";
41 | import messageContent from "./messageContent"
42 | export default {
43 |   name: "MessagePage",
44 |   components: { headerComponent,messageContent},
45 |   data() {
46 |     return {
47 |       type: 'reply',
48 |       pageData: {
49 |         src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
50 |       }
51 |     }
52 |   },
53 |   methods:{
54 |     changeType (type) {
55 |       this.type = type
56 |       // console.log('父 - type: ', type)
57 |       // console.log('父 - this.type: ', this.type)
58 |     }
59 |   }
60 | };
61 | </script>
62 | 
63 | <style scoped>
64 | .namestyle {
65 |   font-weight: bold;
66 |   font-size: 17px;
67 | }
68 | .navstyle {
69 |   font-weight: bold;
70 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
71 |   /* font-size: 15px; */
72 |   /* font-family:'Times New Roman', Times, serif; */
73 | }
74 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/MessagePage/messageContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 回复我的 -->
  4 |     <div v-if="type === 'reply'">
  5 |       <el-card>
  6 |         <el-row v-for="(item, index) in commentData.otherUser" :key="index">
  7 |           <!-- 头像 -->
  8 |           <el-col :span="2">
  9 |             <el-avatar :size="50" :src="item.avatar"></el-avatar>
 10 |           </el-col>
 11 |           <!-- 其他信息 -->
 12 |           <el-col :span="18">
 13 |             <p class="namestyle">{{ item.name }}</p>
 14 |             <p>{{ item.content }}</p>
 15 |             <p style="color: #909399">{{ item.createTime }}</p>
 16 |             <el-divider></el-divider>
 17 |           </el-col>
 18 |         </el-row>
 19 |       </el-card>
 20 |     </div>
 21 |     <!-- 收到的赞 -->
 22 |     <div v-else-if="type === 'who'">
 23 |       <el-card>
 24 |         <el-row v-for="(item, index) in commentData.otherUser" :key="index">
 25 |           <!-- 头像 -->
 26 |           <el-col :span="2">
 27 |             <el-avatar :size="50" :src="item.avatar"></el-avatar>
 28 |           </el-col>
 29 |           <!-- 其他信息 -->
 30 |           <el-col :span="18">
 31 |             <span class="namestyle">{{ item.name }}</span>
 32 |             <span style="color:#606266">             赞了我的评论</span>
 33 |             <p style="color: #909399">{{ item.createTime }}</p>
 34 |             <el-divider></el-divider>
 35 |           </el-col>
 36 |         </el-row>
 37 |       </el-card>
 38 |     </div>
 39 |     <!-- 系统通知 -->
 40 |     <div v-else-if="type === 'system'">
 41 |       <el-card>
 42 |         <el-row v-for="(item, index) in systemData.otherUser" :key="index">
 43 |           <!-- 头像
 44 |           <el-col :span="2">
 45 |             <el-avatar :size="50" :src="item.avatar"></el-avatar>
 46 |           </el-col> -->
 47 |           <!-- 其他信息 -->
 48 |           <el-col :span="18">
 49 |             <span class="namestyle">{{ item.title }}</span>
 50 |             <span style="color: #909399">{{ item.createTime }}</span>
 51 |             <p style="color:#606266">{{ item.content }}</p>
 52 |             <el-divider></el-divider>
 53 |           </el-col>
 54 |         </el-row>
 55 |       </el-card>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | export default {
 62 |   name: "content",
 63 |   props: {
 64 |     type: 'reply'
 65 |   },
 66 |   data() {
 67 |     return {
 68 |       commentData: {
 69 |         userAvatar: "assets/images/userAvatar.png",
 70 |         textarea: "",
 71 |         otherUser: [
 72 |           {
 73 |             avatar: "assets/images/userAvatar.png",
 74 |             name: "甜咸蛋包饭",
 75 |             content: "哇，你分享的这个观点真的很新颖！",
 76 |             createTime: "2022-03-03 11:31:45",
 77 |           },
 78 |           {
 79 |             avatar: "assets/images/userAvatar.png",
 80 |             name: "番茄沙拉",
 81 |             content: "谢谢你的关注！",
 82 |             createTime: "2022-02-19 11:31:45",
 83 |           },
 84 |           {
 85 |             avatar: "assets/images/userAvatar.png",
 86 |             name: "小狗",
 87 |             content: "好久不见",
 88 |             createTime: "2019-04-03 11:31:45",
 89 |           },
 90 |           {
 91 |             avatar: "assets/images/userAvatar.png",
 92 |             name: "小狗",
 93 |             content: "好久不见",
 94 |             createTime: "2019-04-03 11:31:45",
 95 |           },
 96 |           {
 97 |             avatar: "assets/images/userAvatar.png",
 98 |             name: "小狗",
 99 |             content: "好久不见",
100 |             createTime: "2019-04-03 11:31:45",
101 |           },
102 |           {
103 |             avatar: "assets/images/userAvatar.png",
104 |             name: "小狗",
105 |             content: "好久不见",
106 |             createTime: "2019-04-03 11:31:45",
107 |           },
108 |         ],
109 |       },
110 |       systemData: {
111 |         textarea: "",
112 |         otherUser: [
113 |           {
114 |             title: "进来抽奖，即得100万现金红包瓜分资格！",
115 |             content: "许愿重磅福利来啦！仅限【2月5日】，参与放飞许愿灯活动，完成1次抽奖，即可获得瓜分100万现金大奖资格，还有机会获得SONY PS5、iPhone13等丰厚大礼，许愿抽奖戳>>>",
116 |             createTime: "2022年2月5日 00:00",
117 |           },
118 |           {
119 |             title: "2022拜年纪开播倒计时！",
120 |             content: "GOTUBE开张在即！已经张罗了一桌好菜恭候各位顾客！大家一起拭目以待吧！点击查看详情>>>>> ",
121 |             createTime: "2022年1月31日 00:30",
122 |           },
123 |           {
124 |             title: "2022年的愿望，都来这里实现！",
125 |             content: "放飞许愿灯活动火热进行中，来和B站的小伙伴一起许愿吧！650万份奖品，限时10天领取，先到先得，点我马上参与>>>",
126 |             createTime: "2022年1月30日 12:00",
127 |           },
128 |           {
129 |             title: "速领！你获得了GOTUBE专享用户奖！",
130 |             content: "感谢2021年的关注与陪伴，特为你准备闪光用户奖！2022年也要继续一起闪闪发光哦！立即领奖>>",
131 |             createTime: "2022年1月28日 14:01",
132 |           },
133 |           {
134 |             title: "拜年纪预约活动正式开启！",
135 |             content: "拜年纪特色集卡活动正式开启！集卡换锦鲤，新年赢好礼！大家一起来新年转转运吧~",
136 |             createTime: "2022年1月23日 00:00",
137 |           },
138 |           {
139 |             title: "“2020年度动画评选”投票开始！",
140 |             content: "东京动画奖节2020的“年度动画”评选新增“海外人气奖”，并在GOTUBE开设了投票专场；你的选择，将直接决定最终的评选结果。“BEST100”票选阶段现已开启",
141 |             createTime: "2019年11月2日 11:00",
142 |           },
143 |         ],
144 |       }
145 |     }
146 |   }
147 | }
148 | </script>
149 | 
150 | <style lang="less" scoped>
151 | .namestyle {
152 |   font-weight: bold;
153 |   font-size: 17px;
154 | }
155 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/PersonHome/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 第一个card，图片+导航 -->
  4 |     <el-card>
  5 |       <!--    图片 padding上左下右-->
  6 |       <div class="block">
  7 |         <el-image :src="pageData.src" style="height: 200px; width: 100%">
  8 |         </el-image>
  9 |       </div>
 10 |       <!-- 导航 -->
 11 |       <div>
 12 |         <el-menu
 13 |           class="el-menu-demo"
 14 |           mode="horizontal"
 15 |           background-color="#FFFFFF"
 16 |           text-color="#303133"
 17 |           active-text-color="#ffd04b"
 18 |         >
 19 |           <!--头像-->
 20 |           <el-menu-item>
 21 |             <el-avatar
 22 |               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
 23 |             ></el-avatar>
 24 |           </el-menu-item>
 25 |           <el-menu-item index="1" @click="changeType('myUpload')">
 26 |             <i class="el-icon-upload"></i
 27 |             ><span class="titlestyle">我的投稿</span>
 28 |           </el-menu-item>
 29 |           <el-menu-item index="2" @click="changeType('collect')">
 30 |             <i class="el-icon-star-on"></i
 31 |             ><span class="titlestyle">我的收藏</span></el-menu-item
 32 |           >
 33 |           <el-menu-item index="3" @click="changeType('note')">
 34 |             <i class="el-icon-s-order"></i
 35 |             ><span class="titlestyle">我的笔记</span>
 36 |           </el-menu-item>
 37 |           <!-- 留白 -->
 38 |           <el-menu-item index="4"></el-menu-item>
 39 |           <el-menu-item index="4"></el-menu-item>
 40 |           <el-menu-item index="4"></el-menu-item>
 41 |           <el-menu-item index="4"></el-menu-item>
 42 |           <el-menu-item index="4"></el-menu-item>
 43 |           <el-menu-item index="4"></el-menu-item>
 44 |           <el-menu-item index="4"></el-menu-item>
 45 |           <el-menu-item index="4"></el-menu-item>
 46 |           <el-menu-item index="4"></el-menu-item>
 47 |           <el-menu-item index="4"></el-menu-item>
 48 |           <!-- <el-menu-item index="5"
 49 |             ><span class="titlestyle">关注数 39</span></el-menu-item
 50 |           >
 51 |           <el-menu-item index="6"
 52 |             ><span class="titlestyle">粉丝数 3</span></el-menu-item
 53 |           >
 54 |           <el-menu-item index="7"
 55 |             ><span class="titlestyle">获赞数 4</span></el-menu-item
 56 |           > -->
 57 |           <!-- <el-menu-item index="8"
 58 |             ><span class="titlestyle">播放数 10</span></el-menu-item
 59 |           >
 60 |           <el-menu-item index="9"
 61 |             ><span class="titlestyle">阅读数 0</span></el-menu-item
 62 |           > -->
 63 |         </el-menu>
 64 |       </div>
 65 |     </el-card>
 66 |     <!-- 第二个card，收藏+投稿+笔记 -->
 67 |     <person-content ref="personContent" :type="type"></person-content>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import headerComponent from "../../components/headerComponent";
 73 | import personContent from "./personContent";
 74 | export default {
 75 |   name: "PersonHome",
 76 |   components: { headerComponent, personContent },
 77 |   data() {
 78 |     return {
 79 |       type: "myUpload",
 80 |       // 背景图
 81 |       pageData: {
 82 |         src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
 83 |       },
 84 |       cardData: [
 85 |         {
 86 |           url: "video1.png",
 87 |           title: "吉尼斯世界纪录最甜的物质是？",
 88 |           name: "小魏科普",
 89 |           time: "3-2",
 90 |         },
 91 |         {
 92 |           url: "video2.png",
 93 |           title: "再有人欠你钱不还，一招拘留他！\n",
 94 |           name: "张鹏宇律师",
 95 |           time: "2-22",
 96 |         },
 97 |         {
 98 |           url: "video3.png",
 99 |           title: "叶利钦の小曲《爱国歌》",
100 |           // 俄罗斯联邦1991—2000国歌《爱国歌》
101 |           name: "快乐茄子人",
102 |           time: "2021-8-28",
103 |         },
104 |         {
105 |           url: "video4.png",
106 |           title: "20年后，中国什么最值钱？\n",
107 |           name: "财富研究院",
108 |           time: "3-4",
109 |         },
110 |         {
111 |           url: "video5.png",
112 |           title: "你听说过英语的限定词吗？",
113 |           name: "英语兔",
114 |           time: "3-5",
115 |         },
116 |         {
117 |           url: "video6.png",
118 |           title: "工作中总要麻烦其他领导怎么办？",
119 |           name: "体制内老秘书",
120 |           time: "3-4",
121 |         },
122 |         {
123 |           url: "video7.png",
124 |           title: "七种未定式的计算—1的∞次幂型",
125 |           name: "张宇考研数学",
126 |           time: "3-20",
127 |         },
128 |         {
129 |           url: "video8.png",
130 |           title: "说说这8种产品经理",
131 |           name: "产品经理王学姐",
132 |           time: "3-9",
133 |         },
134 |       ],
135 |     };
136 |   },
137 |   mounted() {
138 |     // 此方法已经换成监听方法
139 |     // this.$refs['personContent'].getListByType()
140 |   },
141 |   methods: {
142 |     toMessagePage() {
143 |       this.$router.push("/messagePage");
144 |     },
145 |     changeType(type) {
146 |       this.type = type;
147 |       // 此方法已经换成监听方法
148 |       // this.$refs['personContent'].getListByType()
149 |     },
150 |   },
151 | };
152 | </script>
153 | 
154 | <style scoped>
155 | /* 图片下的导航 */
156 | .titlestyle {
157 |   font-weight: bold;
158 |   font-size: 15px;
159 |   font-family: "Times New Roman", Times, serif;
160 | }
161 | /* 视频标题 */
162 | .videotitle {
163 |   font-weight: bold;
164 |   /* font-size: 13px; */
165 |   /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
166 | }
167 | /* 左侧导航 */
168 | .navstyle {
169 |   font-weight: bold;
170 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
171 |   /* font-size: 15px; */
172 |   /* font-family:'Times New Roman', Times, serif; */
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/vue-front/src/views/PersonHome/noteContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>ssss</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "noteContent",
 8 |   props: {
 9 |     type: "content",
10 |   },
11 |   data() {
12 |     return {};
13 |   },
14 | };
15 | </script>


--------------------------------------------------------------------------------
/vue-front/src/views/PersonHome/noteList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-row>
 4 |       <!-- 笔记列表 -->
 5 |       <el-row :gutter="10">
 6 |         <el-col v-for="(item, index) in noteData" :key="index" :span="6">
 7 |           <div class="grid-content bg-purple">
 8 |             <el-card>
 9 |               <el-image
10 |                 style="width: 190px; height: 150px; border-radius: 10px"
11 |                 :src="item.url"
12 |               ></el-image>
13 |               <div style="height: 20%; width: 100%">
14 |                 <p class="titlestyle">{{ item.title }}</p>
15 |               </div>
16 |             </el-card>
17 |           </div>
18 |         </el-col>
19 |       </el-row>
20 |     </el-row>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: "noteList",
27 |   props: {
28 |     noteData: [],
29 |   },
30 |   data() {
31 |     return {};
32 |   },
33 |   created() {
34 |     console.log("noteList.vue", this.noteData);
35 |   },
36 |   methods: {},
37 | };
38 | </script>


--------------------------------------------------------------------------------
/vue-front/src/views/PersonHome/personContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 我的投稿 -->
  4 |     <div v-if="type === 'myUpload'">
  5 |       <el-card style="height: 100%">
  6 |         <el-row :gutter="40" class="tac">
  7 |           <!-- 左侧导航栏 -->
  8 |           <el-col :span="5">
  9 |             <el-menu
 10 |               :default-openeds="['1']"
 11 |               active-text-color="#ffd04b"
 12 |               background-color="#FFFFFF"
 13 |               class="el-menu-vertical-demo"
 14 |               default-active="2"
 15 |               text-color="#303133"
 16 |             >
 17 |               <el-submenu index="1">
 18 |                 <template slot="title">
 19 |                   <i class="el-icon-location"></i>
 20 |                   <span @click="getUploadList()" class="uploadnavstyle"
 21 |                     >我的视频</span
 22 |                   >
 23 |                 </template>
 24 |               </el-submenu>
 25 |             </el-menu>
 26 |           </el-col>
 27 |           <!-- 投稿界面 -->
 28 |           <el-col :span="18">
 29 |             <el-row>
 30 |               <el-row :gutter="10">
 31 |                 <el-col
 32 |                   :key="index"
 33 |                   :span="6"
 34 |                   v-for="(item, index) in submitUploadData"
 35 |                 >
 36 |                   <div class="grid-content bg-purple">
 37 |                     <el-card>
 38 |                       <el-image
 39 |                         :src="item.url"
 40 |                         style="width: 100%; height: 200px; border-radius: 10px"
 41 |                       ></el-image>
 42 |                       <div style="height: 20%; width: 100%">
 43 |                         <p
 44 |                           class="titlestyle"
 45 |                           style="display: flex; justify-content: space-between"
 46 |                         >
 47 |                           {{ item.title }}
 48 |                           <el-button @click="openVideo(item.id)" type="text"
 49 |                             >删除该投稿
 50 |                           </el-button>
 51 |                         </p>
 52 |                         <!-- size="mini" -->
 53 |                       </div>
 54 |                     </el-card>
 55 |                   </div>
 56 |                 </el-col>
 57 |               </el-row>
 58 |             </el-row>
 59 |           </el-col>
 60 |         </el-row>
 61 |       </el-card>
 62 |     </div>
 63 |     <!-- 我的收藏 -->
 64 |     <div v-else-if="type === 'collect'">
 65 |       <el-card style="height: 100%">
 66 |         <el-row :gutter="40" class="tac">
 67 |           <!-- 左侧导航栏 -->
 68 |           <el-col :span="5">
 69 |             <el-menu
 70 |               :default-openeds="['1']"
 71 |               active-text-color="#ffd04b"
 72 |               background-color="#FFFFFF"
 73 |               class="el-menu-vertical-demo"
 74 |               default-active="2"
 75 |               text-color="#303133"
 76 |             >
 77 |               <el-submenu index="1">
 78 |                 <template slot="title">
 79 |                   <i class="el-icon-location"></i>
 80 |                   <span @click="collectList" class="uploadnavstyle"
 81 |                     >我的收藏</span
 82 |                   >
 83 |                 </template>
 84 |                 <el-menu-item-group
 85 |                   :key="index"
 86 |                   v-for="(item, index) in collectLabel"
 87 |                 >
 88 |                   <el-menu-item @click="getCollectList(item)"
 89 |                     >{{ item }}
 90 |                   </el-menu-item>
 91 |                 </el-menu-item-group>
 92 |               </el-submenu>
 93 |             </el-menu>
 94 |           </el-col>
 95 |           <!-- 收藏界面：视频 -->
 96 |           <el-col :span="18">
 97 |             <el-row>
 98 |               <el-row :gutter="10">
 99 |                 <el-col
100 |                   :key="index"
101 |                   :span="6"
102 |                   v-for="(item, index) in submitCollectData"
103 |                 >
104 |                   <div class="grid-content bg-purple">
105 |                     <el-card>
106 |                       <el-image
107 |                         :src="item.url"
108 |                         style="width: 100%; height: 200px; border-radius: 10px"
109 |                       ></el-image>
110 |                       <div style="height: 20%; width: 100%">
111 |                         <p
112 |                           class="titlestyle"
113 |                           style="display: flex; justify-content: space-between"
114 |                         >
115 |                           {{ item.title }}
116 |                           <el-button
117 |                             @click="openCollect(item.collectId, item.label)"
118 |                             type="text"
119 |                             >删除该收藏
120 |                           </el-button>
121 |                         </p>
122 |                       </div>
123 |                     </el-card>
124 |                   </div>
125 |                 </el-col>
126 |               </el-row>
127 |             </el-row>
128 |           </el-col>
129 |         </el-row>
130 |       </el-card>
131 |     </div>
132 |     <!-- 我的笔记 -->
133 |     <div v-else-if="type === 'note'">
134 |       <el-card style="height: 100%">
135 |         <el-row :gutter="40" class="tac">
136 |           <!-- 左侧导航栏 -->
137 |           <el-col :span="5">
138 |             <el-menu
139 |               :default-openeds="['1']"
140 |               active-text-color="#ffd04b"
141 |               background-color="#FFFFFF"
142 |               class="el-menu-vertical-demo"
143 |               default-active="2"
144 |               text-color="#303133"
145 |             >
146 |               <el-submenu index="1">
147 |                 <template slot="title">
148 |                   <i class="el-icon-location"></i>
149 |                   <span @click="labelList" class="uploadnavstyle"
150 |                     >我的笔记</span
151 |                   >
152 |                 </template>
153 |                 <el-menu-item-group
154 |                   :key="index"
155 |                   v-for="(item, index) in noteLabel"
156 |                 >
157 |                   <el-menu-item @click="getNoteList(item)"
158 |                     >{{ item }}
159 |                   </el-menu-item>
160 |                 </el-menu-item-group>
161 |               </el-submenu>
162 |             </el-menu>
163 |           </el-col>
164 |           <!-- 笔记界面：笔记列表/笔记内容 -->
165 |           <div v-if="type1 === 'list'">
166 |             <el-col :span="19">
167 |               <el-row>
168 |                 <el-row :gutter="10">
169 |                   <el-col
170 |                     :key="index"
171 |                     :span="6"
172 |                     v-for="(item, index) in submitNoteData"
173 |                   >
174 |                     <div class="grid-content bg-purple">
175 |                       <el-card>
176 |                         <el-image
177 |                           :src="item.url"
178 |                           @click="getNoteContent(item.label, item.noteId)"
179 |                           style="
180 |                             width: 100%;
181 |                             height: 200px;
182 |                             border-radius: 10px;
183 |                           "
184 |                         ></el-image>
185 |                         <div style="height: 20%; width: 100%">
186 |                           <p
187 |                             class="titlestyle"
188 |                             style="
189 |                               display: flex;
190 |                               justify-content: space-between;
191 |                             "
192 |                           >
193 |                             {{ item.title }}
194 |                             <el-button
195 |                               @click="openNote(item.noteId, item.label)"
196 |                               type="text"
197 |                               >删除该笔记
198 |                             </el-button>
199 |                           </p>
200 |                         </div>
201 |                       </el-card>
202 |                     </div>
203 |                   </el-col>
204 |                 </el-row>
205 |               </el-row>
206 |             </el-col>
207 |           </div>
208 |           <div v-else-if="type1 === 'content'">
209 |             <el-col
210 |               :key="index"
211 |               :span="19"
212 |               v-for="(item, index) in noteContent"
213 |             >
214 |               <el-link type="primary"
215 |                 ><h1>{{ item.title }}</h1></el-link
216 |               >
217 |               <p>{{ item.content }}</p>
218 |             </el-col>
219 |           </div>
220 |         </el-row>
221 |       </el-card>
222 |     </div>
223 |   </div>
224 | </template>
225 | 
226 | <script>
227 | export default {
228 |   name: "PersonContent",
229 |   // props里不能进行赋值
230 |   props: {
231 |     type: "",
232 |   },
233 |   data() {
234 |     return {
235 |       type1: "list",
236 |       //getNoteList方法里用
237 |       submitNoteData: [],
238 |       // "我的收藏"里用的
239 |       cardData: [
240 |         {
241 |           url: "video1.png",
242 |           title: "吉尼斯世界纪录最甜的物质是？",
243 |           name: "小魏科普",
244 |           time: "3-2",
245 |         },
246 |         {
247 |           url: "video2.png",
248 |           title: "再有人欠你钱不还，一招拘留他！\n",
249 |           name: "张鹏宇律师",
250 |           time: "2-22",
251 |         },
252 |         {
253 |           url: "video3.png",
254 |           title: "叶利钦の小曲《爱国歌》",
255 |           // 俄罗斯联邦1991—2000国歌《爱国歌》
256 |           name: "快乐茄子人",
257 |           time: "2021-8-28",
258 |         },
259 |         {
260 |           url: "video4.png",
261 |           title: "20年后，中国什么最值钱？\n",
262 |           name: "财富研究院",
263 |           time: "3-4",
264 |         },
265 |         {
266 |           url: "video5.png",
267 |           title: "你听说过英语的限定词吗？",
268 |           name: "英语兔",
269 |           time: "3-5",
270 |         },
271 |         {
272 |           url: "video6.png",
273 |           title: "工作中总要麻烦其他领导怎么办？",
274 |           name: "体制内老秘书",
275 |           time: "3-4",
276 |         },
277 |         {
278 |           url: "video7.png",
279 |           title: "七种未定式的计算—1的∞次幂型",
280 |           name: "张宇考研数学",
281 |           time: "3-20",
282 |         },
283 |         {
284 |           url: "video8.png",
285 |           title: "说说这8种产品经理",
286 |           name: "产品经理王学姐",
287 |           time: "3-9",
288 |         },
289 |       ],
290 |       //labelList方法里面用
291 |       noteLabel: [],
292 |       //getNoteContent用
293 |       noteContent: [],
294 |       submitCollectData: [],
295 |       collectLabel: [],
296 |       submitUploadData: [],
297 |     };
298 |   },
299 |   watch: {
300 |     type: {
301 |       handler(newName, oldName) {
302 |         this.getListByType();
303 |       },
304 |       immediate: true,
305 |     },
306 |   },
307 |   mounted() {},
308 |   methods: {
309 |     getListByType() {
310 |       if (this.type === "myUpload") {
311 |         console.log("--------------- ", this.type);
312 |         this.getUploadList();
313 |       } else if (this.type === "collect") {
314 |         console.log("--------------- ", this.type);
315 |         this.collectList();
316 |         if (this.collectLabel.length > 0) {
317 |           let tempLabel = this.collectLabel[0];
318 |           this.getCollectList(tempLabel);
319 |         } else {
320 |           // this.$message.warning("您还没有收藏过视频哦！")
321 |         }
322 |       } else if (this.type === "note") {
323 |         console.log("--------------- ", this.type, this.noteLabel.length);
324 |         this.labelList();
325 |         if (this.noteLabel.length > 0) {
326 |           console.log("--------------- 里面", this.type);
327 |           let tempLabel = this.noteLabel[0];
328 |           this.getNoteList(tempLabel);
329 |         } else {
330 |           // this.$message.warning("您还没有写过笔记哦！")
331 |         }
332 |       }
333 |     },
334 |     //删除笔记
335 |     openNote(noteId, label) {
336 |       this.$confirm("此操作将永久删除该笔记, 是否继续?", "提示", {
337 |         confirmButtonText: "确定",
338 |         cancelButtonText: "取消",
339 |         type: "warning",
340 |       })
341 |         .then(() => {
342 |           this.$axios
343 |             .delete("/note/deleteNoteById", {
344 |               data: {
345 |                 noteId: noteId,
346 |               },
347 |             })
348 |             .then((response) => {
349 |               this.$message.success("删除笔记成功！");
350 |               this.getNoteList(label);
351 |             })
352 |             .catch((error) => {
353 |               this.$message.error("删除笔记失败！");
354 |               console.log("error", error);
355 |             });
356 |         })
357 |         .catch(() => {
358 |           this.$message({
359 |             type: "info",
360 |             message: "已取消删除",
361 |           });
362 |         });
363 |     },
364 |     //删除收藏
365 |     openCollect(collectId, label) {
366 |       this.$confirm("此操作将删除该收藏视频, 是否继续?", "提示", {
367 |         confirmButtonText: "确定",
368 |         cancelButtonText: "取消",
369 |         type: "warning",
370 |       })
371 |         .then(() => {
372 |           console.log("删除收藏：", collectId);
373 |           this.$axios
374 |             .delete("/collect/deleteCollectById", {
375 |               data: {
376 |                 collectId: collectId,
377 |               },
378 |             })
379 |             .then((response) => {
380 |               this.$message.success("删除收藏视频成功！");
381 |               this.getCollectList(label);
382 |             })
383 |             .catch((error) => {
384 |               this.$message.error("删除收藏视频失败！");
385 |               console.log("error", error);
386 |             });
387 |         })
388 |         .catch(() => {
389 |           this.$message({
390 |             type: "info",
391 |             message: "已取消删除",
392 |           });
393 |         });
394 |     },
395 |     //删除视频
396 |     openVideo(videoId) {
397 |       this.$confirm("此操作将删除该投稿视频, 是否继续?", "提示", {
398 |         confirmButtonText: "确定",
399 |         cancelButtonText: "取消",
400 |         type: "warning",
401 |       })
402 |         .then(() => {
403 |           this.$axios
404 |             .delete("/video/deleteVideoById", {
405 |               data: {
406 |                 videoId: videoId,
407 |               },
408 |             })
409 |             .then((response) => {
410 |               this.$message.success("删除视频成功！");
411 |               this.getUploadList();
412 |             })
413 |             .catch((error) => {
414 |               this.$message.error("删除视频失败！");
415 |               // console.log("投稿-删除-id", this.submitUploadData.id);
416 |               console.log("error", error);
417 |             });
418 |         })
419 |         .catch(() => {
420 |           this.$message({
421 |             type: "info",
422 |             message: "已取消删除",
423 |           });
424 |         });
425 |     },
426 |     //点击左侧“TA的视频”时触发
427 |     getUploadList() {
428 |       this.submitUploadData = [];
429 |       let videoImageUrl = "";
430 |       let userId = parseInt(localStorage.userId);
431 |       this.$axios
432 |         .get("/video/getVideoListByUserId?userId=" + userId)
433 |         .then((response) => {
434 |           console.log(response.data);
435 |           if (response.data.code === 200) {
436 |             if (response.data.data !== null) {
437 |               for (let i = 0; i < response.data.data.length; i++) {
438 |                 let pointPos = response.data.data[i].videoAddr.indexOf(".");
439 |                 videoImageUrl =
440 |                   "http://172.22.173.94:8081/" +
441 |                   response.data.data[i].videoAddr.substr(0, pointPos) +
442 |                   ".jpg";
443 |                 this.submitUploadData.push({
444 |                   url: videoImageUrl,
445 |                   title: response.data.data[i].title,
446 |                   id: response.data.data[i].id,
447 |                 });
448 |               }
449 |             } else {
450 |               this.$message.warning("您还没有投稿过视频哦！");
451 |             }
452 |           }
453 |         })
454 |         .catch((error) => {
455 |           this.$message.error("获取投稿视频列表失败！");
456 |           console.log("error", error);
457 |         });
458 |     },
459 |     //点击左侧“我的收藏”时触发
460 |     collectList() {
461 |       let userId = parseInt(localStorage.userId);
462 |       this.$axios
463 |         .get("/collect/getLabelList?userId=" + userId)
464 |         .then((response) => {
465 |           console.log("点我的收藏时触发:", response.data);
466 |           if (response.data.code === 200) {
467 |             console.log("response.data.data:", response.data.data);
468 |             if (response.data.data !== null) {
469 |               //在循环之前先给noteLabel清空一下
470 |               this.collectLabel = [];
471 |               for (let i = 0; i < response.data.data.length; i++) {
472 |                 this.collectLabel.push(response.data.data[i]);
473 |               }
474 |             } else {
475 |               this.$message.warning("您还没有收藏过视频哦！");
476 |             }
477 |           }
478 |         })
479 |         .catch((error) => {
480 |           this.$message.error("获取收藏视频列表失败！");
481 |           console.log("error", error);
482 |         });
483 |     },
484 |     //点击左侧“收藏标签”时触发
485 |     getCollectList(label) {
486 |       console.log("传的label大学无讹：", label);
487 |       this.submitCollectData = [];
488 |       let userId = parseInt(localStorage.userId);
489 |       this.$axios
490 |         .get("/collect/getCollectList?userId=" + userId)
491 |         .then((response) => {
492 |           console.log(response.data);
493 |           if (response.data.code === 200) {
494 |             let labelList = Object.keys(response.data.data);
495 |             for (let i = 0; i < labelList.length; i++) {
496 |               if (label === labelList[i]) {
497 |                 for (let j = 0; j < response.data.data[label].length; j++) {
498 |                   let pointPos =
499 |                     response.data.data[label][j].video.videoAddr.indexOf(".");
500 |                   let videoImageUrl =
501 |                     "http://172.22.173.94:8081/" +
502 |                     response.data.data[label][j].video.videoAddr.substr(
503 |                       0,
504 |                       pointPos
505 |                     ) +
506 |                     ".jpg";
507 |                   //往里面push了一个对象{}，里面是键值对
508 |                   this.submitCollectData.push({
509 |                     url: videoImageUrl,
510 |                     label: label,
511 |                     title: response.data.data[label][j].video.title,
512 |                     collectId: response.data.data[label][j].collect.id,
513 |                   });
514 |                 }
515 |               }
516 |             }
517 |           }
518 |         })
519 |         .catch((error) => {
520 |           this.$message.error("获取收藏列表失败！");
521 |           console.log("error", error);
522 |         });
523 |     },
524 |     //点击左侧"笔记标签"时触发，通过userId发送请求获取
525 |     getNoteList(label) {
526 |       this.type1 = "list";
527 |       this.submitNoteData = [];
528 |       let userId = parseInt(localStorage.userId);
529 |       this.$axios
530 |         .get("/note/getNoteList?userId=" + userId)
531 |         .then((response) => {
532 |           console.log(response.data);
533 |           if (response.data.code === 200) {
534 |             //通过http://172.22.173.94:8081/note/getNoteList?userId=2看response.data.data里面的是什么，以及是对象还是数组
535 |             //Object.keys是获取response.data.data（是一个对象）里面的关键字，data{ss[],大学体育[],法律[]}
536 |             let labelList = Object.keys(response.data.data);
537 |             //labelList:["ss","大学体育","法律"]
538 |             for (let i = 0; i < labelList.length; i++) {
539 |               //label是该方法的形参，"ss"或者"大学体育"或者...
540 |               if (label === labelList[i]) {
541 |                 for (let j = 0; j < response.data.data[label].length; j++) {
542 |                   //要获取的是视频封面，但回复里面的是以mp4结尾的，要把这个videoAddr改成jpg结尾的
543 |                   //这里获取.的位置，进行截取
544 |                   let pointPos =
545 |                     response.data.data[label][j].video.videoAddr.indexOf(".");
546 |                   let videoImageUrl =
547 |                     "http://172.22.173.94:8081/" +
548 |                     response.data.data[label][j].video.videoAddr.substr(
549 |                       0,
550 |                       pointPos
551 |                     ) +
552 |                     ".jpg";
553 |                   //往里面push了一个对象{}，里面是键值对
554 |                   this.submitNoteData.push({
555 |                     url: videoImageUrl,
556 |                     label: label,
557 |                     title: response.data.data[label][j].video.title,
558 |                     noteId: response.data.data[label][j].note.id,
559 |                   });
560 |                 }
561 |               }
562 |             }
563 |           }
564 |         })
565 |         .catch((error) => {
566 |           this.$message.error("获取笔记列表失败！");
567 |           console.log("error", error);
568 |         });
569 |     },
570 |     //点左侧”我的笔记“时触发，以userId获取labelList
571 |     labelList() {
572 |       let userId = parseInt(localStorage.userId);
573 |       this.$axios
574 |         .get("/note/getLabelList?userId=" + userId)
575 |         .then((response) => {
576 |           console.log("点我的笔记时触发:", response.data);
577 |           if (response.data.code === 200) {
578 |             console.log("response.data.data:", response.data.data);
579 |             if (response.data.data !== null) {
580 |               //在循环之前先给noteLabel清空一下
581 |               this.noteLabel = [];
582 |               for (let i = 0; i < response.data.data.length; i++) {
583 |                 this.noteLabel.push(response.data.data[i]);
584 |               }
585 |             } else {
586 |               this.$message.warning("您还没有写过笔记哦！");
587 |             }
588 |           } else {
589 |             this.$message.error("response不为200！");
590 |           }
591 |         })
592 |         .catch((error) => {
593 |           this.$message.error("获取标签列表失败！");
594 |           console.log("error", error);
595 |         });
596 |     },
597 |     //点击"笔记列表"时触发
598 |     getNoteContent(label, noteId) {
599 |       this.type1 = "content";
600 |       this.noteContent = [];
601 |       let userId = parseInt(localStorage.userId);
602 |       this.$axios
603 |         .get("/note/getNoteList?userId=" + userId)
604 |         .then((response) => {
605 |           console.log(response.data);
606 |           if (response.data.code === 200) {
607 |             let labelList = Object.keys(response.data.data);
608 |             for (let i = 0; i < labelList.length; i++) {
609 |               //label形参
610 |               if (label === labelList[i]) {
611 |                 for (
612 |                   let j = 0;
613 |                   j < response.data.data[labelList[i]].length;
614 |                   j++
615 |                 ) {
616 |                   if (noteId === response.data.data[labelList[i]][j].note.id) {
617 |                     this.noteContent.push({
618 |                       title: response.data.data[labelList[i]][j].video.title,
619 |                       content: response.data.data[labelList[i]][j].note.content,
620 |                     });
621 |                   }
622 |                 }
623 |               }
624 |             }
625 |           }
626 |         })
627 |         .catch((error) => {
628 |           this.$message.error("获取笔记内容失败！");
629 |           console.log("error", error);
630 |         });
631 |     },
632 |   },
633 | };
634 | </script>
635 | <style lang="less" scoped>
636 | .uploadnavstyle {
637 |   font-weight: bold;
638 |   font-size: 20px;
639 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
640 |   /* font-size: 15px; */
641 |   /* font-family:'Times New Roman', Times, serif; */
642 | }
643 | </style>
644 | 
645 | 


--------------------------------------------------------------------------------
/vue-front/src/views/PublicPage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div style="margin-top: 15px; padding: 0px 0px 0px 0px">
  4 |       <!--      走马灯-->
  5 |       <div>
  6 |         <el-row>
  7 |           <el-col :span="24">
  8 |             <div>
  9 |               <el-carousel :interval="10000" height="400px" type="card">
 10 |                 <el-carousel-item
 11 |                   style="background-color: #ffffff"
 12 |                   v-for="(url, index) in carouselData.url"
 13 |                   :key="index"
 14 |                 >
 15 |                   <el-image
 16 |                     :src="require('../../assets/images/' + url)"
 17 |                     style="width: 100%; height: 100%; border-radius: 30px"
 18 |                   ></el-image>
 19 |                 </el-carousel-item>
 20 |               </el-carousel>
 21 |             </div>
 22 |           </el-col>
 23 |         </el-row>
 24 |       </div>
 25 |       <!-- 标签 -->
 26 |       <div style="display: flex; justify-content: space-between">
 27 |         <el-button
 28 |           v-for="(item, index) in labelData"
 29 |           :key="index"
 30 |           @click="toLabelPage(item)"
 31 |           round
 32 |           style="margin: 0 auto"
 33 |         >
 34 |           {{ item }}
 35 |         </el-button>
 36 |       </div>
 37 |       <el-divider></el-divider>
 38 |       <!--        首页8个视频-->
 39 |       <div>
 40 |         <el-row :gutter="20" v-loading="loading">
 41 |           <el-col :key="index" :span="6" v-for="(item, index) in cardData">
 42 |             <div class="grid-content bg-purple">
 43 |               <el-card>
 44 |                 <el-image
 45 |                   :src="item.imageAddr"
 46 |                   @click="toVideoPage(index)"
 47 |                   style="width: 100%; height: 220px; border-radius: 10px"
 48 |                 ></el-image>
 49 |                 <div style="height: 20%; width: 100%">
 50 |                   <p class="titlestyle">{{ item.title }}</p>
 51 |                   <p style="color: #606266">
 52 |                     {{ item.username }} {{ item.updateTime }}
 53 |                   </p>
 54 |                 </div>
 55 |               </el-card>
 56 |             </div>
 57 |           </el-col>
 58 |         </el-row>
 59 |       </div>
 60 |     </div>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import headerComponent from "../../components/headerComponent";
 66 | 
 67 | export default {
 68 |   name: "PublicPage",
 69 |   components: { headerComponent },
 70 |   data() {
 71 |     return {
 72 |       loading: true,
 73 |       carouselData: {
 74 |         url: ["img1.png", "img2.png", "img3.png", "img4.png"],
 75 |       },
 76 |       labelData: [],
 77 |       cardData: [],
 78 |     };
 79 |   },
 80 |   mounted() {
 81 |     // console.log('头像', this.$route.params.avatarAddr)
 82 |     this.init();
 83 |   },
 84 |   methods: {
 85 |     init() {
 86 |       this.$axios
 87 |         .post("/video/getVideoList")
 88 |         .then((response) => {
 89 |           console.log("response", response.data);
 90 |           if (response.data.code === 200) {
 91 |             this.cardData = response.data.data;
 92 |             let videoLabelSet = new Set();
 93 |             for (let i = 0, len = this.cardData.length; i < len; i++) {
 94 |               let imageAddr =
 95 |                 this.cardData[i]["videoAddr"].substr(
 96 |                   0,
 97 |                   this.cardData[i]["videoAddr"].indexOf(".")
 98 |                 ) + ".jpg";
 99 |               this.cardData[i]["imageAddr"] =
100 |                 "http://172.22.173.94:8081/" + imageAddr;
101 |               videoLabelSet.add(this.cardData[i].label);
102 |             }
103 |             this.labelData = videoLabelSet;
104 |             console.log("视频标签：", this.labelData);
105 |             console.log("获取视频列表成功");
106 |             this.$message.success("获取视频列表成功~");
107 |           } else {
108 |             console.log("获取视频列表失败 response不为200");
109 |             this.$message.error("获取视频列表失败 response不为200");
110 |           }
111 |         })
112 |         .catch((error) => {
113 |           console.log("获取视频列表失败原因：", error);
114 |           this.$message.error("获取视频列表失败");
115 |         })
116 |         .finally(() => {
117 |           this.loading = false;
118 |         });
119 |     },
120 |     toVideoPage(index) {
121 |       let videoData = this.cardData[index];
122 |       console.log("公共页-视频页-传递数据-视频ID：", videoData.id);
123 |       this.$router.push({
124 |         path: "/videoPage",
125 |         query: {
126 |           videoDataId: videoData.id,
127 |           videoDataAddr: videoData.videoAddr,
128 |         },
129 |       });
130 |     },
131 |     // toVideoClassify() {
132 |     //   this.$router.push("/videoClassify");
133 |     // },
134 |     toLabelPage(label) {
135 |       this.$router.push({
136 |         path: "/labelPage",
137 |         query: {
138 |           label: label,
139 |         },
140 |       });
141 |     },
142 |   },
143 | };
144 | </script>
145 | 
146 | <style scoped>
147 | /* 视频标题 */
148 | .titlestyle {
149 |   font-weight: bold;
150 |   /* font-size: 13px; */
151 |   /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
152 | }
153 | 
154 | .el-row {
155 |   margin-bottom: 20px;
156 |   /* &:last-child {
157 |               margin-bottom: 0;
158 |           } */
159 | }
160 | 
161 | .el-col {
162 |   border-radius: 4px;
163 | }
164 | 
165 | .bg-purple-dark {
166 |   background: #99a9bf;
167 | }
168 | 
169 | .bg-purple {
170 |   background: #d3dce6;
171 | }
172 | 
173 | .bg-purple-light {
174 |   background: #e5e9f2;
175 | }
176 | 
177 | .grid-content {
178 |   border-radius: 4px;
179 |   min-height: 36px;
180 | }
181 | 
182 | .row-bg {
183 |   padding: 10px 0;
184 |   background-color: #f9fafc;
185 | }
186 | 
187 | .el-carousel__item h3 {
188 |   color: #475669;
189 |   font-size: 14px;
190 |   opacity: 0.75;
191 |   line-height: 200px;
192 |   margin: 0;
193 | }
194 | 
195 | .el-carousel__item:nth-child(2n) {
196 |   background-color: #99a9bf;
197 | }
198 | 
199 | .el-carousel__item:nth-child(2n + 1) {
200 |   background-color: #d3dce6;
201 | }
202 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/RegisterPage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main">
  3 |     <el-container>
  4 |       <el-header>
  5 |         <div class="mlogo">
  6 |           <h2><img src="../../assets/images/logo.png" alt />Ping-pong Net</h2>
  7 |         </div>
  8 |       </el-header>
  9 |       <el-main>
 10 |         <el-form
 11 |           :model="ruleForm"
 12 |           :rules="rules"
 13 |           ref="ruleForm"
 14 |           label-width="100px"
 15 |           class="demo-ruleForm"
 16 |         >
 17 |           <el-form-item label="用户名" prop="username">
 18 |             <el-input v-model="ruleForm.username"></el-input>
 19 |           </el-form-item>
 20 |           <el-form-item label="密码" prop="password">
 21 |             <el-input type="password" v-model="ruleForm.password"></el-input>
 22 |           </el-form-item>
 23 |           <el-form-item label="确认密码" prop="password1">
 24 |             <el-input type="password" v-model="ruleForm.password1"></el-input>
 25 |           </el-form-item>
 26 |         </el-form>
 27 |         <el-button type="primary" @click="register">注册</el-button>
 28 |       </el-main>
 29 |     </el-container>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | export default {
 35 |   name: "RegisterPage",
 36 |   data() {
 37 |     return {
 38 |       ruleForm: {
 39 |         username: "markerhub",
 40 |         password: "111111",
 41 |         password1: "111111",
 42 |       },
 43 |       rules: {
 44 |         username: [
 45 |           { required: true, message: "请输入用户名", trigger: "blur" },
 46 |           {
 47 |             min: 5,
 48 |             max: 15,
 49 |             message: "长度在 5 到 15 个字符",
 50 |             trigger: "blur",
 51 |           },
 52 |         ],
 53 |         password: [
 54 |           { required: true, message: "请输入密码", trigger: "change" },
 55 |         ],
 56 |         password1: [
 57 |           { required: true, message: "请输入确认密码", trigger: "change" },
 58 |         ],
 59 |       },
 60 |     };
 61 |   },
 62 |   methods: {
 63 |     register() {
 64 |       this.$refs["ruleForm"].validate((valid) => {
 65 |         if (valid) {
 66 |           if (this.ruleForm.password === this.ruleForm.password1) {
 67 |             let submitData = {};
 68 |             submitData["username"] = this.ruleForm.username;
 69 |             submitData["password"] = this.ruleForm.password;
 70 |             this.$axios
 71 |               .post("/login/register", submitData)
 72 |               .then((response) => {
 73 |                 console.log(response.data);
 74 |                 if (response.data.code === 200) {
 75 |                   this.$message({
 76 |                     message: "注册成功",
 77 |                     type: "success",
 78 |                   });
 79 |                   this.$router.push("/login");
 80 |                 }
 81 |               })
 82 |               .catch((error) => {
 83 |                 this.$message.error("注册失败！");
 84 |                 console.log("error", error);
 85 |               });
 86 |           } else {
 87 |             this.$message({
 88 |               message: "两次密码不一致！",
 89 |               type: "warning",
 90 |             });
 91 |             return false;
 92 |           }
 93 |         } else {
 94 |           this.$message({
 95 |             message: "请完善信息！",
 96 |             type: "warning",
 97 |           });
 98 |           return false;
 99 |         }
100 |       });
101 |     },
102 |   },
103 | };
104 | </script>
105 | 
106 | <style lang="less" scoped>
107 | .main {
108 |   padding: 50px;
109 | }
110 | .el-header {
111 |   text-align: center;
112 | 
113 |   .mlogo {
114 |     margin-top: -10px;
115 |     img {
116 |       height: 20px;
117 |       width: 20px;
118 |       margin-right: 20px;
119 |     }
120 |   }
121 | }
122 | 
123 | .el-main {
124 |   text-align: center;
125 | 
126 |   .demo-ruleForm {
127 |     max-width: 500px;
128 |     margin: 0 auto;
129 |   }
130 | }
131 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/SearchPage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <header-component @toSearch="toSearch"></header-component>
  4 |         <el-row v-if="isFindVideo === 2" :gutter="20">
  5 |             <el-col v-for="(item,index) in cardData" :key="index" :span="6">
  6 |             <div class="grid-content bg-purple" >
  7 |                 <el-card>
  8 |                     <el-image
  9 |                         @click="toVideoPage(index)"
 10 |                         style="width: 100%; height: 200px; border-radius: 10px;"
 11 |                         :src="item.imageAddr"
 12 |                     ></el-image>
 13 |                     <div style="height:20%;width:100%">
 14 |                         <p class="titlestyle">{{item.title}}</p>
 15 |                         <p style="color:#606266">{{item.userName}} {{item.updateTime}}</p>
 16 |                     </div>
 17 |                 </el-card>
 18 |             </div>
 19 |             </el-col>
 20 |         </el-row>
 21 |         <h2 v-else-if="isFindVideo === 1">未找到相关视频！</h2>
 22 |         <h2 v-else-if="isFindVideo === 0">请输入查找关键词!</h2>
 23 |         <h2 v-else>出错啦! 请看SearchPage</h2>
 24 | 
 25 |     </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import headerComponent from '../../components/headerComponent'
 30 | export default {
 31 |     name:"SearchPage",
 32 |     components: {headerComponent},
 33 |     data(){
 34 |         return{
 35 |             searchFlag: false,
 36 |             isFindVideo: 0, // 0 : 请输入关键字 1 : 未找到相关视频 2 : ok
 37 |             cardData: []
 38 |         }
 39 |     },
 40 |     mounted () {
 41 |       // console.log('头像', this.$route.params.avatarAddr)
 42 |         this.toSearch()
 43 |     },
 44 |     methods: {
 45 |         toSearch (searchContent) {
 46 |             let submitData = {}
 47 |             if (this.searchFlag === false) {
 48 |                 submitData = {content: this.$route.query.searchInput}
 49 |                 this.searchFlag = true
 50 |             } else {
 51 |                 if (searchContent !== null) {
 52 |                     submitData = {content: searchContent}
 53 |                 } else {
 54 |                     this.$message.error('搜索的内容没有传过来, 请看SearchPage-toSearch')
 55 |                 }
 56 |             }
 57 |             console.log('搜索传递的信息：', submitData)
 58 |             if (submitData === null || submitData['content'] === null || submitData['content'] === '') {
 59 |                 this.$message({
 60 |                     message: '请输入查找关键词',
 61 |                     type: 'warning'
 62 |                 })
 63 |                 this.isFindVideo = 0
 64 |             } else {
 65 |                 this.$axios.post('/video/getVideoList', submitData).then(response => {
 66 |                     console.log('response-searchPage', response.data)
 67 |                     if (response.data.code === 200) {
 68 |                         this.cardData = response.data.data
 69 |                         if (this.cardData.length > 0) {
 70 |                             for (let i = 0, len = this.cardData.length; i < len; i++) {
 71 |                                 let imageAddr = this.cardData[i]['videoAddr'].substr(0, this.cardData[i]['videoAddr'].indexOf('.')) + '.jpg'
 72 |                                 this.cardData[i]['imageAddr'] = 'http://172.22.173.94:8081/' + imageAddr
 73 |                                 // console.log(this.cardData[i]['imageAddr'])
 74 |                                 this.cardData[i]['userName'] = '雄安命'
 75 |                             }
 76 |                             this.isFindVideo = 2
 77 |                         } else {
 78 |                             this.$message({
 79 |                                 message: '未找到相关视频！',
 80 |                                 type: 'warning'
 81 |                             })
 82 |                             this.isFindVideo = 1
 83 |                         }
 84 |                     } else {
 85 |                         console.log("初始化失败")
 86 |                     }
 87 |                 }).catch(error => {
 88 |                     console.log(error)
 89 |                 // catch要和get连起来，不能写在else后面
 90 |                 })
 91 |             }
 92 |         },
 93 |         toVideoPage (index) {
 94 |             let videoData = this.cardData[index]
 95 |             console.log('公共页-视频页-传递数据-视频ID：', videoData.id)
 96 |             this.$router.push({
 97 |                 path: '/videoPage',
 98 |                 query: {
 99 |                     videoDataId: videoData.id,
100 |                     videoDataAddr: videoData.videoAddr
101 |                 }
102 |             })
103 |         },
104 | 
105 |     }
106 | }
107 | </script>
108 | 


--------------------------------------------------------------------------------
/vue-front/src/views/SpacePage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- <header-component></header-component> -->
  4 |     <el-row>
  5 |       <!-- 名片card -->
  6 |       <el-col span="5">
  7 |         <el-card style="height: 160px">
  8 |           <el-row>
  9 |             <el-col :span="10">
 10 |               <el-avatar
 11 |                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
 12 |                 style="width: 80px; height: 80px"
 13 |               ></el-avatar>
 14 |             </el-col>
 15 |             <el-col :span="10">
 16 |               <p class="namestyle">一只绵羊__</p>
 17 |             </el-col>
 18 |           </el-row>
 19 |           <!-- <el-row>
 20 |                     <p class=followstyle>
 21 |                         <i class="el-icon-user-solid"></i>39关注
 22 |                         <i class="el-icon-s-custom"></i>3粉丝
 23 |                         <i class="el-icon-s-help"></i>5动态 </p>
 24 |                 </el-row>            -->
 25 |         </el-card>
 26 |       </el-col>
 27 |       <!-- 动态 -->
 28 |       <el-col span="19">
 29 |         <!-- 自己发动态 -->
 30 |         <el-row>
 31 |           <el-card>
 32 |             <el-row :gutter="20">
 33 |               <el-col span="21">
 34 |                 <el-input
 35 |                   type="textarea"
 36 |                   :rows="1"
 37 |                   placeholder="请输入搜索内容"
 38 |                   v-model="textarea"
 39 |                 >
 40 |                 </el-input>
 41 |               </el-col>
 42 |               <el-col span="3">
 43 |                 <el-button type="warning" plain round>搜索</el-button>
 44 |               </el-col>
 45 |             </el-row>
 46 |           </el-card>
 47 |         </el-row>
 48 |         <!-- 他人动态 -->
 49 |         <el-row>
 50 |           <el-card>
 51 |             <el-row v-for="(item, index) in spaceData.otherUser" :key="index">
 52 |               <!-- 头像 -->
 53 |               <el-col :span="2">
 54 |                 <el-avatar :size="50" :src="item.avatar"></el-avatar>
 55 |               </el-col>
 56 |               <!-- 三行：名字+视频+时间 -->
 57 |               <el-col :span="18">
 58 |                 <!-- 名字 -->
 59 |                 <el-row>
 60 |                   <p class="namestyle">{{ item.name }}</p>
 61 |                 </el-row>
 62 |                 <!-- 视频：左图片，右标题+描述 -->
 63 |                 <el-row :gutter="30">
 64 |                   <el-col :span="6">
 65 |                     <el-image
 66 |                       @click="toVideoPage"
 67 |                       style="width: 100%; height: 100%; border-radius: 10px"
 68 |                       :src="require('../../assets/images/' + item.url)"
 69 |                     ></el-image>
 70 |                   </el-col>
 71 |                   <el-col :span="18">
 72 |                     <p class="titlestyle">{{ item.title }}</p>
 73 |                     <p style="color: #606266; font-size: 15px">
 74 |                       {{ item.des }}
 75 |                     </p>
 76 |                   </el-col>
 77 |                 </el-row>
 78 |                 <!-- 发布时间 -->
 79 |                 <el-row>
 80 |                   <p style="color: #909399">{{ item.createTime }}</p>
 81 |                 </el-row>
 82 |                 <el-divider></el-divider>
 83 |               </el-col>
 84 |             </el-row>
 85 |           </el-card>
 86 |         </el-row>
 87 |       </el-col>
 88 |     </el-row>
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | import headerComponent from "../../components/headerComponent";
 94 | export default {
 95 |   name: "SpacePage",
 96 |   components: { headerComponent },
 97 |   data() {
 98 |     return {
 99 |       pageData: {
100 |         src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
101 |       },
102 |       spaceData: {
103 |         userAvatar: "assets/images/userAvatar.png",
104 |         textarea: "",
105 |         otherUser: [
106 |           {
107 |             avatar: "assets/images/userAvatar.png",
108 |             name: "小魏科普",
109 |             title: "吉尼斯世界纪录最甜的物质是？",
110 |             des: "快来看看世界上最甜的东西是什么吧！",
111 |             url: "video1.png",
112 |             createTime: "2019-04-03 11:31:45",
113 |           },
114 |           {
115 |             avatar: "assets/images/userAvatar.png",
116 |             name: "张鹏宇律师",
117 |             title: "再有人欠你钱不还，一招拘留他！",
118 |             des: "一招教你如何面对他人欠钱不还！",
119 |             url: "video2.png",
120 |             createTime: "2019-04-03 11:31:45",
121 |           },
122 |           {
123 |             avatar: "assets/images/userAvatar.png",
124 |             name: "快乐茄子人",
125 |             title: "叶利钦の小曲《爱国歌》",
126 |             des: "爱国歌 俄罗斯联邦1991—2000叶利钦时期所使用的国歌 希望你们能喜欢",
127 |             url: "video3.png",
128 |             createTime: "2019-04-03 11:31:45",
129 |           },
130 |           {
131 |             avatar: "assets/images/userAvatar.png",
132 |             name: "财富研究院",
133 |             title: "20年后，中国什么最值钱？",
134 |             des: "参照日本的老龄化，就很清楚的知道年轻人根本不会有钱甚至更加没钱了",
135 |             url: "video4.png",
136 |             createTime: "2019-04-03 11:31:45",
137 |           },
138 |           {
139 |             avatar: "assets/images/userAvatar.png",
140 |             name: "英语兔",
141 |             title: "你听说过英语的限定词吗？",
142 |             des: '这次咱们说说英语里的所谓"限定词".',
143 |             url: "video5.png",
144 |             createTime: "2019-04-03 11:31:45",
145 |           },
146 |           {
147 |             avatar: "assets/images/userAvatar.png",
148 |             name: "体制内老秘书",
149 |             title: "工作中总要麻烦其他领导怎么办？",
150 |             des: "经典解说又回来了！",
151 |             url: "video6.png",
152 |             createTime: "2019-04-03 11:31:45",
153 |           },
154 |         ],
155 |       },
156 |     };
157 |   },
158 | };
159 | </script>
160 | <style lang="less" scoped>
161 | .titlestyle {
162 |   // font-weight:bold;
163 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
164 |   /* font-size: 13px; */
165 |   /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
166 | }
167 | .namestyle {
168 |   font-weight: bold;
169 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
170 |   /* font-size: 15px; */
171 |   /* font-family:'Times New Roman', Times, serif; */
172 | }
173 | .followstyle {
174 |   // font-weight: bold;
175 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
176 | }
177 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/VideoClassify/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <el-row :gutter="8">
 4 |             <el-col :span=12>
 5 |                 <el-card style="height:500px">
 6 |                     <p style="text-align:center">原视频</p>
 7 |                     <el-card style="height:300px">
 8 |                         <el-button type="primary" style="margin-top:120px;margin-left:220px">上传视频</el-button>
 9 |                     </el-card>
10 |                     <!-- <el-button type="primary" round >识别</el-button> -->
11 |                 </el-card>
12 |             </el-col>
13 |             <el-col :span=12>
14 |                 <el-card style="height:500px">
15 |                     <p style="text-align:center">识别后</p>
16 |                 </el-card>
17 |             </el-col>
18 |         </el-row>
19 |         <el-button type="primary" style="margin-left:600px">识别</el-button>
20 | 
21 |     </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |     name:"VideoClassify"
27 | }
28 | </script>
29 | <style lang="less" scoped>
30 | 
31 | .el-button{
32 |     font-size:12px;
33 | }
34 | .el-form-item{
35 |     text-align: center;
36 | }
37 | 
38 | 
39 | </style>


--------------------------------------------------------------------------------
/vue-front/src/views/VideoPage/index.vue:
--------------------------------------------------------------------------------
  1 | <style lang="less" scoped>
  2 | .el-row {
  3 |   margin-bottom: 20px;
  4 |   /* &:last-child {
  5 |               margin-bottom: 0;
  6 |           } */
  7 | }
  8 | 
  9 | .videotitle {
 10 |   font-weight: bold;
 11 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 12 |   /* font-size: 15px; */
 13 |   /* font-family:'Times New Roman', Times, serif; */
 14 | }
 15 | 
 16 | .namestyle {
 17 |   font-weight: bold;
 18 |   font-size: 17px;
 19 | }
 20 | 
 21 | .el-col {
 22 |   border-radius: 4px;
 23 | }
 24 | 
 25 | .filmVideo {
 26 |   margin: 0 auto;
 27 | }
 28 | 
 29 | // .videoPageMainContent {
 30 | // }
 31 | 
 32 | .video_text {
 33 |   width: 70%;
 34 |   margin: 0 auto;
 35 | }
 36 | 
 37 | video:focus {
 38 |   outline: 0; //去掉选中蓝框
 39 | }
 40 | 
 41 | // .video-js .vjs-big-play-button {
 42 | /*对播放按钮的样式进行设置*/
 43 | //width: 200px;
 44 | //height: 300px;
 45 | //position: absolute;
 46 | //top: 5px;
 47 | //left: 5px;
 48 | //transform: translate3d(-50%,-50%,0);
 49 | //disabled: true
 50 | // }
 51 | </style>
 52 | 
 53 | <template>
 54 |   <div class="videoPageMainContent">
 55 |     <div class="videoContent">
 56 |       <!--          标题-->
 57 |       <div>
 58 |         <h2 class="videotitle" style="color: #303133">{{ videoData.title }}</h2>
 59 |         <p style="color: #909399">
 60 |           {{ videoData.playAmount }}播放 {{ videoData.createTime }}
 61 |         </p>
 62 |       </div>
 63 |       <!--          视频-->
 64 |       <div v-if="isShowVideo">
 65 |         <video class="video-js filmVideo" id="myVideo">
 66 |           <source :src="videoData.url" controls="controls" type="video/mp4" />
 67 |         </video>
 68 |       </div>
 69 |       <!--          [点赞，收藏，转发]，笔记，收藏，简介，标签-->
 70 |       <div>
 71 |         <p style="color: #606266">
 72 |           <svg class="icon" aria-hidden="true" @click="likeAction">
 73 |             <use v-if="videoData.isLikeClick" xlink:href="#icon-dianzan1"></use>
 74 |             <use v-else xlink:href="#icon-dianzan"></use>
 75 |           </svg>
 76 |           {{ videoData.likeNum }}
 77 |           <svg class="icon" aria-hidden="true" @click="collectInit">
 78 |             <use
 79 |               v-if="videoData.isCollectClick"
 80 |               xlink:href="#icon-shoucang1"
 81 |             ></use>
 82 |             <use v-else xlink:href="#icon-shoucang"></use>
 83 |           </svg>
 84 |           {{ videoData.collectNum }}
 85 |         </p>
 86 |         <!-- 笔记 -->
 87 |         <div>
 88 |           <!-- 记笔记按钮 -->
 89 |           <el-button @click="noteInit" round type="primary">记笔记</el-button>
 90 |           <div v-if="outerVisible">
 91 |             <el-dialog :visible.sync="outerVisible" title="开始记录你的笔记吧~">
 92 |               <el-dialog
 93 |                 :visible.sync="innerVisible"
 94 |                 append-to-body
 95 |                 title="新建标签"
 96 |                 width="30%"
 97 |               >
 98 |                 <el-input
 99 |                   placeholder="请输入标签名称"
100 |                   v-model="input"
101 |                 ></el-input>
102 |                 <span class="dialog-footer" slot="footer">
103 |                   <el-button @click="innerVisible = false">取 消</el-button>
104 |                   <el-button @click="setNewNoteLabel" type="primary"
105 |                     >确 定</el-button
106 |                   >
107 |                 </span>
108 |               </el-dialog>
109 |               <div>
110 |                 <el-radio-group v-model="hadLabel">
111 |                   <el-radio-button
112 |                     :key="index"
113 |                     :label="item"
114 |                     v-for="(item, index) in labelData"
115 |                   ></el-radio-button>
116 |                 </el-radio-group>
117 |                 <el-button @click="innerVisible = true" type="primary"
118 |                   >新建标签</el-button
119 |                 >
120 |                 <el-input
121 |                   :rows="10"
122 |                   placeholder="请输入笔记内容"
123 |                   type="textarea"
124 |                   v-model="textarea"
125 |                 >
126 |                 </el-input>
127 |               </div>
128 |               <div class="dialog-footer" slot="footer">
129 |                 <el-button @click="outerVisible = false">取 消</el-button>
130 |                 <el-button @click="note" type="success">保存</el-button>
131 |               </div>
132 |             </el-dialog>
133 |           </div>
134 |         </div>
135 | 
136 |         <!-- 收藏面板 -->
137 |         <div>
138 |           <!-- 收藏视频按钮 -->
139 |           <!--                    <el-button @click="collectInit" round type="primary">收藏视频</el-button>-->
140 |           <div v-if="outerVisibleCollect">
141 |             <el-dialog :visible.sync="outerVisibleCollect" title="添加到收藏夹">
142 |               <el-dialog
143 |                 :visible.sync="innerVisibleCollect"
144 |                 append-to-body
145 |                 title="新建收藏标签"
146 |                 width="30%"
147 |               >
148 |                 <el-input
149 |                   placeholder="请输入标签名称"
150 |                   v-model="input1"
151 |                 ></el-input>
152 |                 <span class="dialog-footer" slot="footer">
153 |                   <el-button @click="innerVisibleCollect = false"
154 |                     >取 消</el-button
155 |                   >
156 |                   <el-button @click="setNewCollectLabel" type="primary"
157 |                     >确 定</el-button
158 |                   >
159 |                 </span>
160 |               </el-dialog>
161 |               <div>
162 |                 <el-radio-group v-model="hadCollect">
163 |                   <el-radio-button
164 |                     :key="index"
165 |                     :label="item"
166 |                     v-for="(item, index) in collectData"
167 |                   ></el-radio-button>
168 |                 </el-radio-group>
169 |                 <el-button @click="innerVisibleCollect = true" type="primary"
170 |                   >新建收藏夹</el-button
171 |                 >
172 |               </div>
173 |               <div class="dialog-footer" slot="footer">
174 |                 <el-button @click="outerVisibleCollect = false"
175 |                   >取 消</el-button
176 |                 >
177 |                 <el-button @click="collect" type="success">确定</el-button>
178 |               </div>
179 |             </el-dialog>
180 |           </div>
181 |         </div>
182 | 
183 |         <!-- 简介，标签 -->
184 |         <el-divider></el-divider>
185 |         <p style="color: #606266">{{ videoData.description }}</p>
186 |         <el-row>
187 |           <el-col
188 |             :key="index"
189 |             :span="2"
190 |             v-for="(item, index) in videoData.label"
191 |           >
192 |             <el-button round size="mini">{{ item }}</el-button>
193 |           </el-col>
194 |         </el-row>
195 |       </div>
196 |     </div>
197 |     <el-divider></el-divider>
198 |     <!--      发表评论-->
199 |     <div class="userCommentContent">
200 |       <el-row :gutter="20">
201 |         <el-col :span="2">
202 |           <el-avatar :size="50" :src="commentData.userAvatar"></el-avatar>
203 |         </el-col>
204 |         <el-col :span="18">
205 |           <el-input
206 |             :rows="5"
207 |             placeholder="请输入内容"
208 |             type="textarea"
209 |             v-model="commentData.textarea"
210 |           ></el-input>
211 |         </el-col>
212 |         <el-col :span="4">
213 |           <el-button
214 |             @click="comment"
215 |             v-loading.fullscreen.lock="fullscreenLoading"
216 |             >发表评论
217 |           </el-button>
218 |         </el-col>
219 |       </el-row>
220 |       <el-divider></el-divider>
221 |     </div>
222 |     <!--      他人评论-->
223 |     <div class="otherUserCommentContent">
224 |       <el-row :key="index" v-for="(item, index) in commentData.otherUser">
225 |         <el-col :span="2">
226 |           <el-avatar :size="50" :src="item.avatar"></el-avatar>
227 |         </el-col>
228 |         <el-col :span="18">
229 |           <p class="namestyle">{{ item.name }}</p>
230 |           <p>{{ item.content }}</p>
231 |           <p style="color: #909399">{{ item.createTime }}</p>
232 |           <el-divider></el-divider>
233 |         </el-col>
234 |       </el-row>
235 |     </div>
236 |   </div>
237 | </template>
238 | 
239 | <script>
240 | import headerComponent from "../../components/headerComponent";
241 | import statisticApi from "../../api/statisticApi";
242 | export default {
243 |   name: "VideoPage",
244 |   components: { headerComponent },
245 |   data() {
246 |     return {
247 |       innerVisible: false,
248 |       outerVisible: false,
249 |       innerVisibleCollect: false,
250 |       outerVisibleCollect: false,
251 |       //新建笔记标签内容
252 |       input: "",
253 |       //新建视频收藏标签内容
254 |       input1: "",
255 |       fullscreenLoading: false,
256 |       isShowVideo: true,
257 |       videoData: {
258 |         id: "1",
259 |         title: "尚硅谷Java入门视频教程(在线答疑+Java面试真题)",
260 |         description: "【配套答疑】每天9-17点, 技术老师评论区答疑",
261 |         label: ["编程", "科技", "计算机技术"],
262 |         playAmount: "1258.5万",
263 |         createTime: "2019-04-03 11:31:45",
264 |         // url: 'http://172.22.173.94:8081/video/1.mp4',
265 |         url: "",
266 |         likeNum: "2.5万",
267 |         collectNum: "22.3万",
268 |         isLikeClick: false,
269 |         isCollectClick: false,
270 |       },
271 |       commentData: {
272 |         userAvatar: "assets/images/userAvatar.png",
273 |         textarea: "",
274 |         otherUser: [],
275 |       },
276 |       //笔记内容
277 |       textarea: "",
278 |       labelData: [],
279 |       hadLabel: "",
280 |       //收藏
281 |       collectData: [],
282 |       hadCollect: "",
283 |     };
284 |   },
285 |   created() {
286 |     this.init();
287 |   },
288 |   mounted() {
289 |     this.initVideo(); //初始化视频播放器
290 |     console.log("CollectData", this.CollectData);
291 |   },
292 |   methods: {
293 |     //[收藏]点击“收藏视频”时触发，初始化收藏标签
294 |     collectInit() {
295 |       if (this.videoData.isCollectClick === false) {
296 |         let userId = parseInt(localStorage.userId);
297 |         this.$axios
298 |           .get("/collect/getLabelList?userId=" + userId)
299 |           .then((response) => {
300 |             console.log(response.data);
301 |             if (response.data.code === 200) {
302 |               if (response.data.data !== null) {
303 |                 this.collectData = response.data.data;
304 |                 this.hadCollect = this.collectData[0];
305 |                 this.outerVisibleCollect = true;
306 |               }
307 |             }
308 |           })
309 |           .catch((error) => {
310 |             this.$message.error("视频收藏失败！");
311 |             console.log("error", error);
312 |           });
313 |       } else {
314 |         this.$message.warning("您已收藏过此视频~");
315 |       }
316 |     },
317 |     //[收藏]点击“确定”时触发，收藏视频
318 |     collect() {
319 |       let userId = parseInt(localStorage.userId);
320 |       let CollectForm = {
321 |         userId: userId,
322 |         videoId: this.videoData.id,
323 |         label: this.hadCollect,
324 |       };
325 |       this.$axios
326 |         .post("/collect/publish", CollectForm)
327 |         .then((response) => {
328 |           console.log(response.data);
329 |           if (response.data.code === 200) {
330 |             this.$message({
331 |               message: "视频收藏成功",
332 |               type: "success",
333 |             });
334 |             this.input1 = "";
335 |             // this.$router.go(0)
336 |             this.init();
337 |           }
338 |         })
339 |         .catch((error) => {
340 |           this.$message.error("视频收藏失败！");
341 |           console.log("error", error);
342 |         })
343 |         .finally(() => {
344 |           this.outerVisibleCollect = false;
345 |           this.input1 = "";
346 |         });
347 |     },
348 |     // [笔记]点击”记笔记“时触发，以用户ID获取用户笔记标签内容
349 |     noteInit() {
350 |       let userId = parseInt(localStorage.userId);
351 |       this.$axios
352 |         .get("/note/getLabelList?userId=" + userId)
353 |         .then((response) => {
354 |           console.log(response.data);
355 |           if (response.data.code === 200) {
356 |             if (response.data.data !== null) {
357 |               this.labelData = response.data.data;
358 |               this.hadLabel = this.labelData[0];
359 |               this.outerVisible = true;
360 |             }
361 |           }
362 |         })
363 |         .catch((error) => {
364 |           this.$message.error("笔记记录失败！");
365 |           console.log("error", error);
366 |         });
367 |     },
368 |     //[笔记]点击”保存“时触发，记笔记
369 |     note() {
370 |       let userId = parseInt(localStorage.userId);
371 |       let noteForm = {
372 |         userId: userId,
373 |         content: this.textarea, //笔记内容
374 |         videoId: this.videoData.id,
375 |         label: this.hadLabel,
376 |       };
377 |       if (this.textarea) {
378 |         this.$axios
379 |           .post("/note/publish", noteForm)
380 |           .then((response) => {
381 |             console.log(response.data);
382 |             if (response.data.code === 200) {
383 |               this.$message({
384 |                 message: "笔记记录成功",
385 |                 type: "success",
386 |               });
387 |             }
388 |           })
389 |           .catch((error) => {
390 |             this.$message.error("笔记记录失败！");
391 |             console.log("error", error);
392 |           })
393 |           .finally(() => {
394 |             this.outerVisible = false;
395 |             this.input = "";
396 |             this.textarea = "";
397 |           });
398 |       } else {
399 |         console.log("请输入笔记内容！");
400 |         this.$message.error("请输入笔记内容！");
401 |       }
402 |     },
403 |     // 发布评论
404 |     comment() {
405 |       let userId = parseInt(localStorage.userId);
406 |       let commentForm = {
407 |         userId: userId,
408 |         commentContent: this.commentData.textarea,
409 |         videoId: this.videoData.id,
410 |       };
411 |       console.log("发送的数据：", commentForm);
412 |       if (this.commentData.textarea) {
413 |         this.fullscreenLoading = true;
414 |         this.$axios
415 |           .post("/comment/publish", commentForm)
416 |           .then((response) => {
417 |             console.log(response.data);
418 |             if (response.data.code === 200) {
419 |               this.$message({
420 |                 message: "发布评论成功",
421 |                 type: "success",
422 |               });
423 |               this.init();
424 |               this.fullscreenLoading = false;
425 |             }
426 |           })
427 |           .catch((error) => {
428 |             this.$message.error("发布评论失败！");
429 |             console.log("error", error);
430 |           })
431 |           .finally(() => {
432 |             this.commentData.textarea = "";
433 |           });
434 |       } else {
435 |         console.log("请输入评论内容！");
436 |         this.$message.error("请输入评论内容！");
437 |       }
438 |     },
439 |     // 初始化视频相关信息、评论信息
440 |     init() {
441 |       this.videoData.url =
442 |         "http://172.22.173.94:8081/" + this.$route.query.videoDataAddr;
443 |       console.log("视频地址-VideoPage: ", this.videoData.url);
444 |       this.fullscreenLoading = true;
445 |       this.$axios
446 |         .get("/video/getVideo?videoId=" + this.$route.query.videoDataId)
447 |         .then((response) => {
448 |           console.log("获取单个视频结果的内容-VideoPage: ", response.data);
449 |           let sourceData = response.data.data;
450 |           this.videoData.id = sourceData.id;
451 |           this.videoData.title = sourceData.title;
452 |           this.videoData.description = sourceData.description;
453 |           this.videoData.label = [sourceData.label];
454 |           this.videoData.createTime = sourceData.createTime;
455 |           this.videoData.likeNum = sourceData.like.number;
456 |           this.videoData.isLikeClick = sourceData.like.click;
457 |           this.videoData.collectNum = sourceData.collect.number;
458 |           this.videoData.isCollectClick = sourceData.collect.click;
459 |           // for (let i = 0; i < sourceData.commentAndUserList.length; i++) {
460 |           //     let element = sourceData.commentAndUserList[i]
461 |           // }
462 |           this.commentData.otherUser = [];
463 | 
464 |           sourceData.commentAndUserList.forEach((element) => {
465 |             let otherUserData = {};
466 |             otherUserData["avatar"] =
467 |               "http://172.22.173.94:8081/" + element.user.avatarAddr;
468 |             otherUserData["name"] = element.user.username;
469 |             otherUserData["content"] = element.comment.content;
470 |             otherUserData["createTime"] = element.comment.createTime;
471 |             this.commentData.otherUser.push(otherUserData);
472 |           });
473 |           this.fullscreenLoading = false;
474 |         })
475 |         .catch((error) => {
476 |           console.log("初始化视频失败-VideoPage: ", error);
477 |           this.fullscreenLoading = false;
478 |         });
479 |     },
480 |     initVideo() {
481 |       //初始化视频方法
482 |       let myPlayer = this.$video(myVideo, {
483 |         //是否显示控制栏
484 |         controls: true,
485 |         //是否自动播放,muted:静音播放
486 |         autoplay: false,
487 |         //是否静音播放
488 |         muted: false,
489 |         //是否流体自适应容器宽高
490 |         // fluid:true,
491 |         //设置视频播放器的显示宽度（以像素为单位）
492 |         width: "800px",
493 |         //设置视频播放器的显示高度（以像素为单位）
494 |         height: "400px",
495 |       });
496 |     },
497 |     // 新建标签
498 |     setNewNoteLabel() {
499 |       this.labelData.push(this.input);
500 |       this.innerVisible = false;
501 |     },
502 |     setNewCollectLabel() {
503 |       this.collectData.push(this.input1);
504 |       this.innerVisibleCollect = false;
505 |     },
506 |     // 点赞和取消点赞的操作
507 |     likeAction() {
508 |       if (this.videoData.isLikeClick) {
509 |         statisticApi
510 |           .deleteLike(this.videoData.id)
511 |           .then((response) => {
512 |             if (response.data.code === 200) {
513 |               this.$message.success("取消点赞成功~");
514 |               // this.$router.go(0)
515 |               this.init();
516 |             }
517 |           })
518 |           .catch((error) => {
519 |             this.$message.error("取消点赞失败！");
520 |             console.log("取消点赞失败的原因：", error);
521 |           });
522 |       } else {
523 |         statisticApi
524 |           .insertLike(this.videoData.id)
525 |           .then((response) => {
526 |             if (response.data.code === 200) {
527 |               this.$message.success("点赞成功~");
528 |               // this.$router.go(0)
529 |               this.init();
530 |             }
531 |           })
532 |           .catch((error) => {
533 |             this.$message.error("点赞失败！");
534 |             console.log("点赞失败的原因：", error);
535 |           });
536 |       }
537 |     },
538 |   },
539 | };
540 | </script>
541 | 


--------------------------------------------------------------------------------