# sph **Repository Path**: hwj0309/sph ## Basic Information - **Project Name**: sph - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-11-16 - **Last Updated**: 2021-11-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### search ```js 1- 如果使用命名路由，在params中的属性的值为空时，url会对应不上相应组件 解决: let options = { name:"search", params:{} } let keyword=this.keyword if(keyword) options.params.keyword=keyword this.$router.push(options) ``` ### typenav ```js 2- typenav数据动态化 - axios实例，api中请求 - 分仓库 - 在typenav组件中渲染数据 ``` ```js 3- 使用vue实现二三级分类显示隐藏拿到id - mouseenter、mouseleave事件（这两个事件是没有冒泡的，区别于mouseover、mouseout） - 考虑节流（throttle），频繁触发事件会更耗电耗流量，引入lodash，使用按需引入（一个js文件就是一个函数） - 配置项中的函数方法不能是箭头函数，否则会丢失this - 使用:class，是否添加类名来控制显示隐藏 ``` ```js 4- 解决节流导致的二三级面板不消失问题 - 将currentIndex分为-2 -1 大于-2 三个状态 5- 点击三级分类任意一级使用声明式导航跳转到search页面 否则使用router-link太耗性能 6- 跳转携带数据（回顾一下路由中props） 7- 合并search的params和query，两边都要操作(√) - 合并注意项: - 当配置项（params、query等）中的属性的值为空时，url会对应不上相应组件 - 所以在合并前必须先将空值的属性删除 8- typenav中的a标签事件委托(√) - 出现问题 点击一级分类某一行能跳转但无法携带数据 只有点击a标签才能携带数据 ``` ```js 9- 一级列表的显示与隐藏（除了home，home一直显示） - v-show & 路由元信息 - mouseenter & mouseleave - 过渡样式（三个条件） 注意，要加!important，因为优先级低，要提高优先级 - 注意修改了typenav，不能让home中的typenav也鼠标进入显示，鼠标移除隐藏 - 使用name区分 ``` ### 轮播图（listContainer） ```js 1- mock数据 2- home分仓库发请求 3- 请求都在app发，减少请求次数 4- listContanier中拿到数据渲染(√) 5- 先完成静态页面轮播，再使用mock完成渲染，并解决相关问题 - 重新拿回原来的固定图片，先不要mock - 专门做轮播的库swiper npm i swiper@6.8.4 引入css，js 确定html结构 mounted中copy js代码 删除direction属性 - 重新使用mock - 注意：mounted中不一定完成挂载，但一般初始化渲染基本上能完成 请求数据在app中，所以初始化，不一定banners数组中有数据 - 解决：使用Vue.nextTick([callback])或者vm.$nextTick([callback]) 在某个数据使Dom更新完立即调用回调 - watch监听banners，在hanlder函数中写该api Vue.prototype.$nextTick - 解决使用类名导致其他轮播也有效果问题，使用ref Swiper构造函数的第一个参数可以是classname也可以是dom节点 - 轮播效果多处使用，可以封装公共轮播组件 components、util - 传对象给轮播组件，指定是否自动轮播，是否loop循环 ``` ### Floor ```js 1- 动态化楼层数据，mock 2- 在home组件中读取数据，渲染楼层个数，组件传参 将请求回来的数据在getters中进行改造 注意：floors是一个数组，需要循环改里面的对象属性 轮播组件中，监听的immediate必须要有 3- 将图片放到public中(√) ``` ### search ```js 1- 创建公共的分页组件 - 需要外部传的参数props中: 总条数totalSize、每页显示多少条pageSize、连续页码数 外部传入的当前页（会同步内部的当前页） - 内部参数data中: 总页数totalPages计算属性、当前页数currentPage、连续页码的起始&结束页计算属性 - 计算内部逻辑 开始页和结束页 - 渲染连续页 - 上一页按钮是否禁用 - 1和最大页按钮是否要显示 - ...按钮是否显示 - 公共组件触发外部使用它的组件页面发生重新渲染 使用emit on，传递当前页 pageChange - 外部页面发生重新排序，会重新改变当前页，重置为第一页 - 两个监听，监听当前页更新当前页，监听外部传入的当前页改变当前页(√) 2- 拆分出search组件，动态化search - 路由中将props传过去 - 请求商品列表 post请求 /api/list 带参数 - search分仓库，actions中发请求 请求中要拿总页数，goodslist - search组件中mounted调用请求（初始化） - 渲染商品列表 - 参数变化以及分页都需要请求数据重新渲染页面 参数 url变化 监听$route（加个方法，当路由变化，更新options中的属性，更新前需要删除原来的路由相关信息，分页也要回到第一页） 分页 pageChange事件中请求 goodslist没有数据时不显示分页 - 请求回来的列表没有数据时不显示分页 ``` ### bug ```js 1- 遗留问题，事件委托 扩大导航热区 2- 在search中，点完三级分类，隐藏该面板 判断是否从search去search 调用隐藏一级分类的方法 3- 重复点击三级分类的同一个a标签，无法回到第一页问题 可以给路由信息添加hash 搜索按钮、三级分类 ``` ### search中的bread ```js 1- 路由中options中的信息就是bread要渲染的 v-show 对象的删除和添加不会引起界面改变 需要使用set和delete方法 2- 点击bread关闭按钮，重新渲染 - 添加事件关闭（关键字、三级分类） 同步url、重新发送请求、分页回到第一页 相当于重新跳转search组件 - 清空头中搜索的关键字 总线 - 清空完搜索框，再次输入不点击搜索点击三级分类时需要携带该参数 keyword入仓库 ``` ### search中的selector ```js 1- 请求在search已经发了，拿出所需数据渲染 获取并渲染品牌和属性列表 点击品牌，商品过滤，即获取名称时同时重新发送请求 注意请求格式、分页回到第一页要写 避免重复添加，避免重复点击 点击关闭品牌，过滤商品 重新发请求，回到第一页 点击属性，商品过滤 添加bread，重新发请求，回到第一页 避免重复添加，避免重复点击 ``` ### search中的order(√) ```js 1- mock数据，有固定格式 - 请求在action的上一个方法中调用，因为要根据商品实时变化 2- 在search拿到数据渲染 3- 升序降序派生排序信息，计算属性 4- 添加点击事件，点击同一个按钮升降序改变，切换按钮改变选中 发送请求 5- 抽成公共组件 ``` ### detail ```js 1- 拆分详情页 2- 定义路由，动态路由 3- 给商品添加事件跳转 4- 五个子路由，注意占位 5- 滚动行为，路由器配置 第一次到detail页面，默认显示info，也需要到最顶部 看是否是重定向来的，to.redirectedFrom 6- linkActiveClass配置，更换class，加给a标签，删除li上的样式 7- 配置api接口、分仓库detail.js getDetails 8- 动态化detail - 唯一合法方式：用户从search跳转到detail 所以虽然detail是动态路由，也可以在mounted中发送请求 detail组件之间路由切换不可能存在 - 数据要categoryView以及skuInfo 对象.对象.属性 可能会出现undefined，要处理，去getters改造一下数据 小图列表中，该数组渲染也可能出现undefined，所以也整个计算属性 - 数据渲染 ... - 销售属性切换选择 getters再拿对应数据 渲染属性 是否选择看isChecked 切换按钮选择按钮 添加mutations，去修改属性列表，修改isChecked，先排他 在getters记录被选中的按钮信息（属性值全部信息、属性id） getters中方法的第二个参数是getters - 加入购物车物品个数 - 放大镜，插件 - 小图列表，看文档swiper 一页显示几张，滑几张 点击小图换放大镜图，事件，父子组件传参 小图选中样式 - 点击加入购物车，跳转到购物车 拆分组件购物车 注册路由 添加事件 数据如果去仓库拿，刷新会丢失，所以不可以用仓库 路由加载都是异步的，路由懒加载都是异步的，但是push的返回值是一个Promise，，如果后续还有代码加await 但是还是内存级别的，刷新会重置 url可以带数据，但是不能带很多 可以使用sessionStorage 发送添加购物车请求，不需要返回值，不用入仓库，直接组件发 添加api 看文档 发送请求 ``` ### addtocart ```js 1- 实现两个按钮 使用声明式导航 - 回到详情页，商品id带一下 - 跳到shopcart ``` ### shopcart ```js 1- 拆分组件 2- 获取购物车列表请求 api 分仓库，注册，判断code和对象 mounted发请求 拿不到数据，因为之前加进去的数据，并不知道加给谁 在detail所对应的请求中，添加请求头，userTempId 请求头可以在拦截器中写，因为其他请求不需要用，写了也没事 uuid随机唯一，存到localStorage 在购物车请求中也通过请求头拿对应数据 在拦截器中写，拿第三方库生成uuid，在未登录登录时uuid不变，退出登录时uuid清空 3- 渲染shopcart 4- 切换商品选中状态以及删除对应商品 api 请求，直接发，不用放仓库，注意id 5- 全选、全不选 getters 商品全选，全选按钮选中 全选按钮选中，商品全选 全不选 自己造接口 Promise.all() 6- 删除所选 7- 更改数量 接口中的skuNum是增量，不是总量 分清总量、增量 8- 已选择几件商品 总数量 ``` ### 登录注册 ```js 1- 验证 2- 注册 请求不入仓库 api接口 短信验证码 注册接口 获取验证码按钮，默认不允许点击，计算属性 加方法 倒计时 开始隐藏，结束隐藏 注册完请求，跳转登录 3- 登录 api、分仓库user注册、存token 把表单中的button默认行为去掉.prevent 登录成功后跳到主页 主页中登陆注册换成用户信息 用户名|退出登录 - 退出登录 api 请求头中带token，拦截器 让分仓库中的数据清空 退出成功后仍回到非白名单过去的组件，否则回到登录页 - 自动登录 持久化token，将token放进localStorage，state中的时候从里面拿 退出登录时，要清空仓库，也要清空localStorage，removeItem app请求 自动登录token失效，退出登录 界面刷新/切换路由校验token 登录的时候，从哪个页面来就回到哪个页面 query 未登录下不能访问的路由，其他登陆后回到该页面 注意退出登陆后，如果在购物车页面，退出后需要重新跳转到购物车（发送请求） ``` ### 支付流程 ```js shopcart -> trade -> pay -> paysuccess -> center/home center->myorder... 配置路由，白名单增加 1- 获取订单列表 api 分仓库注册 - 拆分子路由，配置路由 - 渲染子路由 - 分页渲染 Element UI 文档 下载、按需加载babel.config.js、使用 分页连接接口 当前页、每页几条、总条数 请求代码冗余，封装方法 2- trade - api 分仓库注册 请求 渲染 - 获取订单地址api - 渲染 - 事件，切换地址，currentIndex，getters - 支付方式切换 - 商品清单渲染 - 提交订单 api 直接发请求 跳转pay 3- pay - api 请求 渲染 - 路由配置添加props - 请求不入仓库 - qrcode将路径转换成二维码 查看element文档 - 查询支付状态请求 轮询，定时器 支付成功以后清除定时器，关闭弹窗，跳转页面 不可以使用await ``` ### 路由守卫 ```js 1- 当前结算页 支付页 支付成功界面 个人中心页在未登录的情况下是不可以访问的 app中自动登录需要放到全局前置守卫，卡流程 beforeEach，只在刷新时做一次，路由切换时不做自动登录 路由前定义一个变量 实现自动登录 问题：拿路由相关信息，会出错，因为路由相关信息还未加载完（目标路由） 解决：目标路由，使用参数to 在其他地方也使用了退出登录，给to添加默认值 判断是否登录 通过userInfo 如果未登录 不在白名单中，可以放行 2- 处于登录状态时，不能再去登录页 beforeRouteEnter 来到这个路由，肯定已经实现自动登录了 在登录页，不能再使用header登录 && 点击登录后要去主页，即redirectUrl默认值去"/" 3- 添加购物车时，显示数量，不能不合法 4- 必须确保购物流程 shopcart -> trade -> pay -> paysuccess 后三个判断从哪来 ``` ### 额外 MVVM(纯视图层):model(data) view(template) vm实例 MVC:model(mongodb) view controller(真正后台逻辑，先命中路由层，区分请求，分发给controller，需要访问model层，对比数据) 前后端分离、服务器渲染 退出登录：token失效 自动登录：token有效 token：每个用户的标识，token放哪需要看后台 412：先决条件不一致 403：拒绝 ### keyword进总仓库 ```js 1- header中 脏数据问题，不能使用辅助函数 要使用计算属性get、set方法 2- typenav 3- search面包屑导航 ``` ### 项目中遇到的问题 ```js 1- 数组和对象问题 2- mounted钩子被触发，只是完成挂载，页面不一定渲染 3- 轮播图 4- 生命周期钩子间不能卡流程，路由守卫间可以 父组件在mounted请求，子组件中不一定能拿到，因为请求可能没拿回数据 5- 界面回退，diff算法回退，使用一个不使用的data数据 例如输入abc不应该重新发请求，直接在请求前使用，return了函数 6- 页面没有重新请求，想要删除完后重新请求，但是判断必须要有值，所以判断不成立，没有重新请求 ```