摘要:大概過來一個多月,我決定兩路開工。使用給前端寫接口,配備后臺管理功能,先把后臺搭建好。大概幾天過后,后臺一些簡單的功能實(shí)現(xiàn)后,就開始用開始搭建前臺,也一直在想做點(diǎn)什么比較好,于是就做了個豆瓣評分類似的項(xiàng)目。
寫在前面
由于最近公司業(yè)務(wù)不是很忙,空閑時間比較多,于是就在糾結(jié)Vue.js(之前就學(xué)習(xí)過)和Node.js先專研哪個比較好,最終選擇了先玩玩Node.js。經(jīng)過一段時間的學(xué)習(xí),就有了教程 Node+Koa2+Mysql 搭建簡易博客 GitHub地址,想要了解的可以先看看,個人水平有限,希望可以幫到你。
大概過來一個多月,我決定兩路開工。使用Node.js給前端寫接口,配備后臺管理功能,先把后臺搭建好。大概幾天過后,后臺一些簡單的功能實(shí)現(xiàn)后,就開始用Vue.js開始搭建前臺,也一直在想做點(diǎn)什么比較好,于是就做了個豆瓣評分類似的項(xiàng)目。
前端項(xiàng)目地址 https://github.com/wclimb/vue...技術(shù)棧(Vue2.js + Node.js 全棧項(xiàng)目)
前端預(yù)覽 http://video.wclimb.site后端項(xiàng)目地址 https://github.com/wclimb/vid...
后臺管理 http://vue.wclimb.siteAPI接口地址 https://github.com/wclimb/vid...
由于頁面不是很多,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)行不了,請打包之前把路由的 mode:"history"注釋掉,該功能去掉了url中丑陋的 # 號功能
注冊登錄登出 + 驗(yàn)證碼 密碼檢測,如果用戶不存在則自動創(chuàng)建
檢測是否登錄,如果沒有登錄則不允許評論和評價
可以上傳影片到后臺,進(jìn)行前臺展示
評分功能,初始化評分可以自由設(shè)置,如果沒有人like則默認(rèn)顯示原始評分,如果有則計(jì)算當(dāng)前vide的評分
修改用戶名,檢測用戶名是否跟其他人重復(fù)
上傳頭像,默認(rèn)沒有頭像
評論功能,評論之后可以在個人中心展示,并且可以刪除
搜索功能,可以搜索存在的影片,如果沒有則顯示無結(jié)果
自己喜歡的video和評論的內(nèi)容會在個人中心顯示
綜上:
[x] 注冊
[x] 登錄
[x] 登出
[x] 驗(yàn)證碼
[x] 詳情頁
[x] 分類
[x] 分類影視列表
[x] 修改用戶名
[x] 上傳頭像
[x] 評論
[x] 刪除評論
[x] 搜索
[x] 個人中心數(shù)據(jù)
如果覺得對你有幫助還望關(guān)注一下,有問題可以即使提喲,覺得不錯的話star一下也是可以的喲
前端線上地址項(xiàng)目是手機(jī)端的,請使用谷歌瀏覽器手機(jī)預(yù)覽模式
首頁默認(rèn)一種類別只顯示10個,可以查看更多顯示全部
預(yù)覽:vue-video
手機(jī)掃描圖下二維碼預(yù)覽
后端線上地址技術(shù)棧:Node + Koa2 + Mysql
預(yù)覽:video-admin
GitHub: 管理后臺
在使用中有任何問題,歡迎反饋給我,可以用以下聯(lián)系方式跟我交流
郵件(875246904#qq.com, 把#換成@)
QQ: 875246904
weibo: @wclimb
目錄結(jié)構(gòu)|-- build // webpack配置文件 |-- config // 項(xiàng)目打包路徑 |-- 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 // 項(xiàng)目及工具的依賴配置文件
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/88427.html
摘要:本項(xiàng)目是一個基于的全棧是實(shí)戰(zhàn)項(xiàng)目,目標(biāo)就是帶領(lǐng)讀者朋友上手實(shí)戰(zhàn)。該實(shí)戰(zhàn)項(xiàng)目主要有首頁登陸注冊筆記分類,筆記列表,筆記詳情,發(fā)布筆記和個人主頁八個部分。 本項(xiàng)目是一個基于 Node.js 的全棧是實(shí)戰(zhàn)項(xiàng)目,目標(biāo)就是帶領(lǐng)讀者朋友上手實(shí)戰(zhàn)。眾所周知全棧工程師是要比純前端有發(fā)展前景的,非常希望本篇文章能給朋友們帶來一些收獲。 該實(shí)戰(zhàn)項(xiàng)目主要有首頁、登陸、注冊、筆記分類,筆記列表,筆記詳情,發(fā)布...
摘要:小白的全棧開發(fā)一簡介從新手的角度對有了解,對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關(guān)于怎么搭建全棧的文章,部分可能有借鑒。因?yàn)橐约邯?dú)立完成,所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷,并記錄我的畢設(shè)進(jìn)度逃。 小白的全棧開發(fā) 一 簡介 從新手的角度(對vue有了解,對Koa和Express有了解。)從0開始搭建一個通過RESTful API提供數(shù)據(jù),vue組成的單頁面的...
摘要:云集一線大廠有真正實(shí)力的程序員團(tuán)隊(duì)云集一線大廠經(jīng)驗(yàn)豐厚的碼農(nóng),開源奉獻(xiàn)各教程。融合多種常見的需求場景網(wǎng)絡(luò)請求解析模板引擎靜態(tài)資源日志記錄錯誤請求處理。結(jié)合語句中轉(zhuǎn)中間件控制權(quán),解決回調(diào)地獄問題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式,為你打開新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示,文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過程。 云...
摘要:玩轉(zhuǎn)同時全面掌握潮流技術(shù)采用新一代的開發(fā)框架更小更富有表現(xiàn)力更健壯。融合多種常見的需求場景網(wǎng)絡(luò)請求解析模板引擎靜態(tài)資源日志記錄錯誤請求處理。結(jié)合語句中轉(zhuǎn)中間件控制權(quán),解決回調(diào)地獄問題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式,為你打開新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示,文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過程。 云集一線大廠...
閱讀 2448·2023-04-25 20:07
閱讀 3368·2021-11-25 09:43
閱讀 3753·2021-11-16 11:44
閱讀 2579·2021-11-08 13:14
閱讀 3230·2021-10-19 11:46
閱讀 948·2021-09-28 09:36
閱讀 3148·2021-09-22 10:56
閱讀 2438·2021-09-10 10:51