# gulishop-client **Repository Path**: newsegmentfault/gulishop-client ## Basic Information - **Project Name**: gulishop-client - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-11 - **Last Updated**: 2022-04-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # gulishop-client day01 初始化项目 需要认识每个文件夹下下问价都是什么意思 vue.config.js package.json package-lock.json等文件的意思 public文件夹 和 src/assect 文件夹的区别? 都是放静态文件的,public下的文件不会被webpack处理 git 分支操作 - 把项目关联到了远端仓库(按git页面初始化提示关联本地项目) 路由组件(Home、Search、Login、Register)和非路由组件(Header、Footer) 路由器书写步骤: 1.安装 2.注册使用 3.创建一个路由器对象抛出 4.挂到创建VM实例 路由组件注册在路由器当中 声明式导航和编程式导航(Header组件跳转Home和Search) router-link去跳转 this.$router.push 和 this.$router.replace 注意的点: 路由跳转携带参数 "/search/aa?keyword1=aa" params参数需要占位 /search/:keyword? query参数不用占位 keyword1=aa day02 Footer组件不是每个页面都显示,注册和登录页面不显示,route配置meta属性让Footer隐藏 router传参注意问题(比较多) 翻文档,例如说: params参数非必穿怎么配置? -> /search/:keyword? 加问好 使用编程式导航跳转页面携带params参数? -> 只能使用name属性跳转 重复点击路由报错问题? -> 重写push方法,replace方法 Home组件的拆分(TypeNav和其他组件) 定义、注册、使用,注意首页的通用组件在全局注册、不通用组件在Home组件注册 postman测接口 测试TabNav三级分类接口、测试了一个login接口 axios二次封装 创建一个axios实例来进行网络请求,可以配置拦截器 api文件夹 所有请求函数都写在同一个地方方便管理 跨域代理处理 在vue.config.js配置跨域代理 vuex模块化 把请求会来的TayNav数据放vuex中,这里可以对vuex进行模块化 模块化后 actions、mutations、getters使用映射的方式都不变, mapState变成对象形式 day03 三级分类的展示 获取数据,把vuex当中的数据拿到组件显示 this.$store.state.home.categoryList (组件中拿数据) mapState({ categoryList: state => state.home.categoryList }) (组件中拿数据) 三级分类的显示和隐藏 鼠标移入显示、移出隐藏,使用 isShow变量来控制 防抖和节流(要理解,需要会手写源码) lodash使用 - 使用了lodash的节流函数 跳转search页 携带参数 使用 router-link 跳转(放弃这个方案) 使用 $router.push 跳转(放弃这个方案) 事件委派,委派给父级元素使用 $router.push 跳转 day04 TavNav 适配了 Home 页面不隐藏组件 Search 页面隐藏组件 通过当前路由来判断的, $route.path == '/home' 让isShow不好使 添加了过渡效果 1.过渡内容放 transition 标签 2.添加三个类名 3.用数据来控制这个类名 每次home和search页面切换的时候,都发请求 把发请求的任务放在一个不销毁的组件App解决 先点击三级分类后点击搜索不能让三级分类参数丢失 Header组件中搜索$router.push({ path: "/search" })页面把之前的query参数携带上 先点击搜索后点击三级分类不能让搜索参数丢失 在TapNav组件中$router.push({ path: "/search" })不要丢掉已存在params参数 ----- 到这里 TapNav 结束了 --- 首页展示 - ListContainer 和 Floor 组件使用Swiper展示 mockjs使用 -> 模拟接口返回ListContainer数据 Floor数据 ListContainer和Floor三连环(数据放到vuex中actions、mutations、state) Floor数据展示 Swiper组件使用 注意:使用的是6版本,引入的文件 swiper-bundle.min.js 和 swiper-bundle.min.css 其他按照官方文档走即可,包括配置项 使用的时候最终解决方案 watch监听数据变化,数据变化后使用 $nextTick 等待DOM更新后,初始化swiper实例 对swiper组件进行封装 ---- 前四天都是首页 ---- day05 --- Search --- 注意:写search页面的时候先搞数据、再搞交互 请求数据、三连环(把数据放到store当中)、展示数据 展示 面包屑、品牌、属性、商品列表 交互(先搞的数据、再搞的交互) searchParams: { category3Id: "", // 三级分类 categoryName: "", // 三级分类 keyword: "", // 搜索按钮的数据 props: [], // 商品的属性数据 ["1:1700-2799:价格", "2:6.65-6.74英寸:屏幕尺寸"], trademark: "", // 品牌的数据 "4:小米" order: "1:desc", // 排序的数据,需要有默认 pageNo: 1, // 当前页 pageSize: 2, // 每页数量 }, 这个数据发请求用的,同时页面上的展示和交互也是依赖这个数据的 1. 三级分类发送请求 和 面包屑展示、删除 2. 搜索条件 和 面包屑展示、删除 3. 品牌条件 和 面包屑展示、删除 4. 属性条件 和 面包屑展示、删除 day06 5. order 排序处理 Search页面的两个优化 1.点击浏览器的回退按钮,直接从search页返回home页 2.发送请求接口参数优化 - 把空串的变成undefined 分页器 分析需要的数据 当前页 每天数量 总条数 连续数 PageNo PageSize(计算PageTotal) total pageCout 计算起始页和结束页的位置 startEnd() { restun { start, end } } 分页器数据展示(每个按钮都暗藏玄机) 分页器点击事件 @ChangePage ---- search页面结束 ---- day07 ---- 开始详情页 detail 展示商品详细信息 ---- 静态组件(直接拿现成) 动态初始化数据展示(掉接口、拿数据、三连环) 交互 放大镜(拿到鼠标位置算就行) 缩略图列表 - swiper -> swiper之前封装的组件(用到了slot) 属性选择交互(排他思想) 加入购物车input输入框文本内容限制 day08 详情页detail - 添加购物车逻辑 当点击添加购物车的时候,把商品添加到了后端的shopCart这张表里面 添加成功后跳转添加购物车成功页面 addCartSuccess 需要携带商品数量(路由参数) 个 商品信息(sessionStorage)到这个页面 点击查看购物车列表 跳转购物车页面 注意,进入购物车没有 商品的 列表,为什么? 因为后端识别不出来商品是给谁添加的 解决: userTempId 用户临时标识解决的 特点: 1. 唯一 2. 不能老变 怎么做: 1.在localStorage中存一个创建的uuid,如果没有就创建,有就使用 2.刷新页面放到store当中,之后获取都从store当中获取(内存获取) 3.在发送请求的请求头携带(在axios的请求拦截器中配置) 展示购物车列表数据 注意: 展示的有不需要计算的数据、需要计算的数据(全选、选中几个、总价格) day09 购物车交互 1. 单个商品的选中状态 2. 单个商品数量修改 问题: 商品详情页添加商品 和 购物车修改商品数量 调用的一个接口,那么为什么购物车修改商品数据传的是差值,而 商品详情页直接传 个数? 起始两个页面传的都是差值, 在购物车页面我们相当于对已有商品数量进行修改,在原有的基础上进行修改 而商品详情页输入的数量,数据库中是没有这个商品的,相当于商品数量是0,所传的也是差值 在修改商品个数失败的时候,需要强制更新页面,回到之前的数据,用 this.$forceUpdate() 强制更新页面 3. 单个商品删除 4. 批量选中商品 请求错误需要注意: input checkbox多选框,使用 this.$forceUpdate() 无法回到修改前的状态,如何解决? 1. 获取到之前的元素手动去修改DOM元素的checked属性,让input框回到之前的状态 2. 使用 :checked 和 @click.prevent 阻止默认行为,不让input的checkbox选中,然后去请求数据,让数据更新,然后去重新计算选中状态 5. 批量删除商品 ---- 购物车逻辑 ---- 购物车点击结算要到 /trade 交易页面,此时涉及钱了,需要用户登录了,走的用户登录流程 注册页面 注意: 验证码的逻辑(正式:发请求给后端,后端调用第三方云服务,完了给手机发短信,然后输入) 输入内容的校验(简单校验) 登录 调用接口登录 注意:只要有token信息返回,代表登录成功 登录成功跳转首页,需要展示用户信息,什么时候获取用户信息呢?跳转的时候 day10 路由守卫 路由守卫的理解: 是什么?为什么?怎么做? 参考官网,重点关注 全局前置 和 路由独享(这两个用的比较多) 全局前置(非常重要***)在里面写了路由跳转的逻辑 查看 router/index.js 文件注释 退出登录 注意:发请求告诉后端token失效,需要清除个人信息和token(localStorage中也需要清除) ---- 登录注册结束 ---- 跳转交易(/trade)页面 发请求、拿数据(两个接口,一个拿地址、一个商品)、展示 注意: 调接口没有传参,怎么知道我的购物车里面的商品? 通过发请求携带的token区分出你是谁,找到你购物车中选中的商品拿回来 day11 交易页面点击结算创建订单 需要发请求创建订单(注意参数,需要有交易编号),返回数据为订单编号 跳转订单页面,路由携带订单号 订单页面(/pay) 获取数据,拿到支付信息 点击立即支付弹窗显示支付二维码 1. qrcode 2. 弹窗(element-ui) 支付的逻辑 1.创建二维码 2.弹出弹窗 3.轮询,使用定时器训后后端"这小子掏钱没" 当付款成功后跳转支付成功页面 支付成功页面(/paysuccess) 点击按钮去个人中心 个人中心(/center) 注意: 使用到了二级路由 myOrder、groupOrder myOrder中表格的 rowspan 和 colspan 合并单元格 分页器 最后:把跳转页面的限制条件在路由守卫中加上(全局前置、路由独享) day12 图片懒加载 路由懒加载 表单验证