根据路由自动构建Vue3+ElementPlus的二级菜单，并结合Go Gin Gorm后端

构建一个基于 Vue 3 和 Element Plus 的前端应用，结合 Go Gin 和 Gorm 后端，实现根据路由自动构建二级菜单的功能，涉及前后端的协作。以下是一个简要的指南。

前端：Vue 3 + Element Plus

1. 安装 Vue 3 和 Element Plus

   首先，确保你已经安装了 Vue CLI。如果没有，请通过 npm 安装：

   bash复制代码

   npm install -g @vue/cli

   然后创建一个新的 Vue 项目：

   bash复制代码

   	vue create my-vue-app
   	cd my-vue-app
   	vue add element-plus

2. 定义路由

   在 src/router/index.js 中定义你的路由，包括一级和二级路由。

   javascript复制代码

   	import { createRouter, createWebHistory } from 'vue-router';
   	import Home from '../views/Home.vue';
   	import About from '../views/About.vue';
   	import Dashboard from '../views/Dashboard.vue';
   	import Settings from '../views/Settings.vue';
   	import UserProfile from '../views/UserProfile.vue';
   	const routes = [
   	{
   	path: '/',
   	name: 'Home',
   	component: Home,
   	},
   	{
   	path: '/dashboard',
   	component: Dashboard,
   	children: [
   	{
   	path: 'profile',
   	name: 'UserProfile',
   	component: UserProfile,
   	},
   	{
   	path: 'settings',
   	name: 'Settings',
   	component: Settings,
   	},
   	],
   	},
   	{
   	path: '/about',
   	name: 'About',
   	component: About,
   	},
   	];
   	const router = createRouter({
   	history: createWebHistory(process.env.BASE_URL),
   	routes,
   	});
   	export default router;

3. 自动构建二级菜单

   在 src/components 目录下创建一个 SidebarMenu.vue 组件，用于根据路由自动构建菜单。

   vue复制代码

   	<template>
   	<el-menu
   	:default-active="activeIndex"
   	class="el-menu-vertical-demo"
   	router
   	>
   	<template v-for="route in routes">
   	<el-submenu v-if="route.children && route.children.length" :index="route.path">
   	<template slot="title"><i :class="route.icon"></i><span>{ { route.name }}</span></template>
   	<el-menu-item
   	v-for="child in route.children"
   	:key="child.path"
   	:index="child.path"
   	>
   	<i :class="child.icon"></i>
   	<span>{ { child.name }}</span>
   	</el-menu-item>
   	</el-submenu>
   	<el-menu-item v-else :index="route.path">
   	<i :class="route.icon"></i>
   	<span>{ { route.name }}</span>
   	</el-menu-item>
   	</template>
   	</el-menu>
   	</template>
   	<script>
   	import { useRouter } from 'vue-router';
   	import routes from '../router/index'; // 这里需要调整以正确导入路由配置
   	export default {
   	name: 'SidebarMenu',
   	data() {
   	return {
   	routes: routes.map(route => ({ ...route, icon: 'el-icon-menu' })), // 假设每个路由都有一个默认的图标属性，你可以根据实际需求调整
   	activeIndex: this.$route.path,
   	};
   	},
   	watch: {
   	$route(to) {
   	this.activeIndex = to.path;
   	},
   	},
   	setup() {
   	const router = useRouter();
   	return { router }; // 这里实际上并没有直接使用 router，但你可以根据需求扩展功能
   	},
   	};
   	</script>
   	<style scoped>
   	.el-menu-vertical-demo {
   	width: 200px;
   	min-height: 400px;
   	background-color: #333;
   	color: #fff;
   	border-right: none;
   	}
   	</style>

   注意：上面的代码示例中有一些简化和假设，比如每个路由都默认有一个 icon 属性。在实际应用中，你可能需要在路由配置中明确指定每个路由的图标，或者根据路由名称动态设置图标。

4. 在主组件中使用侧边栏菜单

   在 src/App.vue 或其他主布局组件中引入并使用 SidebarMenu.vue 组件。

后端：Go Gin + Gorm

1. 安装依赖

   在你的 Go 项目中，初始化模块并安装 Gin 和 Gorm 依赖。

   bash复制代码

   	go mod init my-go-app
   	go get -u github.com/gin-gonic/gin
   	go get -u gorm.io/gorm
   	go get -u gorm.io/driver/mysql # 或者你选择的其他数据库驱动

2. 设置 Gin 路由和 Gorm 数据库连接

   创建一个 main.go 文件，设置 Gin 路由和 Gorm 数据库连接。

   go复制代码

   	package main
   	import (
   	"github.com/gin-gonic/gin"
   	"gorm.io/driver/mysql"
   	"gorm.io/gorm"
   	"net/http"
   	)
   	type Menu struct {
   	ID uint `gorm:"primaryKey"`
   	Parent uint
   	Name string
   	Path string
   	Icon string
   	}
   	var db *gorm.DB
   	func main() {
   	// 连接数据库
   	dsn := "username:password@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local"
   	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
   	if err != nil {
   	panic("failed to connect database")
   	}
   	// 自动迁移模式
   	db.AutoMigrate(&Menu{})
   	// 设置 Gin 路由
   	r := gin.Default()
   	// 这里可以添加获取菜单数据的 API 路由
   	r.GET("/api/menus", func(c *gin.Context) {
   	var menus []Menu
   	db.Preload("ParentMenu").Find(&menus) // 假设你有一个 ParentMenu 关系来定义父子菜单，这里需要根据你的实际数据模型调整
   	c.JSON(http.StatusOK, menus)
   	})
   	r.Run(":8080") // 监听并在 0.0.0.0:8080 上启动服务
   	}

   注意：上面的 Gorm 模型和查询代码是一个简化的示例。在实际应用中，你需要根据你的数据库设计来调整模型结构和查询逻辑。特别是，你可能需要定义一个关系来关联父子菜单项。

3. 前端调用后端 API 获取菜单数据

   在 Vue 组件的 created 或 mounted 生命周期钩子中，调用后端 API 获取菜单数据，并更新组件的 routes 数据。

   javascript复制代码

   	mounted() {
   	this.fetchMenus();
   	},
   	methods: {
   	async fetchMenus() {
   	try {
   	const response = await axios.get('/api/menus');
   	const menus = response.data;
   	// 这里需要根据你的后端返回的数据结构来转换和设置 this.routes
   	// ...
   	} catch (error) {
   	console.error('Failed to fetch menus:', error);
   	}
   	},
   	},

   注意：上面的代码示例假设你已经安装了 axios 并用于发送 HTTP 请求。你需要根据你的后端 API 返回的数据结构来适当地转换和设置 Vue 组件的 routes 数据。

通过以上步骤，可以实现一个基于 Vue 3 和 Element Plus 的前端应用，结合 Go Gin 和 Gorm 后端，根据路由自动构建二级菜单的功能。请注意，上面的代码示例是为了说明目的而简化的，你可能需要根据你的实际需求进行调整和扩展。