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

freewolf 發(fā)布于2019-08-21 16:20 / 5588人閱讀

摘要：大概過來一個多月，我決定兩路開工。使用給前端寫接口，配備后臺管理功能，先把后臺搭建好。大概幾天過后，后臺一些簡單的功能實現(xiàn)后，就開始用開始搭建前臺，也一直在想做點什么比較好，于是就做了個豆瓣評分類似的項目。

寫在前面

由于最近公司業(yè)務不是很忙，空閑時間比較多，于是就在糾結Vue.js（之前就學習過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經過一段時間的學習，就有了教程 Node+Koa2+Mysql 搭建簡易博客 GitHub地址，想要了解的可以先看看，個人水平有限，希望可以幫到你。
大概過來一個多月，我決定兩路開工。使用Node.js給前端寫接口，配備后臺管理功能，先把后臺搭建好。大概幾天過后，后臺一些簡單的功能實現(xiàn)后，就開始用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用的不多，關鍵掌握怎么實現(xiàn)就好了

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中丑陋的 # 號

功能

注冊登錄登出 + 驗證碼密碼檢測，如果用戶不存在則自動創(chuàng)建

檢測是否登錄，如果沒有登錄則不允許評論和評價

可以上傳影片到后臺，進行前臺展示

評分功能，初始化評分可以自由設置，如果沒有人like則默認顯示原始評分，如果有則計算當前vide的評分

修改用戶名，檢測用戶名是否跟其他人重復

上傳頭像，默認沒有頭像

評論功能，評論之后可以在個人中心展示，并且可以刪除

搜索功能，可以搜索存在的影片，如果沒有則顯示無結果

自己喜歡的video和評論的內容會在個人中心顯示

綜上：

[x] 注冊

[x] 登錄

[x] 登出

[x] 驗證碼

[x] 詳情頁

[x] 分類

[x] 分類影視列表

[x] 修改用戶名

[x] 上傳頭像

[x] 評論

[x] 刪除評論

[x] 搜索

[x] 個人中心數(shù)據(jù)

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

前端線上地址

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

首頁默認一種類別只顯示10個，可以查看更多顯示全部

預覽：vue-video

手機掃描圖下二維碼預覽

后端線上地址

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

前端演示

主頁

登錄頁

個人中心頁

詳情頁

后臺演示

有問題歡迎反饋

在使用中有任何問題，歡迎反饋給我，可以用以下聯(lián)系方式跟我交流

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

QQ: 875246904

weibo: @wclimb

目錄結構

|-- build                            // webpack配置文件
|-- config                           // 項目打包路徑
|-- src                              // 源碼目錄
|   |-- assets                       // 圖片文件
|   |-- base                            // 移動端適配
|   |-- components                   // 組件
|   |-- data                         // 接口
|   |-- router                         // 路由配置
|   |-- store                        // 狀態(tài)管理
|   |-- style                        // 樣式
|        App.vue                      // 頁面入口文件
|        main.js                      // 程序入口文件
|-- static                           // 靜態(tài)資源
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規(guī)格
|-- .gitignore                       // git忽略的文件
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- index.html                       // 入口html文件
|-- package.json                     // 項目及工具的依賴配置文件

云服務器 GPU云服務器搭建 node.js 云主機搭建 node.js 云vps webrtc node.js服務搭建搭建 node.js 云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88427.html

Node.js+MySQL+Vue 的全棧實戰(zhàn)項目

摘要：本項目是一個基于的全棧是實戰(zhàn)項目，目標就是帶領讀者朋友上手實戰(zhàn)。該實戰(zhàn)項目主要有首頁登陸注冊筆記分類，筆記列表，筆記詳情，發(fā)布筆記和個人主頁八個部分。本項目是一個基于 Node.js 的全棧是實戰(zhàn)項目，目標就是帶領讀者朋友上手實戰(zhàn)。眾所周知全棧工程師是要比純前端有發(fā)展前景的，非常希望本篇文章能給朋友們帶來一些收獲。該實戰(zhàn)項目主要有首頁、登陸、注冊、筆記分類，筆記列表，筆記詳情，發(fā)布...

notebin 2019-08-02 15:07 評論0 收藏0
小白的全棧開發(fā) 一

摘要：小白的全棧開發(fā)一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經歷，并記錄我的畢設進度逃。小白的全棧開發(fā) 一簡介從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數(shù)據(jù)，vue組成的單頁面的...

hiyayiji 2019-06-26 17:11 評論0 收藏0
【完結匯總】iKcamp出品基于Koa2搭建Node.js實戰(zhàn)共十一堂課(含視頻)

摘要：云集一線大廠有真正實力的程序員團隊云集一線大廠經驗豐厚的碼農，開源奉獻各教程。融合多種常見的需求場景網絡請求解析模板引擎靜態(tài)資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節(jié)課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角獨特的『同步學習』方式文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實戰(zhàn)操作過程。云...

sPeng 2019-08-22 14:58 評論0 收藏0
開始連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實戰(zhàn)項目教學（含視頻）|

摘要：玩轉同時全面掌握潮流技術采用新一代的開發(fā)框架更小更富有表現(xiàn)力更健壯。融合多種常見的需求場景網絡請求解析模板引擎靜態(tài)資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節(jié)課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角獨特的『同步學習』方式文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實戰(zhàn)操作過程。云集一線大廠...

B0B0 2019-08-22 11:17 評論0 收藏0