仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

zwStar發表於2019-03-04

關於

2019屆大三學生,前段時間一直想一個人單獨開發一個較為完整的專案,在眾多應用中,考慮之後選擇了美團外賣來模仿,這段時間就利用課餘時間進行開發,前端用vue+vuex+vue-router+axios,因為需要用到定位和支付等功能,需要後端配合,而且想要做真正資料互動,所以用express(基於nodejs的框架)做後臺,資料庫用NOSQL的mongodb。 前端專案包含20多個路由,涉及到vue檔案有40個,功能設計登入,定位,瀏覽商品,加購物車,下訂單,支付(支援微信和支付寶的掃碼支付和調起app支付),評價,個人資訊更改,是一個較為完整的專案。

注意:此專案為個人開發實踐練習,不作為任何商業用途

重要事情先講一遍

求廣深實習,現在可以開始上班(要求暑假上班也可以),每週保證4天以上的上班時間

功能

  • 登入/登出
  • IP定位
  • 搜尋地址
  • 獲取商店(計算當前位置和商店的距離)
  • 加購物車
  • 下訂單
  • 支付(支援微信和支付寶的掃碼支付和調起app支付)
  • 評價
  • 頭像上傳(用了七牛雲端儲存)
  • 圖片懶載入

技術棧

  • Webpack-cli搭建專案
  • Vue全家桶(vue+vuex+vue-router)
  • CSS前處理器SCSS
  • axios與後端進行請求資料
  • 使用better-scroll滾動
  • 七牛雲端儲存圖片
  • 支付寶和微信支付
  • Express搭建後端服務
  • Mongoose對MongoDB進行便捷操作
  • 使用Charles抓取資料

多圖預警

主介面

定位和搜尋商家

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

掃碼支付

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

調起APP支付

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

購物車

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

商品操作

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

評論

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

其它操作

仿美團外賣的全棧專案(vue+node+mongodb)帶支付->大三求實習

還有一些其它功能就不放圖了哈

線上地址

請用谷歌瀏覽器然後開啟移動端瀏覽,如果要呼叫APP支付就需要用手機自帶瀏覽器開啟,然後支付時選擇調起APP支付
複製程式碼

線上地址

倉庫地址

程式碼已開源到github上面,有具體的執行操作,如果覺得還可以,請給個Star哈哈!
複製程式碼

github地址

未完待續

還有商家管理PC端還沒寫完,等寫完再開源出來
複製程式碼

寫在最後

因為還是學生,平時最多也是和同學一起開發,並沒有參與過真正的企業團隊開發,所以應該有很多地方做的不是很好,歡迎各位大佬們給我提一些意見,最後再問一句哈,求廣深實習,現在可以開始上班(要求暑假上班也可以),每週保證4天以上的上班時間。如果沒有,我等下再來問哈。。。

相關文章