Spring Boot 3 + MyBatis-Plus + MySQL + Vue + ProTable + TypeScript 实现后台管理商品分类（最新教程附源码）

引言

在现代 web 应用程序中，后台管理系统是一个不可或缺的部分。本文将详细讲解如何使用 Spring Boot 3、MyBatis-Plus、MySQL、Vue.js、ProTable 和 TypeScript 来构建一个商品分类的后台管理系统。我们将从头到尾完成一个实际项目的构建，并提供完整的源码。

技术栈介绍

Spring Boot 3

Spring Boot 是一个简化的 Spring 应用开发框架，通过约定优于配置的原则，快速构建独立的、生产级的基于 Spring 的应用程序。

MyBatis-Plus

MyBatis-Plus 是一个 MyBatis 的增强工具，它可以简化 CRUD 操作，提供了很多开箱即用的功能。

MySQL

MySQL 是一个开源的关系型数据库管理系统，被广泛应用于各种场合，是本项目的数据存储解决方案。

Vue.js

Vue.js 是一个渐进式 JavaScript 框架，适用于构建用户界面。其组件化结构使得开发复杂的单页应用（SPA）变得简单。

ProTable

ProTable 是一个基于 Ant Design 的高性能表格组件，支持多种功能如分页、排序等，非常适合作为后台管理系统的数据展示组件。

TypeScript

TypeScript 是 JavaScript 的超集，添加了静态类型检查，使得开发大型应用更具可维护性和安全性。

项目搭建

环境准备

确保安装以下软件：

JDK 17 或以上
Maven
MySQL
Node.js 和 npm
IDE（如 IntelliJ IDEA 或 Visual Studio Code）

创建 Spring Boot 项目

使用 Spring Initializr 创建一个新的 Spring Boot 项目，添加以下依赖：

Spring Web
Spring Data JPA
MySQL Driver
MyBatis-Plus

生成的项目结构大致如下：

Copy Code
src
└── main
    ├── java
    │   └── com
    │       └── example
    │           └── productcategory
    └── resources
        ├── application.yml
        └── mapper

配置 MyBatis-Plus

在 application.yml 中配置数据库连接信息：

yamlCopy Code
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/product_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: root
    password: your_password
  mybatis-plus:
    mapper-locations: classpath:mapper/*.xml

数据模型设计

商品分类的基本数据模型包含以下字段：

id (Long)
name (String)
description (String)
created_at (Date)
updated_at (Date)

在 com.example.productcategory.entity 包下创建 Category 实体类：

javaCopy Code
package com.example.productcategory.entity;

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

import java.util.Date;

@Data
@TableName("category")
public class Category {
    @TableId
    private Long id;
    private String name;
    private String description;
    private Date createdAt;
    private Date updatedAt;
}

后端开发

实体类

在 entity 包下创建 Category 类，定义数据模型。

Mapper 接口

创建 CategoryMapper 接口，继承 MyBatis-Plus 提供的 BaseMapper 接口：

javaCopy Code
package com.example.productcategory.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.productcategory.entity.Category;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface CategoryMapper extends BaseMapper<Category> {
}

Service 层

在 service 包下创建 CategoryService 接口及其实现类 CategoryServiceImpl：

javaCopy Code
package com.example.productcategory.service;

import com.example.productcategory.entity.Category;

import java.util.List;

public interface CategoryService {
    List<Category> listCategories();
    void saveCategory(Category category);
    void deleteCategory(Long id);
}

@Service
public class CategoryServiceImpl implements CategoryService {

    @Autowired
    private CategoryMapper categoryMapper;

    @Override
    public List<Category> listCategories() {
        return categoryMapper.selectList(null);
    }

    @Override
    public void saveCategory(Category category) {
        categoryMapper.insert(category);
    }

    @Override
    public void deleteCategory(Long id) {
        categoryMapper.deleteById(id);
    }
}

Controller 层

创建 CategoryController 控制器，处理 HTTP 请求：

javaCopy Code
package com.example.productcategory.controller;

import com.example.productcategory.entity.Category;
import com.example.productcategory.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/categories")
public class CategoryController {

    @Autowired
    private CategoryService categoryService;

    @GetMapping
    public List<Category> list() {
        return categoryService.listCategories();
    }

    @PostMapping
    public void add(@RequestBody Category category) {
        categoryService.saveCategory(category);
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable Long id) {
        categoryService.deleteCategory(id);
    }
}

前端开发

创建 Vue 项目

使用 Vue CLI 创建新的 Vue 项目：

bashCopy Code
vue create product-admin

选择需要的配置（推荐选择 TypeScript 支持）。

集成 ProTable

安装 ProTable 及其依赖：

bashCopy Code
npm install @ant-design-vue/pro-table

在 src/components 目录下创建 CategoryTable.vue：

Copy Code
<template>
  <a-pro-table
    :columns="columns"
    :data-source="data"
    rowKey="id"
    @request="fetchData"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ProTable } from '@ant-design-vue/pro-table';

export default defineComponent({
  components: { ProTable },
  setup() {
    const data = ref([]);
    const columns = [
      { title: 'ID', dataIndex: 'id' },
      { title: '名称', dataIndex: 'name' },
      { title: '描述', dataIndex: 'description' },
      {
        title: '操作',
        render: (text: any, record: any) => (
          <a-button onClick={() => deleteCategory(record.id)}>删除</a-button>
        ),
      },
    ];

    const fetchData = async () => {
      const response = await fetch('/api/categories');
      data.value = await response.json();
    };

    const deleteCategory = async (id: number) => {
      await fetch(`/api/categories/${id}`, { method: 'DELETE' });
      fetchData(); // Refresh the data
    };

    return { data, columns, fetchData };
  },
  mounted() {
    this.fetchData();
  },
});
</script>

TypeScript 配置

确认 tsconfig.json 中的配置符合项目需求，确保支持 Vue 文件：

jsonCopy Code
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

完整代码示例

这里不方便提供完整源码，可以在 GitHub 上查找相应的示例项目。

测试与运行

在终端中启动 Spring Boot 后端服务：

bashCopy Code
mvn spring-boot:run

在另一个终端中启动 Vue 前端服务：

bashCopy Code
npm run serve

访问 http://localhost:8080 即可查看页面效果。

总结

通过本教程，我们实现了一个简单的商品分类后台管理系统，使用了 Spring Boot、MyBatis-Plus、MySQL、Vue.js、ProTable 和 TypeScript 等现代技术栈。这种结构清晰、模块化的开发方式不仅提高了开发效率，也便于后续的维护和扩展。

完整的源码可在 GitHub 上找到，欢迎大家提出建议和意见！