Springboot+Vue前后端的分离项目实战

一、实现技术

Spring Boot + Vue
使⽤ Spring Boot 进⾏后端应⽤开发，使⽤ Vue 进⾏前端应⽤开发。

二、Vue + Element UI

Vue 集成 Element UI

Element UI地址:https://element.eleme.cn/#/zh-CN

2.1、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器。

<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

2.2、Element UI 后台管理系统主要的标签：

• el-container：构建整个⻚⾯框架。

• el-aside：构建左侧菜单。

• el-menu：左侧菜单内容，常⽤属性：

  • :default-openeds：默认展开的菜单，通过菜单的 index 值来关联。
  • :default-active：默认选中的菜单，通过菜单的 index 值来关联。

• el-submenu：可展开的菜单，常⽤属性：

  • index：菜单的下标，⽂本类型，不能是数值类型。

• template：对应 el-submenu 的菜单名。

• i：设置菜单图标，通过 class 属性实则。

  • el-icon-messae
  • el-icon-menu
  • el-icon-setting

• el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：

  • index：菜单的下标，⽂本类型，不能是数值类型。

三、设置动态路由和导航栏

3.1、vue router 来动态构建左侧菜单

1）、在App.vue中定义<router-view></router-view>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2）、在router中定义路由的跳转

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/list.vue'
import Save from '../views/save.vue'
import Update from '..