react + express 擼一個圖牀應用

ioly 一張牀

寫在前面，這個項目的代碼適合跟我同樣的萌新一遍學習一邊寫代碼，可能在大佬眼中這種代碼慘不忍睹，然而對我等小萌新來講仍是略有學習價值的~

emmmmm... 第一次用 react + express 作了個稍微有點兒用的東西 —— 圖牀。

emmmmm... 同時也是第一次在掘金髮文章求(pian) Star ，想一想都有些小激動呢~

先手三連，大佬，戳我，謝謝！https://github.com/yunyu950908/image-hosting

好了言歸正傳，提及圖牀這個東西，確定有人想說 「他喵的作這玩意兒幹啥，微博圖牀很差用咩~七牛很差使咩~ SM 也不錯吖~」

固然好用，然而直到我發現上傳至微博圖牀的圖片在某些不知因此然的狀況下就掛了，掛了... 好用可是不穩定有毛線用啊。七牛確實又好用又穩定，然而這貨過於偏向程序猿，普通人用起來賊不方便 =。=

那麼有木有好用又穩定，操做還靈巧方便的圖牀捏~就本寶寶目前看來，並無碰見特別滿意的，好比 A 圖牀的 xxx 功能很喜歡，卻沒有 B 圖牀的 yyy 功能方便，又不夠 C 圖牀的穩定性，還差了點 D 圖牀的容量...

沒錯，有優勢，有缺點。總有喜歡的地方，卻又總少了一些什麼 ┑(￣Д ￣)┍

既然這樣，那就把他們整合到一塊兒嘛~ 因而乎，本寶寶決定作一個聚合圖牀，啦啦啦~ 雖然如今才寫了初版，不過以後有機會會慢慢填坑，也但願跟我同樣的碼畜萌新有時間的一塊兒寫寫哈~ emmmm, 雖然目前代碼結構稍亂，後續必定會整理一下下的呢~

這算本寶寶第一次正兒八經的用 react (上一次是在半年前抄了個官網demo 2333333)，這回又從頭開始擼了一遍官網文檔和官方 tutorial demo ，而後開始寫這玩意兒，中途遇到各類光看文檔搞不定的坑基本都是靠參考 github 上各類開源項目代碼，人家練手的小 demo 代碼以及 Stack Overflow react-china 等社區搞定的，果真社區的力量是偉大的~

第一次接觸 react-router-dom, redux，剛開始擼文檔寫 demo 的時候都挺容易的，想着 「哇~ 這文檔寫的真棒，簡直深刻淺出啊~」，等到和 react 丟一塊兒 fuck 代碼的時候 「我去，怎麼會這樣！？我靠，代碼去哪兒了！？個人天！個人代碼，你快肥來~」

不過雖然說過程當中不少磕磕碰碰，目前代碼組織的也不是很好，不過至少初版已經完成的差很少了，其中的缺陷和深坑以後再填吧，畢竟圖牀這玩意兒仍是有點用的，應該不會跟之前同樣仿個東西寫完就丟了=。=

哎喲，忽然想到 node 我幾乎也是第一次正兒八經地寫 23333333，然而不得不說的是，雖然寫的爛了一點，仍是蠻有成就感的，並且還挺好玩兒的~ 至少不用管樣式，前端調樣式簡直要炸天啊！！！ CSS 這玩意太他喵喵咪咪的口怕了！！！

嘮嗑了這麼多，說點這圖牀的東西吧。。

主要功能

1. 註冊 （中規中矩，郵件驗證 + pbkdf2 加密）
2. 登陸 （鑑權用的 JWT，其實這種小項目用啥都同樣）
3. 配置圖牀空間 （mongodb）
4. 上傳圖片得到外鏈（由於流量的緣由直接在前端調提供商的 sdK 並無在後端處理）
5. 查看歷史記錄 （還在施工，在考慮直接調 sdK 仍是拿外鏈 + 圖片便籤存數據庫）

後續可能添加的功能

1. 以前寫了幾個小爬蟲，可能會把她們註冊進來
2. 目前只有 leancloud 能配置，後續至少會添加七牛，以及看狀況添加其餘
3. 應該會添加按圖片標籤分類
4. 圖片分享，把圖片連接和標籤描述丟進一個公共圖片池
5. 用 es 處理數據，搞搞推薦之類的？
6. 闊以加個 websocket 推送分享？
7. 作個 Chrome 擴展集成一下
8. emmmm... 好像還蠻多功能能夠加的

技術棧

emmmm... 這玩意兒是否是就寫寫主要用了哪些包 =。=

前端

1. react
2. redux
3. react-redux
4. redux-thunk
5. react-router-dom (這貨最難用 ☹️，仍是 vue 路由寫的爽)
6. react-router-redux
7. antd
8. axios
9. clipboard
10. leancloud-storage
11. SCSS
12. IED - JetBrains(WebStrom)
13. eslint-airbnb

後端

1. node
2. express
3. mongodb
4. mongoose
5. redis
6. ioredis
7. cors
8. jsonwebtoken
9. nodemailer (發郵件的)
10. winston (寫日誌的)
11. IED - JetBrains(WebStrom)
12. centOS7
13. eslint-airbnb

目錄結構

前端

.
├── index.jsx
├── App
├── components
│   ├── alert_info.jsx
│   ├── footer_dom.jsx
│   ├── header_dom.jsx
│   ├── main_dom.jsx
│   ├── image_upload_page
│   ├── my_uploaded_page
│   ├── storage_setting_page
│   ├── user_center_page
├── redux
│   ├── actions
│   ├── constants
│   ├── middlewares
│   ├── reducers
│   └── store
├── request
└── utils
    ├── history.js
    ├── leancloud
    ├── logger.js
    └── verify
複製代碼

後端

.
├── app.js
├── bin
│   └── www
├── config
│   ├── cipher
│   │   ├── jwt_config.js
│   │   └── password_config.js
│   └── setting
│       └── index.js
├── doc
├── errors
│   ├── error_code.js
│   ├── http_base_error.js
│   ├── http_request_param_error.js
│   ├── internal_server_error.js
│   ├── login_error.js
│   ├── no_auth_error.js
│   └── resource_not_found_error.js
├── logs
│   ├── app
│   ├── redis
│   └── req
├── middlewares
│   ├── auth.js
│   ├── error_handler.js
│   └── http_error_handler.js
├── models
│   └── user.js
├── package-lock.json
├── package.json
├── public
├── routes
│   ├── index.js
│   └── user.js
├── services
│   ├── common_service.js
│   ├── jwt_service.js
│   ├── mail_service.js
│   ├── mongoose_service.js
│   ├── redis_service.js
│   └── user.js
├── test
├── utils
│   ├── api_response.js
│   └── loggers
│       ├── loggerGenerator.js
│       └── logsMeta.js
└── views

複製代碼

項目地址

源碼在這裏 https://github.com/yunyu950908/image-hosting

預覽看這裏 http://image.ioly.top/

求（pian） star

各位善良可愛小哥哥小姐姐，既然都已經看到這裏了那就點個 star 鼓勵一下唄~

平時 vue 寫的比較多，第一次寫 react 不免會差一些，可是若是有了 star 的鼓勵，本寶寶必定會繼續努力加油，以各位小哥哥小姐姐爲榜樣，好好學習，每天向上！

噗~ 爲了騙個小星星也真不容易哎 =。=

PS: 若是有大佬看了代碼的，但願給點建議。好讓我針對性地去學點東西改進改進~ 麼麼噠~ 有其餘問題能夠聯繫郵箱 ioly@ioly.top