00:00
大家好,我是学习园地的特约讲师高落峰,上节课咱们只是做了一下呃,封装了一下组件,然后呢,做了一下简单的样式啊,当然了,你可以根据你的情况去把这个样子去改变,比如说这个图片如果太大的话,你可以变小一点的都是可以的啊,你可以随意去处理,那咱们的呃课程重点呢,不是在这个样式这块,咱们还是呃绑定数据整体的部分,那这节课呢,咱们就将这个静态的咱们变成咱们接口里边的数据的一个返回。那我们回到首页,所有的数据呢,是从首页里边获取,那这里边儿有,呃,畅销书,有新书,有精确,是这样的一个情况,那数据我们该怎么声明呢?数据我们在声明的时候记着,我们是通过属性传到子组件里边让它显示的,所以呢,我们需要在这个地方去加属性,但是我们现在不着急加,我们先把数据获取过来,数据获取过来呢,我们就得先查看一下我们的接口。查看一下我们接口在接口里面。看一下接口里边呢,我们就有得到首页这样的一个全部的数据,那我们可以通过参数加参数获取哪一页的数据,然后呢获取。
01:06
这个是热销的数据,这个呢是推荐的数据,这个是新品的数据,通过传递不同参数,你看值V1的时候,值V1就是推荐加上参数就可以了,所以我们需要在后这个里边。找到我们的后面的GS这边我们再加一个。过去参数。请求的参数。名称呢,我们就叫做获取,上面是获取所有的,那我们需要获取home的数据,也就home home me获取home的,呃,商品吧,我们就要做的商品列表嘛,或者这个接口呢,我们访问这个也是盖的请求指不面的,那就看全参数了,当然参数我们通过类型去区分,都通过这一个方法去请求,所以在这里边我们可以传一个指定一个我们的类型默认,比如说我们用的是默认找的是第一个,第一个我们按销量排行的,那就SAS按销量排行的,然后呢,我们默认找的是第一页的数据。
02:02
第一页的数据,因为我们需要加载数据,对吧,然后通过这个加参数的方式,那我们可以指定类型,你看接口里边告诉我们请求。这块通过什么类型呢?通过这几个类型和传递的值对吧,传递的值,那我们调用的时候传递什么类型,什么类型值等于一对吧,所以我们做成是一个变量。回到这来,那把这个TYPE这块我们做成一个变量的话,这块加问号,然后我们加上type。一个类型,我们再加上。让这个类型我们传,比如。Les等于一对吧,等于一,那我们传推荐全新品都可以了,然后呢,默认的三页配置,等于我们就加上这个配置。这样的话,我们调用这个方法的时候,如果什么也不存,那请求了这个默认的销售的排行以及原数据。这个我们先。到我们的。
03:01
首页里面,你看我们在加载数据的时候,在这里边这块是加载所有数据,那假如说我现在单独加载,你就可以将这个方法先引入。这个方法后,里边商品列表先引入。他现在上面我们已经引入过一个了,所以在这块加个逗号就可以了,就可以把后点GS里面这个方法都拿过来,拿过来之后。我们看一下获取数据,直接调用我们刚刚封装的那个方法就可以获取数据。当然我们可以做一些初始化呀,一些其他的一些方式都是可以的。那我们这块就是goo啊,这个获取首页数据,如果我们什么参数也不存,什么参数库存,你看就可以获取首页里边的D音,首页里边的销售排行的数据。Res逗号,我们打印这个res,就是我们销售排行里的那个数据。我答一下。啊。在我这里边访问首页。
04:02
这块当前页面是第一页,你看请求的接口在这呢,是不是我们拼的那个参数啊,这个不是,这是所有的,呃,下边这个。当前一页把上面那个数据去掉,不然的话,他现在看的是比较比较混的一个数据。先分不清是哪个,我们现在就要这一个数据。回到这里边来,我们刷新一下。那。在这块里边的goods。请求的URL。这是所有的数据请求的。这看不出来。嗯。得到是写错了。得到后户的商品没有请求,从这看啊,看网络请求,看network看这块,然后呢,我们点击这个请求。这块就可以获取的信息,我们看同步,那你看这块请求的ul,在这块就是我们拼的这个UR,按销量等于一,这块配置等于一就可以了,那我们同样的方式,既然有三种数据。
05:06
拿过来。三个第一个我们团的什么按销售销量排行,也就是在这个里边。这个还有这个还有这个默认都是第一页了,所以呢,我们只算第一个词就行了,Sa Les,按销量排行的我们获取到,然后这里边我们再获取一下,嗯,按。嗯,Re com men按推荐就是畅销的,然后这个呢,我们获取new新品的,根据这三个参数,我们最后再看一下这个网络请求的部分。关掉刷新一下。你看有这么几个,这是第一个请求的参数是这个,那我们再看第二个。是通过推荐的第三个新品的谬等一默认页数都是第一页,都是第一页,那我们怎么把这个数据获取这三个数据对吧?我们就要声明一个变量来装它做小示数据嘛,然后把数据传到组件里边去,这只是从接口里边获取这个数据了,获取这个数据之后,那我们就需要呃声明这个数据的模型,数据的模型。
06:08
我们在。嗯。你看啊,在声明一个什么名字比较好。嗯。叫做good吧,就叫做一个呃商品。叫那我们在这块声明一个写个注释啊。这是商品列表。数据模型。我们声明一个,你看这块是咱们后期要加载重态加载数据的一个重点声明,然后用re。用这个声音,一个数据模型。加一个这个good,我看这个加不进来,这块引入了加进来了对不对,然后呢,我们加这个一定在这块把这个商品怎呢给返回去,这样的话,我们在页面的时候就可以用过这个数据了,那这里边商品模型我们怎么声明呢?你看啊。
07:02
我们前边指定这里边儿的呃,类型,用类型做这里边每一条数据的一下标SAS。然后里边指定页数,第一页先是默认数,先写个零,但是默认写一也可以啊,最好是默认写零,因为这样我们可加一直接找的是第一页嘛,然后它里边list数据列表是一个数组空数目。我们先把这数据模型申请,嗯,写出来,因为它有三个选项卡,这样的话我们通过这个类型,我们就可以找到哪一页的什么数据。那还有三个卡,还有新品对吧,新品。这里边。这块来新品这块,那我们一样可以写上。这。再有一个有一个比较了推荐,也就是我们所说的这里边畅销。加上这几个,这样的话,我们在访问这个数据的时候,我们通过这个类型下标就可以找到这个对象,这个对象里的数据就是这个列表。
08:08
这个列表,那现在我们获取这个数据模型了,其实这个数据面前虽然数据是空,但是我们其实是可以调用的了,对吧,在这里边我们把返回的数据,返回的数据你看I这里边的数据,我们看一下的数据里边直接。这里边儿你看有,呃,每个里边。看我这个反馈的数据。每个里边它都是。这个。在这块不是在他那里边,你看返回了每一个里边的裤子。Good里边的date,这是我们需要的数据,对不对,所以呢,在这里边。我们让我们这个类型。啊,Gods。这个里边是不是有我们的sa Les在数据模型里边更声明从这类型访问这个数据对不对?让这个数据里边的列表先不管页数,列表就等于我们当前返回过来的,因为默认从数据库里返回的就是DA1页的数据嘛,对不对?Is里边有个godas对吧,里边有个data就是这个数据,那同样。
09:12
在这里边我们返回的数据就是。Re com推荐的这个数据在这里边,我们就是新品的这样数据,New精品的数据。那这样的话,我们这个数据模型在这块就可以获取到了,那我们在这个下边打印一下。嗯。直接再去打一下吧,比如说gods.rog。嗯。关掉。微信一下。你看这里边获取的数据,当然在他里边,你看有新品内容和列个,那新品里边有这数据列表和页数,内容里边有列表和数据,对吧,这数据就有了,数据就有了,我们就可以把这个数据干嘛呀,原封不动的。
10:02
因为之前我在这块已经是返回了这个word对吧,返回这个数据,那我们就可以将这个数据通过参数的形式在这个列表传给我们的数据,然后在里边去摆放就行了。默认这里边的数据选择,那具体显示哪个数据,咱们到时候切换的时候再说,我们先把数据给他传过去,这里边先把数据给他传过去啊。嗯,Gods,加上通过属性把这个传过去啊。通过当然了,前面如果想存变量的话,那。这块我们需要传一个什么呢?那直接传或者什么,我们这块只传一个类型的数据,而不是把三个类型都给过去,要我们去便利对不对?所以呢,我们这块需要知道当前的你访问的是哪个属性类型,当前访问是哪一属类型,所以我们这块用一个计算属性去处理。通常我们选员卡显示数据呢,都使用计算属性去处理就可以了。
11:00
你比如说在这块这个数据里边,你们访问的是这个数据对不对,那我们先做一个变量是CT,你访问知道哪个当前类型当前页对不对,默认页数里边访问第页咱们用完了,比如说当前类型等于ref生明一个字符串,我们当前类型呢,就叫做SAS这个当前类型,那我们显示默认当前类型的数据。我们就需要在哪呢?我们需要做一个计算属性,Co计算属性我们必须得在这里边得导入一下。这块然后声明一个,呃,显示数据的CNST,从这个里边我们只拿出来一个类型的数据传到我们组件里边去,对吧,所以这里边我们做一个显示,叫做显示的当前显示的商品吧,我等于用计算属性,然后我们传递。一个参数。就不用参,是存一个轨道函数对吧?在这里边我们直接返回,返回什么呢?Gods,我们在这个数组里边,对吧?它是一个啊,它是一个对象对吧?是一个对象,这个对象里边我们想知道这个对象里边的类型,那可以用数组的那种形式访问,可用下标访问吗?Cor in,当前类型,那我们这个用IEF来声明的,所以这块别忘写,点video才能够把值取出来,点video类型取出来,然后只访问里边的list列表。
12:25
就把这个数据传过去。返回去,所以呢,我们只要是将这个变量,当然这个变量我们也得计算属性的,也得通过这块怎么办把它返回去。那页面上我们才能用得到,所以在这个位置,我们直接发送的并不是整个这个数据,所有的这个咱们声明的数据模型,而是只要当前类型的这个数据。那当前默认的是销售,按销售排行的数据,所以呢,会把这个传过去。就这款数据。那这里边传过去了,现在你还看不到,那我们在哪接受这个数据呢?是不是在这里边接受这个数据,在这里边接受这个数据,我们就需要干嘛呀,我们就需要,因为它是通过属性传递来的,属性传递过来的,所以呢,我们需要用属性去干嘛去接收。
13:11
正好写上嗯,Pro。属性,属性里边我们传过来的名字是goods,对不对,所以这块goods加上这个名字那类型。呃,我们是数组。可以,Ray类型是数组的,然后呢,数组我们用以后的方法返回它的默认值,嗯,也就是在这里边,我们遍历这个数组的时候,如果你不加,没有传输属性,它也不会出错,所以因为有默认值对不对?那这里边我们只需要一个就可以了,选项我们在每一个这块加上一个V到for便利,便利谁呢?IDMN便利传过来的步这个属性就可以了,然后别忘了加上K对吧?这前面他说过什么区别,这里边就不重复了,直接把ATM放在这就行了,只要是不重复不唯一的就可以。
14:02
你也可以IDM里边,因为商品的ID它也是呃,不重复的嘛,这里边。我们每个列表里的数据,你看有ID有标题对吧,标题有可能重复,价格也能重复,就是ID不可能重复,所以呢,我们可以直接放这个ID,这没关系。另外呢,我们显示数据是不是在这个里边,我们便利它只是有多个他现在而已,对不对,你看。我拿过来。有多本书而已。啊,拿回书有多本书,一共是默认一页显示十本,对吧,拿回来这本,但是里边十本书把每一个产品是不是得在子页显示啊,那我们再加一个属性,比如说产品可以叫顾客也可以叫产品啊PL dutst产品,我们把这个产品IM便利出对象,再通过属性传给里边的子组件。传给自主价。这样的话,我们在子组件里边,我们就同样得接收这个属性的变量的值。
15:02
接受这个属性变量值,那我们一样在这里面加上。加上这个,然后在里边。呃,我们得设置它应该是一个对象类型了。产品在这里边pro dut这个我们对象类型object对吧,对象类型数组类型一样。缺省值,我们用的是一个空对象。先把数据模型放在这块这样的页面,用这空对象的时候,它就不会出错,如果不传的话也不会出错,那既然传过来了,在这里边我们就可以直接比如说图片就不用这个了,我们在接口里边。图片删掉了,接口里边有给我们传递的这个图片。这个就是封面图片。加上这个,那这块是在产品里边p dud,我们传过这个这个的图片。然后呢?
16:00
数据。啊,这块我们变量我们得干嘛呀,得把这个src我们得加过来,你那这样的话才能把这些书拿过来,那标题呢,也是一样的了,P do CD,我们这块就得用差值的方式拿过来,PD产品TT把标题拿过来。发现。标题拿过来对不对,然后价格价钱价钱我们也用差值的方式,里边P里边有一个呃,PR价钱,然后收藏里边没有收藏。嗯。接口里边收藏数量这个。收藏数量啊过来。然默认收藏数量基本上都是现在还没有收藏的,对,所以呢,收藏数量几乎都是零的。
17:01
价格。你看价格,每一个价格都不一样了,对吧,跟这个是配套的,这样呢,我们就把数据拿过来了,数据拿过来现在我们是不是还得做切换呢?现在默认只首页的数据对不对?我点新出或者精选它,现在这数据不会变的,因为固定就是什么,就是首页的数据对吧?固定就是首页的数据,所以呢,我们在这个里边做切换的时候。我们是不是。这个商品列表,商品列表点击这个的时候切换对不对,切换的时候我们调用的方法,这样一个讲的是不是调这个方法,调用这个方法,我们只要将这个数据因为计算属性在这块计算的,我们只要改变类型和改变页数,我们就能切换数据,那页数呢,是我们刷向上滚动的时候加载的,所以我们只需要改变当前的类型,那我们就能切换,因为它显示数据嘛,就可以进行数据的切换了。现在这里边还不能数据切换都是一样的,那怎么能改变这个类型也很容易,我们这里边是不是in代012对吧类型的又是字符串有没有对吧之类的,我只需要在这个位置。
18:08
也就声明一个类型的一个数组,然后呢,我们点击的时候呢,从这个数组下标里边根据的音代词去获取就行了,比如声明一个light类型S一个数组等于有这么几个类型,一个是呢销售排行顺序理解错了。按销量的。新品的就新书的对吧,还有推荐的re men推荐的这样的一个速度,然后呢,我们就可以让CR当前的类型,记得是用if上能的,它加V流当前类型里边就等于这个类型通过我们传递指定的这个下标index对吧,我们把这inex传过来就行了,Inex传过来当然这个是临时的,咱就不用管这个数据,临时的不用管这个啊。啊。临时宾馆的去掉吧。嗯,临时的。然后上边。应用。
19:01
临时的这块临时的变量要用。这些也都没用。现在咱已经有数据了,就不临时数据了。我们看一下,现在我们点击新书的时候,它就会切换类型,安全类型就会变。那这两里面内容。应该是期货了,我看一下。刷新一下。看有没有错误,看有没有错误,没有错误对吧,基数。诶,这几个。没有拿过来当前类型。点击的时候当前类型。当前类型这三个中的一个,默认它不是012吗?零获取这个一二获取这个,这个获取当前类型变化,那也就是这个变量变化,这个变量变化那就是我们的返回去当前这个列表变化就可以达到切换,诶为什么不好使,难道数据都是一样的?
20:10
核一下。再点击一下。新书。进去。对呀,新书啊,是变化。变化好多书只过是一样的。是变化了,因为我们你可以打一下这个,打一下这个类型,如果当前类型变化了,co.v rue.lg只要它变化了,那我们当前的经变化,那我们请求参数接口就是变化的,肯定是这样的啊。来看一下,点击点击新数六对吧,你看下边打印销售正会,只是我们的数据里边是一样的,所以看不出来变化。有的也开始变化对吧。这样的话,我们数据加载完切换已经切换了,所有血型卡我们都是用基本属性这种模式去做的,只要改变一个下标,让这个列表数据变化,数据变化页面就跟着变化,这就是响应式我们开发的一个一个好处。
21:06
好,谢谢大家,这节课我们就到这里边,下节课呢,我们得加载其他页面的数据。
我来说两句