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

一、本周工作总结

本周核心负责宠声健康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类，自定义浅灰色占位文字样式；表单选中赋值后，自动移除该样式类，切换为常规文字颜色。方案逻辑简洁、无冗余代码，完美实现预期效果。

核心代码（HTML+CSS+JS）：

<!-- 原生select动态样式控制 --> <select v-model="form.remindType" :class="form.remindType ? '' : 'is-placeholder'"> <option value="" disabled>请选择提醒类型</option> <option value="vaccine">疫苗提醒</option> <option value="deworming">驱虫提醒</option> <option value="physical">体检提醒</option> </select> <style scoped> select.is-placeholder { color: #c0c4cc; } select { color: #333; padding: 0 12px; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; } </style>

2. 原生日期选择器美化适配

浏览器原生日期选择器默认样式简陋、统一性差，不符合项目视觉规范。我在保留原生选择器核心功能的前提下，做了全方位美化优化：

• 新增功能图标提示，强化视觉引导，让用户快速识别输入场景；

• 优化空值状态展示，自定义占位提示文字，解决原生无提示的问题；

• 完善鼠标悬停、聚焦交互样式，提升操作反馈感；

• 隐藏原生突兀的日历图标，保留点击唤起日历选择的核心功能，兼顾美观与实用性。

3. 数字输入框自定义交互优化

原生数字输入框的上下加减箭头在Chrome、Firefox等不同浏览器中样式、尺寸表现不一致，兼容性差，严重影响统一视觉体验。为此我隐藏了浏览器原生控制箭头，自主封装自定义加减按钮组件。

核心优化代码：

<!-- 自定义数字输入框 --> <div class="number-input"> <button @click="minus">-</button> <input type="number" v-model.number="form.day" /> <button @click="plus">+</button> </div> <style scoped> /* 隐藏原生上下箭头 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -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>

自定义实现后，不仅实现了全浏览器样式统一，还优化了按钮点击交互逻辑，操作手感更流畅，彻底解决了原生控件兼容性短板。

五、完整的页面效果