1. 企业工资管理系统概述企业工资管理系统是现代企业人力资源管理的核心模块之一。作为一名有10年开发经验的Java全栈工程师我参与过多个行业的薪酬系统开发深知一个设计良好的工资管理系统对企业运营效率的提升有多重要。这套基于JavaVue的企业工资管理系统正是针对中小型企业实际需求开发的轻量级解决方案。传统Excel手工计算工资的方式存在诸多痛点容易出错、难以追溯、统计效率低下。我曾见过某制造企业因为一个公式错误导致全员工资错发后续纠错耗费了大量人力。这套系统正是为了解决这些实际问题而设计主要功能包括员工信息管理、考勤数据对接、薪资项配置、个税计算、工资单生成、统计报表等。技术选型上后端采用JavaSpring Boot框架前端使用Vue.jsElement UI数据库选用MySQL。这套技术栈的优势在于Java生态成熟稳定特别适合企业级应用开发Spring Boot简化了配置提高开发效率Vue.js前端框架学习曲线平缓组件化开发方便MySQL作为关系型数据库在事务处理和复杂查询方面表现优异2. 系统架构设计2.1 整体技术架构系统采用经典的前后端分离架构这是我经过多个项目验证后认为最适合企业应用的模式。后端提供RESTful API接口前端通过axios进行调用这种架构的优势在于前后端可以并行开发且后期维护方便。后端分层设计控制层(Controller)处理HTTP请求参数校验服务层(Service)核心业务逻辑实现持久层(Repository)数据库访问操作实体层(Model)数据实体定义前端采用模块化设计路由管理基于Vue Router实现页面导航状态管理Vuex集中管理应用状态组件库Element UI提供丰富的UI组件API封装统一封装axios请求2.2 数据库设计要点工资管理系统的数据库设计有几个关键点需要特别注意员工信息表(employee)设计CREATE TABLE employee ( id bigint NOT NULL AUTO_INCREMENT, employee_no varchar(20) NOT NULL COMMENT 工号, name varchar(50) NOT NULL COMMENT 姓名, id_card varchar(18) NOT NULL COMMENT 身份证号, department_id bigint NOT NULL COMMENT 部门ID, position_id bigint NOT NULL COMMENT 职位ID, entry_date date NOT NULL COMMENT 入职日期, base_salary decimal(10,2) NOT NULL COMMENT 基本工资, bank_account varchar(20) NOT NULL COMMENT 银行账号, status tinyint NOT NULL DEFAULT 1 COMMENT 状态(1:在职,0:离职), PRIMARY KEY (id), UNIQUE KEY idx_employee_no (employee_no), UNIQUE KEY idx_id_card (id_card) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT员工信息表;工资项配置表(salary_item)设计CREATE TABLE salary_item ( id bigint NOT NULL AUTO_INCREMENT, item_name varchar(50) NOT NULL COMMENT 工资项名称, item_code varchar(20) NOT NULL COMMENT 工资项编码, item_type tinyint NOT NULL COMMENT 类型(1:固定项,2:计算项), formula varchar(200) DEFAULT NULL COMMENT 计算公式, is_taxable tinyint NOT NULL DEFAULT 1 COMMENT 是否计税(1:是,0:否), is_deduction tinyint NOT NULL DEFAULT 0 COMMENT 是否扣款项(1:是,0:否), display_order int NOT NULL DEFAULT 0 COMMENT 显示顺序, PRIMARY KEY (id), UNIQUE KEY idx_item_code (item_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT工资项配置表;工资记录表(salary_record)设计CREATE TABLE salary_record ( id bigint NOT NULL AUTO_INCREMENT, employee_id bigint NOT NULL COMMENT 员工ID, year_month varchar(7) NOT NULL COMMENT 年月(YYYY-MM), basic_salary decimal(10,2) NOT NULL COMMENT 基本工资, position_salary decimal(10,2) NOT NULL COMMENT 岗位工资, performance_salary decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 绩效工资, overtime_pay decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 加班费, attendance_deduction decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 考勤扣款, insurance_deduction decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 社保公积金扣款, tax decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 个税, net_salary decimal(10,2) NOT NULL COMMENT 实发工资, status tinyint NOT NULL DEFAULT 0 COMMENT 状态(0:未发放,1:已发放), create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY idx_employee_month (employee_id,year_month) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT工资记录表;注意在设计工资相关表时金额字段务必使用decimal类型而非float/double避免浮点数计算精度问题。我曾在一个项目中因为使用float导致工资计算出现几分钱的误差给财务对账带来很大麻烦。3. 核心功能实现3.1 工资计算引擎实现工资计算是系统的核心功能我设计了一个灵活的工资计算引擎主要处理流程如下加载员工基本信息获取考勤数据迟到、早退、请假等读取工资项配置按顺序计算每个工资项累计应发工资计算社保公积金计算个人所得税得出实发工资个税计算是重点难点我根据最新个税法实现了累计预扣法public BigDecimal calculateTax(Employee employee, BigDecimal taxableIncome, int month) { // 累计应纳税所得额 BigDecimal accumulatedTaxableIncome taxableIncome.multiply(new BigDecimal(month)); // 适用税率和速算扣除数 TaxRate taxRate findTaxRate(accumulatedTaxableIncome); // 累计应预扣预缴税额 BigDecimal accumulatedTax accumulatedTaxableIncome.multiply(taxRate.getRate()) .subtract(taxRate.getQuickDeduction()); // 本月应预扣预缴税额 BigDecimal currentMonthTax accumulatedTax.subtract(getPreviousTax(employee, month-1)); return currentMonthTax.compareTo(BigDecimal.ZERO) 0 ? currentMonthTax : BigDecimal.ZERO; }3.2 Excel导入导出功能工资系统经常需要处理Excel文件我使用Apache POI和EasyExcel实现了高性能的Excel处理员工信息批量导入PostMapping(/import) public Result importEmployees(RequestParam(file) MultipartFile file) { try { ListEmployee employees EasyExcel.read(file.getInputStream()) .head(Employee.class) .sheet() .doReadSync(); // 数据校验 validateEmployees(employees); // 批量保存 employeeService.batchSave(employees); return Result.success(导入成功); } catch (Exception e) { log.error(导入员工信息失败, e); return Result.error(导入失败 e.getMessage()); } }工资表导出GetMapping(/export) public void exportSalary(HttpServletResponse response, RequestParam String yearMonth) { try { String fileName URLEncoder.encode(yearMonth 工资表, UTF-8); response.setContentType(application/vnd.ms-excel); response.setCharacterEncoding(utf-8); response.setHeader(Content-disposition, attachment;filename fileName .xlsx); ListSalaryExportVO data salaryService.getExportData(yearMonth); EasyExcel.write(response.getOutputStream(), SalaryExportVO.class) .sheet(工资表) .doWrite(data); } catch (Exception e) { log.error(导出工资表失败, e); throw new RuntimeException(导出失败); } }提示处理大文件时一定要使用EasyExcel的流式读取避免内存溢出。我在一个项目中处理上万条记录的Excel时最初使用普通POI导致内存爆满后来改用EasyExcel解决了这个问题。3.3 权限控制实现工资数据敏感权限控制尤为重要。我采用RBAC模型实现细粒度权限控制后端使用Spring Security JWT进行认证授权前端根据权限动态生成路由和按钮权限注解示例PreAuthorize(hasRole(HR) or hasRole(ADMIN)) PostMapping(/calculate) public Result calculateSalary(RequestBody SalaryCalculateDTO dto) { salaryService.calculateSalary(dto); return Result.success(计算完成); } PreAuthorize(ss.hasPermi(salary:export)) GetMapping(/export) public void exportSalary(HttpServletResponse response, RequestParam String yearMonth) { // 导出逻辑 }前端权限控制// 在路由配置中添加meta权限信息 { path: /salary, component: Layout, meta: { title: 工资管理, icon: money, roles: [HR, ADMIN] }, children: [ { path: calculate, component: () import(/views/salary/calculate), meta: { title: 工资计算, roles: [HR] } } ] } // 在按钮上使用v-permission指令 el-button v-permission[salary:export] typeprimary clickhandleExport 导出Excel /el-button4. 前端关键实现4.1 Vue组件设计前端采用模块化组件设计主要组件包括员工选择器组件template el-select v-modelselectedEmployee filterable remote placeholder请输入员工姓名或工号 :remote-methodsearchEmployee :loadingloading el-option v-foritem in employeeList :keyitem.id :label${item.name} (${item.employeeNo}) :valueitem.id /el-option /el-select /template script export default { props: { value: { type: Number, default: null } }, data() { return { selectedEmployee: this.value, employeeList: [], loading: false } }, methods: { async searchEmployee(query) { if (query ! ) { this.loading true try { const res await searchEmployees({ keyword: query }) this.employeeList res.data } finally { this.loading false } } } }, watch: { value(val) { this.selectedEmployee val }, selectedEmployee(val) { this.$emit(input, val) } } } /script工资项配置表单template el-form :modelform :rulesrules refform label-width120px el-form-item label工资项名称 propitemName el-input v-modelform.itemName placeholder请输入工资项名称 / /el-form-item el-form-item label工资项编码 propitemCode el-input v-modelform.itemCode placeholder请输入唯一编码 / /el-form-item el-form-item label工资项类型 propitemType el-radio-group v-modelform.itemType el-radio :label1固定项/el-radio el-radio :label2计算项/el-radio /el-radio-group /el-form-item el-form-item label计算公式 propformula v-ifform.itemType 2 el-input v-modelform.formula placeholder例如basicSalary*0.2 performanceScore*100 / /el-form-item el-form-item label是否计税 propisTaxable el-switch v-modelform.isTaxable / /el-form-item el-form-item el-button typeprimary clicksubmitForm保存/el-button /el-form-item /el-form /template4.2 工资单打印功能工资单打印是员工最关注的功能我使用vue-print-nb插件实现安装插件npm install vue-print-nb --save打印组件实现template div el-button typeprimary v-printprintConfig打印工资单/el-button div idprintArea classprint-content div classheader h2{{ companyName }}工资单/h2 p发放月份{{ salary.yearMonth }}/p /div div classemployee-info p姓名{{ employee.name }}/p p部门{{ employee.departmentName }}/p p职位{{ employee.positionName }}/p /div el-table :datasalaryItems border el-table-column propitemName label工资项 / el-table-column propamount label金额 alignright / /el-table div classfooter p应发工资{{ salary.totalSalary }}/p p扣款合计{{ salary.totalDeduction }}/p p实发工资{{ salary.netSalary }}/p /div /div /div /template script export default { data() { return { printConfig: { id: printArea, popTitle: 工资单, extraCss: https://unpkg.com/element-ui/lib/theme-chalk/index.css }, companyName: XX科技有限公司, employee: {}, salary: {}, salaryItems: [] } }, async created() { await this.loadData() }, methods: { async loadData() { const res await getSalaryDetail(this.$route.params.id) this.employee res.data.employee this.salary res.data.salary this.salaryItems res.data.items } } } /script style scoped .print-content { padding: 20px; } .header { text-align: center; margin-bottom: 20px; } .employee-info { margin-bottom: 20px; } .footer { margin-top: 20px; text-align: right; } /style5. 部署与运维5.1 系统部署方案推荐使用Docker Compose进行一键部署这是我经过多个项目验证的高效部署方式准备docker-compose.yml文件version: 3 services: mysql: image: mysql:8.0 container_name: salary-mysql environment: MYSQL_ROOT_PASSWORD: root123 MYSQL_DATABASE: salary MYSQL_USER: salary MYSQL_PASSWORD: salary123 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/init:/docker-entrypoint-initdb.d ports: - 3306:3306 restart: always backend: build: ./backend container_name: salary-backend depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/salary?useSSLfalsecharacterEncodingutf8 SPRING_DATASOURCE_USERNAME: salary SPRING_DATASOURCE_PASSWORD: salary123 ports: - 8080:8080 restart: always frontend: build: ./frontend container_name: salary-frontend ports: - 80:80 restart: always后端DockerfileFROM openjdk:11-jdk VOLUME /tmp COPY target/salary-system.jar app.jar ENTRYPOINT [java,-jar,/app.jar]前端DockerfileFROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]5.2 常见问题排查在实际部署和运行过程中可能会遇到以下问题数据库连接失败检查MySQL服务是否正常运行验证连接字符串中的用户名密码是否正确确认MySQL是否允许远程连接如果是分开部署前端访问接口跨域问题确保后端配置了CORS检查Nginx是否配置了代理转发验证接口地址是否正确工资计算不准确检查工资项配置是否正确验证计算公式是否有语法错误确认个税计算是否使用了最新规则性能问题大数据量导出时内存溢出增加JVM内存参数-Xmx列表查询慢添加适当的数据库索引页面加载慢启用Gzip压缩配置浏览器缓存经验分享在正式环境部署前一定要在测试环境充分验证。我曾遇到过一个案例因为测试环境MySQL版本与生产环境不一致导致某些SQL语句在生产环境执行失败。现在我会使用Docker确保环境一致性避免这类问题。 Java+Vue企业工资管理系统开发实践
1. 企业工资管理系统概述企业工资管理系统是现代企业人力资源管理的核心模块之一。作为一名有10年开发经验的Java全栈工程师我参与过多个行业的薪酬系统开发深知一个设计良好的工资管理系统对企业运营效率的提升有多重要。这套基于JavaVue的企业工资管理系统正是针对中小型企业实际需求开发的轻量级解决方案。传统Excel手工计算工资的方式存在诸多痛点容易出错、难以追溯、统计效率低下。我曾见过某制造企业因为一个公式错误导致全员工资错发后续纠错耗费了大量人力。这套系统正是为了解决这些实际问题而设计主要功能包括员工信息管理、考勤数据对接、薪资项配置、个税计算、工资单生成、统计报表等。技术选型上后端采用JavaSpring Boot框架前端使用Vue.jsElement UI数据库选用MySQL。这套技术栈的优势在于Java生态成熟稳定特别适合企业级应用开发Spring Boot简化了配置提高开发效率Vue.js前端框架学习曲线平缓组件化开发方便MySQL作为关系型数据库在事务处理和复杂查询方面表现优异2. 系统架构设计2.1 整体技术架构系统采用经典的前后端分离架构这是我经过多个项目验证后认为最适合企业应用的模式。后端提供RESTful API接口前端通过axios进行调用这种架构的优势在于前后端可以并行开发且后期维护方便。后端分层设计控制层(Controller)处理HTTP请求参数校验服务层(Service)核心业务逻辑实现持久层(Repository)数据库访问操作实体层(Model)数据实体定义前端采用模块化设计路由管理基于Vue Router实现页面导航状态管理Vuex集中管理应用状态组件库Element UI提供丰富的UI组件API封装统一封装axios请求2.2 数据库设计要点工资管理系统的数据库设计有几个关键点需要特别注意员工信息表(employee)设计CREATE TABLE employee ( id bigint NOT NULL AUTO_INCREMENT, employee_no varchar(20) NOT NULL COMMENT 工号, name varchar(50) NOT NULL COMMENT 姓名, id_card varchar(18) NOT NULL COMMENT 身份证号, department_id bigint NOT NULL COMMENT 部门ID, position_id bigint NOT NULL COMMENT 职位ID, entry_date date NOT NULL COMMENT 入职日期, base_salary decimal(10,2) NOT NULL COMMENT 基本工资, bank_account varchar(20) NOT NULL COMMENT 银行账号, status tinyint NOT NULL DEFAULT 1 COMMENT 状态(1:在职,0:离职), PRIMARY KEY (id), UNIQUE KEY idx_employee_no (employee_no), UNIQUE KEY idx_id_card (id_card) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT员工信息表;工资项配置表(salary_item)设计CREATE TABLE salary_item ( id bigint NOT NULL AUTO_INCREMENT, item_name varchar(50) NOT NULL COMMENT 工资项名称, item_code varchar(20) NOT NULL COMMENT 工资项编码, item_type tinyint NOT NULL COMMENT 类型(1:固定项,2:计算项), formula varchar(200) DEFAULT NULL COMMENT 计算公式, is_taxable tinyint NOT NULL DEFAULT 1 COMMENT 是否计税(1:是,0:否), is_deduction tinyint NOT NULL DEFAULT 0 COMMENT 是否扣款项(1:是,0:否), display_order int NOT NULL DEFAULT 0 COMMENT 显示顺序, PRIMARY KEY (id), UNIQUE KEY idx_item_code (item_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT工资项配置表;工资记录表(salary_record)设计CREATE TABLE salary_record ( id bigint NOT NULL AUTO_INCREMENT, employee_id bigint NOT NULL COMMENT 员工ID, year_month varchar(7) NOT NULL COMMENT 年月(YYYY-MM), basic_salary decimal(10,2) NOT NULL COMMENT 基本工资, position_salary decimal(10,2) NOT NULL COMMENT 岗位工资, performance_salary decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 绩效工资, overtime_pay decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 加班费, attendance_deduction decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 考勤扣款, insurance_deduction decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 社保公积金扣款, tax decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 个税, net_salary decimal(10,2) NOT NULL COMMENT 实发工资, status tinyint NOT NULL DEFAULT 0 COMMENT 状态(0:未发放,1:已发放), create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY idx_employee_month (employee_id,year_month) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT工资记录表;注意在设计工资相关表时金额字段务必使用decimal类型而非float/double避免浮点数计算精度问题。我曾在一个项目中因为使用float导致工资计算出现几分钱的误差给财务对账带来很大麻烦。3. 核心功能实现3.1 工资计算引擎实现工资计算是系统的核心功能我设计了一个灵活的工资计算引擎主要处理流程如下加载员工基本信息获取考勤数据迟到、早退、请假等读取工资项配置按顺序计算每个工资项累计应发工资计算社保公积金计算个人所得税得出实发工资个税计算是重点难点我根据最新个税法实现了累计预扣法public BigDecimal calculateTax(Employee employee, BigDecimal taxableIncome, int month) { // 累计应纳税所得额 BigDecimal accumulatedTaxableIncome taxableIncome.multiply(new BigDecimal(month)); // 适用税率和速算扣除数 TaxRate taxRate findTaxRate(accumulatedTaxableIncome); // 累计应预扣预缴税额 BigDecimal accumulatedTax accumulatedTaxableIncome.multiply(taxRate.getRate()) .subtract(taxRate.getQuickDeduction()); // 本月应预扣预缴税额 BigDecimal currentMonthTax accumulatedTax.subtract(getPreviousTax(employee, month-1)); return currentMonthTax.compareTo(BigDecimal.ZERO) 0 ? currentMonthTax : BigDecimal.ZERO; }3.2 Excel导入导出功能工资系统经常需要处理Excel文件我使用Apache POI和EasyExcel实现了高性能的Excel处理员工信息批量导入PostMapping(/import) public Result importEmployees(RequestParam(file) MultipartFile file) { try { ListEmployee employees EasyExcel.read(file.getInputStream()) .head(Employee.class) .sheet() .doReadSync(); // 数据校验 validateEmployees(employees); // 批量保存 employeeService.batchSave(employees); return Result.success(导入成功); } catch (Exception e) { log.error(导入员工信息失败, e); return Result.error(导入失败 e.getMessage()); } }工资表导出GetMapping(/export) public void exportSalary(HttpServletResponse response, RequestParam String yearMonth) { try { String fileName URLEncoder.encode(yearMonth 工资表, UTF-8); response.setContentType(application/vnd.ms-excel); response.setCharacterEncoding(utf-8); response.setHeader(Content-disposition, attachment;filename fileName .xlsx); ListSalaryExportVO data salaryService.getExportData(yearMonth); EasyExcel.write(response.getOutputStream(), SalaryExportVO.class) .sheet(工资表) .doWrite(data); } catch (Exception e) { log.error(导出工资表失败, e); throw new RuntimeException(导出失败); } }提示处理大文件时一定要使用EasyExcel的流式读取避免内存溢出。我在一个项目中处理上万条记录的Excel时最初使用普通POI导致内存爆满后来改用EasyExcel解决了这个问题。3.3 权限控制实现工资数据敏感权限控制尤为重要。我采用RBAC模型实现细粒度权限控制后端使用Spring Security JWT进行认证授权前端根据权限动态生成路由和按钮权限注解示例PreAuthorize(hasRole(HR) or hasRole(ADMIN)) PostMapping(/calculate) public Result calculateSalary(RequestBody SalaryCalculateDTO dto) { salaryService.calculateSalary(dto); return Result.success(计算完成); } PreAuthorize(ss.hasPermi(salary:export)) GetMapping(/export) public void exportSalary(HttpServletResponse response, RequestParam String yearMonth) { // 导出逻辑 }前端权限控制// 在路由配置中添加meta权限信息 { path: /salary, component: Layout, meta: { title: 工资管理, icon: money, roles: [HR, ADMIN] }, children: [ { path: calculate, component: () import(/views/salary/calculate), meta: { title: 工资计算, roles: [HR] } } ] } // 在按钮上使用v-permission指令 el-button v-permission[salary:export] typeprimary clickhandleExport 导出Excel /el-button4. 前端关键实现4.1 Vue组件设计前端采用模块化组件设计主要组件包括员工选择器组件template el-select v-modelselectedEmployee filterable remote placeholder请输入员工姓名或工号 :remote-methodsearchEmployee :loadingloading el-option v-foritem in employeeList :keyitem.id :label${item.name} (${item.employeeNo}) :valueitem.id /el-option /el-select /template script export default { props: { value: { type: Number, default: null } }, data() { return { selectedEmployee: this.value, employeeList: [], loading: false } }, methods: { async searchEmployee(query) { if (query ! ) { this.loading true try { const res await searchEmployees({ keyword: query }) this.employeeList res.data } finally { this.loading false } } } }, watch: { value(val) { this.selectedEmployee val }, selectedEmployee(val) { this.$emit(input, val) } } } /script工资项配置表单template el-form :modelform :rulesrules refform label-width120px el-form-item label工资项名称 propitemName el-input v-modelform.itemName placeholder请输入工资项名称 / /el-form-item el-form-item label工资项编码 propitemCode el-input v-modelform.itemCode placeholder请输入唯一编码 / /el-form-item el-form-item label工资项类型 propitemType el-radio-group v-modelform.itemType el-radio :label1固定项/el-radio el-radio :label2计算项/el-radio /el-radio-group /el-form-item el-form-item label计算公式 propformula v-ifform.itemType 2 el-input v-modelform.formula placeholder例如basicSalary*0.2 performanceScore*100 / /el-form-item el-form-item label是否计税 propisTaxable el-switch v-modelform.isTaxable / /el-form-item el-form-item el-button typeprimary clicksubmitForm保存/el-button /el-form-item /el-form /template4.2 工资单打印功能工资单打印是员工最关注的功能我使用vue-print-nb插件实现安装插件npm install vue-print-nb --save打印组件实现template div el-button typeprimary v-printprintConfig打印工资单/el-button div idprintArea classprint-content div classheader h2{{ companyName }}工资单/h2 p发放月份{{ salary.yearMonth }}/p /div div classemployee-info p姓名{{ employee.name }}/p p部门{{ employee.departmentName }}/p p职位{{ employee.positionName }}/p /div el-table :datasalaryItems border el-table-column propitemName label工资项 / el-table-column propamount label金额 alignright / /el-table div classfooter p应发工资{{ salary.totalSalary }}/p p扣款合计{{ salary.totalDeduction }}/p p实发工资{{ salary.netSalary }}/p /div /div /div /template script export default { data() { return { printConfig: { id: printArea, popTitle: 工资单, extraCss: https://unpkg.com/element-ui/lib/theme-chalk/index.css }, companyName: XX科技有限公司, employee: {}, salary: {}, salaryItems: [] } }, async created() { await this.loadData() }, methods: { async loadData() { const res await getSalaryDetail(this.$route.params.id) this.employee res.data.employee this.salary res.data.salary this.salaryItems res.data.items } } } /script style scoped .print-content { padding: 20px; } .header { text-align: center; margin-bottom: 20px; } .employee-info { margin-bottom: 20px; } .footer { margin-top: 20px; text-align: right; } /style5. 部署与运维5.1 系统部署方案推荐使用Docker Compose进行一键部署这是我经过多个项目验证的高效部署方式准备docker-compose.yml文件version: 3 services: mysql: image: mysql:8.0 container_name: salary-mysql environment: MYSQL_ROOT_PASSWORD: root123 MYSQL_DATABASE: salary MYSQL_USER: salary MYSQL_PASSWORD: salary123 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/init:/docker-entrypoint-initdb.d ports: - 3306:3306 restart: always backend: build: ./backend container_name: salary-backend depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/salary?useSSLfalsecharacterEncodingutf8 SPRING_DATASOURCE_USERNAME: salary SPRING_DATASOURCE_PASSWORD: salary123 ports: - 8080:8080 restart: always frontend: build: ./frontend container_name: salary-frontend ports: - 80:80 restart: always后端DockerfileFROM openjdk:11-jdk VOLUME /tmp COPY target/salary-system.jar app.jar ENTRYPOINT [java,-jar,/app.jar]前端DockerfileFROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]5.2 常见问题排查在实际部署和运行过程中可能会遇到以下问题数据库连接失败检查MySQL服务是否正常运行验证连接字符串中的用户名密码是否正确确认MySQL是否允许远程连接如果是分开部署前端访问接口跨域问题确保后端配置了CORS检查Nginx是否配置了代理转发验证接口地址是否正确工资计算不准确检查工资项配置是否正确验证计算公式是否有语法错误确认个税计算是否使用了最新规则性能问题大数据量导出时内存溢出增加JVM内存参数-Xmx列表查询慢添加适当的数据库索引页面加载慢启用Gzip压缩配置浏览器缓存经验分享在正式环境部署前一定要在测试环境充分验证。我曾遇到过一个案例因为测试环境MySQL版本与生产环境不一致导致某些SQL语句在生产环境执行失败。现在我会使用Docker确保环境一致性避免这类问题。