ioly 一張床
寫在前面，這個專案的程式碼適合跟我一樣的萌新一遍學習一邊寫程式碼，可能在大佬眼中這種程式碼慘不忍睹，然而對我等小萌新來說還是略有學習價值的~
emmmmm... 第一次用 react + express 做了個稍微有點兒用的東西 —— 圖床。
emmmmm... 同時也是第一次在掘金髮文章求(pian) Star ，想想都有些小激動呢~
好了言歸正傳，說起圖床這個東西，肯定有人想說 “他喵的做這玩意兒幹啥，微博圖床不好用咩~七牛不好使咩~ 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 這玩意太他喵喵咪咪的口怕了！！！
嘮嗑了這麼多，說點這圖床的東西吧。。
主要功能
- 註冊 （中規中矩，郵件驗證 + pbkdf2 加密）
- 登入 （鑑權用的 JWT，其實這種小專案用啥都一樣）
- 配置圖床空間 （mongodb）
- 上傳圖片獲得外鏈（因為流量的原因直接在前端調提供商的 sdK 並沒有在後端處理）
- 檢視歷史記錄 （還在施工，在考慮直接調 sdK 還是拿外鏈 + 圖片便籤存資料庫）
後續可能新增的功能
- 之前寫了幾個小爬蟲，可能會把她們註冊進來
- 目前只有 leancloud 能配置，後續至少會新增七牛，以及看情況新增其他
- 應該會新增按圖片標籤分類
- 圖片分享，把圖片連結和標籤描述丟進一個公共圖片池
- 用 es 處理資料，搞搞推薦之類的？
- 闊以加個 websocket 推送分享？
- 做個 Chrome 擴充套件整合一下
- emmmm... 好像還蠻多功能可以加的
技術棧
emmmm... 這玩意兒是不是就寫寫主要用了哪些包 =。=
前端
- react
- redux
- react-redux
- redux-thunk
- react-router-dom (這貨最難用 ☹️，還是 vue 路由寫的爽)
- react-router-redux
- antd
- axios
- clipboard
- leancloud-storage
- SCSS
- IED - JetBrains(WebStrom)
- eslint-airbnb
後端
- node
- express
- mongodb
- mongoose
- redis
- ioredis
- cors
- jsonwebtoken
- nodemailer (發郵件的)
- winston (寫日誌的)
- IED - JetBrains(WebStrom)
- centOS7
- 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
求（pian） star
各位善良可愛小哥哥小姐姐，既然都已經看到這裡了那就點個 star 鼓勵一下唄~
平時 vue 寫的比較多，第一次寫 react 難免會差一些，但是如果有了 star 的鼓勵，本寶寶一定會繼續努力加油，以各位小哥哥小姐姐為榜樣，好好學習，天天向上！
噗~ 為了騙個小星星也真不容易哎 =。=
PS: 如果有大佬看了程式碼的，希望給點建議。好讓我針對性地去學點東西改進改進~ 麼麼噠~ 有其他問題可以聯絡郵箱 ioly@ioly.top