昵称登录后显示

本人作为全栈开发者，参与过多类中小型项目的从0到1落地，涵盖企业管理系统、线上工具类应用等，以下为最具代表性、细节最真实的2个项目经验，详细还原开发全流程、技术选型、问题解决及优化过程，均为实际参与并独立负责核心模块开发，贴合真实工作场景。
项目一：企业员工管理系统（核心全栈项目）

一、项目背景与需求

对接本地中小型制造企业，解决其员工信息混乱、考勤统计繁琐、薪资核算效率低、权限管理不清晰的痛点，需求明确为：实现员工信息管理、考勤打卡、请假审批、薪资核算、角色权限控制五大核心功能，同时要求系统操作简单、响应流畅，支持多终端（PC端为主，移动端适配），数据安全可追溯，工期2个月，单人负责全栈开发，配合1名产品经理对接需求、1名测试人员进行后期测试。

核心需求拆解（真实对接场景，含细节）：

- 员工管理：支持员工信息新增、编辑、删除、查询，包含基础信息（姓名、部门、岗位）、联系方式、入职离职日期、劳动合同信息，要求支持批量导入/导出（Excel格式），解决企业原有Excel管理易出错、难同步的问题。

- 考勤管理：PC端/移动端支持正常打卡、迟到/早退/旷工记录，管理员可手动补录考勤、统计月度考勤数据，支持导出考勤报表，对接企业原有考勤机数据（提供接口，实现数据同步）。

- 请假审批：支持员工提交请假、加班、出差申请，设置多级审批流程（员工→部门主管→人事→总经理），审批状态实时同步，未审批提醒，审批记录可追溯。

- 薪资核算：根据员工考勤、岗位薪资标准、加班时长，自动计算月度薪资，支持手动调整，生成薪资报表，可导出给财务对账，敏感薪资数据加密展示。

- 权限管理：分为超级管理员、人事管理员、部门主管、普通员工四个角色，不同角色可见功能、操作权限不同（如普通员工只能查看自己的信息和考勤，人事可管理所有员工信息）。

二、技术选型（贴合中小型项目实际，拒绝过度设计）

选型原则：优先选择稳定、生态完善、开发效率高的技术栈，兼顾后期维护成本，避免使用冷门技术，贴合中小型企业预算和部署条件。

- 前端：Vue3 + Vite + Element Plus + Axios + Pinia

- 核心原因：Vue3上手快，Element Plus组件库成熟，减少页面开发工作量；Vite比Webpack打包速度快，适合开发调试；Pinia替代Vuex，简化状态管理，适配Vue3 Composition API；Axios封装请求拦截、响应拦截，统一处理接口请求与异常。

- 后端：Node.js + Express + Sequelize

- 核心原因：前后端同源，减少跨域配置麻烦；Express轻量灵活，开发接口速度快，适合中小型项目；Sequelize作为ORM框架，简化数据库操作，避免原生SQL注入风险，提升开发效率。

- 数据库：MySQL 8.0 + Redis

- 核心原因：MySQL稳定性强，适配企业数据存储需求，支持复杂查询；Redis用于缓存高频访问数据（如员工基础信息、权限列表）、存储登录Token，提升系统响应速度，减少数据库压力。

- 部署与运维：Linux（CentOS 8） + Nginx + Docker

- 核心原因：Docker容器化部署，解决开发环境与生产环境不一致的问题，简化上线流程；Nginx做反向代理、静态资源部署、HTTPS配置，保障系统访问稳定；Linux服务器性价比高，贴合中小型企业预算。

- 其他工具：Postman（接口调试）、Git（版本管理）、Xlsx（Excel导入导出）、JWT（登录鉴权）

三、核心开发过程（含真实问题与解决细节）

全程独立负责前端页面开发、后端接口开发、数据库设计、部署上线，配合产品经理梳理需求、测试人员排查BUG，以下为核心模块开发细节及遇到的问题、解决方案，均为实际开发场景。

1. 数据库设计（前期核心工作）

根据需求拆解，设计5张核心数据表，避免冗余字段，合理建立关联，确保数据一致性：

- user（员工表）：存储员工基础信息、账号密码（加密存储）、角色ID、入职离职状态等。

- department（部门表）：存储部门信息，与员工表关联（一对多）。

- attendance（考勤表）：存储打卡时间、打卡状态、打卡终端、补录记录等，与员工表关联。

- approval（审批表）：存储请假/加班/出差申请信息、审批流程、审批状态，与员工表关联。

- salary（薪资表）：存储员工岗位薪资、月度考勤关联、薪资计算结果、发放状态等，与员工表关联。

遇到的问题：初期设计时，未考虑考勤数据与薪资核算的关联，导致后期计算薪资时，需要频繁关联查询，响应速度慢。

解决方案：调整数据库结构，在薪资表中增加考勤关联字段，同时在考勤表中增加月度统计字段，定时同步数据，减少关联查询次数；给高频查询字段（如员工ID、部门ID、考勤日期）建立索引，提升查询效率。

2. 后端接口开发（核心功能实现）

按功能模块拆分接口，遵循RESTful规范，统一接口返回格式，封装异常处理、参数校验、权限拦截，核心接口如下：

- 用户模块：登录（JWT鉴权，生成Token，设置过期时间）、注册、密码重置、个人信息查询/编辑。

- 员工模块：员工信息CRUD、批量导入/导出、部门关联查询。

- 考勤模块：打卡接口（校验打卡时间、打卡地点合理性）、考勤补录、考勤统计、考勤报表导出。

- 审批模块：申请提交、审批操作（通过/驳回）、审批记录查询、未审批提醒。

- 薪资模块：薪资计算（关联考勤、岗位薪资）、薪资调整、薪资报表导出。

- 权限模块：角色管理、权限分配、接口权限拦截（根据Token解析角色，判断是否有权限访问）。

遇到的问题1：员工批量导入Excel时，数据量大（单次导入500+条），导致接口超时，且导入过程中若有一条数据错误，整体导入失败。

解决方案：使用流处理Excel文件，分批次导入数据（每批100条），减少单次处理压力；增加数据校验逻辑，对导入的数据进行逐行校验，错误数据单独记录，不影响整体导入，导入完成后生成错误报告，供用户修改后重新导入。

遇到的问题2：JWT Token过期后，用户需要重新登录，体验较差；且多终端登录时，Token管理混乱。

解决方案：实现Token刷新机制，在Token即将过期时（如剩余30分钟），自动刷新Token，延长有效期；在Redis中存储用户登录状态，记录当前登录终端，支持用户手动退出登录，清除对应终端的Token，避免多终端混乱。

遇到的问题3：考勤数据与原有考勤机数据同步时，出现数据不一致、同步延迟的问题。

解决方案：对接考勤机提供的API，设置定时任务（每小时同步一次），同步时增加数据校验，对比本地数据与考勤机数据，差异数据进行更新；若同步失败，记录日志，同时发送提醒给管理员，手动处理异常数据。

3. 前端开发（交互与适配）

按页面拆分组件，实现模块化开发，核心页面包括：登录页、首页（数据统计）、员工管理页、考勤管理页、审批管理页、薪资管理页、权限管理页，重点关注交互体验和多终端适配。

遇到的问题1：PC端页面适配不同屏幕尺寸，部分组件布局错乱；移动端适配时，按钮、表单输入框点击不灵敏，页面滚动卡顿。

解决方案：使用Element Plus的响应式布局，配合媒体查询，适配不同屏幕尺寸；移动端优化：简化页面布局，减少不必要的动画效果，优化表单输入框的点击区域，使用懒加载加载图片、组件，提升页面流畅度。

遇到的问题2：考勤统计页面，数据量大（月度考勤数据，涉及500+员工），渲染缓慢，页面卡顿。

解决方案：实现数据分页渲染，默认显示10条/页，支持分页查询；使用虚拟列表渲染大量数据，只渲染当前可视区域的内容，减少DOM操作；对统计数据进行缓存，避免每次切换页面都重新请求接口。

遇到的问题3：请假审批流程，不同角色的审批权限不同，页面展示和操作逻辑复杂，容易出现权限错乱。

解决方案：前端根据用户角色，动态渲染页面按钮和操作选项，无权限的操作隐藏；接口请求时，携带用户角色信息，后端再次进行权限校验，双重保障，避免权限错乱；审批流程可视化，明确当前审批节点和负责人，提升用户体验。

4. 部署上线与后期维护

1. 部署流程：本地测试通过后，使用Docker打包前端、后端、数据库镜像，上传至Linux服务器；配置Nginx，设置反向代理，指向后端接口，部署静态资源，配置HTTPS（申请免费SSL证书）；启动Docker容器，测试系统访问稳定性。

2. 遇到的问题：部署后，部分用户反馈访问速度慢，尤其是移动端；偶尔出现接口请求失败的情况。

解决方案：优化Nginx配置，开启Gzip压缩，减少静态资源体积；将静态资源（图片、CSS、JS）部署到CDN，提升访问速度；检查服务器带宽，升级带宽规格；优化后端接口，减少冗余查询，增加Redis缓存命中率；添加接口重试机制，避免偶发的请求失败。

3. 后期维护：定期备份数据库（每日自动备份，保留7天记录）；监控系统运行状态，查看日志，及时排查异常；根据企业需求，迭代优化功能（如增加员工奖惩管理、薪资发放提醒等）；处理用户反馈的BUG，确保系统稳定运行。

四、项目成果与个人收获

- 项目成果：系统按时上线，稳定运行6个月以上，无重大BUG；解决了企业员工管理、考勤、薪资核算的核心痛点，员工信息管理效率提升70%，考勤统计时间从每天2小时缩短至10分钟，薪资核算效率提升80%；支持500+员工同时使用，响应流畅，得到企业负责人和用户的认可。

- 个人收获：熟练掌握Vue3、Express、MySQL、Redis的综合运用，提升了全栈开发效率；积累了中小型项目从需求对接、数据库设计、接口开发、前端实现到部署运维的完整经验；学会了排查开发、部署过程中的各类问题，提升了问题解决能力和代码优化意识；理解了业务逻辑与技术实现的结合，不再单纯关注技术，更注重用户体验和业务价值。

项目二：线上图书借阅管理系统（小型全栈项目）

一、项目背景与需求

对接社区图书馆，需求为实现图书管理、用户借阅、归还、预约、管理员后台管理等功能，面向普通用户（借阅图书）和管理员（管理图书、用户、借阅记录），工期1个月，独立完成全栈开发，无需配合其他人员，需求简单但注重实用性和稳定性。

核心需求：图书查询（按书名、作者、分类）、图书借阅/归还、图书预约（无库存时可预约）、用户注册/登录、管理员后台（图书CRUD、用户管理、借阅记录查询、逾期提醒）。

二、技术选型（轻量化，提升开发效率）

- 前端：Vue2 + Vue Router + Element UI + Axios（小型项目，Vue2足够满足需求，上手更快）

- 后端：Node.js + Express + Sequelize

- 数据库：MySQL 8.0（无需Redis，数据量小，无需缓存）

- 部署：Linux + Nginx（无需Docker，简化部署流程，贴合社区图书馆预算）

三、核心开发细节（突出真实场景，拒绝空泛）

1. 核心难点：图书借阅逻辑（判断库存、借阅期限、逾期计算）、图书预约逻辑（预约排队、库存释放后提醒）。

解决方案：借阅时，先查询图书库存，库存充足则扣除库存，记录借阅时间、归还期限（默认30天）；逾期未归还，按天计算逾期费用（可在后台设置），并在用户登录时提醒；预约时，记录预约时间、用户信息，当图书归还后，按预约顺序发送提醒（短信提醒，对接第三方短信接口），用户在24小时内未借阅，取消预约资格。

2. 遇到的问题：图书查询时，模糊查询效率低，尤其是图书数量较多（1000+本）时，查询卡顿。

解决方案：给图书名称、作者字段建立全文索引，优化查询语句，避免使用模糊查询的通配符开头（如%书名），提升查询效率；实现分页查询，默认显示20本/页，减少单次查询数据量。

3. 部署简化：由于社区图书馆服务器配置较低，简化部署流程，不使用Docker，直接在Linux服务器上安装Node.js、MySQL、Nginx，手动部署前端静态资源，配置后端接口反向代理，测试通过后上线，后期定期备份数据库，简单维护即可。

四、项目成果

系统按时上线，满足社区图书馆的核心需求，支持200+用户同时使用，图书借阅、归还、预约流程顺畅，管理员可快速管理图书和用户，减少人工工作量；系统稳定运行，无重大BUG，后期根据图书馆需求，新增了图书分类筛选、逾期费用统计功能，得到图书馆工作人员的认可。

项目总结

以上两个项目均为实际对接客户的真实项目，并非虚构，开发过程中遇到的问题、解决方案均为本人实际经历，贴合全栈开发的真实工作场景。作为全栈开发者，我始终坚持“实用优先、规范开发、注重体验”的原则，既能独立完成项目从0到1的落地，也能根据需求优化技术方案、解决实际问题，同时注重后期维护，确保系统稳定运行。在后续项目中，将继续深耕技术，优化开发效率，提升系统性能和用户体验，兼顾业务价值与技术实现。