企业官网建设流程全解析

双创项目管理系统这活儿，做过的人都知道，表面是写代码，实际是梳理高校里一团乱麻的流程。学生交申报书靠压缩包发邮箱，老师审核靠表格来回传，经费报销状态全靠问。我前前后后帮两个校内团队搭过基于SpringBoot+Vue的大学生创新创业项目管理系统，又结合了Java+MySQL+MyBatis这套非常主流的技术组合，最后整理出一份可复用、可跑通的完整源码方案。这篇就把我踩过的坑、拆过的表结构、调过的接口全部写出来，目标读者是正在做毕业设计或课程设计的学生，也想自己搭一套内部管理工具的开发者。

先说结论：这套系统并不复杂，核心就两件事——把角色权限理清楚，把项目状态流转管明白。只要这两个设计对了，增删改查都是体力活。

1. 为什么需要一套创新创业项目管理系统

1.1 高校双创管理现场的真实痛点

我接触到的第一个需求来自学院的双创负责老师，他当时的日常是这样的：每年三四月份发通知收立项申请书，学生用微信或邮箱发过来，文件名五花八门，什么“最终版”“改改不改了”“新建文件夹.zip”都见过。收齐后老师手动建Excel表格，把项目名称、负责人、成员、指导老师、预算金额一项项敲进去。中期检查时再去催报告，结题验收时还要组织专家看PPT打分。

听着是行政管理问题，本质上是数据没有结构化。发邮件收上来的只能算“文件”，不是“数据”。项目负责人变更了不知道找谁，中期报告交了没交要靠人工翻聊天记录，预算花了多少没有流水账。我做完第一版系统后最大的收获是：管理系统的价值不是让操作变酷，而是让信息从“看不见”变成“处处可查”。

所以这套系统我定位为三件事：项目全周期管理（申报、立项、中期、结题）、角色分级权限（学生、导师、学院管理、校级管理、评审专家）、数据汇总与导出（统计各类报表）。很多校内系统做得又重又难用，其实双创管理根本没有那么复杂的业务，关键是流程不能被拍脑袋设计，必须跟着学校的实际文件走。

1.2 技术选型为什么是SpringBoot+Vue+MySQL+MyBatis

这个组合在高校场景里几乎是无脑选。第一，Java的SpringBoot是教学覆盖率最高的后端框架，找资料容易，答辩也好说明白；第二，Vue在前端领域的入门曲线平缓，单页应用对这类表单密集型系统非常友好；第三，MySQL配合MyBatis，对于中小型系统来说毫无性能压力，MyBatis的SQL手写能力又能应对复杂的多表联查和统计报表。

有人会问，现在不是流行MyBatis Plus或者Spring Data JPA吗？为什么选原生MyBatis？我的考虑有两个：一是这套系统的查询条件变化非常频繁——立项时间范围、项目类型、学院、经费区间、审核状态都可能组合筛选，动态SQL用原生MyBatis写起来最直观，mapper XML里能看到完整的SQL逻辑，排查问题方便；二是很多课程设计、毕业设计的技术要求里明确写着“MyBatis”，与其换一个你以为更省事的框架，不如把最经典的技术栈吃透，面试聊起来也更有底气。

Vue这边我建议用Vue3 + Vite + Element Plus + Pinia + Axios。Element Plus的表格表单组件直接覆盖了管理系统的绝大多数界面需求，不需要自己造轮子。虽然标题只写了Vue，但工程的现代化程度会影响后期维护，Vite的启动速度比Webpack舒服太多。

2. 系统整体设计与数据库建模

2.1 角色权限与业务闭环

用户角色我设计了五种：学生、指导教师、学院管理员、校级管理员、评审专家。学生负责申报、填写中期报告、提交结题材料；指导教师审核学生的申报书并给出推荐意见；学院管理员负责学院内部的初审、名额分配；校级管理员负责终审、立项发布、经费管理、项目归档；评审专家只负责对进入评审阶段的项目打分。

这五个角色不是并列的，而是围绕项目状态的推进逐层介入。一个标准的生命周期是这样的：学生提交立项申报（待学院审核）→ 学院管理员初审（通过/驳回）→ 校级管理员终审（通过则立项，立项项目编号）→ 项目执行期间，学生提交中期报告 → 指导老师确认 → 学院管理员查看 → 结题阶段，学生提交结题材料和成果列表 → 系统根据项目方向分配评审专家 → 专家打分 → 校级管理员汇总成绩并发布结题结论。

我把这个闭环画成了状态机：编辑中 → 已提交 → 学院审核通过/驳回 → 校级立项通过/驳回 → 进行中 → 中期待审核 → 中期已通过 → 结题待评审 → 已结题/结题不通过。任何状态变更都必须写入项目日志表，这是很多校园项目容易忽略的，没有日志就意味着出问题无从追溯。

2.2 数据库表设计与表关系

这套系统我最终拆成9张核心表。先说用户表。

user表：id、username、password（BCrypt加密）、real_name、role（学生/教师/学院管理/校级管理/专家）、college_id、student_no、teacher_no、phone、email、create_time。注意role不能写死在业务代码的if-else里，我用了角色码表，扩展新角色时不用改Java代码。

project表是核心：id、project_code（立项后生成，如2024-CX-001）、project_name、type（创新训练/创业训练/创业实践）、level（校级/省级/国家级）、college_id、teacher_id、budget、start_time、end_time、summary、status、apply_file、mid_report_file、final_report_file、create_time、update_time。

project_member表处理成员关系：id、project_id、user_id、member_role（负责人/成员）、is_advisor（是否为指导教师）、join_time。一个项目有多个成员，一个学生可以参加多个项目，所以不能用字段去存“成员一、成员二”，必须用中间表。这也是我检查学生源码时最常见的错误之一。

review_record表：id、project_id、reviewer_id、round（学院初审/校级评审/结题评审）、score、comment、suggest_status（通过/退回）、review_time。评审专家打的分都在这里。

notice表：id、title、content、publisher_id、target_role、create_time。通知既可以发给某个人，也可以发给某个角色，我加了target_user_id和target_role两个可空字段，敏感但实用。

fund_record表：id、project_id、amount、type（拨付/支出）、description、operator_id、create_time。经费每一笔进出都记录，最终按项目汇总。

project_log表：id、project_id、user_id、action、detail、create_time。所有状态变更、关键操作写入日志。

还可选配附件表attachment，不过我把附件路径直接冗余在project表里，小系统没必要过度设计。

表关系上，project关联user（指导教师）、college、多个project_member、多个review_record。查询的时候最核心的是项目列表页的“项目+成员+指导教师”组合查询，这在MyBatis里通过resultMap的collection标签解决。

2.3 为什么用RBAC而不是每张表加角色字段

一开始有同学设计成每个功能对应一个接口表，管理员表、学生表、老师表各建一张，查询时还要连三张表判断这个人到底有没有权限。这种设计改一次需求就要换个表结构，维护成本极高。

我采用的是经典的RBAC（基于角色的访问控制），但做了适度简化：不在数据库里建五张权限关联表（用户角色表、角色表、权限表、角色权限表、用户角色表），而是用user.role字段直接区分，在Java里用一个静态角色常量类管理。因为这套系统的角色固定、功能边界清晰，做成细粒度权限模型反而让代码变得绕。

接口权限通过拦截器统一校验。比如user.role是“学生”，那就不能访问/admin/project/list这一类接口。Controller层接口路径按角色划分前缀：/student/、/teacher/、/college/、/admin/、/reviewer/**。拦截器里校验请求路径前缀与当前用户角色是否匹配，加新接口时不至于漏配权限。

3. 后端实现：从接口到业务逻辑

3.1 项目结构与依赖清单

后端我用标准的SpringBoot分层结构：controller、service（impl）、mapper、entity、dto、vo、config、interceptor、util、common。

pom.xml里最关键的依赖就这几样：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.2</version> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</artifactId> <version>0.11.5</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validation</artifactId> </dependency>

没有引入Security，因为我只需要登录和权限拦截，JWT + HandlerInterceptor可以省掉大量Security的配置代码。如果要求必须使用Security，那再加filter链也不难，但对这个规模的项目属于杀鸡用牛刀。

application.yml里几个必须注意的点：数据库连接串写上useSSL=false、serverTimezone=Asia/Shanghai、characterEncoding=utf8，否则日期和中国时区会有各种玄学问题。开启驼峰命名映射：

mybatis: configuration: map-underscore-to-camel-case: true mapper-locations: classpath:mapper/*.xml

3.2 基于MyBatis的SQL映射要点

多人项目的查询需求逃不过“多表联查+动态条件”，这恰恰是MyBatis的长项。项目列表页的SQL骨架类似这样：

<select id="selectProjectInfo" resultMap="ProjectDetailMap"> SELECT p.*, u.real_name AS teacher_name, c.college_name FROM project p LEFT JOIN user u ON p.teacher_id = u.id LEFT JOIN college c ON p.college_id = c.id <where> <if test="projectName != null and projectName != ''"> AND p.project_name LIKE CONCAT('%', #{projectName}, '%') </if> <if test="status != null and status != ''"> AND p.status = #{status} </if> <if test="collegeId != null"> AND p.college_id = #{collegeId} </if> <if test="type != null and type != ''"> AND p.type = #{type} </if> </where> ORDER BY p.create_time DESC </select>

这里要强调，连接查询条件里的test判断不是简单的字符串拼接，MyBatis会在preparedStatement里用占位符绑定，防SQL注入是框架层面帮你兜底的，但你不能把用户输入直接拼到字符串里。

关联成员的查询用resultMap处理：

<resultMap id="ProjectDetailMap" type="com.cx.entity.Project"> <id property="id" column="id"/> <result property="projectName" column="project_name"/> <collection property="members" ofType="com.cx.entity.ProjectMember" column="id" select="com.cx.mapper.ProjectMemberMapper.selectByProjectId"/> </resultMap>

N+1问题在这个规模下无所谓，但答辩老师追问时你要能说出collection的底层逻辑，并说明如果项目数量上千时可以改用一条JOIN+group_concat优化的思路，这比背概念更能体现你真写过。

3.3 登录鉴权的实现

登录接口逻辑：查询用户→BCrypt密码校验→生成JWT→返回token和用户基本信息。生成JWT时把userId和role放进claims，过期时间设置为24小时，这样后端在请求中解析token就能拿到当前用户身份。

JWT密钥必须写在配置里并且长度足够，不然启动时会报弱密钥错误。我见过很多同学直接硬编码一个很短的字符串，虽然能运行，但想严谨一点还是用spring-boot-configuration-processor读取配置：

jwt.secret=你的自定义安全密钥，长度必须大于32字节 jwt.expire-time=86400000

拦截器实现思路：继承HandlerInterceptorAdapter或者实现HandlerInterceptor接口，在preHandle里从请求头拿Authorization字段，去掉Bearer前缀后解析token，解析失败返回401。然后把用户ID塞进ThreadLocal或request.setAttribute("userId", id)，后续Controller通过@RequestAttribute获取。

有一处非常容易被忽略：放行策略。登录接口、获取验证码接口、前端静态资源必须放行，其余全部拦截。写拦截器时不要用excludePathPatterns无限列举，更稳妥的做法是配置一个全局路径匹配规则，并给Controller接口加上统一前缀/api/**，拦截器直接拦截/api/**再内部判断路径权限。

3.4 上传与通知模块的细节

附件上传我用的是本地磁盘存储，配置一个上传根目录E:/upload或服务器上的/data/upload，按日期分目录存放。文件名用UUID+原始后缀重命名，避免中文文件名乱码和重名覆盖。Controller接收MultipartFile，保存后把相对路径写入项目表的apply_file字段，前端通过一个下载接口拼接路径访问。

这里我踩过一个坑：前后端分离部署后，上传文件存在后端服务器磁盘，但前端页面通过IP+端口直接访问静态资源时总报404。最后我在后端写了一个FileController，通过ResourceHttpRequestHandler来映射外部磁盘路径，这也是校园项目中最稳妥的做法。

通知模块我建议不要做成纯人工发通知。系统在关键节点自动生成站内信：项目立项通过后自动通知负责人“您的项目已立项，编号为xxx”；中期报告提交后通知指导老师“学生xxx提交了中期报告请审核”。这些逻辑写在service层，状态流转完成后调用noticeService.sendToUser()，比管理员登录后台手动群发通知省心得多。

4. 前端实现：Vue生态与交互设计

4.1 前端技术栈与目录结构

工程建议用Vite创建Vue3项目，依赖只装运行必要的库：vue-router、pinia、axios、element-plus。目录结构上我把每个模块的页面独立成文件夹，views下面按角色分：

src ├── api │ ├── project.js │ ├── user.js │ └── review.js ├── router ├── stores │ └── user.js ├── views │ ├── student/ │ ├── teacher/ │ ├── college/ │ ├── admin/ │ └── reviewer/ ├── components └── utils └── request.js

按角色拆分views的好处是：前端路由能根据登录用户的角色动态加载对应菜单，后端即使漏了权限校验，前端也不存在入口。

4.2 核心页面拆解

首页Dashboard放统计卡片：我负责的项目数、待审核数、评审平均分、经费总额。统计接口在后端写一条聚合SQL，一次返回，前端展示四个卡片即可。不要为了视觉效果接一堆图表库，需要图表时可以用ECharts，但核心系统先保证数据准确。

项目申报表单是整个系统最重的页面。字段包括项目名称、项目类型、项目级别、所属学院、指导教师、团队成员、项目简介、预期成果、经费预算。表单验证用Element Plus的rules，其中项目简介自定义一个校验：长度不得少于100字，明显规避那些拿两句话就申报的人。成员输入用动态表格，至少填写负责人，成员行允许增删。

评审页面设计成左侧项目列表、右侧材料预览与打分。评审专家选中一个项目后能看到申报书、中期报告、结题材料，并在底部输入分数（百分制）和评语。提交分数后该项目从待评审列表消失，保证同一专家不重复评审。这里要注意防重复提交，后端对review_record表做唯一索引，(project_id, reviewer_id, round)，否则并发下会出现两条评审记录。

4.3 Axios封装与接口对接

axios实例必须统一封装，不然后端接口出错了前端还在傻乎乎渲染错误数据。我的request.js长这样：

const service = axios.create({ baseURL: '/api', timeout: 10000 }) service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }) service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { ElMessage.error(res.message || '请求失败') if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.message)) } return res.data }, error => { ElMessage.error(error.message || '网络异常') return Promise.reject(error) } )

后端统一返回格式是{ code: 200, message: "success", data: {...} }。code 401时前端直接跳登录页，这对token过期体验很重要。

跨域问题在开发环境用Vite代理解决：

server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

后端接口前缀统一为/api，这样前端请求路径和后端context-path不冲突，生产环境部署时Nginx也只需要一个代理规则。

5. 关键流程串联：从“学生申报”到“专家评审”的完整链路

5.1 申报与审核状态机设计

很多没做过管理系统的人写业务，喜欢直接if status == 0改成1，改完就完事。但双创项目流程里有“退回修改”这个动作，退回后学生需要重新编辑，这时项目状态如果还是“审核中”，学生端就看不到编辑入口。

我的状态设计避免了这种尴尬。学生提交后status为UNREVIEWED；学院管理员初审退回则先变REJECTED，学生重新提交后回到UNREVIEWED；学院审核通过变成COLLEGE_PASSED；校级管理员终审通过变成APPROVED，并生成项目编号；中期审核通过变成MID_PASSED；结题评审通过变成FINISHED，不通过变成RETURNED。

后端所有状态流转统一走一个ProjectService.changeStatus(projectId, targetStatus, userId, remark)方法，方法内部校验当前状态是否允许转移到下一状态，然后执行更新并写日志。状态迁移规则甚至可以做成一个Map或状态机表，比在每个setter里写校验清晰十倍。

5.2 评审打分如何实现

结题评审阶段，校级管理员会给每个项目分配2~3名评审专家。分配方式我做了两种：手动指定和智能批次。手动指定就是管理员在项目列表里选项目、选专家，点击分配；智能批次是一键把某学院待评审项目平均分配给该方向上已入库的专家，避免人为偏心。

专家打分后，项目最终得分怎么算？简单平均分最直观，但会出现一个专家给了95分，另一个专家只给60分，拉低整体分的情况。我在系统里加入“去掉一个最高分和一个最低分后取平均”的算法，前提是专家数必须大于等于3。这个逻辑后端写成一个独立方法，单测覆盖最方便。

核心代码大致是：

public double calculateFinalScore(List<Integer> scores) { if (scores.size() <= 2) { return scores.stream().mapToInt(Integer::intValue).average().orElse(0); } List<Integer> sorted = scores.stream().sorted().collect(Collectors.toList()); int sum = sorted.subList(1, sorted.size() - 1).stream().mapToInt(Integer::intValue).sum(); return sum / (double)(sorted.size() - 2); }

结题结论根据最终得分和校级管理员单独填写的结题建议共同决定。最终得分超过80分且结论为推荐的，自动生成“优秀结题项目”标识，这个细节被学院老师夸过很多次。

6. 落地运行与部署避坑指南

6.1 本地开发环境搭建

环境版本组合建议：JDK1.8或JDK11、Maven3.6+、Node16+、MySQL5.7或8.0。如果你的SpringBoot版本是2.7.x，JDK8完全够；如果用SpringBoot3，就必须JDK17起步，这一点很多同学会踩版本坑。

数据库初始化不要用手工一条条建表，我把ddl和基础数据（角色、学院、一个测试管理员账号）写进了init.sql，项目里直接执行source导入。注意导入时数据库字符集要设为utf8mb4，否则存emoji或者生僻字要出乱码。实践里最稳妥的做法：首次启动前执行一次init.sql，之后所有表结构变更都用新的增量SQL文件，不要在旧SQL文件里改来改去。

启动后端后访问http://localhost:8080/api/health能返回ok，再启动前端Vite，浏览器打开http://localhost:5173，首次登录用管理员账号。如果页面一直转圈，优先检查浏览器控制台请求有没有跨域，再看后端日志有没有异常。

6.2 常见问题与排查技巧

我把实操中遇到的高频问题整理成一张表：

这里面最容易忽略的是MyBatis的驼峰映射。数据库列名是project_name，Java属性是projectName，如果不配置驼峰映射，查出来的字段全是null，页面看起来就像数据丢失，但SQL在数据库工具里明明能查到。检查思路是先看返回的JSON，再定位是SQL问题还是映射问题。

6.3 部署到服务器的建议

最稳妥的前后端分离部署是：后端打成jar包用java -jar运行，前端build后生成dist静态目录交给Nginx托管，Nginx配置两个location。

location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /var/www/cx-front; index index.html; try_files $uri $uri/ /index.html; }

注意history路由模式下刷新子页面会404，必须写try_files ... /index.html，这是前端部署的老大难问题。使用hash模式虽然不用配，但地址栏带#号不美观，不要为了省事牺牲体验。

服务器上数据库需要单独设置允许远程连接吗？如果后端和数据库在同一台机器，建议只监听127.0.0.1，安全很多。项目文件中的数据库密码不要明文写在配置文件里，用环境变量或Jasypt加密，至少也要保证git仓库不泄露数据库密码。

个人体会与扩展建议

做完这套系统之后我最大的体会是，双创项目管理系统的技术含量不在CRUD，而在状态机设计和数据一致性。你把状态流转的边界想清楚，所有审批动作都变得有迹可循；你多写一条日志，就能省下之后无数次的排查时间。代码逻辑上的可读性比花哨的炫技重要得多，特别是一年后自己回来看这段代码，能一眼读懂比什么都强。

最后分享几个后续扩展方向供参考：项目数据可以通过Excel模板批量导入，结题成果支持绑定论文和专利图片，Dashboard加ECharts统计各学院立项数量和经费分布，消息通知接入企业微信或邮件。这些扩展我都做过一个简化版，但初始版本保持当前功能就能很好地覆盖一个学院的日常双创管理。如果你想在这个源码基础上二次开发，建议优先做通知模块和导出模块，这两个是老师高频诉求。真遇到不懂的，欢迎带着报错信息来交流，踩坑经验就是这么一点点攒出来的。