摘要:項(xiàng)目簡(jiǎn)介此項(xiàng)目是學(xué)習(xí)過程中跟著慕課網(wǎng)做的一個(gè)練手項(xiàng)目,模仿大眾點(diǎn)評(píng)做的一個(gè),項(xiàng)目不是很復(fù)雜,適合有一定基礎(chǔ)的同學(xué)參考。慕課網(wǎng)地址項(xiàng)目的前端界面使用編寫,后端使用的框架搭建,后臺(tái)返回的數(shù)據(jù)全部是模擬的數(shù)據(jù),不涉及數(shù)據(jù)庫(kù)交互。
項(xiàng)目簡(jiǎn)介
此項(xiàng)目是學(xué)習(xí)react+redux過程中跟著慕課網(wǎng)做的一個(gè)練手項(xiàng)目,模仿大眾點(diǎn)評(píng)做的一個(gè)webapp,項(xiàng)目不是很復(fù)雜,適合有一定react+redux基礎(chǔ)的同學(xué)參考。
慕課網(wǎng)地址:https://coding.imooc.com/clas...
項(xiàng)目的前端界面使用react+less編寫,后端使用的express框架搭建,后臺(tái)返回的數(shù)據(jù)全部是模擬的數(shù)據(jù),不涉及數(shù)據(jù)庫(kù)交互。
后續(xù)可能會(huì)再寫一篇文章(看心情),講解部分代碼,如果項(xiàng)目對(duì)大家學(xué)習(xí)react有一點(diǎn)幫助,麻煩在clone的同時(shí)順手給個(gè)☆star☆
項(xiàng)目源碼githup項(xiàng)目源碼:https://github.com/wenyuntian...
使用git clone地址:[email protected]:wenyuntian/webapp.git
1.clone到本地后,在項(xiàng)目文件夾的根目錄和mock文件夾下面運(yùn)行npm install命令安裝項(xiàng)目依賴
2.接著在根目錄和mock目錄下運(yùn)行命令npm start啟動(dòng)項(xiàng)目,在瀏覽器中訪問http://localhost:3000/查看項(xiàng)目運(yùn)行效果
react:使用的create-react-app構(gòu)建工具快速搭建的前端框架(需要在package.json配置跨域代理)。
redux:使用redux管理react組件的狀態(tài),實(shí)現(xiàn)各組件之間的通信。
axios:使用axios對(duì)get、post方法進(jìn)行了簡(jiǎn)單的封裝,用于前后端數(shù)據(jù)交互。
localStorage:簡(jiǎn)單的了解了一下localStorage,封裝了get和set方法,將城市選擇的城市信息存儲(chǔ)在localStorage中。
less:使用less編寫css樣式。(注意:在create-react-app中默認(rèn)不使用less,需要自行安裝less-loader模塊,并在webpack進(jìn)行配置)
圖標(biāo):項(xiàng)目中使用到的所有圖標(biāo)都是從icoMoon上下載的(學(xué)習(xí)過程中發(fā)現(xiàn)的素材網(wǎng)站,很好用,推薦!)
后端:后端使用express快速搭建的一個(gè)后臺(tái)數(shù)據(jù),為了簡(jiǎn)單沒有鏈接數(shù)據(jù)庫(kù),所有的數(shù)據(jù)都是模擬的數(shù)據(jù)。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/90093.html
該demo使用的是webpack2.*來(lái)配置的,很多配置項(xiàng)都產(chǎn)生了變化,踩了不少坑.目前還在逐步完善中,webpack是一部一部配置來(lái)的。后端數(shù)據(jù)使用nodejs來(lái)開發(fā)模擬。GitHub項(xiàng)目地址。 showImg(https://segmentfault.com/img/remote/1460000009665620); 歡迎大家提問題。
摘要:基于封裝的一個(gè)自定義數(shù)字鍵盤輸入框仿照大眾點(diǎn)評(píng)閃惠買單剛開始選用發(fā)現(xiàn)移動(dòng)端沒有辦法輸入小數(shù)換成發(fā)現(xiàn)喚起的鍵盤不是數(shù)字鍵盤最終選擇又發(fā)現(xiàn)驗(yàn)證規(guī)則有部分實(shí)現(xiàn)不了效果更新后來(lái)我想了下可以通過監(jiān)聽鍵盤點(diǎn)擊事件然后拿到輸入值的從而進(jìn)行值的驗(yàn)證但是這 wc-keyboard 基于 vue 封裝的一個(gè)自定義數(shù)字鍵盤 + 輸入框, 仿照大眾點(diǎn)評(píng)閃惠買單. why? 剛開始選用 input type ...
摘要:在的中,可以使用或者等來(lái)監(jiān)聽某個(gè),當(dāng)某個(gè)觸發(fā)后,可以使用等發(fā)起異步操作,操作完成后使用函數(shù)觸發(fā),同步更新,從而完成整個(gè)的更新。對(duì)于何時(shí)響應(yīng)和如何響應(yīng),并沒有控制權(quán)。的作用是用來(lái)取消一個(gè)還未返回的任務(wù)。 項(xiàng)目地址 項(xiàng)目截圖 showImg(https://segmentfault.com/img/bVUJwx?w=718&h=1294); redux-saga介紹 眾所周知,react僅...
摘要:系列,自定義實(shí)現(xiàn)知乎首頁(yè)仿今日頭條最強(qiáng)頂部導(dǎo)航指示器,支持種模式系列之一使用打造千變?nèi)f化的指示器優(yōu)雅的為添加和實(shí)現(xiàn)快速滑動(dòng)實(shí)現(xiàn)條目拖拽排序與滑動(dòng)刪除高仿網(wǎng)易新聞首頁(yè)添加,刪除,排序類似大眾點(diǎn)評(píng)美團(tuán)等應(yīng)用的城市選擇器那些酷炫的開源庫(kù)整理 Material Design系列,自定義Behavior實(shí)現(xiàn)Android知乎首頁(yè) showImg(http://img.blog.csdn.net/...
閱讀 2324·2021-11-22 12:01
閱讀 2000·2021-11-12 10:34
閱讀 4526·2021-09-22 15:47
閱讀 2837·2019-08-30 15:56
閱讀 2870·2019-08-30 15:53
閱讀 2411·2019-08-30 13:53
閱讀 3387·2019-08-29 15:35
閱讀 3132·2019-08-29 12:27