随笔档案「2021年6月」 - springxxxx

相似推荐的展示和底部导航条的实现思路

摘要：相似推荐的数据请求是独立的，对应的接口为“/recommend”。 export function getRecommend(){ return request({ url: '/recommend', }) } 仍然是在created函数中： // 3、获取推荐数据 getRecommend(). 阅读全文

posted @ 2021-06-30 00:00 springxxxx 阅读(59) 评论(0) 推荐(0)

DetailParamsInfo组件和DetailCommentInfo组件的实现思路

摘要：商品参数信息在返回data中的分布也很松散，将它们整合为一个类GoodsParam，然后将数据保存在GoodsParam的实例paramsInfo中，发送给子组件DetailParamsInfo： export class GoodsParam{ constructor(info,rule) { t 阅读全文

posted @ 2021-06-29 23:28 springxxxx 阅读(87) 评论(0) 推荐(0)

DetailShopInfo组件的实现思路

摘要：和之前一样，我们将该组件要使用的数据封装进一个Shop类： this.shop = new Shop(data.shopInfo); export class Shop{ constructor(shopInfo){ this.logo = shopInfo.shopLogo this.name = 阅读全文

posted @ 2021-06-29 18:01 springxxxx 阅读(130) 评论(0) 推荐(0)

DetailSwiper和DetailBaseInfo的实现思路

摘要：由于有现成的Swiper, SwiperItem可以使用，所以DetailSwiper的实现非常简单。首先获取轮播图片的数组topImages，数组中存放的是一张张图片的url。 this.topImages = data.itemInfo.topImages; 然后将topImages发送给子组阅读全文

posted @ 2021-06-29 17:11 springxxxx 阅读(101) 评论(0) 推荐(0)

跳转到Detail组件

摘要：我们在前面将每件商品的信息传给了GoodsListItem组件，保存在goodsItem变量中。并且每件商品有一个唯一的标识符iid。当点击该商品后，会跳转到该商品的详情页。所有的详情页使用同一个组件Detail，今天我们来回顾一下Detail组件的开发过程。首先需要配置路由，由于Detail组件阅读全文

posted @ 2021-06-29 16:45 springxxxx 阅读(241) 评论(0) 推荐(0)

保存页面状态的功能实现

摘要：在页面底部的MainTabBar组件中一共四个tag：Home、Cart、Category和Profile，对应路由表中的四个配置。当用户从Home切换到其它tag后，我们希望能保存下此时Home的状态，如滚动位置、高亮商品类别等。这样当用户再次回到Home页面时，看到的还是离开时的样子。事实上，阅读全文

posted @ 2021-06-27 16:09 springxxxx 阅读(152) 评论(0) 推荐(0)

显示商品列表+上拉加载更多+scroll组件使用的思路

摘要：首先我们需要确定如何存储获取到的商品数据。在后端定义的接口中，所有商品数据被分为new/pop/sell三类，它们互不影响。假设页面默认停留在new类商品，第一次请求（即页面初始化显示）时应该获取每一类商品的第1页。并且随着用户滚动页面，可以依次获取当前new类商品的第2、3……页数据。当用户通过点阅读全文

posted @ 2021-06-27 15:47 springxxxx 阅读(232) 评论(0) 推荐(0)

GoodsList组件的实现思路

摘要：GoodsList组件用来展示商品列表，而单个商品对应的组件是GoodsListItem，前者是后者的容器。之前我们在实现类似结构时，会在item组件中定义几个插槽，然后在容器组件中对插槽进行填充。但这次由于item中的结构较为复杂，所以老师采用了另一种组件通信方式，即props。首先爷爷组件Hom 阅读全文

posted @ 2021-06-25 02:48 springxxxx 阅读(668) 评论(0) 推荐(0)

网络请求基于axios的相关实现

摘要：为了减少项目对第三方框架的依赖，我们不会在每个文件中都对其引入，而是在一个文件中将其封装为一个自定义的方法，然后在项目中使用该自定义方法。这样如果某一天这个第三方框架不再维护、被抛弃以后，只需要对封装的文件进行修改。由于不同网络请求的配置不同，特别是当服务器是分布式、代理式的时，可能baseURL 阅读全文

posted @ 2021-06-25 00:57 springxxxx 阅读(85) 评论(0) 推荐(0)

TabControl组件的实现思路

摘要：TabControl中包含三个表示分类的tag：流行（pop）、新款（new）和精选（sell）。当点击对应的tag后，下方显示的商品列表便会进行相应的切换。此外，TabControl组件还有一个重要的功能就是：当向下滚动到一定距离后，它会悬停在滚动区域的顶部。下面我们来依次实现这些功能。关于Ta 阅读全文

posted @ 2021-06-24 00:03 springxxxx 阅读(103) 评论(0) 推荐(0)

MainTabBar组件的实现思路

摘要：MainTabBar组件在软件下方展示了四个主选项卡：首页（Home）、分类（Category）、购物车（Cart）、我的（Profile），每个选项对应一个页面、一个组件。总体来看，MainTabBar可以看做由一个容器+若干个item组成，所以我们把单个item看做一个组件，把容器看作另一个组件阅读全文

posted @ 2021-06-23 22:43 springxxxx 阅读(157) 评论(0) 推荐(0)

数据结构——二叉搜索树

摘要：在这里总结一下二叉搜索树常用的方法。准备工作：仿照链表的实现，在二叉搜索树类中也需要一个内部节点类。该节点类包含三个属性：存储节点值的key、指向左子树的left、指向右子树的right。此外，在二叉搜索树中添加一个root属性，指向根节点。 function Node(key) { this.k 阅读全文

posted @ 2021-06-22 19:32 springxxxx 阅读(153) 评论(0) 推荐(0)

数据结构——单向链表

摘要：本文总结一下链表常用方法的实现。准备工作：由于链表由一个个节点组成，且节点在内存中的存储不连续，所以我们需要封装一个内部的Node类，包含两个属性：节点值data和下一个节点的引用地址next。此外在链表类中还需要两个属性：head用来指向第一个节点，length表示当前链表的长度。 // 内部的阅读全文

posted @ 2021-06-22 19:26 springxxxx 阅读(78) 评论(0) 推荐(0)

算法——快速排序

摘要：快速排序快速排序的思路是，先选择任意元素为轴，将比轴小的元素都放在其左边，比轴大的元素都放在其右边，这样轴的位置一定是正确的。之后通过递归，对轴左右两边的元素都进行快速排序。最终实现整个数组有序。那么第一个问题来了，怎么选择轴呢？这里b站的coderwhy老师给出一种方案：让数组首尾中三处元素当阅读全文

posted @ 2021-06-22 16:41 springxxxx 阅读(80) 评论(0) 推荐(0)

算法——希尔排序

摘要：希尔排序我们还记得，插入排序的思路是： 1、外循环依次拿出第二个到最后一个元素，记作temp。 for (let i = 1; i < length; i++) { let temp = this.array[i] 2、将temp与它前面的元素依次进行比较。定义一个指针j指向前面的元素 let j 阅读全文

posted @ 2021-06-22 12:47 springxxxx 阅读(72) 评论(0) 推荐(0)

算法——三种简单排序：冒泡、选择、插入

摘要：冒泡排序冒泡排序是一种很基本的排序算法，步骤如下。 (1) 指向数组中两个相邻的元素（最开始是数组的头两个元素），比较它们的大小。 (2) 如果它们的顺序错了（即左边的值大于右边），就互换位置。如果顺序已经是正确的，那这一步就什么都不用做。 (3) 将两个指针右移一格。重复第(1)步和第(2)步，阅读全文

posted @ 2021-06-21 15:34 springxxxx 阅读(253) 评论(0) 推荐(0)

HomeSwiper、RecommendView和FeatureView组件的使用

摘要：HomeSwiper是本项目的轮播图组件，它使用了两个现成的组件Swiper和SwiperItem，前者是对播放容器的设置，后者是对播放项目的设置。我们直接使用Swiper组件，在其内部通过v-for动态创建若干个SwiperItem，每个SwiperItem都是一张超链接图片。需要展示的图片存放阅读全文

posted @ 2021-06-18 23:23 springxxxx 阅读(149) 评论(0) 推荐(0)

DetailNavBar组件实现tag和滚动的双向联动

摘要：在Detail组件中使用DetailNavBar组件时，其center插槽中放置了四个tag：['商品', '参数', '评论', '推荐']。事实上，这四个tag分别对应详情页面的四个部分。现在我们希望点击某个tag，页面会自动滚动到对应的区域；反之，当页面滚动到某个区域时，对应的tag被高亮（字阅读全文

posted @ 2021-06-18 22:42 springxxxx 阅读(139) 评论(0) 推荐(0)

flex布局

摘要：在这里复习一下flex布局相关的知识：弹性容器的样式： flex-direction—设置主轴方向 flex-wrap—当容器主轴方向空间不足时，设置元素是否会自动换行。（默认值为nowrap，若flex-shrink都为0，则元素会溢出容器） flex-flow—同时设置direction和wr 阅读全文

posted @ 2021-06-18 22:03 springxxxx 阅读(51) 评论(0) 推荐(0)

NavBar组件的实现思路

摘要：NavBar组件作为导航条，是最经常被复用的几个组件之一，下面来剖析一下它的实现过程： NavBar通常可以分为left/center/right三块，只是这三个位置具体填充什么，需要在使用时再传入。所以我们在这三个位置分别放入一个插槽。此外，为了便于添加默认的样式，故将每个插槽用div包裹起来。阅读全文

posted @ 2021-06-18 22:00 springxxxx 阅读(436) 评论(0) 推荐(0)

BackTop组件的实现思路

摘要：BackTop组件实现功能：回到页面顶部。并且只有当页面滚动到一定距离后，才显示出来。由于该组件在页面滚动时位置保持不变，所以采用fixed定位。给它绑定单击响应函数backClick()，由于绑定事件的操作只能对原生的html标签进行（给组件标签绑定无效），所以使用了.native修饰符，其作阅读全文

posted @ 2021-06-18 19:32 springxxxx 阅读(308) 评论(0) 推荐(0)

6.18 字节一面查缺补漏

摘要：1、http请求头中包含哪些内容？ Cache-Control：指定请求和响应遵循的缓存机制 Cookie：HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。 Content-Length：请求的内容长度 Content-Type：请求的与实体对应的MIME信息阅读全文

posted @ 2021-06-18 16:45 springxxxx 阅读(70) 评论(0) 推荐(0)

面试重点----vue源码解析----数据绑定

摘要：首先需要明确两个概念—— 数据绑定：一旦更新data中的某个属性数据，所有页面上直接使用或者间接使用了该属性的节点都会自动更新。数据劫持：通过Object.defineProperty()来监视data中的所有属性(任意层次)数据的变化，一旦数据发生变化就去更新界面。它们的关系：数据绑定是我们的阅读全文

posted @ 2021-06-18 00:55 springxxxx 阅读(138) 评论(0) 推荐(0)

面试重点----手写数组方法----数组去重

摘要：数组去重一个主要的思路就是：遍历原数组中的每个元素，判断新数组中是否已有该元素，若有，则不操作；若没有，则将该元素加入新数组。这个思路写成代码如下： let arr = [1,2,3,5,4,6,2,3,1,1] let arr2 = [] for(let i of arr){ if(arr2.in 阅读全文

posted @ 2021-06-17 22:36 springxxxx 阅读(129) 评论(0) 推荐(0)

联想题题库

摘要：1.牛顿，平安夜，手机(两个字)2.煤炭，武则天，壶口瀑布(两个字)3.牡丹，纸，东汉(两个字)4.富兰克林，DC，战术(两个字)5.刘裕，孙权，廉颇，词人(三个字)6.淘宝，象棋，飞燕(一个字)7.宿主，黑客，武汉，三傻(两个字)8.霸主，儒家，笔法，季节(两个字)9.大雄，葛平，S.H.E(一个阅读全文

posted @ 2021-06-07 22:21 springxxxx 阅读(1255) 评论(0) 推荐(0)