iBlog

Environmental preparation

• Node.js v14.15.5
• MongoDB v4.2.17

Install MongoDB database

Enter the official website to download, the version is 4.2.17, the platform is Windows, and the installation package is in msi format.

project development

1. Clone the project locally:

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. Install front-end, back-end (admin, web) and back-end (server) project dependencies:

$ pnpm install-all

3. Run front-end, back-end (admin, web) and back-end (server) projects:

$ pnpm serve-all

4. Open browser preview:

http://localhost:8080 opens the front-end local page; http://localhost:8088 opens the background local page.

Please register the user when logging in as backend admin for the first time. After logging in, you can hide the registration button to prevent the login account from being leaked.

Backend management system

• Add new category

• Category list (add, delete, modify, check)

• Add new article

• Article list (add, delete, modify, check)

• Article comment list

• Add friend link

• Friendly link list (add, delete, modify, check)

• Message list

• Message user list

• Markdown editor integration

• Image upload function

• Add new user

• User list (add, delete, modify, check)

• Universal addition, deletion, modification and query interface implementation (middleware resourceMiddleware)

• Login registration function

• Logout function

• Add jwt verification (1. User name search 2. Password verification 3. Return token)

• Add http interceptor (request, response)

Blog system

• Blog home page UI
• Blog home page interface implementation
• Blog archive page UI
• Blog archive page interface implementation
• Blog tag page UI
• Blog tag page interface implementation
• Blog post page UI
• Blog article page interface implementation
• Blog friend link page UI
• Blog friend link page interface implementation
• Blog message page UI
• Blog message page interface implementation

Configuration notes

1. To reply to other people's comments on the comment page, your QQ mailbox is used for synchronized notification. You need to configure the mailbox in server/plugins/sendEmail.js . How to obtain the QQ mailbox authorization code is shown in the figure below (on the QQ mailbox settings-account page).

2. Configuration of the main account for comments (the main account is used for email replies, so the account email created for comments must be the same as the email for the QQ mailbox authorization code in the previous step). At the same time, the comment account needs to be set in web/src/commentConfig.js (Note that topNickName needs to be consistent with the nickname of the main account created by the comment. topParentId can be obtained from the background page). If the main account is cleared, it must be reconfigured.
3. Regarding the background image upload: the default is to upload to the local. This method has higher requirements for the server. Naturally, the loading speed of the front end will be affected. You can choose to use Alibaba Cloud's OSS for uploading and storage. You need to add server/routes/admin/index.js Uncomment the code for Alibaba Cloud oss ​​image upload in server/routes/admin/index.js , comment out the code for local image upload, and finally fill in your Alibaba Cloud oss ​​configuration.

Project packaging and deployment

• Web and admin project packaging (run the pnpm build-all command in the root directory)
• Domain name purchase
• Domain name resolution
• linux cloud server purchase
• git installation, ssh key addition
• pm2 process management
• ngnix configuration
• mongodb configuration
• Migrate mongodb data from local to server
• Qiniuyun cdn free acceleration for the entire site

For online server deployment, please refer to this guide.

Blog backend management system

Blog system

WelcomeStar,Issues

• Your Star is my motivation for continuous updates and maintenance! ! !
• If there are any problems during use, please feel free to report Issues

To Do List

• Performance optimization, images need to be compressed and preloaded
• Add search function to blog post page
• Browser compatibility issues, mobile adaptation. I only used my own computer's Google Chrome browser development and mobile phone adaptation effects. I haven't tried any other methods. However, it is not recommended to use the mobile terminal. The computer login effect is better.
• Solve the SEO problem of Vue and the jitter problem of refreshing the rendering page. We will do Vue pre-rendering for the time being. We do not rule out doing Vue server-side rendering or nuxt.js server-side rendering in the future.
• Organize the code and split it into components. Make the structure clearer and reduce the amount of code
• Refactor the entire project using typescript
• Interesting functions will be added gradually as I think of them, and they are under continuous development...