Springboot + Vue Separation of Front-end and Back-end Personal Website + Management Backend

Vue Personal Website

This project is the frontend of the Vue personal website

View Demo · Report Bug

Introduction | Technologies | Environment | Development Environment | Project Screenshots | Quick Start｜Chinese(中文)

Introduction

• The project is developed based on Feng and Yu's personal blog.
• It adopts the separation of front-end and back-end deployment, which is convenient for development and has better scalability and maintainability.
• The design of the website front-end refers to "Butterfly" of "Hexo".
• The management background refers to the design of "element-admin": sidebar, history tags, automatically generated breadcrumb navigation.

Website Frontend

• Articles are edited using Markdown editor, simple and adaptable to the mainstream.

• Article browsing supports code highlighting and copying, image preview, dark mode, and other functions to improve the user experience.

• Article search supports highlighting and word segmentation, with fast response speed.

• Supports publishing moments to share interesting things at any time.

• Supports text and emoji comments, with styling reference from Valine.

• Music player supports online song search.

• The chat room supports functions such as recall, voice input, and unread message count statistics.

• The message board adopts the style of bullet curtain wall.

personal website:
├── assets    --  js,css,iconfont files
├── components    --  common Vue components
├── plugins       --  Vue plugins
├── router        --  Vue router
├── store         --  Vue state management
├── utils         --  markdown.js
├── views         --  project page directory

Technologies

Frontend: vue + vuex + vue-router + axios + vuetify + element + echarts

Environment

Server: 1 Core 1GB Oracle CentOS 7.6

Object Storage: Minio

Development Environment

Development Tool	Description
VSCode	Vue development tool IDE
Another Redis Desktop Manager	Redis remote connection tool
X-shell	Linux remote connection tool
Xftp	Linux file upload tool

Project Screenshots

Website Frontend

Quick Start

This project is the Vue frontend. Make sure to start the Spring Boot backend service before running.

Project setup

npm install
npm run serve