使用 Vue2.js Node.js 搭建一個小型的全棧專案
阿新 • • 發佈:2019-02-01
寫在前面
由於最近公司業務不是很忙,空閒時間比較多,於是就在糾結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中醜陋的 # 號
功能
- 註冊登入登出 + 驗證碼 密碼檢測,如果使用者不存在則自動建立
- 檢測是否登入,如果沒有登入則不允許評論和評價
- 可以上傳影片到後臺,進行前臺展示
- 評分功能,初始化評分可以自由設定,如果沒有人like則預設顯示原始評分,如果有則計算當前vide的評分
- 修改使用者名稱,檢測使用者名稱是否跟其他人重複
- 上傳頭像,預設沒有頭像
- 評論功能,評論之後可以在個人中心展示,並且可以刪除
- 搜尋功能,可以搜尋存在的影片,如果沒有則顯示無結果
- 自己喜歡的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 // 專案及工具的依賴配置檔案