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 状态(标记当前商品是否选中)

相关推荐
郭逍遥5 分钟前
GZCTF平台搭建及题目上传
笔记·学习·ubuntu·docker·容器
Naiva9 分钟前
【电子基础】运算放大器应用笔记02(差分放大器低端电流采样方案,唐老师讲电赛电流检测笔记)
笔记
平乐君1 小时前
Leetcode 刷题笔记 图论part05
笔记·leetcode·图论
DevSecOps选型指南2 小时前
2025新笔记:数字化转型建设的开源安全治理实践
笔记·安全·开源
落笔画忧愁e3 小时前
数据通信学习笔记之OSPF其他内容1
笔记·学习
xgxseven3 小时前
C++类与对象的第二个简单的实战练习-3.24笔记
开发语言·c++·笔记
weixin_502539854 小时前
rust学习笔记18-迭代器
笔记·学习·rust
GoldenaArcher4 小时前
lodash 学习笔记/使用心得
javascript·笔记·学习
XYN615 小时前
【嵌入式学习2】内存管理
c语言·开发语言·jvm·笔记·嵌入式硬件·学习
寻丶幽风5 小时前
论文阅读笔记——MTGS: Multi-Traversal Gaussian Splatting
论文阅读·人工智能·笔记·自动驾驶·模拟器·多轨迹驾驶场景