以下是基于Spring Boot和Vue的教师个人成果管理系统的实现方案,包含技术选型、系统设计和核心实现步骤:
一、技术选型
模块 | 技术栈 |
---|---|
前端框架 | Vue3 + TypeScript + Element Plus |
后端框架 | Spring Boot 3.x + Spring Security + MyBatis-Plus |
数据库 | MySQL 8.x |
项目管理 | Maven(后端) / npm(前端) |
接口规范 | RESTful API + JWT认证 |
文件存储 | 本地存储/MinIO(OSS可选) |
部署 | Nginx + Docker |
二、系统功能模块
1. 教师端功能
- 成果管理:论文/项目/专利/获奖等成果的CRUD
- 分类管理:自定义成果分类(如SCI论文、国家级项目)
- 文件上传:支持PDF/Word等格式附件上传
- 审核提交:提交成果至管理员审核
- 状态追踪:实时查看审核进度
- 数据统计:个人成果统计图表
2. 管理员端功能
- 多级审核:院级/校级两级审核流程
- 用户管理:教师账号激活/权限分配
- 成果检索:多条件组合查询(按学科/年份/类型)
- 数据看板:全院成果汇总分析
- 系统日志:记录关键操作轨迹
三、数据库设计(核心表)
-- 用户表
CREATE TABLE `sys_user` (
`user_id` BIGINT PRIMARY KEY COMMENT '用户ID',
`username` VARCHAR(50) UNIQUE NOT NULL COMMENT '工号',
`password` VARCHAR(100) NOT NULL COMMENT '加密密码',
`role` ENUM('TEACHER','ADMIN') NOT NULL DEFAULT 'TEACHER'
);
-- 成果表
CREATE TABLE `achievement` (
`id` BIGINT PRIMARY KEY,
`title` VARCHAR(255) NOT NULL,
`type` ENUM('PAPER','PROJECT','PATENT','AWARD') NOT NULL,
`user_id` BIGINT NOT NULL,
`status` ENUM('DRAFT','SUBMITTED','APPROVED','REJECTED') DEFAULT 'DRAFT',
`submit_time` DATETIME,
FOREIGN KEY (user_id) REFERENCES sys_user(user_id)
);
-- 审核记录表
CREATE TABLE `audit_log` (
`id` BIGINT PRIMARY KEY,
`achievement_id` BIGINT NOT NULL,
`auditor_id` BIGINT NOT NULL,
`result` ENUM('PASS','REJECT'),
`comment` TEXT,
`audit_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (achievement_id) REFERENCES achievement(id)
);
四、后端核心实现
1. 项目结构
src/main/java
├── config # 安全配置
├── controller # 接口层
├── service # 业务逻辑
├── mapper # 数据持久层
├── entity # 实体类
├── dto # 数据传输对象
└── utils # 工具类
2. 安全配置(Spring Security)
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers("/teacher/**").hasRole("TEACHER")
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtAuthFilter(), UsernamePasswordAuthenticationFilter.class);
return http.build();
}
}
3. 文件上传接口
@RestController
@RequestMapping("/api/file")
public class FileController {
@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
String fileName = FileUtil.upload(file);
return Result.success(fileName);
}
}
五、前端核心实现
1. 项目结构
src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
└── views/ # 页面组件
2. 成果提交表单(Vue3 + Element Plus)
<template>
<el-form :model="form" label-width="120px">
<el-form-item label="成果标题" required>
<el-input v-model="form.title" />
</el-form-item>
<el-form-item label="成果类型">
<el-select v-model="form.type">
<el-option label="论文" value="PAPER" />
<el-option label="项目" value="PROJECT" />
</el-select>
</el-form-item>
<el-upload :action="uploadUrl">
<el-button type="primary">上传附件</el-button>
</el-upload>
</el-form>
</template>
六、系统亮点
- 动态表单引擎:通过JSON配置支持不同成果类型的自定义字段
- 审核工作流:可配置的多级审核流程(支持会签/或签)
- 版本控制:成果修改历史追溯功能
- 智能查重:基于SimHash的文本相似度检测
- 数据看板:ECharts实现的交互式可视化分析
七、部署方案
- 前端部署
npm run build
# 生成dist目录部署至Nginx
- 后端部署
mvn clean package
java -jar target/achievement-system.jar
- Docker Compose
version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root123
backend:
build: ./backend
ports:
- "8080:8080"
frontend:
image: nginx
ports:
- "80:80"
八、扩展方向
- 移动端适配:开发微信小程序版本
- 区块链存证:重要成果上链存证
- 智能推荐:基于协同过滤的成果推荐
- API开放平台:提供标准化的数据接口
该方案采用模块化设计,可根据实际需求灵活调整各功能模块,建议使用Swagger进行接口文档管理,结合Jenkins实现CI/CD持续集成。