Vue2项目
文章平均质量分 94
Vue2项目
爱喝水的小鼠
csdn记录自己的学习内容
展开
-
Vue2电商项目(八) 完结撒花:图片懒加载、路由懒加载、打包的map文件
(弹幕建议按1.3版本)引入使用v-lazy以Search页面展示商品图片为例,当网速较慢,请求数据还会获取到时,商品图片默认显示的是。原创 2024-10-07 17:54:16 · 389 阅读 · 0 评论 -
Vue2电商项目(七)、订单与支付
① 展示二维码。QRcode可以在npm官网搜索QRcode;引入及使用// 生成二维码,let url = await QRcode.toDataURL(this.payInfo.codeUrl) //这个url就是图片地址② 获取订单支付状态reqPaymentState接口// 查询支付订单状态 /api/payment/weixin/queryPayStatus/{orderId}${原创 2024-10-07 17:53:56 · 489 阅读 · 0 评论 -
Vue2电商平台(六)、注册登录,请求头配置token,token持久化存储;导航守卫(重点);组件内守卫、路由独享守卫
无论跳转哪个页面,即使是Search页面,如果没有用户信息,就会发起请求,获取数据并放到仓库重。而在刚进入网站时,路由重定向的就是首页,所以刚进入网站时,就会有一个。数据清空,而Home页重新加载,仍旧发请求获取用户信息,没有token所以会报错。: 在刚进入网站时,重定向到首页,首页会请求用户信息,若此时还未登录,则没有token,请求会报错。本系统就先不弄表单验证了。如果不携带token,发送获取用户信息的请求时,服务器的返回结果是。,但是Search模块并不会发送请求,所以页面的用户信息还是会丢失。原创 2024-10-07 17:52:28 · 481 阅读 · 0 评论 -
Vue2电商平台(五)、加入购物车,购物车页面
进入购物车页面时,应将用户的id传给后端,后端根据用户id检索出该用户的购物车商品信息,传递给前端用于展示及进行其他操作。由于没有修改多个商品的接口,所以思路是多次调用打勾单个商品的接口,把每个商品的勾选状态改为当前全选框的状态。所以如果只将输入框里的最终数量传过去的话,商品数量只会是最后一次将该商品添加到购物车里时的选择的数量。因为在购物车页面,其他的操作也会重新向服务器发请求,所以这里将放请求的操作包装成一个函数。没有删除多个商品的接口,所以思路是多次调用删除单个商品的接口,将选中的商品全都删除。原创 2024-10-07 17:50:34 · 717 阅读 · 0 评论 -
Vue2电商项目(四) Detail模块
路由配置文件拆分;解决跳转页面时滚动条还在下方。放大镜及下方轮播图:读取vuex数据的经典错误undefined;选择售卖属性:排他思想;购买产品个数的加减操作。原创 2024-09-24 09:04:40 · 1020 阅读 · 0 评论 -
Vue2电商平台项目 (三) Search模块、面包屑(页面自己跳自己)、排序、分页器!
Search模块:需要注意在读取vuex数据时,要给一个空的值,以防undefined的错误;Object.assign整理参数;面包屑模块:search页面自己跳自己。排序模块:绑定class样式;分页器模块:全是重点,好好看一下原创 2024-09-16 19:26:19 · 1213 阅读 · 0 评论 -
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 · 739 阅读 · 0 评论 -
Vue2电商项目平台(一) 项目初始化及路由搭建
项目初始化,创建路由组件,配置路由器,通过路由元meta信息来控制Footer组件的显示与隐藏。Header组件的编程式路由导航原创 2024-09-05 10:53:24 · 1122 阅读 · 0 评论