爱喝水的小鼠-优快云博客

① 展示二维码。QRcode可以在npm官网搜索QRcode；引入及使用// 生成二维码，let url = await QRcode.toDataURL(this.payInfo.codeUrl) //这个url就是图片地址② 获取订单支付状态reqPaymentState接口// 查询支付订单状态 /api/payment/weixin/queryPayStatus/{orderId}${

2024-10-07 17:53:56 877

原创 Vue2电商平台(六)、注册登录，请求头配置token，token持久化存储；导航守卫(重点)；组件内守卫、路由独享守卫

无论跳转哪个页面，即使是Search页面，如果没有用户信息，就会发起请求，获取数据并放到仓库重。而在刚进入网站时，路由重定向的就是首页，所以刚进入网站时，就会有一个。数据清空，而Home页重新加载，仍旧发请求获取用户信息，没有token所以会报错。: 在刚进入网站时，重定向到首页，首页会请求用户信息，若此时还未登录，则没有token，请求会报错。本系统就先不弄表单验证了。如果不携带token，发送获取用户信息的请求时，服务器的返回结果是。，但是Search模块并不会发送请求，所以页面的用户信息还是会丢失。

2024-10-07 17:52:28 921 1

原创 Vue2电商平台(五)、加入购物车，购物车页面

进入购物车页面时，应将用户的id传给后端，后端根据用户id检索出该用户的购物车商品信息，传递给前端用于展示及进行其他操作。由于没有修改多个商品的接口，所以思路是多次调用打勾单个商品的接口，把每个商品的勾选状态改为当前全选框的状态。所以如果只将输入框里的最终数量传过去的话，商品数量只会是最后一次将该商品添加到购物车里时的选择的数量。因为在购物车页面，其他的操作也会重新向服务器发请求，所以这里将放请求的操作包装成一个函数。没有删除多个商品的接口，所以思路是多次调用删除单个商品的接口，将选中的商品全都删除。

2024-10-07 17:50:34 1723

原创 Vue3(六)、其他API，Vue3组件Teleport ，Suspense；全局API转移到应用对象；Vue3非兼容性改变

通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式。

2024-09-28 10:57:50 965

原创 Vue3(五) 组件通信大汇总

props；自定义事件；插槽slot；这几个和Vue2区别不大；Vue3的mitt,v-model(重点)，$attrs,$refs与$parent; provide与inject；pinia

2024-09-27 23:30:24 1123 1

原创 vue3(四)、Pinia(集中式数据管理，类似于Vue2的vuex)

搭建pinia并准备案例。pinia存储数据(state是个函数)，读取数据；修改store数据的三种方式；actions的方法如何调用；配置getters并读取getters数据。storeRefj将state数据转化为响应式数据。$subscribe监听数据。pinia的组合式写法

2024-09-27 10:19:17 887

原创 Vue3(三)路由基本使用、工作模式(history,hash)、query传参和param传参、props配置、编程式路由导航

和vue2区别不大，就是一些语法不太一样了。$route和$router变成两个hook。

2024-09-27 09:15:56 1421

原创 Vue2电商项目(四) Detail模块

路由配置文件拆分；解决跳转页面时滚动条还在下方。放大镜及下方轮播图：读取vuex数据的经典错误undefined；选择售卖属性：排他思想；购买产品个数的加减操作。

2024-09-24 09:04:40 1122

原创 Vue3(二)计算属性Computed，监视属性watch，watchEffect,标签的ref属性，propos属性，生命周期，自定义hook

计算属性computed:简写+完整写法；监视属性watch的五种情况，最后总结了什么情况下是默认开启深度监听，什么情况需要手动开始深度监听；watchEffect没什么重点；标签的ref属性：用在普通标签上是打标识(很神奇)，用在组件标签上可以实现组件传值。propos实现父给子传值，重要！；生命周期没啥好说的；自定义hook真正体现了组合式API的风格

2024-09-23 22:06:56 1310 3

原创 Vue3(一) Vite创建Vue3工程，选项式API与组合式API；setup的使用；Vue中的响应式ref，reactive

选项式API与组合式API的对比；setup的使用，语法糖；setup与选项式API的使用。Vue中创建响应式数ref，reactive。toRef与toRefs

2024-09-19 14:39:23 1349

原创 AJAX(一）HTTP协议(请求响应报文)，AJAX发送请求，请求问题处理

原生AJAX发送Get，Post请求。响应JSON数据的两种方式。如何捕获AJAX请求超时与网络异常的清空。abort函数取消请求。解决请求重复发送的问题

2024-09-17 14:30:35 1754

原创 Vue2电商平台项目 (三) Search模块、面包屑(页面自己跳自己)、排序、分页器！

Search模块：需要注意在读取vuex数据时，要给一个空的值，以防undefined的错误；Object.assign整理参数；面包屑模块：search页面自己跳自己。排序模块：绑定class样式；分页器模块：全是重点，好好看一下

2024-09-16 19:26:19 1324

原创 JS高级(三)、深浅拷贝，异常处理，this指向总结，改变this指向；节流和防抖

浅拷贝：object.assign(),解构赋值；深拷贝：递归函数，lodash库的cloneDeep，JSON字符串处理。异常处理(throw, try catch finally)。this指向总结及改变this指向；节流、防抖

2024-09-16 17:19:19 774

原创 JS高级(二)、深入对象：构造函数；Object，Array，String，Number包装类；原型对象，原型链

深度对象：构造函数、实例成员、静态成员；包装类：Object、Array、String、Number的一些方法；原型，原型继承，原型链。prototype原型对象，__ptoto__对象原型。

2024-09-16 16:54:46 813

原创 JS高级(一)、变量作用域、JS垃圾回收机制；闭包；函数参数；箭头函数(this)；解构赋值

作用域链，剩余参数，扩展运算符，

2024-09-09 08:58:56 1078

原创 Vue2电商项目(二) Home模块的开发

1.事件委托是把全部的子节点【h3、dt、dl】的事件都委派给父节点，如何确定点击的一定是a标签呢2.即使确定点击的是a标签，如何区分是一级、二级、三级分类的标签。解决方法：采用自定义属性WebAPI(一)、自定义属性给a标签加上自定义属性，通过获取到这些自定义属性选择div父节点，绑定点击事件// 跳转search页面// 解构赋值,只有a标签才有这些自定义属性// 组装参数// 当前这个if语句：一定是a标签才会进入if (category1id) { // 一定是a标签：一级分类。

2024-09-07 08:51:17 855

原创 WebAPI(四) BOM；延时函数；JS执行机制(同步异步)；location对象；history对象；navigation对象

异步任务交给异步API进行处理，这部分由浏览器负责，浏览器是多线程的，能够同时监听多个异步任务，看哪个异步任务满足执行条件，将满足执行条件的异步任务推入任务队列中，等待执行栈读取任务队列，执行事件。如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。比如监听点击事件，若点击事件触发，则将该异步任务推入任务队列中，延时函数等待的间隔事件达到3秒了，该异步任务也会推入任务队列中。有，则读入执行栈中执行。首先执行栈中的同步任务，执行完毕，会按次序读取任务队列中的异步任务。

2024-09-07 08:44:32 1229

空空如也

空空如也