springboot+vue练手小项目[前台搭建+后台编写]（非常详细）

[ springboot+vue练手小项目 ]

• 技术栈： springboot+vue3+element-plus +Mybaties-plus+hutool
  +mysql8
• 项目介绍 ：最近刚学了springboot+vue，就想着做一个小的前后端分离的练手项目，简单的后台管理页面，有基本的登陆注册+增删改查，后面具体的模块等需要的时候的再进行完善，这只是一个练手项目，如果大家运行不出来或者有疑问，欢迎交流。
• 我是个菜鸟，也不太会写文章，若有不足欢迎指正。

1.环境搭建

1.安装node环境,npm,cli，这里不再赘述

2.在指定文件夹使用cmd指令创建项目:vue create springboot-vue-demo

3.选择Manually select features

4.选择路由和vuex，这里未选择了eslint语法检测[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.选择3.x版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![(img-H4bjGfpT-1647170194103)(C:UserserhangAppDataRoamingTypora ypora-user-imagesimage-20220309152419903.png)]](https://img-blog.csdnimg.cn/01313a7a07824b64820fb1c22a09aa4f.png)

6.输入y (路由信息为history，)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![(img-K8XKVnNm-1647170194104)(C:UserserhangAppDataRoamingTypora ypora-user-imagesimage-20220309152546319.png)]](https://img-blog.csdnimg.cn/616317c8beea4a0fa731a390d18c8dbc.png)

7.选择In package.json

8.是否保存配置

9.创建,启动项目

10.启动成功,浏览器输入8080端口进行访问

11.在idea打开项目，配置vue启动

选择npm,在npm中Script选项中输入serve

之后就可以点击启动键，快捷启动项目了

安装vue插件

2.项目基本布局

1.引入Element-plus（基于vue3.x版本）

在idea终端输入指令引入Element-ui依赖

项目中引入Element-ui，main.js文件中引入Element-plus

2.删除HelloWorld组件,删除App.vue的多余部分

在components中创建Header组件 在App.js中引入

创建css文件夹，创建global.css文件，在main.js中引入全局css样式

在components中创建Aside(侧边栏)，app.vue引入组件

Aside中引入emement导航栏样式

Home中引入四个区域 功能 搜索 表格 分页作为主体区域

3.项目目录

4.代码

global.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Aside.vue

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          style="width: 200px;min-height:100vh"
          text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>选项1</span>
          </template>
          <el-menu-item index="1-1">
            <el-icon><setting /></el-icon>
            <span>选项1-1</span>
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>选项2</span>
          </template>
          <el-menu-item index="2-1">
            <el-icon><setting /></el-icon>
            <span>选项2-1</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="3">
          <el-icon><icon-menu /></el-icon>
          <span>3</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Aside"
}
</script>

<style scoped>

</style>

Header.vue

<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <div style="width: 200px;font-weight: bold;padding-left: 20px;color: blue">后天管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px;margin-right: 20px;margin-top: 20px">
      <el-dropdown>
        <span class="el-dropdown-link">
          张三
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header"
}
</script>

<style scoped>

</style>

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

HomeView.vue

<template>
  <div class="home" style="padding: 10px">
    <!--    功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!--    搜索区域-->
    <div style="ma