SpringBoot+Vue招生管理系统开发实战-代码聚汇网

SpringBoot+Vue招生管理系统开发实战

hkelll

1. 项目概述

招生宣传管理系统是高校信息化建设中的重要组成部分，它需要处理学生信息管理、招生流程跟踪、宣传材料发布等核心业务。这个基于SpringBoot+Vue的前后端分离项目，为计算机相关专业的毕业设计提供了一个完整的解决方案。

我在实际开发中发现，这类系统最关键的三个需求点是：信息录入的高效性、数据统计的准确性以及多角色权限管理。这个项目源码包不仅包含了可运行的代码，还附带了SQL脚本和详细的接口文档，大大降低了学生的开发门槛。

2. 技术栈解析

2.1 SpringBoot后端架构

SpringBoot 2.7.x版本作为后端框架，其自动配置特性让项目搭建变得异常简单。我在配置时特别注意了几个关键点：

数据层采用MyBatis-Plus 3.5.x，它的代码生成器可以快速创建实体类和Mapper接口：

java复制// 示例配置类
@Configuration
@MapperScan("com.admission.mapper")
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

接口文档使用Swagger UI 3.0实现，通过以下配置即可启用：

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

2.2 Vue前端架构

前端采用Vue 2.6 + Element UI 2.15的组合，这个搭配在管理系统中非常常见。项目结构清晰划分了这几个部分：

api/：存放所有接口请求方法
components/：公共组件库
router/：路由配置中心
store/：Vuex状态管理
views/：页面视图层

一个典型的API请求封装示例：

javascript复制// src/api/student.js
import request from '@/utils/request'

export function getStudentList(params) {
  return request({
    url: '/student/list',
    method: 'get',
    params
  })
}

3. 数据库设计

3.1 核心表结构

数据库使用MySQL 8.0，主要包含以下表：

学生信息表(admission_student)

sql复制CREATE TABLE `admission_student` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '姓名',
  `gender` tinyint DEFAULT '0' COMMENT '性别',
  `id_card` varchar(18) NOT NULL COMMENT '身份证号',
  `phone` varchar(20) NOT NULL COMMENT '联系电话',
  `address` varchar(200) DEFAULT NULL COMMENT '联系地址',
  `status` tinyint DEFAULT '0' COMMENT '录取状态',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_id_card` (`id_card`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

用户表(sys_user)

sql复制CREATE TABLE `sys_user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `real_name` varchar(50) DEFAULT NULL,
  `role_id` int DEFAULT NULL COMMENT '角色ID',
  `status` tinyint DEFAULT '1' COMMENT '状态',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 性能优化建议

为高频查询字段添加索引：

sql复制ALTER TABLE `admission_student` ADD INDEX `idx_status` (`status`);

大数据量表考虑分表策略，可以按年份分表：

sql复制CREATE TABLE `admission_student_2023` LIKE `admission_student`;

4. 核心功能实现

4.1 学生信息管理模块

后端Controller典型实现：

java复制@RestController
@RequestMapping("/student")
@Api(tags = "学生信息管理")
public class StudentController {
    
    @Autowired
    private StudentService studentService;

    @GetMapping("/list")
    @ApiOperation("分页查询学生列表")
    public Result<IPage<Student>> list(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "10") Integer pageSize,
            StudentQueryDTO queryDTO) {
        return Result.success(studentService.queryPage(pageNum, pageSize, queryDTO));
    }
}

前端Vue组件关键代码：

vue复制<template>
  <div class="student-container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80">
        <template #default="scope">
          {{ scope.row.gender | genderFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

4.2 权限控制实现

基于Spring Security的权限配置：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/login").permitAll()
            .antMatchers("/student/**").hasAnyRole("ADMIN","TEACHER")
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

前端路由权限控制：

javascript复制// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.token) {
    next({ path: '/login' })
  } else {
    next()
  }
})

5. 项目部署指南

5.1 后端部署

打包命令：

bash复制mvn clean package -DskipTests

启动参数配置（application-prod.yml）：

yaml复制server:
  port: 8080
  servlet:
    context-path: /admission

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/admission_db?useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

5.2 前端部署

生产环境构建：

bash复制npm run build

Nginx配置示例：

nginx复制server {
    listen       80;
    server_name  admission.example.com;
    
    location / {
        root   /usr/share/nginx/html/admission;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
        proxy_pass http://localhost:8080/admission/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

6. 常见问题解决

6.1 跨域问题

开发环境解决方案（后端配置）：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

6.2 文件上传限制

SpringBoot默认上传限制是1MB，需要调整：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

6.3 前端路由刷新404

在vue-router中使用history模式时，需要配置Nginx：

nginx复制location / {
    try_files $uri $uri/ /index.html;
}

7. 项目扩展建议

数据可视化：集成ECharts展示招生数据趋势

javascript复制// 安装依赖
npm install echarts vue-echarts

消息通知：集成WebSocket实现实时消息推送

java复制@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }
}

导出功能：使用EasyExcel实现数据导出

java复制@GetMapping("/export")
public void export(HttpServletResponse response) {
    List<Student> list = studentService.list();
    ExcelWriter writer = EasyExcel.write(response.getOutputStream(), Student.class).build();
    writer.write(list, EasyExcel.writerSheet("学生列表").build());
    writer.finish();
}