Springboot+vue后台管理系统-前后端分离数据传递

最新推荐文章于 2025-04-04 16:46:27 发布

m0_54853146

最新推荐文章于 2025-04-04 16:46:27 发布

阅读量2.2k

点赞数

分类专栏：前端 html 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_54853146/article/details/123259384

版权

本文档详细介绍了如何使用Springboot+Vue搭建后台管理系统，包括前端项目的创建，组件划分，以及如何通过axios进行数据交互。同时，提到了Element UI的使用和解决前端跨域问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

零：最终实现图片展览：

请添加图片描述

一：前端项目搭建；

1:使用cmd下载vue：

请添加图片描述

2：`npm install -g @vue/cli` （如果安装过就不用啦）

3:vue create springboot-vue-demo(自己的名字)：

请添加图片描述

4：

5：将目标移动到第一个选项然后按回车到达下面这个界面，选择一个vue版本，我们这里选择vue3x

请添加图片描述

6：下一个界面依次按下： y in package.json y 这三个，第三个是是否保存当前配置可以按N

7：

请添加图片描述

进入：

退出打开idea去开启项目编写

二：前端框架搭建，首先看一下最终的实现效果：

请添加图片描述

1：首先我们发现这个后台管理系统有三个部分，内容，顶部栏，左边导航栏，所以我们要将顶部和左侧两个不变的地方写在components中：

请添加图片描述

Header.vue：

<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex; background-color:#545c64">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: white">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown style="line-height: 3.5 ;color: white">
        <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 >
import { ArrowDown } from '@element-plus/icons-vue';
export default {
  components:{ArrowDown},
  name: "Header"

}

</script>

插入一下：新版element引入图标使用的script：i`mport { ArrowDown } from '@element-plus/icons-vue';`，项目中加入element是需要手动npm导入的，这里可以通过看官网介绍

Aside.vue：

<template>
  <div>
    <el-menu
        style="width: 200px; min-height: calc(100vh - 50px)"
        :uniqueOpened="true"
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <el-sub-menu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>

        <el-menu-item index="1-4">
          <template #title>选项1-1</template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="2">
        <el-icon><document /></el-icon>
        <template #title>导航二</template>
      </el-menu-item>

      <el-menu-item index="3">
        <el-icon><document /></el-icon>
        <template #title>导航三</template>
      </el-menu-item>

      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>导航四</template>
      </e