企业官网建设流程全解析

1. 项目背景与意义

随着企业规模的不断扩大，传统的人工绩效考核方式逐渐暴露出效率低、易出错、数据不透明等问题。管理者难以实时掌握员工绩效动态，考核结果也缺乏客观的数据支撑。基于SpringBoot+Vue的员工绩效考核管理系统，旨在通过信息化手段实现考核流程的标准化、数据化和可视化，帮助企业提升人力资源管理效率，降低管理成本，同时为员工提供清晰、公平的绩效反馈渠道。

从技术层面看，该系统采用前后端分离架构，前端使用Vue框架构建交互界面，后端基于SpringBoot提供稳定高效的接口服务，既符合当前主流的企业级开发范式，也便于后续功能扩展与维护。

2. 系统技术栈

本系统采用前后端分离的开发模式，整体技术选型如下：

3. 系统功能模块设计

系统围绕绩效考核的核心业务，划分为以下主要功能模块：

• 用户管理模块：管理员可维护员工账号、角色和部门信息，支持重置密码与账号启停用。
• 考核指标管理：支持自定义考核维度（如工作业绩、工作态度、协作能力）及对应权重，灵活适配不同岗位。
• 考核计划管理：管理员创建考核周期（月度、季度、年度），指定参与人员与考核模板。
• 绩效评分模块：考核人按指标逐项打分，系统自动计算总分与等级（优秀、良好、合格、待改进）。
• 结果查询与统计：员工可查看个人考核结果，管理者可按部门、周期查看统计报表与趋势图。
• 消息通知模块：考核任务创建、待评分提醒、结果公布等环节自动发送站内通知。

4. 数据库设计

系统核心数据表包括员工表、考核指标表、考核计划表、考核记录表等。以下为关键表结构设计：

-- 员工表 CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, real_name VARCHAR(50), dept_id BIGINT, role VARCHAR(20) DEFAULT 'EMPLOYEE', status TINYINT DEFAULT 1, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 考核指标表 CREATE TABLE assess_indicator ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, weight DECIMAL(5,2) NOT NULL, category VARCHAR(50), description VARCHAR(255) ); -- 考核计划表 CREATE TABLE assess_plan ( id BIGINT PRIMARY KEY AUTO_INCREMENT, plan_name VARCHAR(100) NOT NULL, cycle_type VARCHAR(20), start_date DATE, end_date DATE, status TINYINT DEFAULT 0, create_by BIGINT ); -- 考核记录表 CREATE TABLE assess_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, plan_id BIGINT, user_id BIGINT, indicator_id BIGINT, score DECIMAL(5,2), assessor_id BIGINT, assess_time DATETIME DEFAULT CURRENT_TIMESTAMP );

5. 核心代码实现

5.1 后端：SpringBoot 控制器与业务逻辑

以考核计划创建接口为例，展示后端控制层与服务层的核心实现。

@RestController @RequestMapping("/api/plan") public class AssessPlanController { @Resource private AssessPlanService planService; @PostMapping("/create") public Result<Boolean> createPlan(@RequestBody AssessPlan plan) { boolean success = planService.createPlan(plan); return success ? Result.success(true) : Result.error("创建失败"); } @GetMapping("/list") public Result<PageResult<AssessPlan>> pageList( @RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10") int size) { PageResult<AssessPlan> result = planService.pageList(page, size); return Result.success(result); } }

服务层实现中，创建考核计划时需同时校验指标权重之和是否为100%，并初始化考核记录，核心逻辑如下：

@Service public class AssessPlanServiceImpl implements AssessPlanService { @Resource private AssessPlanMapper planMapper; @Resource private AssessRecordMapper recordMapper; @Override @Transactional(rollbackFor = Exception.class) public boolean createPlan(AssessPlan plan) { // 校验指标权重合计为100% List<AssessIndicator> indicators = indicatorMapper.selectList(null); BigDecimal total = indicators.stream() .map(AssessIndicator::getWeight) .reduce(BigDecimal.ZERO, BigDecimal::add); if (total.compareTo(new BigDecimal("100")) != 0) { throw new BusinessException("考核指标权重之和必须为100%"); } // 保存计划 plan.setStatus(0); planMapper.insert(plan); // 为参与员工初始化空考核记录 List<SysUser> users = userMapper.selectByDept(plan.getDeptId()); for (SysUser user : users) { for (AssessIndicator indicator : indicators) { AssessRecord record = new AssessRecord(); record.setPlanId(plan.getId()); record.setUserId(user.getId()); record.setIndicatorId(indicator.getId()); record.setScore(BigDecimal.ZERO); recordMapper.insert(record); } } return true; } }

5.2 前端：Vue 页面与接口调用

前端使用 Vue 3 组合式 API 封装考核计划列表页面，核心代码如下：

<template> <el-card> <el-table :data="planList" border stripe> <el-table-column prop="planName" label="计划名称" /> <el-table-column prop="cycleType" label="考核周期" /> <el-table-column prop="startDate" label="开始日期" /> <el-table-column prop="endDate" label="结束日期" /> <el-table-column label="状态"> <template #default="{ row }"> <el-tag :type="row.status === 1 ? 'success' : 'info'"> {{ row.status === 1 ? '已发布' : '草稿' }} </el-tag> </template> </el-table-column> </el-table> </el-card> </template> <script setup> import { ref, onMounted } from 'vue' import request from '@/utils/request' const planList = ref([]) const fetchPlans = async () => { const res = await request.get('/api/plan/list', { params: { page: 1, size: 10 } }) planList.value = res.data.records } onMounted(fetchPlans) </script>

5.3 前端：考核评分页面

考核评分是系统的核心交互场景，前端通过动态表单渲染指标列表，提交后调用后端接口保存分数。

<template> <el-form :model="scoreForm" label-width="120px"> <el-form-item v-for="item in indicators" :key="item.id" :label="item.name" > <el-input-number v-model="scoreForm[item.id]" :min="0" :max="100" :step="1" /> <span class="weight-tip">权重：{{ item.weight }}%</span> </el-form-item> <el-form-item> <el-button type="primary" @click="submitScore">提交评分</el-button> </el-form-item> </el-form> </template> <script setup> import { reactive, ref } from 'vue' import request from '@/utils/request' import { ElMessage } from 'element-plus' const props = defineProps({ planId: { type: Number, required: true }, userId: { type: Number, required: true } }) const indicators = ref([]) const scoreForm = reactive({}) const loadIndicators = async () => { const res = await request.get('/api/indicator/list') indicators.value = res.data } const submitScore = async () => { const records = indicators.value.map(item => ({ planId: props.planId, userId: props.userId, indicatorId: item.id, score: scoreForm[item.id] || 0 })) await request.post('/api/record/submit', records) ElMessage.success('评分提交成功') } loadIndicators() </script>

6. 系统亮点与总结

本系统通过SpringBoot与Vue的有机结合，实现了绩效考核全流程的线上化管理。其核心亮点体现在三个方面：一是考核指标可灵活配置，支持不同岗位差异化考核；二是前后端分离架构使系统易于维护和扩展；三是通过自动计算与可视化报表，显著提升了考核数据的透明度和公信力。

对于开发者而言，该项目完整覆盖了用户认证、权限控制、CRUD操作、分页查询、事务处理等企业级开发常见场景，是学习SpringBoot与Vue全栈开发的良好实践案例。后续可在此基础上进一步引入消息队列实现考核通知的异步推送，或结合ECharts增强数据可视化能力。