山东大学软件学院创新实训 个人博客（六）健康提醒系统的完整开发与优化

一、本周工作总结本周核心负责宠声健康AI项目中宠物健康提醒系统的全流程开发工作。该功能看似是常规的业务提醒模块但落地过程中涉及需求拆解、原生开发、接口设计、交互优化等多项细节工作。从初始需求梳理、方案敲定到核心功能开发、前后端联调、UI交互优化完整走完了业务功能从0到1的落地流程也在原生开发与接口规范化设计中积累了扎实的实战经验。二、需求分析与实现思路1. 功能需求拆解结合产品业务场景本次健康提醒系统需要满足宠物养护的全场景提醒需求核心业务需求如下支持用户自定义创建多类型宠物健康提醒涵盖驱虫、疫苗、体检等高频养护场景提供完善的内容管理能力可对已创建的提醒进行编辑、删除操作支持提醒状态灵活切换可随时暂停、激活对应提醒任务页面视觉整洁美观操作逻辑清晰保证流畅的用户交互体验。2. 技术选型思考纯原生开发落地本次开发摒弃了Element Plus等成熟UI组件库全程采用原生技术栈完成开发。这一选型并非刻意增加开发难度而是结合项目现状与团队规范做出的最优选择同时也让我深入体会到组件库的底层逻辑与原生开发的核心价值。原生开发的核心选型依据项目模块体量较小引入第三方组件库会产生冗余代码增加项目打包体积影响页面加载性能团队需要统一全局样式规范原生开发可完全自主管控样式逻辑规避第三方组件样式兼容、覆盖难的问题减少项目外部依赖脱离组件库封装的黑盒能够直面原生API与底层逻辑有效夯实基础开发能力加深对前端交互、样式渲染的理解。三、核心功能开发与实践思考1. 表单复用新建/编辑提醒功能优化新建提醒与编辑提醒是模块的两大核心功能。初期规划时我曾考虑将两个功能拆分为独立组件分别开发但对比代码逻辑后发现二者的表单结构、校验规则、提交逻辑重合度高达90%仅存在数据回填、接口请求的细微差异。为规避代码冗余、降低后期维护成本最终采用表单组件复用方案通过传参区分新建、编辑两种业务场景根据场景动态适配数据回填、接口请求逻辑大幅精简了代码量提升了开发效率。核心复用逻辑代码示例通过isEdit入参判断场景动态处理表单数据与请求接口// 表单新增/编辑复用核心逻辑 const emit defineEmits([success]) const props defineProps({ // 是否为编辑模式默认新建 isEdit: { type: Boolean, default: false }, // 编辑回显数据 formData: { type: Object, default: () ({}) } }) // 初始化表单 const form ref({ remindType: , remindTime: , remark: , status: 1 }) // 编辑模式回填数据 onMounted(() { if (props.isEdit props.formData) { Object.assign(form.value, props.formData) } }) // 提交表单 const submitForm async () { const api props.isEdit ? editRemindApi : addRemindApi await api(form.value) emit(success) }开发心得代码复用不是后期优化的手段而是开发初期必须考量的核心思路。提前梳理功能共性、抽象通用逻辑能从根源上减少冗余代码降低项目迭代和维护的成本。2. 规范化RESTful后端接口设计为适配前端业务场景本次设计了一套完整、规范的RESTful风格接口覆盖健康提醒的全量增删改查与状态管理需求接口清单如下GET /list - 获取宠物健康提醒列表POST /add - 新增健康提醒PUT /edit/:id - 编辑已有提醒信息DELETE /delete/:id - 删除指定提醒PATCH /status/:id - 切换提醒启用/暂停状态前端接口统一封装代码示例RESTful 规范// api/remind.js 健康提醒接口统一管理 import request from /utils/request // 获取提醒列表 export const getRemindList (params) request.get(/remind/list, { params }) // 新增提醒 export const addRemindApi (data) request.post(/remind/add, data) // 编辑提醒 export const editRemindApi (data) request.put(/remind/edit/${data.id}, data) // 删除提醒 export const deleteRemindApi (id) request.delete(/remind/delete/${id}) // 切换提醒状态PATCH 局部更新 export const changeRemindStatusApi (id, status) request.patch(/remind/status/${id}, { status })本次接口设计重点遵循REST语义规范同时兼顾前后端协作效率核心思考点如下状态更新接口选用PATCH而非PUT贴合REST设计理念PUT适用于完整资源替换PATCH更适配局部字段状态更新场景接口语义更严谨统一所有接口的返回数据格式标准化状态码、提示信息与返回参数让前端数据处理逻辑更统一、简洁对所有需要权限校验的接口统一配置JWT身份验证保障接口访问安全规避未授权操作风险。3. 开发踩坑接口前缀重复配置问题在前后端联调阶段出现了接口请求路径异常的问题请求地址自动拼接为/api/api/remind/xxx导致接口404请求失败。经过逐一排查配置文件最终定位问题根源前端request.js中已全局配置基础请求前缀baseURL: /api而单独的API接口文件中重复添加了/api前缀造成路径重复拼接。问题配置对比// 全局请求配置 utils/request.js已有统一前缀 const service axios.create({ baseURL: /api, timeout: 5000 }) // 错误写法接口文件重复加 /api 前缀 export const getRemindList () request.get(/api/remind/list) // 正确写法直接书写接口路径即可 export const getRemindList () request.get(/remind/list)经验教训项目配置需明确分层职责全局基础配置与局部接口配置要做好区分避免参数、路径重复配置。联调前需提前梳理配置逻辑可有效规避此类基础性问题提升联调效率。四、UI/UX 原生交互优化探索由于采用纯原生开发无法借助组件库的成熟交互样式因此我针对原生表单控件的短板进行了多项细节优化解决原生控件样式简陋、多浏览器适配不一致的问题大幅提升页面美观度与用户体验。1. 下拉选择框占位文字样式优化原生select下拉框的placeholder样式无法直接精准控制无选中值时文字显示效果生硬。对此我采用动态class绑定的轻量化方案表单无值时为控件添加is-placeholder类自定义浅灰色占位文字样式表单选中赋值后自动移除该样式类切换为常规文字颜色。方案逻辑简洁、无冗余代码完美实现预期效果。核心代码HTMLCSSJS!-- 原生select动态样式控制 -- select v-modelform.remindType :classform.remindType ? : is-placeholder option value disabled请选择提醒类型/option option valuevaccine疫苗提醒/option option valuedeworming驱虫提醒/option option valuephysical体检提醒/option /select style scoped select.is-placeholder { color: #c0c4cc; } select { color: #333; padding: 0 12px; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; } /style2. 原生日期选择器美化适配浏览器原生日期选择器默认样式简陋、统一性差不符合项目视觉规范。我在保留原生选择器核心功能的前提下做了全方位美化优化新增功能图标提示强化视觉引导让用户快速识别输入场景优化空值状态展示自定义占位提示文字解决原生无提示的问题完善鼠标悬停、聚焦交互样式提升操作反馈感隐藏原生突兀的日历图标保留点击唤起日历选择的核心功能兼顾美观与实用性。3. 数字输入框自定义交互优化原生数字输入框的上下加减箭头在Chrome、Firefox等不同浏览器中样式、尺寸表现不一致兼容性差严重影响统一视觉体验。为此我隐藏了浏览器原生控制箭头自主封装自定义加减按钮组件。核心优化代码!-- 自定义数字输入框 -- div classnumber-input button clickminus-/button input typenumber v-model.numberform.day / button clickplus/button /div style scoped /* 隐藏原生上下箭头 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[typenumber] { -moz-appearance: textfield; text-align: center; height: 36px; border: 1px solid #dcdfe6; border-radius: 0; } .number-input { display: flex; align-items: center; } .number-input button { width: 36px; height: 36px; border: 1px solid #dcdfe6; background: #f5f7fa; cursor: pointer; } /style script setup // 自定义加减逻辑 const plus () { form.day form.day 365 ? form.day 1 : 365 } const minus () { form.day form.day 1 ? form.day - 1 : 1 } /script自定义实现后不仅实现了全浏览器样式统一还优化了按钮点击交互逻辑操作手感更流畅彻底解决了原生控件兼容性短板。五、完整的页面效果