成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用 Vue2.js + Node.js 搭建一個(gè)小型的全棧項(xiàng)目

freewolf / 6801人閱讀

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

寫在前面

由于最近公司業(yè)務(wù)不是很忙，空閑時(shí)間比較多，于是就在糾結(jié)Vue.js（之前就學(xué)習(xí)過）和Node.js先專研哪個(gè)比較好，最終選擇了先玩玩Node.js。經(jīng)過一段時(shí)間的學(xué)習(xí)，就有了教程 Node+Koa2+Mysql 搭建簡(jiǎn)易博客 GitHub地址，想要了解的可以先看看，個(gè)人水平有限，希望可以幫到你。
大概過來一個(gè)多月，我決定兩路開工。使用Node.js給前端寫接口，配備后臺(tái)管理功能，先把后臺(tái)搭建好。大概幾天過后，后臺(tái)一些簡(jiǎn)單的功能實(shí)現(xiàn)后，就開始用Vue.js開始搭建前臺(tái)，也一直在想做點(diǎn)什么比較好，于是就做了個(gè)豆瓣評(píng)分類似的項(xiàng)目。

前端項(xiàng)目地址 https://github.com/wclimb/vue...  
前端預(yù)覽 http://video.wclimb.site
后端項(xiàng)目地址 https://github.com/wclimb/vid...  
后臺(tái)管理 http://vue.wclimb.site


API接口地址 https://github.com/wclimb/vid...
技術(shù)棧(Vue2.js + Node.js 全棧項(xiàng)目) 
由于頁面不是很多，vuex用的不多，關(guān)鍵掌握怎么實(shí)現(xiàn)就好了

vue2 + vuex + vue-router + webpack + fetch + sass + flex + svg + 阿里字體圖標(biāo)

運(yùn)行 
git clone https://github.com/wclimb/vue-video.git

cd vue-video

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

npm run dev (運(yùn)行項(xiàng)目)

npm run build (打包項(xiàng)目)

ps: 如果打包之后文件運(yùn)行不了，請(qǐng)打包之前把路由的 mode:"history"注釋掉，該功能去掉了url中丑陋的 # 號(hào)
功能

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

檢測(cè)是否登錄，如果沒有登錄則不允許評(píng)論和評(píng)價(jià)

可以上傳影片到后臺(tái)，進(jìn)行前臺(tái)展示

評(píng)分功能，初始化評(píng)分可以自由設(shè)置，如果沒有人like則默認(rèn)顯示原始評(píng)分，如果有則計(jì)算當(dāng)前vide的評(píng)分

修改用戶名，檢測(cè)用戶名是否跟其他人重復(fù)

上傳頭像，默認(rèn)沒有頭像

評(píng)論功能，評(píng)論之后可以在個(gè)人中心展示，并且可以刪除

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

自己喜歡的video和評(píng)論的內(nèi)容會(huì)在個(gè)人中心顯示

綜上：

[x] 注冊(cè)

[x] 登錄

[x] 登出

[x] 驗(yàn)證碼

[x] 詳情頁

[x] 分類

[x] 分類影視列表

[x] 修改用戶名

[x] 上傳頭像

[x] 評(píng)論

[x] 刪除評(píng)論

[x] 搜索

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

如果覺得對(duì)你有幫助還望關(guān)注一下，有問題可以即使提喲，覺得不錯(cuò)的話star一下也是可以的喲

前端線上地址

項(xiàng)目是手機(jī)端的，請(qǐng)使用谷歌瀏覽器手機(jī)預(yù)覽模式

首頁默認(rèn)一種類別只顯示10個(gè)，可以查看更多顯示全部

預(yù)覽：vue-video

手機(jī)掃描圖下二維碼預(yù)覽

后端線上地址

技術(shù)棧：Node + Koa2 + Mysql
預(yù)覽：video-admin
GitHub: 管理后臺(tái)

前端演示

主頁

登錄頁

個(gè)人中心頁

詳情頁

后臺(tái)演示

有問題歡迎反饋

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

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

QQ: 875246904

weibo: @wclimb

目錄結(jié)構(gòu) 
|-- build                            // webpack配置文件
|-- config                           // 項(xiàng)目打包路徑
|-- src                              // 源碼目錄
|   |-- assets                       // 圖片文件
|   |-- base                            // 移動(dòng)端適配
|   |-- 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                     // 項(xiàng)目及工具的依賴配置文件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88427.html

相關(guān)文章

  • Node.js+MySQL+Vue 的全棧實(shí)戰(zhàn)項(xiàng)目

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

    notebin 評(píng)論0 收藏0

  • 小白的全棧開發(fā) 一

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

    hiyayiji 評(píng)論0 收藏0

  • 【完結(jié)匯總】iKcamp出品基于Koa2搭建Node.js實(shí)戰(zhàn)共十一堂課(含視頻)

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

    sPeng 評(píng)論0 收藏0

  • 開始連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實(shí)戰(zhàn)項(xiàng)目教學(xué)（含視頻）|

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

    B0B0 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<