How to implement blog management platform in Vue+SpringBoot

V Tribe is a multi-user blog management platform. This article mainly introduces the V Tribe blog management platform developed by Vue SpringBoot. Friends in need can refer to

V Tribe is a multi-user blog management platform developed using Vue SpringBoot.

Demo address: http://45.77.146.32:8081/index.html

Project address: https://github.com/lenve/VBlog

Login page

Article list

Publish article

User Management

Column Management

Data Statistics

Technology stack

Backend technology stack

The backend mainly uses:

1.SpringBoot

2.SpringSecurity

3.MyBatis

4. Some interfaces follow the Restful style

5.MySQL

Front-end technology stack

The front-end mainly uses:

1.Vue

2.axios

3.ElementUI

4.vue-echarts

5.mavon-editor

6.vue-router

There are other trivial technologies that I won’t list here.

Quick Run

1. Clone this project to local

git@github.com:lenve/VBlog.git

2. Find the vueblog.sql file in the resources directory of the blogserver project and execute it in the MySQL database

3. Modify the database configuration according to your local situation. The database configuration is in the application.properties of the SpringBoot project

4. Run the blogserver project in IntelliJ IDEA

OK. At this point, the server has been started successfully. At this time, we can directly enter http://localhost:8081/index.html in the address bar to access it. If our project requires secondary development, please continue to steps five and six.

5. Enter the vueblog directory and enter the following commands in the console:

# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev

Since I have configured port forwarding in the vueblog project to forward data to SpringBoot, the project After startup, enter http://localhost:8080 in the browser to access our front-end project. All requests will transfer data to SpringBoot through port forwarding (be careful not to close the SpringBoot project at this time).

6. Finally, you can use tools such as WebStorm to open the vueblog project and continue development. After the development is completed, when the project is going online, still enter the vueblog directory and execute the following command:

npm run build

The After the command is successfully executed, a dist folder is generated in the vueblog directory, and the two files static and index.html in the folder are copied to the resources/static/ directory in the SpringBoot project, and then they can be accessed directly as in step 4 .

Step 5 requires everyone to have some experience in using NodeJS, NPM, etc. Friends who are not familiar with it can search and learn by themselves first. We recommend the Vue official tutorial.

Project dependencies

1. vue-echarts

2. mavonEditor

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue vuex vue-rouert permission routing (detailed tutorial)

How to implement orderBy sorting and blurring in Angular Query

How to implement sensitive text prompts in Angular

How to implement hidden display in Angular

The above is the detailed content of How to implement blog management platform in Vue+SpringBoot. For more information, please follow other related articles on the PHP Chinese website!