使用 Vue2.js + Node.js 搭建一個小型的全棧項目

寫在前面

因爲最近公司業務不是很忙，空閒時間比較多，因而就在糾結Vue.js（以前就學習過）和Node.js先專研哪一個比較好，最終選擇了先玩玩Node.js。通過一段時間的學習，就有了教程 Node+Koa2+Mysql 搭建簡易博客 GitHub地址，想要了解的能夠先看看，我的水平有限，但願能夠幫到你。
大概過來一個多月，我決定兩路開工。使用Node.js給前端寫接口，配備後臺管理功能，先把後臺搭建好。大概幾天事後，後臺一些簡單的功能實現後，就開始用Vue.js開始搭建前臺，也一直在想作點什麼比較好，因而就作了個豆瓣評分相似的項目。

前端項目地址 https://github.com/wclimb/vue...
前端預覽 http://video.wclimb.site

後端項目地址 https://github.com/wclimb/vid...
後臺管理 http://vue.wclimb.site

API接口地址 https://github.com/wclimb/vid...

技術棧(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個，能夠查看更多顯示所有

預覽：vue-video

手機掃描圖下二維碼預覽

後端線上地址

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

前端演示

主頁

登陸頁

我的中心頁

詳情頁

後臺演示

有問題歡迎反饋

在使用中有任何問題，歡迎反饋給我，能夠用如下聯繫方式跟我交流

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

目錄結構

|-- 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                     // 項目及工具的依賴配置文件