Introduction

This is the backend management system of Blog2.0. The 1.0 version uses Django Admin directly, which is not very flexible indeed.

React + react-router-4 + Mobx + Google reCAPTCHA + Ant Design To be honest, compared to the front-end JS and CSS code amount of 50% each, this background harvest is still very large.

There will be a lite version for you to criticize, that is, you can’t upload, you can’t change the password, and everything else.

Because just graduated soon, working time is not much, feel to do the project is still a little immature, so I decided to open source to accept the opinions of the leaders.

GitHub

Front line address

The front-end document is here

Now I am looking for a job, if there is a suitable opportunity, please contact me, or leave your email. My email address is [email protected]

Detail

Login

Because there is really no need to register, so directly put the user name and encrypted password in the database, of course, the late mood does not rule out a registration.

I’m using Google reCAPTCHA, which, in the words of my colleagues, is actually loading myself at 😂, but using this thing also provides a solid foundation for filling in the Request library and the Request-Promise library behind it, yeah.

This is a backend for my own use, but there are still some illegal operations to consider. For example, on this page, only the login button can be clicked if the email, Password, and Google reCAPTCHA values are valid. Set the button to Disabled immediately after clicking to avoid multiple clicks.

Add and delete

Since most modules have a similar architecture to the one above, let’s pick one and use the Player module as an example:

  • Table rendering data, using pagination;
  • Add, delete, change, check and batch delete buttons for data operation;
  • As mentioned above, the background is written from the user’s point of view, so it will be forbidden to click the button to submit if the user does not fill in the full information.
  • Encapsulates the Ali OSS upload interface
  • Click on the picture in the table (if any) to enlarge the display;
  • Delete and batch delete will pop up in advanceAre you sure to delete tip;

Article

This is the core function of Blog, in addition to the conventional add delete change check batch delete, but also increased the function of fuzzy search and search by time period.

Article Editor

This is the core function area of the Blog, which is used to write articles such as Header, Cover, Title, Summary, Content and Tags. Of course, these are mandatory items, so MOBx detects that if some items are empty, they cannot be submitted.

The Toast UI for Markdown editor is, to be honest, a pain in the ass to use.

To highlight the missing part of the image above, 😂, are two buttons for submission.

  • The button on the left is to save and leave on the current page, which is actually a temporary save function, and I also added a function that when clicked will popup a popup asking you if you want to publish immediately, which means:

    When you click 'Save and leave on current page' and then click Yes, the article will be saved to the database and will be published and left on the current edit page. When you click 'Save and leave on current page' and then click No, the article will be saved to the database and will not be published and left on the current edit pageCopy the code

  • The button on the right is purely save, clicking it will save the Article, then publish it, and jump to the Article List page.

CV

In fact, this module can be written in the form of tables, but it is really boring to write tables, so change the taste, in fact, this is similar to the effect of many recruitment websites, in fact, it is also to add, delete, change and check, of course, did not design batch deletion, feeling meaningless.

Global Setting

There are three modules:

  • The first one is personal information, which actually has two functions. One is in the upper right corner of the background.Or space.😂), another use is for the personal information section of the front-end resume page;
  • The second is to change the password, I guess I will not use this place, but since I want to write, then do it;
  • The third is the global configuration, of course, there is only one interface, that is, the whole station gray effect, once the background set gray, the front end of the station will become gray, used for some special mourning days.

The last

Because I am busy looking for a job recently, I will carry out article transfer and English document writing after this busy period. If there is a good job opportunity, please contact me

Scot (T) ros siume.