vue-shop之商品列表开发|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天

0. 渲染商品列表页

   • 渲染创建时间返回的为毫秒 因此使用全局过滤器(主要作用为：格式化文本)

   • 判断月份长度是否为两位 若是则原样输出，若不是则在前面补零输出

     const m=(dt.getMonth()+1+'').padStart(2,'0')
     

   • 分页表中只要页数和大小改变触发的函数接收到一个形参分别对应新的页数和大小将请求数据的参数改为新的值再请求列表即可

   • 添加商品通过路由导航跳转到添加商品组件 由于添加商品也是在home组件的子组件因此写在home组件的children中

   • 注：将一个字符串转变为数字型的方式：字符串-0 2.为文本框添加type=”number“级规定文本框只能输入数字

   • 若处于第一个标签页但未选择商品分类则不允许切换标签页

   • 每个组件再发起axios请求时都需要提供token值 在main.js中已经设置过每次发起请求会在头部携带token值 而上传图片时表示是无效的token因此说明发起的不是axios请求而是组件内部粉状的ajax请求

   • 上传图片组件中存在headers属性将其绑定一个对象在对象中为请求头设置token值即可

   • 每成功上传一张图片将的到图片的信息 通过on-success属性绑定一个函数函数参数即为图片的信息获取 将图片信息拼接为即将要请求添加商品的请求对象的格式再将其push到需要的数组中

   • 注：寻找数组中的一项与提供内容相同的索引值 使用 数组.findIndex(x=>x==='提供内容')返回的值即为数组中相同一项的索引值 数组.splice(i,1) 表示从数组中索引值为i 的一项开始删除删除一项

   • 点击图片的回调函数中获得到图片的url则将图片的url保存到data数据中供后续使用

   • vue-quill-editor 富文本编辑器

   • 注：ssr为服务端spa为客户端

   • 由于级联选择器需要绑定的数据必须为数组而请求添加的参数只能为为字符串因此要深拷贝出一个对象并对拷贝出的对象进行操作是good_cat变为字符串 使用lodash的cloneDeep 即可