【VUE小型网站开发】优化通用配置二

1. 引入 MyBatis Plus

1.1 添加依赖

xml 复制代码

<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- MyBatis Plus Starter -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.4.3</version> <!-- 请使用最新版本 -->
    </dependency>

    <!-- MySQL Connector -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.23</version> <!-- 请使用最新版本 -->
    </dependency>

    <!-- Lombok (可选，用于简化代码) -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.20</version> <!-- 请使用最新版本 -->
        <scope>provided</scope>
    </dependency>
</dependencies>

1.2 配置数据库连接

在 application.yml 或 application.properties 文件中配置数据库连接信息

yaml 复制代码

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/tool?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    username: username
    password: password
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

1.3 新建实体类

这边直接修改原来的Menu实体类，添加@TableName("menu")，对应到表么menu

java 复制代码

package com.tool.tooladmin.admin.menu.domain;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.util.ArrayList;
import java.util.List;

@Data
@TableName("menu")
public class Menu {
    private Long menuId;
    private Long parentId;
    private String menuName;
    private String path;
    private String icon;
    private Long sort;
    private Long isFrame;
    private String query;
    @TableField(exist = false)
    private List<Menu> children;
}

1.4 创建 Mapper 接口

创建一个 MenuMapper接口，并继承 BaseMapper。MyBatis Plus 提供了丰富的 CRUD 方法，无需手动编写 SQL 语句。

java 复制代码

package com.tool.tooladmin.admin.menu.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.tool.tooladmin.admin.menu.domain.Menu;

public interface MenuMapper extends BaseMapper<Menu> {
}

1.5 配置 MyBatis Plus

在 Spring Boot 的主配置类中，添加 @MapperScan 注解，扫描 Mapper 接口所在的包。

java 复制代码

package com.tool.tooladmin;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.tool.tooladmin.admin.menu.mapper") // 替换为你的 Mapper 接口所在包，可以只加载到个别，也可以设置父级，这样可以扫描到下面所有的mapper
public class ToolAdminApplication {

    public static void main(String[] args) {
        SpringApplication.run(ToolAdminApplication.class, args);
    }
}

前面改了menu实体类，需要修改前端对应的参数

html 复制代码

<template>
  <div>
    <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path || item.menuId">
      <span>{{ item.menuName }}</span>
    </el-menu-item>
    <el-sub-menu v-else :index="item.path || item.menuId">
      <template #title>
        <span>{{ item.menuName }}</span>
      </template>
      <menu-item v-for="child in item.children" :key="child.menuId" :item="child" />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});
</script>

【VUE小型网站开发】优化通用配置 二

1. 引入 MyBatis Plus

1.1 添加依赖

1.2 配置数据库连接

1.3 新建实体类

1.4 创建 Mapper 接口

1.5 配置 MyBatis Plus

1.6 修改前端menu对应的值

【VUE小型网站开发】优化通用配置二