Simple blog system

---

Project address ： Simple blog system

1.1 Began to run

The whole project is in Visual Studio Code Finish in , First start the server at the terminal of the software , Second, open Windows Upper cmd start-up mongodb database , After successful connection , Open the browser and enter the startup port http://127.0.0.1:3007, Enter the home page , The articles published by all users will be displayed

1.2 Sign in

1.2.1 register

Click the registration above , You can enter register page

User input mailbox , At the same time, the email format should be correct , Then enter the password and confirm it , The two passwords should be the same , Otherwise, a prompt will appear

Finally, click Register , A prompt box will pop up to show that the registration is successful , After successful registration, email 、 password 、 Default Avatar 、 Default nickname ,ID Wait for the data to be transferred into the database , And users ID, nickname , The avatar will be saved to the local browser

Click OK to enter the home page

1.2.2 Sign in

If the user is already registered , You can log in directly

Log in and fill in the correct email format password to enter the home page

1.3 Platform home page

After login or registration, enter the homepage , The nickname of the current user will be displayed , Head portrait , And all articles published by all users will be displayed , The article list will show the user's Avatar nickname and time of publishing the article , There is also the title and part of the content of the article .

Click the content of each line in the article list to enter the article details of the article

Under the article details, users can comment on the article ,
After the comment is successful , It will show below the article , At the same time, the database will also add this comment

Click on personal Center , You can enter the personal center page

Click exit on the home page to exit the login interface

1.4 Personal center

Enter the personal Center , You can modify your personal information

1.4.1 Change Password

Enter the personal Center , Click the side navigation bar to enter the password modification page

Enter the password you want to change , Input cannot be empty , Then click OK and a pop-up box will pop up

Click OK to exit the login page , Log back in , Entering the new password will show that the login is successful and you will enter the home page again

1.4.2 Modify nickname

Click Modify nickname in the side navigation bar to enter this page

Enter the new and changed nickname , Click to confirm the modification and the modification will be successful , The database will also update the avatar data
3.4.3 Modify the head image
Click Modify avatar in the side navigation bar to enter this page

Click the circle on the right “ Click to select avatar ”, Then the folder will pop up , Users can change avatars from folders , After selection, a box will pop up , Indicates the modification is successful .
After the modification is successful, the updated image will be displayed

1.4.4 Article management

Click article management in the side navigation bar to enter this page

Click Edit after each line , You can enter the page of article details , Make changes

You can modify the title and content of the article , After the modification , Click confirm or cancel as shown in the figure below
After clicking confirm , Can be modified successfully
After clicking cancel , Then go back to the original page

Click Delete to pop up the page to delete , Click Delete to delete from the page , The comments under this article will also be deleted , The article and comment will also be deleted from the database

1.4.5 Logout

Click logout account in the side navigation bar to enter this page

After clicking confirm, the account will be cancelled , After logging off, the database will also delete the user

1.5 Publish articles

Click on the top navigation bar “ Post an article ”, You can enter the article writing interface

The title of the article , After the content is completed , Click publish in the upper right corner to publish successfully , After publishing successfully, jump directly to the home page , The home page shows this article . Besides , After the article is published successfully, it will also be added to the database

1.6 Background management

There are administrators in the background , Administrators can log in directly to view data
Administrator permissions can be applied to background users 、 article 、 Comment to operate
Use the email password of the administrator to log in and directly enter the background

1.6.1 Data visualization

Enter the background display as shown in the following figure , The top line shows all users , article , Total number of comments , The following two figures are for users , article , The total number of comments used Echarts Visualizing , It can clearly display all kinds of totals

1.6.2 User management

Click user management on the right navigation bar to enter the user management page , Show all registered users , Each line will display the user's Avatar , nickname ,ID And mailbox

Mouse over each line will display the delete button , Click delete , After confirmation, it will be deleted from the database , And the user's article will be deleted , Review data .
The bottom number is paging the user list , Convenient view .

1.6.3 Article management

Click article management on the right navigation bar to enter the article management page , Show all registered articles , Each line will display the avatar of the user who posted the article , nickname , The title and part of the article , article ID And the time when the article was published

Mouse over each line will display the delete button , Click delete , After confirmation, the article will be deleted from the database , This page will not display .
At the same time, you can also view pages .
If you click the content of the article on each line with the mouse, you will jump to the foreground , See article details

1.6.4 Comment management

Click comment management on the right navigation bar to enter the comment management page , Show all registered comments , Each line will display the avatar of the comment , nickname , Comment content and time of posting comment .

Mouse over each line will display the delete button , Click delete , After confirmation, the comment will be deleted from the database . At the same time, you can also view pages .
Finally, exit , Click exit in the right navigation .