SpringBoot+Vue作家管理系统开发与毕业设计实践

1. 项目背景与核心价值

这个基于SpringBoot+Vue的作家信息管理系统，本质上是一个典型的Java Web全栈项目。它之所以适合作为毕业设计选题，是因为完美覆盖了计算机专业学生需要掌握的几项核心能力：后端业务逻辑开发、前端框架应用、数据库设计以及前后端分离架构的实现。

我在指导本科生毕业设计时发现，这类"信息管理系统"类项目之所以经久不衰，是因为它具备几个独特优势：需求明确但可扩展性强（基础CRUD之外可以加入各种特色功能）、技术栈主流且完整（涵盖当下企业开发的主流框架）、文档资料丰富（遇到问题容易找到解决方案）。而加入"获奖作家"这个具体领域，又使得项目脱离了纯Demo性质，有了实际应用场景。

2. 技术架构解析

2.1 后端技术选型

SpringBoot 2.7.x + MyBatis-Plus的组合是经过深思熟虑的：

• SpringBoot的自动配置特性让新手可以快速搭建Web服务
• MyBatis-Plus在传统MyBatis基础上提供了更便捷的CRUD操作
• 特意没有选用JPA是考虑到国内企业MyBatis使用率更高

数据库选用MySQL 8.0而非5.7版本，原因包括：

• 8.0对JSON字段的原生支持便于存储作家作品信息
• 窗口函数等新特性方便实现各类统计报表
• 性能优化明显，特别是对于中小型系统

2.2 前端技术方案

Vue 3.x + Element Plus的组合体现了技术前瞻性：

• Composition API更适合复杂组件开发
• Vite构建工具显著提升开发体验
• Element Plus作为UI库文档完善，社区活跃

特别值得强调的是axios的二次封装处理：

javascript复制// 典型请求拦截器配置
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

3. 核心功能实现

3.1 作家信息管理模块

数据库设计特别注意了扩展性：

sql复制CREATE TABLE `author` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '作家姓名',
  `gender` char(1) DEFAULT NULL COMMENT '性别',
  `birth_date` date DEFAULT NULL COMMENT '出生日期',
  `native_place` varchar(100) DEFAULT NULL COMMENT '籍贯',
  `awards` json DEFAULT NULL COMMENT '获奖情况',
  `biography` text COMMENT '人物简介',
  `photo_url` varchar(255) DEFAULT NULL COMMENT '照片URL',
  PRIMARY KEY (`id`),
  KEY `idx_name` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

关键点：使用JSON类型存储获奖信息，既保持结构化又避免过度范式化

3.2 作品关联管理

采用主子表设计实现作家-作品关系：

java复制// 作家DTO包含作品列表
public class AuthorDTO {
    private Long id;
    private String name;
    private List<LiteraryWork> works;
    // 其他字段...
}

// MyBatis-Plus关联查询
@Select("SELECT * FROM literary_work WHERE author_id = #{authorId}")
List<LiteraryWork> selectWorksByAuthorId(Long authorId);

3.3 数据可视化展示

ECharts的集成示例：

vue复制<template>
  <div ref="chart" style="width: 600px; height:400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption({
    // 配置项...
  })
})
</script>

4. 开发实战技巧

4.1 接口文档生成

Swagger与Knife4j的配合使用：

java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.controller"))
                .paths(PathSelectors.any())
                .build();
    }
}

4.2 权限控制实现

基于Spring Security的RBAC模型：

java复制@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/api/admin/**").hasRole("ADMIN")
        .antMatchers("/api/author/**").hasAnyRole("ADMIN", "EDITOR")
        .anyRequest().authenticated()
        .and()
        .addFilter(new JwtAuthenticationFilter(authenticationManager()))
        .addFilter(new JwtAuthorizationFilter(authenticationManager()));
}

5. 项目部署要点

5.1 前端打包优化

vite.config.js的典型配置：

javascript复制export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0]
          }
        }
      }
    }
  }
})

5.2 后端性能调优

application.yml关键配置：

yaml复制server:
  tomcat:
    max-threads: 200
    min-spare-threads: 10
    
spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      connection-timeout: 30000

6. 毕设答辩准备

6.1 技术亮点提炼

建议突出以下几个方向：

1. 前后端分离架构的实现过程
2. 复杂查询的SQL优化（如获奖统计）
3. 响应式前端设计的实现
4. 接口安全性的保障措施

6.2 常见问题应对

准备这些问题的答案：

• 为什么选择Vue而不是React？
• 如何保证作家数据的准确性？
• 系统最大能支撑多少并发？
• 如果要加入作品全文检索会怎么实现？

我在指导学生答辩时发现，评委最关注的是：你理解自己写的每一行代码吗？遇到问题是怎么解决的？系统有哪些可以继续优化的地方？提前准备这些问题的答案能显著提升答辩表现。