VBlog Documentation

VBlog is a multi-user blog management platform developed using Vue and SpringBoot. It features user management, category management, article publishing, and data statistics.

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

To start the backend server:

1. Clone the repository.
2. Locate the vueblog.sql file in the blogserver/resources directory and execute it in your MySQL database.
3. Update the database configuration in the SpringBoot project's application.properties file to match your local environment.
4. Run the blogserver project in IntelliJ IDEA.

Once started, the server is accessible at http://localhost:8081/index.html.

To run the frontend in development mode:

1. Navigate to the vueblog directory.
2. Install dependencies using npm install.
3. Start the development server using npm run dev.

The project is configured with port forwarding to the SpringBoot backend. Once running, access the frontend at http://localhost:8080. Note: Do not close the SpringBoot project while running the frontend.

Requirements: Familiarity with NodeJS and NPM is recommended.

To prepare the frontend for production deployment:

1. Navigate to the vueblog directory.
2. Run npm run build.
3. After a successful build, a dist folder will be generated.
4. Copy the static folder and the index.html file from the dist folder into the blogserver/resources/static/ directory of your SpringBoot project.
5. Restart the SpringBoot project to serve the frontend directly.

The dev configuration object controls the behavior of the local development server. Key settings include:

• assetsSubDirectory: The directory for static assets (default: 'static').
• assetsPublicPath: The base path for assets (default: '/').
• proxyTable: Configuration for API proxying. By default, requests to / are proxied to http://localhost:8081 with changeOrigin: true and the path is rewritten to remove the leading slash.
• host: The dev server host (default: 'localhost').
• port: The dev server port (default: 8080).
• devtool: Source map type (default: 'eval-source-map').
• cacheBusting: Enables cache busting for Vue files (default: true).
• cssSourceMap: Enables CSS source maps (default: false).

Backend Stack

• SpringBoot
• SpringSecurity
• MyBatis
• MySQL
• RESTful API style

Frontend Stack

• Vue
• axios
• ElementUI
• vue-echarts
• mavon-editor
• vue-router

To view a report of your bundle size and composition after the build finishes, run the build command with the --report argument. This sets the bundleAnalyzerReport configuration key to true.

npm run build --report

The vueblog project uses vue-router to manage client-side navigation. The router is exported as a default instance and defines several top-level modules (Article Management, User Management, Category Management, and Data Statistics) which use a nested routing structure under the /home path.

Key route properties used in this configuration:

• path: The URL segment.
• name: The display name for the route.
• hidden: A boolean flag to hide the route from navigation menus.
• iconCls: A string representing FontAwesome icon classes (e.g., fa fa-file-text-o).
• meta.keepAlive: A boolean flag used to determine if the component should be cached/kept alive.

import Router from 'vue-router'

export default new Router({
  routes: [
    // ... route definitions
  ]
})