【手把手学习vue】用springboot+vue2创建一个后台管理界面，通过后端接口渲染左侧菜单

猿脑2.0

于 2024-07-19 08:10:57 发布

阅读量327

点赞数 5

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_36083245/article/details/140538770

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

创建一个简单的管理界面涉及到后端和前端的开发。下面我将分别介绍如何使用 Spring Boot 和 Vue 2 来实现这个需求。

后端：Spring Boot

1. 初始化 Spring Boot 项目

你可以使用 Spring Initializr (https://start.spring.io/) 来生成一个基础的 Spring Boot 项目。

2. 添加依赖

在 pom.xml 文件中添加以下依赖：

<!-- Spring Web -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring Data JPA -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- H2 Database (用于演示，实际项目可能使用 MySQL 等) -->
<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>

3. 创建实体类

创建一个 Menu 实体类：

@Entity
public class Menu {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String path;
    private Long parentId; // 假设菜单是树状结构
    // Getters and Setters
}

4. 创建仓库接口

public interface MenuRepository extends JpaRepository<Menu, Long> {
}

5. 创建控制器

@RestController
@RequestMapping("/api/menus")
public class MenuController {
    @Autowired
    private MenuRepository menuRepository;
    @GetMapping
    public List<Menu> getAllMenus() {
        return menuRepository.findAll();
    }
}

6. 应用配置

确保你的 application.properties 或 application.yml 文件配置了数据库连接。

前端：Vue 2

1. 初始化 Vue 项目

使用 Vue CLI 创建一个新的 Vue 2 项目：

vue create vue-management

选择 Vue 2 版本并完成创建。

2. 安装依赖

进入项目目录，安装 axios 用于 HTTP 请求：

npm install axios

3. 创建组件

在 src 目录下创建一个 components 文件夹，并在其中创建一个 Menu.vue 文件：

<template>
  <div>
    <ul>
      <li v-for="menu in menus" :key="menu.id">
        {{ menu.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      menus: []
    };
  },
  created() {
    this.fetchMenus();
  },
  methods: {
    async fetchMenus() {
      const response = await axios.get('/api/menus');
      this.menus = response.data;
    }
  }
};
</script>

4. 在主组件中使用菜单组件

编辑 src/App.vue：

<template>
  <div id="app">
    <Menu />
  </div>
</template>
<script>
import Menu from './components/Menu.vue'
export default {
  name: 'App',
  components: {
    Menu
  }
}
</script>