00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,即将要开发home首页模块。那咱们呢,先把home模块组件拆分的业务啊,先分析分析。那咱们呢,先看一下的已经上线的这个项目。那首先说啊,那在工作当中,那咱们去开发这个某一个模块的时候,那也一定是按照当前的这个业务去跑的,比如说那你先把相应的静态的页面你给他完成。啊,HTMLCSS布局啊,先把这些东西给它搞定,那当然咱们已经有了。那第二部分是什么?就是拆分出,哎,写一下拆分出咱们的静态的组件进行展示。那当然第三步干什么?第三步呢,就要获取服务器的数据进行展示。
01:02
那最后一件事,那如果说有JS的动态的业务,那动态的业务呢,给他完成即可。那咱们呢,稍微分析一下子,咱们这个home模块,它的一个组件的拆分。那首先说看一下子,对于顶部hier以及底部的福特,咱们的已经拆分完毕了。那接下来咱们就聊到这儿,那首先说全部商品分类,这里就是这个三级联动。咱们呢,可以把它拆成一个组件。对吧,就是专门去搞这个三级联动的,但是这里啊,要注意一件事儿,你看啊,首先说在首页当中啊,它它是使用了三级联动的功能。以及呢,你看在设置搜索模块当中,它也用到了三级联动。以及咱们可以再看一下,就比如说在咱们的详情页当中也用到了这个三级联动。
02:06
那所以说啊,咱们呢,可以把这个三级联动这个组件给它包装成一个全局组件,那这样可以在你的项目当中任意地方可以使用,而且呢,只需要注册一次。那所以说啊,咱们呢,可以把这个三级联动拆分成一个组件。那以及还有哪儿呢?就是咱们这个轮播图,加上咱们的商品会快报也可以拆文拆分为一个组件。当然有的同学可能会说,啊,老师,那我就把轮播图拆成一个组件,可不可以可以。对吧,以及把商品会快报这也拆分成一个组件,单独的组件可不可以可以,但是这里呢,要注意一件事儿,因为咱们的静态页面它已经完成了,它呢是把轮播图,哎,以及这个商品快报这里啊,它是一个整体。
03:04
所以说呢,咱们呢,把这一部分也拆分为一个组件,那当然有的同学说老师,那我就是把罗墨图拆成一个,这拆一个可不可以可以,但是咱们的结构当中已经把它俩呀合并在一起了,所以说把这一部分也拆成一个组件,那这是第二个组件。那以及啊,像今日推荐,那这里咱们也可以拆成一个组件,这是第三个。那以及底部的热卖排行,这里咱们也可以拆分为一个组件。对吧,这是第四个,那以及还有谁呢?猜你喜欢,那这也可以拆成一个组件。对不,所以说这是第五个组件,那当然有的同学说老师。啊,就是这块呢,我拆拆的细一些,每一个都拆一个组件,可不可以可以啊,但是咱们的结构已经有了。那一集家用电器啊,还有手机通讯你看啊。
04:04
这两部分内容啊,它的结构是相似的,结构几乎都是一模一样的,所以说呢,也可以把这里拆分为一个组件,只不过这个组件呢被复用了,所以说这是咱们的第六个组件。那以及还有底部,这对于各大品牌的logo也拆分为一个组件,对吧,比如说飞科啊,飞科有那个刮胡刀,所以说咱们这儿呢,也给它拆分为一个组件,那也就是说home路由这儿,咱们一共要拆分为七个组件。但是要拆组件的时候一定要注意细细心一些,因为咱们的静态页面已经有了,那你无非要做的一件事就是什么呢?把结果。对吧,把人家的样式,把人家的图片资源这一部分一定要拿准了。所以说啊,这是咱们对于咱们首页的一个组件拆分业务的一个分析。
我来说两句