Ioly a bed

Writing in the front, the code of this project is suitable for me to learn and write code again. It may be terrible in the eyes of the big guy, but it is still slightly valuable for me to learn

emmmmm… React + Express for the first time to create a slightly useful thing – graph bed.

emmmmm… It’s also the first time the Nuggets have posted a pian Star, which is a little exciting to think about

First three companies, big man, poke me! Thank you! https://github.com/yunyu950908/image-hosting

Anyway, when it comes to drawing beds, some people are going to say, “What the hell is this for? Weibo drawing beds are not working well, baa ~ Baa ~ SM is not working well.”

Of course it works, but until I found that the pictures I uploaded to my Weibo photo bed were hanging, hanging for no apparent reason… Good but unstable with wool. 7 ox is really easy to use and stable, however, this goods is too biased to the program ape, ordinary people with a thief is not convenient =. =

So there is no good and stable, the operation is also convenient figure bed pinch ~ on the baby at present, and did not meet special satisfaction, such as A figure bed XXX function is very like, but there is no B figure bed YYY function is convenient, and not enough C figure bed stability, but also A little bit D figure bed capacity…

Yes, there are advantages and disadvantages. There is always something to like, but there is always something missing ┑(￣ ￣)┍

In this case, then put them together – as a result, the baby decided to do an aggregate figure bed, la la la ~ although it’s only wrote the first edition, but after organic meet slowly filling holes, also hope to like me the code of livestock of new have time together to write ha ~ emmmm, although the code structure is a bit messy, follow-up will organize a little ~

This is the first time for my baby to use React properly (last time, I copied the official website demo 2333333 half a year ago). This time, I started from the beginning of the official website document and official tutorial demo, and then began to write this thing. In the middle of the process, I encountered a variety of problems by referring to github open-source project code, small demo code, Stack Overflow React-China and other communities. As expected, the power of community is great ~

React router-dom, redux, redux, redux, redux, redux, Redux, Redux, Redux, Redux, ReduX, ReduX, ReduX, ReduX, ReduX, ReduX ? Oh, my god! Where’s the code?! ? My god! My code, you come fat ~”

However, although there are many bumps in the process, the current code organization is not very good, but at least the first version has been almost completed, the defects and holes will be filled in later, after all, the graph bed this thing is still a bit useful, should not be like before the same copy of a thing written lost =. =

Alas, suddenly thought of node I almost is the first time to seriously write 23333333, but have to say that, although write a rotten bit, or quite a sense of achievement, but also very fun ~ at least do not care about the style, the front end of the style is to blow up!! CSS is so meow, meow, meow, meow, meow, meow, meow, meow, meow, meow, meow!

After r talking so much, say something about the bed.

The main function

  1. Registration (standard, mail authentication + PBKDF2 encryption)
  2. Logon (JWT for authentication, in fact, this small project uses the same thing)
  3. Configure map Bed Space (mongodb)
  4. Upload images to get external links (because of traffic issues directly in front of the provider’s sdK does not deal with the back end)
  5. Check historical records (still under construction, considering whether to directly adjust sdK or take external chain + picture notes to save database)

Features that may be added later

  1. I wrote a couple of crawlers, maybe we’ll sign them up
  2. Currently only LeanCloud can be configured, at least seven cows will be added later, and others will be added depending on the situation
  3. Should add categorization by picture label
  4. Photo sharing, where links to images and tag descriptions are thrown into a public photo pool
  5. Using ES to process data and do recommendations and stuff like that?
  6. How about adding a Websocket to push sharing?
  7. Make a Chrome extension for integration
  8. emmmm… It seems to be quite versatile to add

Technology stack

emmmm… This thing is not to write the main use of which packages =. =

The front end

  1. react
  2. redux
  3. react-redux
  4. redux-thunk
  5. React-router-dom (☹️)
  6. react-router-redux
  7. antd
  8. axios
  9. clipboard
  10. leancloud-storage
  11. SCSS
  12. IED – JetBrains(WebStrom)
  13. eslint-airbnb

The back-end

  1. node
  2. express
  3. mongodb
  4. mongoose
  5. redis
  6. ioredis
  7. cors
  8. jsonwebtoken
  9. Nodemailer (email sender)
  10. Winston (Who writes a journal)
  11. IED – JetBrains(WebStrom)
  12. centOS7
  13. eslint-airbnb

The directory structure

The front end

.Heavy Metal Metal Metal Metal Metal Metal Metal Metal Metal Metal Metal Metal Metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal metal │ ├─ Image_upload_Page │ ├─ my_uploaded_page │ ├─ storage_setting_Page │ ├─ user_Center_Page │ ├─ Actions │ ├── Constants │ ├─ middlewares │ ├─ Reducers │ ├─ Request │ ├─ history ├ ─ ─ logger. Js └ ─ ─ to verifyCopy the code

The back-end

. ├ ─ ─ app. Js ├ ─ ─ bin │ └ ─ ─ WWW ├ ─ ─ the 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 │ └ ─ ─ the req ├ ─ ─ middlewares │ ├ ─ ─ auth. Js │ ├ ─ ─ error_handler. Js │ └ ─ ─ http_error_handler. Js ├ ─ ─ models │ └ ─ ─ user. Js ├ ─ ─ package - lock. Json ├ ─ ─ package. The json ├ ─ ─ public ├ ─ ─ routes │ ├ ─ ─ index. The js │ └ ─ ─ the user. The 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 └ ─ ─ viewsCopy the code

The project address

Source https://github.com/yunyu950908/image-hosting here

A preview can be found at http://image.ioly.top/

Pian star

Everybody kind lovely little brother little sister, since all have already seen here that point a star to encourage a bai ~

Usually, Vue writes a lot, so it is inevitable that I will be a little bit worse when I write react for the first time. But with the encouragement of STAR, this baby will continue to work hard to cheer up, follow the example of everyone, study hard and make progress every day!

It’s not easy to fool a little star. =

PS: If there is a big guy to see the code, hope to give some advice. So that I targeted to learn some things to improve ~ yao yao da ~ have other problems can contact email [email protected]