三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

SpringBoot+Vue+MyBatis作家管理系统开发实践

发布时间：2026/8/10 7:05:31 三亩地 编程学习日记
SpringBoot+Vue+MyBatis作家管理系统开发实践

1. 项目概述：当代中国获奖作家信息管理系统的技术架构

这个基于SpringBoot+Vue+MyBatis+MySQL的前后端分离项目，是一个专门用于管理当代中国获奖知名作家信息的专业系统。作为一位长期从事全栈开发的工程师，我认为这类系统在文化机构、出版社和文学研究领域有着广泛的应用场景。

系统采用经典的三层架构设计：

  • 前端：Vue.js框架构建响应式用户界面
  • 后端：SpringBoot提供RESTful API服务
  • 持久层：MyBatis作为ORM框架
  • 数据库：MySQL存储结构化数据

这种技术选型在当前企业级应用中非常典型，各组件成熟稳定且社区支持良好。我在实际开发中发现，这种架构特别适合需要快速迭代的中小型管理系统，既能保证开发效率，又能满足性能需求。

2. 技术栈深度解析与选型理由

2.1 SpringBoot后端框架的优势

SpringBoot作为本项目的核心后端框架，其自动配置特性大大简化了传统Spring应用的初始化过程。根据我的项目经验，以下几个特点特别值得关注：

  1. 内嵌Tomcat服务器：无需额外部署WAR包
  2. Starter依赖管理：一键引入MyBatis、JDBC等常用组件
  3. Actuator监控端点：方便生产环境健康检查

提示：SpringBoot 2.7.x是目前最稳定的生产版本，不建议直接使用3.0+版本，除非项目需要Java 17特性。

2.2 Vue前端框架的实践考量

Vue.js作为渐进式前端框架，在本项目中主要承担以下职责：

  • 作家信息展示表格
  • 表单数据收集与验证
  • 路由导航与权限控制

我特别推荐使用Vue 3的组合式API，相比选项式API更利于代码组织。例如作家列表组件可以这样结构化：

// 作家列表组件示例 import { ref, onMounted } from 'vue' import { fetchAuthors } from '@/api/author' export default { setup() { const authors = ref([]) const loading = ref(false) onMounted(async () => { loading.value = true try { authors.value = await fetchAuthors() } finally { loading.value = false } }) return { authors, loading } } }

2.3 MyBatis持久层的最佳实践

MyBatis作为半自动化的ORM框架，在复杂SQL场景下比JPA更具优势。针对作家信息管理，我通常会这样设计Mapper：

<!-- 作家Mapper示例 --> <mapper namespace="com.literature.mapper.AuthorMapper"> <resultMap id="AuthorResultMap" type="Author"> <id property="id" column="author_id"/> <result property="name" column="author_name"/> <collection property="awards" ofType="Award"> <!-- 关联查询获奖信息 --> </collection> </resultMap> <select id="selectAuthorsWithAwards" resultMap="AuthorResultMap"> SELECT * FROM authors a LEFT JOIN awards aw ON a.author_id = aw.author_id WHERE a.status = 1 </select> </mapper>

2.4 MySQL数据库设计要点

作家信息系统的数据库设计应考虑以下方面：

CREATE TABLE `authors` ( `id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR(100) NOT NULL COMMENT '作家姓名', `gender` TINYINT COMMENT '性别', `birth_date` DATE COMMENT '出生日期', `native_place` VARCHAR(100) COMMENT '籍贯', `biography` TEXT COMMENT '生平简介', `photo_url` VARCHAR(255) COMMENT '照片URL', PRIMARY KEY (`id`), INDEX `idx_name` (`name`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `awards` ( `id` INT NOT NULL AUTO_INCREMENT, `author_id` INT NOT NULL, `award_name` VARCHAR(100) NOT NULL, `award_year` INT NOT NULL, `award_work` VARCHAR(255), PRIMARY KEY (`id`), FOREIGN KEY (`author_id`) REFERENCES `authors`(`id`) );

3. 系统核心功能实现细节

3.1 作家信息CRUD接口设计

SpringBoot中典型的RESTful接口设计：

@RestController @RequestMapping("/api/authors") public class AuthorController { @Autowired private AuthorService authorService; @GetMapping public ResponseEntity<PageInfo<Author>> listAuthors( @RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) { PageHelper.startPage(pageNum, pageSize); List<Author> authors = authorService.getAllAuthors(); return ResponseEntity.ok(PageInfo.of(authors)); } @PostMapping public ResponseEntity<Author> createAuthor(@Valid @RequestBody Author author) { Author saved = authorService.saveAuthor(author); return ResponseEntity.created(URI.create("/authors/" + saved.getId())) .body(saved); } // 其他接口方法... }

3.2 前端表格与分页实现

Vue中配合Element UI实现带分页的作家表格：

<template> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="gender" label="性别"> <template #default="{row}"> {{ row.gender | genderFormat }} </template> </el-table-column> <el-table-column prop="birthDate" label="出生日期" width="120"> <template #default="{row}"> {{ row.birthDate | dateFormat }} </template> </el-table-column> <el-table-column label="操作" width="180"> <template #default="{row}"> <el-button size="mini" @click="handleEdit(row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"> </el-pagination> </template>

3.3 文件上传与作家照片管理

实现图片上传的SpringBoot控制器：

@PostMapping("/{authorId}/photo") public ResponseEntity<String> uploadPhoto( @PathVariable Long authorId, @RequestParam("file") MultipartFile file) { if (file.isEmpty()) { throw new IllegalArgumentException("请选择上传文件"); } String originalFilename = file.getOriginalFilename(); String fileExtension = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFilename = UUID.randomUUID() + fileExtension; Path uploadPath = Paths.get(uploadDir); if (!Files.exists(uploadPath)) { Files.createDirectories(uploadPath); } Path filePath = uploadPath.resolve(newFilename); file.transferTo(filePath); String photoUrl = "/uploads/" + newFilename; authorService.updateAuthorPhoto(authorId, photoUrl); return ResponseEntity.ok(photoUrl); }

4. 系统部署与运维实践

4.1 生产环境部署方案

推荐使用Docker Compose进行容器化部署：

version: '3.8' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD} MYSQL_DATABASE: literature MYSQL_USER: ${DB_USER} MYSQL_PASSWORD: ${DB_PASSWORD} ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql restart: always backend: build: ./backend ports: - "8080:8080" environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/literature SPRING_DATASOURCE_USERNAME: ${DB_USER} SPRING_DATASOURCE_PASSWORD: ${DB_PASSWORD} depends_on: - mysql restart: always frontend: build: ./frontend ports: - "80:80" depends_on: - backend restart: always volumes: mysql_data:

4.2 常见部署问题排查

  1. 数据库连接失败：

    • 检查MySQL服务是否正常运行
    • 验证连接字符串中的主机名、端口、数据库名
    • 确认用户名密码是否正确

  2. 前端访问API跨域问题：

    // SpringBoot跨域配置 @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") .allowedMethods("*") .allowedHeaders("*") .allowCredentials(true); } }

  3. 静态资源404错误：

    • 确认Nginx配置正确指向dist目录
    • 检查Vue路由模式（history需要特殊配置）

4.3 性能优化建议

  1. 数据库层面：

    • 为常用查询字段添加索引
    • 合理设计表关联关系
    • 考虑使用读写分离

  2. 应用层面：

    • 启用MyBatis二级缓存
    • 对作家列表接口添加Redis缓存
    • 使用Spring Cache抽象

  3. 前端层面：

    • 启用路由懒加载
    • 使用Webpack代码分割
    • 对图片等静态资源使用CDN

5. 项目扩展与二次开发建议

5.1 功能扩展方向

  1. 作家作品关联管理
  2. 文学奖项时间线可视化
  3. 作家地理分布地图展示
  4. 多维度数据分析报表

5.2 技术升级路径

  1. 后端：

    • 逐步迁移到SpringBoot 3.x
    • 引入Spring Security进行权限控制
    • 使用Spring Cloud构建微服务架构

  2. 前端：

    • 升级到Vue 3组合式API
    • 引入TypeScript增强类型安全
    • 使用Pinia替代Vuex进行状态管理

5.3 项目结构优化

推荐的多模块Maven结构：

literature-system ├── literature-admin -- 后台管理模块 ├── literature-api -- API接口模块 ├── literature-common -- 公共模块 ├── literature-dao -- 数据访问层 └── literature-service -- 业务服务层

对应的前端目录结构：

src ├── api -- 接口定义 ├── assets -- 静态资源 ├── components -- 公共组件 ├── router -- 路由配置 ├── store -- 状态管理 ├── utils -- 工具函数 └── views -- 页面组件

在实际开发中，我发现清晰的模块划分能显著提高团队协作效率。特别是当项目规模扩大时，良好的结构设计可以减少代码冲突和维护成本。

编程学习 学习日记 实战经验
← 返回列表