当前位置：首页 > article >正文

今日总结 2025-01-17

article 2025/1/18 7:23:36

一、学习目标与完成情况

登录权限验证：学习并尝试实现登录权限验证的方法，旨在确保服务端接口在调用时能正确验证 token 的存在性和有效性，同时处理 token 过期的情况。
动态设置导航栏和 tabBar 元素：掌握如何动态设置导航栏标题和 tabBar 角标文字，以增强用户界面的交互性和信息展示的灵活性。
数据验证与正则表达式：熟悉验证身份证号的正则表达式，提升数据输入的合法性验证能力。
组件使用：学会使用 uni-swipe-action 侧滑组件，为用户提供便捷的操作交互功能。

二、具体学习内容

（一）权限验证

统一添加 token：在请求拦截器中读取 Pinia 存储的 token 数据，并添加到请求头中。需注意在组件外调用 useXXXStore 时确保 pinia 实例激活，通过将其调用放在 pinia 安装后执行的函数中实现。在【我的】页面进行接口测试，观察不同登录状态下请求头 Authorization 的情况。
处理 token 过期：约定接口返回状态码为 401 表示 token 不存在或过期，在响应拦截器中读取该状态码，以确定是否需要跳转到登录页面，并在登录成功后跳转回原页面。

（二）小程序手机号一键登录

实现思路与步骤：利用小程序 button 的内置操作类型 "getPhoneNumber"，通过修改其 open-type 属性为 "getPhoneNumber" 并监听 getphonenumber 事件，获取微信绑定的手机号码数据，同时调用 wx.login 获取临时登录凭据 code，最终调用登录接口获取 token。

（三）我的页面

页面布局：
- 使用多色图标配合 uni-list 组件，使用自定义导航栏。
- 封装了自定义组件 custom-section，作为全局组件且符合 easycom 组件规范，满足自定义标题、样式及右侧箭头显示的需求。
个人信息与退出登录：
- 退出登录操作主要是将本地存储的 token 清空并跳转到登录页面，使用 uni.reLaunch () 清除页面历史，防止用户返回。

（四）家庭档案

创建分包：为家庭档案功能创建相应的分包，以优化项目结构。
患者列表：
- 在【我的】页面添加链接跳转到患者列表页面。
- 调用接口获取患者数据并渲染，使用身份证号脱敏正则 /^(.{6}).+(.{4})$/ 进行数据处理，注意最多添加 6 名患者及后续操作限制。
- 数据获取在 onShow 生命周期进行。
添加患者：
- 以表单形式填写患者信息，包括姓名、身份证号、性别等。
- 进行表单数据验证，包括使用不同的正则表达式验证中文姓名（^[\u4e00-\u9fa5]{2,5}$）和身份证号（^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$），还涉及性别验证逻辑，根据身份证号第 17 位判断性别并与用户勾选性别对比。
- 提交数据时，根据接口文档封装接口调用方法，添加成功后跳转到患者列表页面或调用 uni.navigateBack 返回到上一页。
删除患者：
- 使用 uni-swipe-action-item 组件监听用户的点击事件，获取待删除数据的 ID 和索引。
- 调用接口删除服务器上的患者数据，同时同步删除 Vue 中保存的本地数据。
编辑患者：
- 编辑患者与添加患者使用相同页面，但在地址中包含患者 ID，使用 defineProps 或 onLoad 生命周期方法获取页面地址参数。
- 利用获取的 ID 查询患者信息，修改页面导航栏标题，并在提交表单数据时根据是否有 ID 判断是添加还是编辑操作，更新数据后调用相应的接口并显示相应的提示信息，最后跳转到患者列表页面。

三、重点难点

（一）重点

权限验证机制：确保请求拦截器和响应拦截器的设置能准确添加和处理 token 信息，保证用户在不同登录状态下的接口调用的安全性和流畅性。
数据验证与提交逻辑：在添加和编辑患者信息时，运用合适的正则表达式对用户输入数据进行准确验证，确保数据合法性，同时根据不同情况（添加 / 编辑）调用相应的接口进行数据处理。
组件交互操作：熟练掌握 uni-swipe-action 组件的使用，为用户提供方便的删除操作交互，同时确保删除操作的逻辑完整性，包括服务器和本地数据的同步删除。

（一）难点

权限验证的细节处理：在不同组件和页面的复杂环境下，如何确保 pinia 实例正确激活和 token 的读取添加操作的准确性，以及在不同接口请求和响应中的拦截处理逻辑的一致性和可靠性，需要对 Pinia 和拦截器有深入理解。
数据验证的复杂逻辑：特别是涉及身份证号的性别判断，需要在验证过程中进行额外的逻辑处理，对身份证号第 17 位的提取和判断逻辑较为复杂，容易出错。
页面状态和数据更新的一致性：在编辑患者时，根据页面地址参数进行数据查询和更新操作，需要准确处理页面状态切换和数据更新的关系，确保用户操作和页面展示的一致性，避免出现数据显示错误或操作异常。

四、解决方法与收获

解决方法：
- 对于权限验证问题，通过仔细阅读文档和代码注释，逐步梳理 pinia 实例的激活条件和拦截器的执行流程，多次测试不同的请求场景，不断调整代码以确保拦截逻辑的正确性。
- 在数据验证方面，深入学习正则表达式的使用，对于复杂逻辑（如身份证号的性别判断），编写详细的测试用例，通过测试驱动开发来保证验证逻辑的准确性。
- 针对页面状态和数据更新问题，使用详细的日志记录和断点调试，确保在不同页面生命周期和组件交互中准确判断页面状态，合理调整数据的获取和更新时机。
学习收获：
- 增强了在 uni-app 开发中对前后端交互的安全处理和权限管理的理解和实践能力，包括 token 的存储、使用和验证。
- 熟练掌握了多种表单数据验证技术，提高了对用户输入数据的处理和验证能力。
- 学会了使用更复杂的组件操作和页面数据的动态更新，增强了用户界面的交互和操作体验的开发能力。