109~133笔记

Toast 轻提示

注册安装:

import { Toast } from 'vant'

Vue.use(Toast)

两种使用方式

① 导入调用(组件内或非组件中均可)

import { Toast } from 'vant'

Toast('提示内容')

② 通过this直接调用(必须组件内)

本质:将方法,注册挂载到了Vue原型上 Vue.prototype.$toast = xxx

this.$toast('提示内容')

import { Toast } from 'vant'

Toast('嘿嘿,你好哇')

全部导入

import Vant from 'vant'

import 'vant/lib/index.css'

插件安装初始化:内部会将所有的vant所有组件进行导入注册

Vue.use(Vant)

登录功能

步骤分析:

阅读接口文档,封装登录接口

登录前的校验(手机号,图形验证码,短信验证码)

调用方法,发送请求,成功添加提示并跳转

响应拦截器统一处理错误提示:通过响应拦截器,统一处理接口的错误提示

问题:每次请求,都有可能会错误,就都需要错误提示

说明:响应拦截器是咱们拿到数据的第一个数据流转站,可以在里面统一处理错误。只要不是 200,就给默认提示,抛出错误

添加请求 loading 效果:统一在每次请求后台时,添加 loading 效果

背景:有时候因为网络原因,一次请求的结果可能需要一段时间后才能回来,此时,需要给用户添加 loading 提示。

添加 loading 提示的好处:

节流处理:防止用户在一次请求还没回来之前,多次进行点击,发送无效请求

友好提示:告知用户,目前是在加载中,请耐心等待,用户体验会更好

实操步骤:

请求拦截器中,每次请求,打开 loading

响应拦截器中,每次响应,关闭 loading

所有的路由在真正被访问到之前(解析渲染对应组件页面前),都会先经过全局前置守卫

只有全局前置守卫放行了,才会到达对应的页面

全局前置导航守卫

to: 到哪里去,到哪去的完整路由信息对象(路径,参数)

from: 从哪里来,从哪来的完整路由信息对象(路径,参数)

next(): 是否放行

(1) next() 直接放行,放行到to要去的路径

(2) next(路径) 进行拦截,拦截到next里面配置的路径

页面访问拦截

目标:基于全局前置守卫,进行页面访问拦截处理

路由导航守卫 - 全局前置守卫

所有的路由一旦被匹配到,都会先经过全局前置守卫

只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面内容

访问权限页面时,拦截或放行的关键点?→ 用户是否有登录权证 token

router.beforeEach((to, from, next) => {

  1. to 往哪里去,到哪去的路由信息对象

  2. from 从哪里来,从哪来的路由信息对象

  3. next() 是否放行

next()调用,就是放行

next(路径) 拦截到某个路径页面

})

加入购物车 - 封装数字框组件:封装弹层中的数字框组件

分析:组件名 CountBox

静态结构,左中右三部分

数字框的数字,应该是外部传递进来的 (父传子)

点击 + - 号,可以修改数字 (子传父)

使用 v-model 实现封装 (:value 和 @input 的简写)

数字不能减到小于 1

判断 token 是否存在

  1. 如果 token 不存在, 弹确认框

  2. 如果 token 存在,继续请求操作

消息确认用于确认消

confirmButtonText 确认按钮文案

cancelButtonText 取消按钮文案

购物车模块

说明:购物车 数据联动关系 较多,且通常会封装一些小组件,所以为了便于维护,一般都会将购物车的数据基于 vuex 分模块管理

需求分析:

基本静态结构 (快速实现)

构建 vuex cart 模块,获取数据存储

基于 数据 动态渲染 购物车列表

封装 getters 实现动态统计

全选反选功能

数字框修改数量功能

编辑切换状态,删除功能

空购物车处理

加入购物车

goodsId => 商品id

goodsSkuId => 商品规格id

后台返回的数据中,不包含复选框的选中状态,为了实现将来的功能

需要手动维护数据,给每一项,添加一个 isChecked 状态(标记当前商品是否选中)

相关推荐
饕餮争锋2 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式
萝卜青今天也要开心2 小时前
2025年上半年软件设计师考后分享
笔记·学习
吃货界的硬件攻城狮3 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习
蓝染yy3 小时前
Apache
笔记
lxiaoj1114 小时前
Python文件操作笔记
笔记·python
半导体守望者5 小时前
ADVANTEST R4131 SPECTRUM ANALYZER 光谱分析仪
经验分享·笔记·功能测试·自动化·制造
啊我不会诶6 小时前
倍增法和ST算法 个人学习笔记&代码
笔记·学习·算法
逼子格6 小时前
振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
笔记·嵌入式硬件·硬件工程·硬件工程师·硬件工程师真题·multisim电路仿真·震荡电流
一条破秋裤7 小时前
一份多光谱数据分析
笔记·数据挖掘·数据分析
zstar-_7 小时前
【算法笔记】6.LeetCode-Hot100-链表专项
笔记·算法·leetcode