This project is a background management system project made by Qing Ge, the main programmer of B station up. The video link is here . I will write notes in detail and publish them in the column.

login interface

insert image description here

Background interface

insert image description here
It includes functions such as file uploading and downloading, user additions, deletions and changes, menu management dynamic routing, and role permissions, which are almost necessary functions for all background functions, and some other functions will be integrated later.
Later, I will record in detail how each function is implemented in the column to facilitate my project review.

Project construction

Software version:

jdk 1.8
mysql5.7+
node14.16.0
navicat
idea2021.3

If you think a node version. After that, it is too troublesome to download and replace. See the article and use nvm to switch your node version at any time.
vue-cli installation: npm install -g @vue/[email protected]
insert image description here
find the directory where you put your project, such as

Then create a vue project: select vue create vue
the red box and press Enter
insert image description here
. The space bar in the figure below is a selection. After selecting, press Enter.

Select the vue2 .

npm set Taobao mirror acceleration: npm config set registry https://registry.npm.taobao.org(global)

Run the vue project:
cd vue
npm run serve·

Install ElementUI: npm i element-ui -S
insert image description here
After downloading, there will be dependencies in our package.json

Introducing Element

will

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, {
    
     size: "mini" });

Put it into main.js
insert image description here
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI, {
    
     size: "small" });

new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')

Home.vu (Section 1)

 <el-button type="danger">{
    
    {
    
     msg }}</el-button>
  
  export default {
    
    
  name: 'Home',
  components: {
    
    
    HelloWorld
  },
  data() {
    
    
    return {
    
    
      msg: "hello 青哥哥"
    }
  }
}

Will continue to update the notes in the springboot+vue column

Completely build a background management project springboot+vue (opening)

login interface

Background interface

Project construction

Guess you like