1. 程式人生 > >基於react+redux仿餓了麼

基於react+redux仿餓了麼

react_ele

沒事逛技術社群的時候,經常看到許多仿照餓了麼官網的專案,不過可能是因為餓了麼本身就是使用 vue構建,所以大部分仿照專案也都是使用 vue架構,因為我本身傾向於 react,奔著打磨技術的目的去,所以就準備著使用 react仿寫餓了麼。

本來是想著把餓了麼整個網站,包括前後端全部仿寫一遍的,想法是這個想法,然而實際等自己真做起來的時候才知道什麼叫想得太美,仿寫一個網站和只寫一個頁面之間的差別不要太大

前端日新月異,幾天就能出來一個新框架、概念、思想,本人只算是個前端小菜鳥,要學習的東西太多,往往就是幾天下來就感覺自己幾天前的架構、程式碼等太爛,總想著要回頭改一遍,再加上工作逐漸忙碌,工作之外的時間越來越少,而此專案純粹就是下班之外的時間搗鼓一下,專案前前後後弄了兩三個月,大體功能差不多都實現了,還有很多需要完善的地方,不過實在是沒時間了,之前說好的後端也沒時間做了。

限於入行時間太短,沒做過多少專案,自己搗鼓一個專案沒什麼經驗,隨著自己水平的提升,做到最後自己很容易就能發現之前有的地方不太理想,前後程式碼的風格可能也會不一致,但也沒時間改了,而且專案只是用來學習用的,在某些地方我可能想要嘗試某種以前沒有接觸過的東西,所以可能還會故意弄得複雜,自然是比不上社群中眾多大佬們貢獻出來的程式碼,不過整個專案做下來,自己確實學到了很多,現在如果再讓我重頭寫一個類似的專案,我肯定會做得更好,由此可見,親自上手嘗試確實是水平進步的最佳方法之一。

整個專案總體看起來不咋地,不過其中也有小部分思想、程式碼等本人覺得尚可,就直接扔到 Github上了,說不定將來還要從這裡 copy

自己的一些程式碼呢,有興趣的可以看一下,順手 star哦~

大概效果

這裡寫圖片描述 這裡寫圖片描述 這裡寫圖片描述

這裡寫圖片描述 這裡寫圖片描述 這裡寫圖片描述

這裡寫圖片描述

使用到的一些技術

  • redux、react-router、koa2、es6

  • 呼叫 html5地理位置介面 geolocation,以及根據 ip資訊獲取位置資訊,並呼叫第三方介面,將經緯度資訊轉換成可讀的位置資料

  • 呼叫 localstorage儲存資料資訊

  • 元件動態載入,列表無限載入,react動畫,高階函式(HOC)

  • react-addons以及 svg的應用

  • and so on

相關推薦

基於react+redux仿

react_ele 沒事逛技術社群的時候,經常看到許多仿照餓了麼官網的專案,不過可能是因為餓了麼本身就是使用 vue構建,所以大部分仿照專案也都是使用 vue架構,因為我本身傾向於 react,奔著打磨技術的目的去,所以就準備著使用 react仿寫餓了麼。

觀看基於vue的仿關於sticky footer佈局

在觀看基於vue的仿餓了麼webapp開發的過程中遇到一個佈局問題,這是一個恆久的問題就是怎麼樣讓一個區塊始終在頁面底部,無論它前面的內容只有幾行或者多到頁面出現滾動條,該區塊始終出現在頁面底部,這就是著名的Sticky+footer佈局。 初始程式碼如

基於vue2+nuxt構建的高仿(2018版)

前言 高仿餓了麼,以nuxt作為vue的服務端渲染,適合剛接觸或者準備上vue ssr的同學參考和學習 專案地址如遇網路不佳,請移步國內映象加速節點 效果演示 檢視demo請戳這裡(請用chrome手機模式預覽) 移動端掃描下方二維碼 API介面文件 介面文件地址(基於apidoc) 技術棧 vue2 +

vue高仿APP(三)

一·需求分析   二,製作css字型圖示的製作和使用 前面已經有人做過總結,我就直接引用了 css字型圖示的製作和使用。   三,專案目錄結構設計 1,每一個元件都單獨建立一個資料夾,例如商品頁建立goods資料夾,goods資料夾放商品頁元件,goods.vue以及商品

vue高仿APP(二)

這裡我直接跳過vue-cli的安裝。   一,vue.js程式碼是如何執行的? 1,進入頁面,首先載入index.html和main.js檔案。 ① index.html檔案 <!DOCTYPE html> <html> <head>

】—— Vue2.0高仿核心模組&移動端Web App專案爬坑(一)

前言:學習Vue.js高仿餓了麼課程過程中,總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹:專案準備、頁面骨架開發、header元件開發。 專案github地址:https://github.com/66Web/ljq_eleme,歡迎Star。  

】—— Vue2.0高仿核心模組&移動端Web App專案爬坑(二) 【重點突破】—— 當better-scroll 遇見Vue

 前言:上一篇專案總結介紹了頁面骨架的開發、header元件的開發,這一篇主要梳理:商品元件開發、商品詳情頁實現。專案github地址:https://github.com/66Web/ljq_eleme,歡迎Star。 goods

Vue2.0高仿核心模組&移動端Web App專案爬坑(一)

原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:學習Vue.js高仿餓了麼課程過程中,總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹:專案準備、頁面骨架開發、header元件開發。 專案github地址:

Vue.js高仿外賣App Vue實戰開發APP 共13章

  講真,JavaScript應用之廣超乎想象JavaScript進階已來,你來不來!搞定JavaScript基礎以後,怎麼辦JavaScript在效能方面堪稱全能,應用領域從基本的前後端開發、到移動開發的Webapp、再到桌面、外掛開發等均可適用。本路徑是JavaScript的

仿【node+webpack】(window部署執行)

為了調通後臺,研究了好幾天的vue專案,遇到各種坑,終於算調通了,現在把整個操作做個記錄: window端:(程式碼:https://github.com/vuejs/vue-devtools) 1.用idea編譯vue專案:   Intellij IDEA搭建vue-cli專

訂餐外賣網站原始碼模板多使用者帶後臺 仿美團外賣o2o

系統簡介: 網上訂餐系統,是石家莊晟訊網路科技有限公司為滿足眾多餐飲外賣企業的迫切需要,開發定製的一款成熟的“B2C網上訂餐系統”。目前已經運用到全國各地,網上點餐系統致力於幫助專業從事餐飲外賣企業或有外賣業務的餐飲企業快速部署外賣訂餐系統,拓展網路外賣訂餐業務

mvp實現Xrecyclerview的上下拉和購物車功能(仿

  首先先匯入咱們的依賴 implementation 'com.android.support:design:28.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'cn.b

vue仿商店詳情頁面(列表左右聯動、兩側滾動條互不影響)

商店詳情頁面中要求頁面劃上去之後到達某一位置時,嘴上的tabs標籤固定在最上邊,下邊的兩個選單列表可以滾動,且兩個滾動互不影響;點選左側的某一類別,右側跳轉到相對應部分。 HTML <body> <div class="header"

Vue.js高仿WebApp

https://www.cnblogs.com/zsqos/p/6931179.html   介紹 學習Vue.js也有一陣子了,為了加深對Vue的理解及運用,做了一個小專案。這是一個高仿餓了麼外賣WebApp,現已完成商品預覽、商品詳情、商家預覽、新增購物、檢視評論等功能。 部分截圖

】—— Vue2.0高仿核心模組&移動端Web App專案爬坑(一)

@import "../../common/stylus/mixin" .star .star-item display: inline-block background-repeat: no-repeat &.st

】—— Vue2.0高仿核心模組&移動端Web App專案爬坑(二)

methods: { dropMove(el) { // console.log(el) for(let i=0; i<this.balls.length; i++) { let ball = this.bal

仿H5-純前端Vue版 + 手把手教學

這是一個低仿餓了麼H5的純前端練手,資料是偽造的,寫的比較粗糙,寫這個的目的是為了加深一下熟練度,半年前看到別人寫的仿cnodejs網站,我也用vue1仿了cnodeJs的網站,當時寫的也是粗糙的令人髮指,線上預覽:https://hbxywdk.github.io/vu

學習筆記之vue高仿課程專案--vue.js篇

歡迎大家來訪問我的github哦:my-github現把專案中學到的知識和遇到的問題做一整理。這篇是vue.js篇vue-clivue-cli是vue的腳手架工具,官方命令列工具,可快速搭建大型單頁應用。下面是使用方法(前提是已經安裝node)全域性安裝cnpm instal

學習筆記之vue高仿課程專案--佈局篇

歡迎大家來訪問我的github哦:my-github現把專案中學到的知識和遇到的問題做一整理。這篇是佈局篇(採用stylus)flex佈局如果一個佈局需要左邊是固定長度,右邊是自適應寬度,隨拉大而大,縮小而小,則可以使用flex佈局。移動端很適合。.wrapper

vue2.0仿webAPP專案

# webapp vue2.x仿餓了麼app專案總結  專案地址:https://github.com/harrietjia/vue2-webapp.git如果覺得有幫助,希望可以在右上角給我個star支援一下,謝謝!部分截圖:## 實現功能:```•Goods、Rating