寫在前面

由於最近公司業務不是很忙，空閒時間比較多，於是就在糾結Vue.js（之前就學習過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經過一段時間的學習，就有了教程 Node+Koa2+Mysql 搭建簡易部落格 GitHub地址，想要了解的可以先看看，個人水平有限，希望可以幫到你。
大概過來一個多月，我決定兩路開工。使用Node.js給前端寫介面，配備後臺管理功能，先把後臺搭建好。大概幾天過後，後臺一些簡單的功能實現後，就開始用Vue.js開始搭建前臺，也一直在想做點什麼比較好，於是就做了個豆瓣評分類似的專案。

技術棧(Vue2.js + Node.js 全棧專案)

由於頁面不是很多，vuex用的不多，關鍵掌握怎麼實現就好了

vue2 + vuex + vue-router + webpack + fetch + sass + flex + svg + 阿里字型圖示

執行

git clone https://github.com/wclimb/vue-video.git

cd vue-video

npm install  建議使用淘寶映象(https://npm.taobao.org/) =>  cnpm i

npm run dev (執行專案)

npm run build (打包專案)

ps: 如果打包之後檔案執行不了，請打包之前把路由的 mode
 
:'history'註釋掉，該功能去掉了url中醜陋的 # 號

功能

• 1. 註冊登入登出 + 驗證碼 密碼檢測，如果使用者不存在則自動建立
• 1. 檢測是否登入，如果沒有登入則不允許評論和評價
• 1. 可以上傳影片到後臺，進行前臺展示
• 1. 評分功能，初始化評分可以自由設定，如果沒有人like則預設顯示原始評分，如果有則計算當前vide的評分
• 1. 修改使用者名稱，檢測使用者名稱是否跟其他人重複
• 1. 上傳頭像，預設沒有頭像
• 1. 評論功能，評論之後可以在個人中心展示，並且可以刪除
• 1. 搜尋功能，可以搜尋存在的影片，如果沒有則顯示無結果
• 1. 自己喜歡的video和評論的內容會在個人中心顯示

綜上：

• [x] 註冊
• [x] 登入
• [x] 登出
• [x] 驗證碼
• [x] 詳情頁
• [x] 分類
• [x] 分類影視列表
• [x] 修改使用者名稱
• [x] 上傳頭像
• [x] 評論
• [x] 刪除評論
• [x] 搜尋
• [x] 個人中心資料

如果覺得對你有幫助還望關注一下，有問題可以即使提喲，覺得不錯的話star一下也是可以的喲

前端線上地址

專案是手機端的，請使用谷歌瀏覽器手機預覽模式

首頁預設一種類別只顯示10個，可以檢視更多顯示全部

手機掃描圖下二維碼預覽

後端線上地址

技術棧：Node + Koa2 + Mysql
預覽：video-admin
GitHub: 管理後臺

前端演示

主頁

登入頁

個人中心頁

詳情頁

後臺演示

有問題歡迎反饋

在使用中有任何問題，歡迎反饋給我，可以用以下聯絡方式跟我交流

• 郵件(875246904#qq.com, 把#換成@)
• QQ: 875246904

目錄結構

|-- build                            // webpack配置檔案
|-- config                           // 專案打包路徑
|-- src                              // 原始碼目錄
|   |-- assets                       // 圖片檔案
|   |-- base                         // 移動端適配
|   |-- components                   // 元件
|   |-- data                         // 介面
|   |-- router                       // 路由配置
|   |-- store                        // 狀態管理
|   |-- style                        // 樣式
|       App.vue                      // 頁面入口檔案
|       main.js                      // 程式入口檔案
|-- static                           // 靜態資源
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 程式碼編寫規格
|-- .gitignore                       // git忽略的檔案
|-- .postcssrc.js                    // post-loader的外掛配置檔案
|-- index.html                       // 入口html檔案
|-- package.json                     // 專案及工具的依賴配置檔案