00:00
大家好,我是学习园地的Q约讲师高若峰,上节课咱们做了标题栏,当然了也可以看作是导航栏,那这节课呢,咱们开始做首页的功能,那首页的功能我们先看一下首页上边包含哪些功能,首先呢是一个banner,对吧,班的图,然后呢一些推荐的商品,然后下边呢,这块还有类似于选项卡,有畅销书,新书,精选书,然后呢,我们如果往上拖动的时候,拖动的时候呢,这个会固定菜单对吧?选项卡会固定上,然后呢通过加载。数据呢,会一页一页的加载,然后呢,可以通过这个按钮回到顶部。大致是这样的一些功能,当然这节课咱们不会做这么多功能,这节课呢,咱们就做前边两部分,导航栏和这个半截图和这个推荐商品这几部分,当然了。呃,如果我们想做这个,呃,半截图的话,也就是这个。呃,滚动的一个图片,咱们所有的这个项目及其常用的组件,咱们都有现成的对吧,用有赞那个VT那个组件库是可以的,如果这个咱们手写的话,会非常耗时,大概得需要两个小时的左右,咱们把这个完完整整的功能给讲完,所以呢,咱们现在在首页里边,咱说了前几个页面,首页分类页和详情页,这几个页面呢,我会给你单独的手写,那以后的所有的页面我们都会用已有的组件,因为开发实际开发中。
01:19
一定用现成的组件,不要重复造轮子。那这个呢,因为比较耗时,又不是咱们学习的重点,所以呢,这个发截图,那呃咱们就做一个先用一个固定图片,等我给大家讲到用现有的组件的时候,再把它换下来,那这个呢,会给大家写一下,因为这个写这个的目的主要是咱们有网络请求,怎么和我们页面这个结合。咱们按这个知识点的一个积累的顺序,咱们去写,那这两部分是这节课的内容,那首先呢,我们先来看一下班截图,那我们既然在后里边用这个对吧,那八个图呢,我们先来一个站位。来一个单位在下面,所有的我们都写在这个下面就可以。那站位的话,那我们就生一个div就可以了,在div里边。
02:02
我们放一个声明,一个类class叫做BNS,叫这个名就可以了,然后里边我们来一个img,加一个图片,因为后期得把它换掉,所以我们先临时加一张图片就行了,As。呃,Ets下边的IGS,我们看一下图片这个点一下。啊,这个一用这个一这个图片就可以了,关掉。下边的1.png这个123,就是那个半截图的这个图片,当然我们数据是从后端数据库取过来的,这里边咱只是另存为先放在这块了,那。拿到这个图片,我们把首页这个文件打开,回到我们的首页看。这个地方那就太大了,对不对,所以呢,我们把这个加一个这个样式吧,给加一个。点D。这块来一个宽度。呃,下边的ing吧,Ing宽度100,百分之高度将在A自动。
03:01
就这样就可以了,对吧,但是呢,上边是一个标题栏,咱们是固定的,它现在跑到下边去了,所以上边的高度marin好,咱们得把它撤销一下,嗯,上面当时标题栏一般都是45个像素,所以呢,咱们要妈点有45像素,所以把这图就出来了,放在这块。咱们简单先这么把半截图做出来,后期呢,咱们会用固的组件去做,那为什么说写这个比较耗时呢?跟我们以前用几块写的不太一样,太一阳在哪呢?这里边得需要怎么的需要呃用手指滑动的时候对不对,滑动到一半对吧,或者是1/4多少的时候自动它会直接滑动,所以呢,呃,会有些触摸的一些事件什么的,会比较耗时,所以呢,咱们用固定的去写。那这个搬到同学了,咱暂时先临时用一个占位,因为这个不是咱们重点,好吧,不是说学习重点,其实呢,它跟咱们的vuee关系不是那么太大,还是咱们写,呃,算法流程的事儿。那下一步咱们需要做一个推荐商品,推荐商品呢,咱们需要是一个组件,这个组件放在哪比较好呢?因为它只是首页上用的组件推荐,别的页面不用,那别的页面如果不用的话,我们将这个组件就建在这个子组件里边,后面里边的子组件里边,在这里边推荐,那在这里边我们新建一个推荐视图推荐的模板。
04:15
那我们起个名字叫做呃,Re,嗯,Re mind推荐的推荐的V流吧。但是那名称你可以自己去随意定义都是可以的。在这里边,在这里边我们做一个这个,所以呢,作业层一定得有一个呃,Div对吧,然后我们便利里边需要我们去遍历每一张图片,每一个细节,那我们这里边。然后推荐呢,会转到那个商品商品里边。所以在这里边我们就呃加一个div吧。里边的div是写每一个推荐的组件,也就是我们的这一部分。这里边每一个是div,咱们需要四个,那就需要四个div,咱们先固定的一些图片的一些方式,咱们先加上先给样式,然后咱们再编辑数据库去处理,这样的话好处理一些。
05:04
那比如像这个里边呢,我们不管点这里边的名字。这块不管点这个图片还是名字都让它跳转,所以呢,这块我们加一个呃链接就可以了,加一个链接,比如说。呃,A链接吧,加一个这个。当然我们可以把这个事件去掉,我们用导航的方式去讲,然后呢,有一个图片,图片呢,我们现在也是临时的在这儿加一个图片,加一个数据呢,咱们后期再写。I as下边呃。应该是as ets下边的IGS,下面我们看一下哪张图片比较适合。这里边儿。呃,有这么多图片,我都不想一个一个一个一个把它点开了,这里边儿,比如说。这几个应该是书名吧,那就这个书名,咱们用它来做就行,幺幺。用一个就可以啊幺幺.png。
06:01
要有点偏紧,加上这个这是。呃,图片的部分,那我们再来一个div,我们还需要加一个什么名字的部分,你比如说我们叫细说PP。是这样,现在我们这只有一个,那我们想建利多个的话,在这块呢,需要写多个,当然我们最好是先加一个类,因为后期会给样式呢,然后我再去复制啊,不然每一个都得在咱们加一个,比如起个类名,我们就叫个re,呃,推荐的呃选项吧这块。然后可以放四个俩三四。啊,四个就可以了,然后最外层既然是推荐,我们也加一个类,这样呢,我们好给钥匙叫做推荐,里边是推荐选项,那外边是咱们就叫推荐I com men推荐,现在我们来看一下这样的。啊,当然这个组件我们现在只写到这这个件我们还没有加到这块,对不对,如果我们想加到这个组件,我们需要在这块把这个组件按port导入对吧?Re,这个时候那现在在当前目下子模块下边我们加就行了,导入之后我们还得需要干嘛,我们还得需要在这里边注册对吧,注册我们才可以有这个。
07:08
导入注册了,然后我们需要在这块使用这个组件,在我们后面这块使用的组件。我们现在也呃不存数据,所以呢,直接将这个组件加进来我们就可以了,Rem menw好加进来。这样的话,我们看到下边有这些了,当然我们还没给样式呢,对不对,我们一点点去给样就行了。啊,默认可以滚动的对吧。下边把这个。估计那个栏都去掉了,没关系,咱一会再一点去修改,那现在嗯,不是咱们的重点。到这里边儿,咱们现在开始给这里边儿去给样式。在这块单独写这个组件的样式就可以了。那我们在写的样式的时候,我们把最外层已经怎么着确定了,这个类叫做re。这个。列名对不对,这个类名,然后我们要的是宽度是100%得点一下,嗯,然后呢,让所有的内容里边的所有内容都是怎么着居中的对吧,当然了,我们现在。
08:09
嗯。这里边你得让它先横过来,对不对,对吧,先横过来我们用什么display,用弹性和布局。然后用这里边儿每一个选项,这里边儿的。呃,里边的it TM,每一个选项让它各占一份一。来各占一份,当然这个现在是太大了,对不对,所以呢,现在它横不过来,那我们来在这里边。主要是这个图片太大了,那我们要这个选项里边的。啊,这块如果我加上。这个language task,那我就可以在这里边去写了,对不对,在这里边的,它里边的所有的图片在这块,比如说宽度,我们给一个呃,80随便给了一个像素啊,然后呢,高度。
09:00
给上80。大坝,嗯,看一下。也大。因为现在已经用了很多了,主要是这图片太大了,其实吧。然后其实。加这些。嗯。还可以。还可以,然后呢,我们让它的所有的这个,呃,位置上下的距离我们也区分一下,那比如说让它的所有的内容我们center居中一下,但这个没有太大改变啊,然后我们加一个。呃,Party吧,Party上右下左,那比如说呃,应该是15个像素,这是四周都是15个像素,对不对。然后零个像素下边的是30个。左右30个啊,左右30上下,然后30左右30可以这样,然后呢,我们在呃,看一下这个原图下边还有一条分割线,对不对,分割线呢,我们就可以用什么用一个border。
10:02
边框底边框嘛,BOT Tom底边框,比如说八个像速度快,宽一点直线的,然后给个颜色就行,比如说。嗯。有这样的颜色。100。切换。嗯。还可以,大致是这样,然后呢,我们用这个图片和这个文字距离,我们再稍稍分开一些图片和文字的距离。那我就在这块给图片叫什么,底部r j Mar,让这个图片底部有十个像素。啊,图片和文字怎么着就呃分开了,这个字体也太大了,对不对,比这个导航这个字体都大,所以呢,我们想让它的字体小一点。那我们就让他来个自己的尺寸,让它变成12像素吧。嗯,这样看起来就好看一点了,对吧。其他的咱们样式就不用给了,大致需要的就是这样的一个情况,翻的图和下边的这个推荐商品,四个商品,现在这个商品咱们是固定写的,对不对不,你写的现在呢,咱们只需要用什么,用一份就可以了。
11:06
因为给完了。用一份,然后我们通过便利数据库里边数据的方式来拿到四个这样的数据就行了,那数据是在这个里边请求呢,对吧?在如果在组件里面请求其他应用组件他也请求对吧?所以呢,我们数据一般都是从首页里边拿过来,然后通过属性存起来,是这样的一个方式,所以在首页里边我们需要获取这样的数据,那推荐的数据获取这些数据我们写在哪呢?你看。在网络请求的部分里边,有专门是请求首页数据的,对吧,这是请求首页所有数据,请求首页所有数据里边。就有半截图其他的东西对吧,但是呢,我们现在需要的是推荐,咱们到接口里边去找一下,看一下有没有我们想要的推荐数据,如果没有还比较麻烦首页数据。请求的接口是这个对不对,然后呢,呃,是返回所有的数据,这里边有数据,有轮播图,有分类信息。
12:00
有推商品这块,有推荐商品信息,还真有这个推荐,你看推荐商品信息在这块,所以呢,咱们通过这个获取首页里边的所有数据,咱只要数据里边什么推荐商品信息就goods这个就可以了,所以我们通过我们前边写的这个样例的接口。这些东西不需要你看。得到首页所有数据。我们在这块,那我们在后里边,我们想引用这个方法,后里边的这个方法得到首页数据。那这个没有用啊,把它读了,因为首页数据里边就有这个,它通过一个接口把首页里边所有数据都给我们拿过来了,对吧,所以在首页里面我们想引用这个方法,那我们就得按port引入,这个方法从哪呢?因为那是导出嘛,这边得导入这个数据,从我们的network里面获取首页数据,那就是home。呃。点。后面那个可以不用去写。
13:00
这样的话,我们就可以使用这个方法了,使用这个方法,那我们在这里边做一个。在他组合API,把所有的咱们JS都写在这里面,对吧,在这里边我们首先需要引入。IPO引入什么呢?引入我们需要在页面加载。先写这个让从VE里边去获取它的生命周期函数on这个方法,所以在这里边我们就可以通过auto,在这块mountain这个方法,我们传一个回调。在这个方法里边,我们就可以调用这个方法了。获取首页的所有数据,然后呢,我们看一下这里边需要参数吗?嗯,不需要传任何参数,对不对,直接。在这块直接我们就可以加个括号,然后它是结合的对不对,加个字,然后re。我们获取。数据,然后我们打印一下is.lg这样的话我们在首页里边。
14:02
记着画啊。这个部分我们刷新一下。你看。在这块。这里边儿,原来那里边儿。有打印的地方在这里边。但是这个如果打印的话就会乱,你看不出来是哪个对吧,那我们再回到这个里边。我们清除一下。刷新。你看这里边就是单独的一个数据,那这里边儿有分类的数据,这goods就是推荐商品的数据,对吧,那我们这里边只要它这里边谁啊gods推荐商品的数据。你看这里边儿就有钢琴页,是一数据是十个,给我们返回来。对吧,数据是十个这个数据,然后呢,这里边还有里边还有什么,还有这个data是数据,这就是我们想要的这个数据,那如果我们想把这个数据在页面上去使用,现在我们想传到哪里边去呢?传到这个里边去。所以我们得需要属性的方式去传,因为是在这个里边使用这个数据,对不对,那我可以在这里边获取这个数据,让他是数据是响应的。
15:02
数据是响应的,你比如说如果我直接在这块。想用到任何一个想的变量,那我一定得在这个里边去声明这个变量。是这样的,对吧,你不声明这个变量你没有办法去使用,所以我们在这块cost声明,比如说re推荐的,呃,Combs推荐的这个数据等于那我们先在这里边可以引入谁呀。用ref或者是呃或者是re relative对吧,这两个来获取那这个生命对象的,那我们获取的就是一个什么,就是一个数组或者是一个对象,所以呢,你用哪一种方式都行,那我们就用。嗯,这个吧,If吧,声明声明这个对象是一个空数组,声明空数组。用if生命力速度,那我们想把这个数度给我们完全的返回去,那。在页面里边可以用,那我们就得是re com mm。
16:00
嗯。EDS,它这没有提示。你看这样的话,我们在页面里边就可以使用这个数据了。A ref加上ref了,从这个里边可能还有错误提示。路由等等。路由。那其实命原它是没有定义。布置一下。是的。函数它没有定义定义呢。定义一个空数组ref对吧。哦,写错地方能往这写对吧,你放哪啊。所以这个位置得放在这里边,Return得返回什么,返回这个在这才可以。你看就没有错误了,对不对,数据拿过来,那现在这个数据是空的,如果你在模板里边去遍历也好,去处理也好,对吧,我们数据是空的,你在如果在这块直接访问,直接访问这个数据,你看啊,假如这样re comm dnds这样直接访问。
17:11
现在我们声明了直接访问是没问题的,它就是一个空数组对不对,但是我们访问数组里边的,比如说什么什么对象,或者是便离这个数组里边的,比如说第零个元素里边的,哈,假如这个,那没有这个对吧,肯定就会出错,所以你在页面上使用这个格式的时候,一定要记得使用这数据的时候,他为了有这个数据。我们在这块打印一下,你看虽然是空数组。在这块他肯定是报错的,因为我们怎么样没有这个数据对吧,页面上你就先使用这个数据肯定是不行的,如果我们在这块先把这个去掉啊。来,先把这个去掉。在这里边你看我们打印一下这个打印is good是直接这个数据,但是如果我们在这块。里边我们打印re,虽然我们声明了,你看打印他的rog。
18:01
你看它是这种ref引用格式对吧,如果是这样的数据ref,嗯,是希ST生明一个,比如说DEMO吧,一个变量re,对吧,假如说明一个空对线。那如果我们打印这个该你看。又卡住LG。你看如果我们打印这个的话,它是一个这个代理pro。XY代理的一个,这里边都有三个专门是做过滤去用的,比如说里边有代的方法,在的方法,他会把一个变量,这样的变量做成响应式,做成什么代理的方式才能够有响应式,那AF做成引用的方式才能够有响应式,两个的原理是不同的,为什么我们这里边数据变化上面就变化,所以说。这些数据我们声明了,而我们请求网络数据是异步请求的。就算我在这块把这个数据。啊。打印机放在这块,把这个里边的res.gods里边的。看一下这里边儿是不是里边有个,里边有个配置。
19:02
应该是点先加入啊,把这个数据给到什么,给到这里边IECUDS.v rue,记着用if声明的赋值一定是这样的赋值。就算我们复制给它了它的结构,因为我们这边是异步的请求的对不对,有可能我们在页面在使在访问它数组里边第零个元素的什么什么数据的时候,对不对,有可能我们数据还没有加载过来呢。数据没加载过来,所以页面会出现一些错误。所以说我们页面想声明一些,使用数据的时候,把数据的格式要声明清楚,然后我们先保证数据没错,可以为空,但是我们有这个变量在这块模板里边是可以使用的,当我们异步把数据加载过来,它又是显示的,那数据就会显示的页面,所以这个是大家在开发的时候常遇到的问题啊,就声明。变量的时候数据不全导致的。所以我们页面上用什么数据,我们一步还没加载过来呢,所以里边就用不了对吧。这两个我们在这块不需要啊,这个我现在暂时也不需要把它去掉,这样的话,我们现在把数据就已经拿过来了,把这个数据给了他了,对不对,那在这个里边。
20:09
在这个里面,我们想通过怎么把这个数据传给组件,最好我们用什么,我们用这种方式,就是属性的方式给他传过去,属性的方去。属性方式,当然属性名你可以什么,你可以自己去自己去定义,那比如说我们就叫它属性名,属性名一定得是。那这个自己定义的属性啊,自己定义属性,Re,比如说com1.ds对吧,等于。这里边把这个加进来,但是这样的话会把这个字符串传出去,我们现在想要的是这里边儿我们。这个。变量,另外呢,这个变量是从数据库里边一步步我们取过来给他后赋值的,对吧。拿过来空数组没关系,然后我们在这里边加上冒号,它才是变量,对吧,这个数据里边加上数据,这里边才有数据,然后把这数据才能传到哪去,才能传到我们这个组件里边来,那这个组件里边我们既然用上什么,用上属性传递数据,所以这里边儿我们一定要接收这个属性,我们才可以把这个数据拿到,对不对,所以这里边加上pros。
21:13
接受这个属性数据,这里边声明,一般的我们这里边用到的几十个变量假默认值的话,都是在属性里边,这里边去直接去写re,我们传播的属性名是com mens,这是我们传播的属性名,然后以对象的方式,类型是什么呢?类型是ay,是数组。我用不加方法,不用加那个块方式规范,然后D给上缺省值,就是我们不传的时候,它有缺省值,不然的话,这个页面我们便利的时候。对象确认值得通过,跟date方法是一样,可以这动返回得用方法返回到,不能说直接date冒号就行了,其他字符串都可以那种对吧,这是我们用这种做确认值,这样是一个空数组,这样的话我就算没传过来这个数组,我这里边也可以去变历。也可以去便利这个方法了,那在这里边我们就加一个便利,你看。每个选项这块我们加一个,加一个V-for便利便利什么呢?It t mn在哪块呢?属性re,通过这过来的属性,当然了,我们一定要加什么K,这个K呢,就I em里边的ID吧。
22:14
我们看一下这里边返回的。返回的数据。当然你可以从打印来看,你看有ID对不对,有标题,然后呢。嗯,有封面图片URL对吧,有这么几个。那这块我们就用这个ID就可以了。然后这个里边啊。这个里边我们。图片。我们直接IM里边的是吧,我刚才复制这个了,但是如果我们想换成这个变量的话,一定加根号对不对,然后这块。我们用差值的方式,ITM.i TE Co。那抬头啊,标题就是这个名字就可以了。
23:00
当然我这块去遍历的话,十本书会很多看到了吧,因为它默认第一页十本书,所以呢,我这块想要四本点。S,对吧。从零开始列第四。你看这块就只要四本推荐的,因为这个位置放的太多,如果很多的话,你加上那个呃,用一个组件可以左右移动的那种也是可以的。然后呢,现在呢,我们一点击这个链接的时候,一点击链接的时候,我们需要有一个事件,对吧,这个事件呢,就转到。首页啊。我们需要把它转到其他的地方,也就是商品详情页,别人去购买,你点击链接,所以这个地方我们需要你点击的时候,因为它不是,呃,首页里边我们用的那个导航对吧。不是首页里边我们用的那个导航啊。那我们就需要通过自己写,通过路由的方式才能让它跳转过去,所以我这里边要想用到路由。
24:03
在这个组件里边,我就得在这块引入我们的路由use路由器,那flow从哪呢?从这个VE里边的这里边儿路由器里边,把我们这个路由器拿过来。然后在这里边我们得做上。用上啊。如可片这样的一个方法,在这里边我们声明路由器LTR声命路由器拿到这个,这这样的话我们就有这个路由器了,然后我们做一个方法,在我们这块点击的时候。点击的时候也就A这块。点击点击的时候我们加一个事件CK,点击的时候,当然我们将原来的事件怎么给取消掉,点击的时候我们到哪去呢?到嗯购到商品详情。嗯,就随便写一个够的一个方法吧。呃,做商品详情Di。墓地吧。因为你够的话,有可能会方法有有冲突,所以在这里边我们声明一个方法cos。
25:03
B这样的一个方法。等于一个箭头函数,然后必须得把这个方法怎么样。返回过地才可以。这样的话,我们就可以通过这个RO里边有一个什么push获取这个方法加上什么呢。加上呃,当然这块需要传一个这个商品的ID,我们传递的时候一定要传商品的ID过来啊。这块传商品的ID,商品ID呢,就是我们的ITM里边的什么有个ID,这样的话,我们就把商品ID传过来了,对吧,商品ID传过来,那我们到这个位置。商品ID到这个位置。嗯。加个对象吧,Path pass,我们到哪去呢?到商品详情,也就是我们在。这个路由里边。因为我们这块没用动态路由,如果你用动态路由的话,你可以改写成动态路由,就是后边我们加一个斜杠冒画ID,这样的话通过斜杠这种方式传上去,那我们这块没写,通常这个东西都不用动态路由。
26:08
直接用参数的方式传递过去,在所以呢,我们这块就到详情页面det I这块,那需要传递一个什么呢?QE传递一个ID,商品ID,我们就直接叫ID了,等于我们这个参数的ID,那两个参数名称是一样的,我们直接这样写就可以了。就可以了,所以呢,我们现在你看。点击任何一个商品,那这个商品详情对不对,那在商品详情里边,在这块商品详情里边呢,那我这块可以接收一下这个ID啊,在标题这块接收一下这个ID。接收一下这个ID,这样,那我这边怎么接收呢?同样我们使用iPod。导入。通过。Use,路由这块就不是路由器了,是路由对不对,让我从VE里边吧,这个方法拿过来。
27:02
路由,然后我们在这个里边接收,当然也得写一个什么塞塔在他方法。这比加逗号,然后我们声明一个cost,嗯,RURU等于这里边又ru记着为不带R的,带R的生命器是指定路径的,这块是可以接收参数的,然后我们生明一个R,呃,再加上。再导入port,导入ref。嗯,让从或VE这里边导入进来。引入进来。引入进来之后,我们在。Might声明一个什么ID等于ref,默认让它等于什么是一个零的一个ID,然后return返回去这个ID,这样的话我们这边就能接受ID和返回这个ID了,那我们想通过参数里边。过去啊。呃,通过这块不是属性里边,通过你看这块我们已经把这个ID等于一这种方式传过来了,传过来了那我们就得接收这样的参数,那我们让这个id.v rue值等于什么呢?等于我们通过路由参数传递过来的,那我们就可以,呃,用作这个rotee里边,Query里边有个ID。
28:21
这样的话通过这个路由查询找到这ID,如果你用动态路由的话,就是p ras里边的ID对吧,能就在路由那块生明什么样的用什么,这样的话我们通过这个就能获取到这个ID的值。找一下大I没吗?有没有错误?属性ID,呃,没有学义。啊,之后我刚才把这个删掉了啊,Q点ID啊,你看三就接收到了,所以呢,现在我们这里边。返回来。
29:00
现在就没有错误了,就是刚才的那个错误,然后点这个ID12,你看这块就是个二对吧,拿回来了。这就是我们,呃,这个组件的。应用数据,当然咱们用这个的目的就是让你用一下数据库的一个请求,一个接口的一个请求和使用。然后以及组件怎么去写,这个是一个比较小的一个组件啊,因为咱们是循序渐进的一个课程点,最终E是吧,是一个渐进式的一个什么一个框架。那下节课我们再继续写首页的其他功能,这节课咱先完成两部分,但是第一部分这个是。呃,临时单位的啊。
我来说两句