umi+dva全棧練習大合集

React-美團(Dva + umi + koa + Mongoose)

說明

自己為何要去嘗試寫一個這么多頁面的網頁💯,本人是純粹的小白一枚,在各大論壇不停的刷着Vue,React,RN,微信小程序等方面的教程,雖然不停的學習,但是發現自己的技術並沒有實質上的提高,就是不停的重復着同樣的任務,每個地方都學到了一點,只要混合在一起,馬上就全都不會了,🎉所以第一次嘗試使用最新的技術去制作一個大型網站---->至於為何選擇了美團,主要是每次看的教程都是做餓了么,這次就打算做一個和餓了么類似的美團,數據的話用了美團官網的一部分API,自己寫了一部分

效果圖

效果圖只是針對於本手機和電腦,並不代表全部

其余端支持

• 美團電腦網頁 React + Koa + Mongoose 開發完畢 🎉

• 美團手機網頁 Dva + umi + koa + Mongoose 開發完畢 💯

• 美團后台管理 Nuxt + koa + Mongoose 開發完畢 🌈

• 微信小程序 Tora 正在開發

• 美團APP ReactNative + koa + Mongoose 開發一部分

快速使用(推薦)

需要全局安裝了umi

git clone https://github.com/2662419405/meituanAn.git
cd meituanAn && npm install
umi dev

完全版啟動

這個需要本地有MongoDB,並且后台啟動,這種啟動方式,會使用本地的數據庫和本地的后台api接口,是為了方便人員修改后台接口准備的

1. 打開這個功能,在config/db.js中,complete->改為false

git clone https://github.com/2662419405/meituanAn.git
cd meituanAn && npm install
// 下面的兩個都需要一直掛載着
npm run server
umi dev

build之后使用

如果想要build之后可以訪問,推薦配置nginx,這里面附上我的nginx配置

 # 移動端美團
server {
    listen       80;

    server_name  react.shtodream.cn;
    location / {
        root   html/meituanAn/dist;
        index  index.html index.htm;
    }

    location /server {
        proxy_pass http://localhost:4001;  #這個地方需要和上面一致
    }
    
}

完成

• [x] 自動部署到服務器
• [x] umi + dva 基本使用
• [x] 配置axios攔截器
• [x] mock數據模擬
• [x] 首頁基本完成
• [x] dva
• [x] umi
• [x] 頁面登錄
• [x] 頁面注冊
• [x] koa搭建后台
• [x] mongoose模擬數據
• [x] 根據路由修改title
• [x] 上傳頭像
• [x] 骨架屏
• [x] 基本頁面已經完成 🎉
• [x] 搜索功能完成
• [x] 根據搜狐提供的api獲取用戶城市
• [x] 瀑布流
• [x] 熱門模塊 💯
• [x] 添加好友
• [x] 私聊
• [x] socket在線聊天 🌈

計划

• [ ] SSR服務端渲染 -> 原諒我太菜,看得我一臉懵逼
• [ ] 使用TS編寫代碼
• [ ] 豐富的表情包
• [ ] 群聊
• [ ] 照片牆

優化

• [x] 頁面滾動防抖
• [x] 圖片懶加載
• [x] 圖片預加載
• [ ] 數據分頁
• [ ] 虛擬列表

后台api接口

請求地址	請求類型	請求參數	說明	獲取數據是否需要Token
/server/user/phone	get	?phone=xx&code=yy	獲取手機驗證碼	否
/server/user/setPassword	post	{values:{phone:xx,password:yy}}	初始化密碼	是
/server/user/yan	post	{code:{code:xx,tel:xxx}}	判斷驗證碼 並且進行注冊，如果注冊過，則登錄	否
/server/user/info	post	{id:xxx}	獲取用戶信息	否
/server/user/name	post	{value:{phone:xx,name:xx}}	修改用戶名	是
/server/user/resetPassword	post	{value:{yuanPassword:xxx,salt:xxx}}	修改密碼	是
/server/user/password	post	{value:{tel:xxx,password:xxx}}	通過密碼登錄	否
/server/user/uploadfile	post	file	獲取上傳文件	是
/server/user/tags	get	無	獲取首頁數據	否
/server/user/hot	get	無	獲取熱門數據	否
/server/user/detail	get	?id=xx	獲取某一個首頁數據	否
/server/hot/zan	post	{id:點贊用戶id,item:點了哪條數據}	進行點贊	是
/server/liao/add	post	{value:{value,name}}	搜索好友	是
/server/liao/tian	post	{value{dui,que}}	添加好友	是

配置

/config/db.js

module.exports = {
  port: 4001, // 后台啟動的端口
  dbName: 'meituan', // 數據庫名稱
  secret: "it 's mySecret", //jwt秘鑰
};