00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们完成了商品的分类。分类的这样的一个页面的背景,那么呃,其实我们查找商品呢,除了按分类查找,那最主要还有一个功能就是搜索,那搜索呢,我就不给大家做了,留给大家你在商品标题这块。标题这块放上一个搜索的组件,然后呢,咱们API里边支持搜索,然后把搜索的内容再换到这个页面这里边即可,然后也要搜索内容可以,呃,销量排序对吧,按价格排序,按评论排序就可以了。那我们这节课呢,咱们开始做商品的详情,商品的详情呢,都是通过什么,通过我们点击首页上面的。首页上面的呃,商品信息转到的商品详情页面,包括这个里面和这个里面,以及我们通过分类里边查找的商品列表,总之在商品列表里边看到的商品,点击都可以查看商品的详情,然后在商品详情里边购买,当然这个在手机端位置比较小,就不用说在每一个商品这块都加一个加入购物车或者购买,当然有位置的话你可以去加。
01:01
那也可以直接跳转到购物车,你不看上面详情就购买了,也是可以的。那我们先看一下,得写些页面跳转,在我们的这个分类页面里边,我们需要写一个跳转,你比如说这是每一个商品的选项,在每个商品选项里边,我们需要加上这样的呃,跳转的按钮。那跳转我们就是一个用一个事件就行,因为它本身不是一个链接对不对,所以呢,我们加上一个事件就可以了。在循环这块做吧,比如说on click直接绑定一个事件,那我们叫做选项的点击C点击,那我们需要传递的就是什么?这每本书的ID,我们从ID获取具体的是哪哪个商品,然后把它详情展示出来就可以了,那这个方法我们需要声明并返回去,对吧?在这个塞里边声明并返回去,那我。呃,为了方便,我们也可以直接怎么着,直接在它里边写一个返回的方法也不是不行的,对吧,这样的话我们就不用连声你再返回了,直接在这里返回就行了,I emm点击。
02:03
的一个,因为这里边是返回的是对象阶层格式对不对,然后在对象里边我们成为一个呃阶段函数吧ID。需要接收的一个ID发过去,然后在这里边我们需要通过路由将我们的数据返回去,所以这里边我们必须得先导入。路由。嗯,和这个写在一起吧,I port导入我们的路由器ru,使用use是一个方法,Water。通过它这样的话,我们就可以获取路由器,路由器from,从这个VE里边的root里边,路由里边获取这路由器,然后呢,我们在setup里边,我们需要cost lur获取这个路由器。通过这个方法。过去。那获取完之后,我们在这里边就可以一点击按钮的时候,跳转的时候,就可以在这里边干嘛直接使用。路由器里边有一个这个方法,加到那个历史模式里边,对吧,然后用一个对象用迭代参数过去,一个是pass到哪去呢?到我们的呃,商品详情有这个里面对吧?我们路由里边指定的路径Del是这个,然后我们参数查询字符串带过去。
03:13
ID和我们传递参数ID2个是一样的,可以简写,这样的话我们就把这个ID传过去了。保存一下,现在我们刷新一下,它会自动刷新啊。那我们现在想看具体的某一本书,你点击你看商品详情,12我来了,点击这个商品详情。对吧,点击这个,哎,怎么都是商品详情,怎么都是12呢,你们看一下问题啊。这块打印一下。id.rog。打印一下这本书的信息就出错了,那这不管他。过来一下。点击12过来。点击这本书。15。啊,应该是这边有缓存,你看我们点击的时候不用打印,你看上面是12看到了吗?ID的部分,然后呢。
04:01
我们再点这个地方ID12看到了吗?刷新一下ID12,因为这个我们是用的模板的缓存导过来之后,它没有更新这个页面数据,对吧,咱们加了那个K外那个生命保存,那过来之后我们让他刷新一下就行了,跳转一下就可以了,当然这块我们可以排除它,不让它这个页面去缓存也是可以的。那这边加上这个了,当然我们还得需要在哪个里边,在我们的首页里边,我们现在点击好像咱们也没做在首页里边。首页里边我们现在点击的某一本书,现在也没有时间对吧,那首页里边呢,是商品列表里面,在这里面。就是good list,那在这里边儿呢,我们也是直接加一个,嗯,点击的事件就可以了,这块看一下在。哪加比较好,直接就在这个整个这个列表里边加吧,点击的时候调用I em c点击。这里面点击的时候呢,我们本身这个产品信息就有这个ID,所以呢,我们直接获取这个I,并且返回就可以了,并且这个获取并返回就可以了。
05:08
所以这里边我们没有必要去传递这个参数,如果需要传递参数跟我们那个方法写一样的话,那我们需要在这里边写上P产品的什么ID。产品的ID传到这个参数里边,点击的时候传过去对吧?当然我们这本页面就有获取这个产品,所以在本页面里边,你可以直接呃先获取,通过参数获取这个商品,然后我们再获取,再传递过去也行,在这块直接传过去也是可以的,那我们假如说不在这传,因为本页面就能获取商品嘛,那我们在这里边。先嗯,Port引入路由器。柚的方法,通过方法后变,然后让从VEU里边获取这个对象看到。复习这个,然后我们在这里边做setup方法,Setup方法。在这里边host声明一个路由器Lu t等于路由器,然后我们这里边可以直接返回,也直接在里边写吧,返回这个I t click click I,当然我们需要在这里边,嗯。
06:16
不需要存参数对不对,你也可以通过存参数接收,跟刚才写的一样,咱们既然刚才写过一次了,咱们再再写一次,因为列表不一样,列表一样的话,你写在一个里边是不是就全搞定了,我们用两种组件的模板,所以这个方法得写两次,对吧?这里边Lu路由器push。然后这里是放一个对象的格式,然后path路径到哪了,斜盖de到这块来,然后传递Q,传递的参数,我们是ID,他们的ID在哪呢?我们在setup里边可以接收属性,咱们用一下这个叫pro对不对。它的名称你可以随便去保存啊,在这里边也能够接收到我们传过来的属性,对吧,传过的属性那这块就是PSPR。
07:05
传播属性是pro dut,找到这个属性,这个属性的ID我们可以这么传,传过去也是一样的。现在我们随便点击一本书,你看详情是二对吧,然后点击这本书。七当然这一样,这个页面有缓存了,将清七数据过来了,可是这样去处理。这样的话,我们都到了商品详情页了,那我们现在就可以回到这个商品详情页,商品详情页的模板咱们也做完了,咱们也做了一个雏形,不能说做完了在这个位置,你看这里边我们就是通过加载这个路由,通过这个路由我们获取这个参数ID。然后返回这个ID,所以在上边我们使用这个响应的这个ID就可以了。商品ID讲这个,那我们在这里边获取商品的数据,我们先获取数据,然后呢,咱们再分析这个页面的结构,我们先看接口给我们提供了什么方法打开。在我们商品列表里边找到商品详情,商品详情通过ID来获取,这个商品详情看到了吧,然后参数就是商品的ID,然后获取的详情,这里边儿有商品的所有的信息,对吧。
08:12
当然了,我们还可以通过这个要获取到商品的所有的评论。所有的评论,然后还可以获取到商品,所有的评论,关联的用户以及他的相关的产品。这几个都是我们页面里边需要的这样内容,那这里面的评论我就不给你做了。嗯,也是给大家像上节课咱们做分类一样,搜索留给大家,不能所有的项目都写完,给大家动手自己去做一个。把我做的功能写完,再把我没有做的功能给补上,这需要大家去做的,那咱们就通过这个接口。来获取数据,那每一个咱们都需要有一个单独的一个文件,需要一个单独的文件在网络请求这块。在这里边咱们新建一个详情。GS,呃,叫做。嗯,咱们叫做什么呢?叫做det,跟页面尽量是一样的一个JS文件。
09:04
然后内容。呃,内容和我们。我随便找一个过来。放在这里边来,当然我们这里边叫的就不需要得到商品了,得到商品详情对不对,详情叫做detal,然后里边需要一个参数是ID,通过ID上取,然后呢,接口,我们看到这个接口需要的是这种方式加的一个参数,对吧?斜杠后边加一个参数,所以呢,我们这块需要加一个斜杠,然后连接我们的ID。就可以了。连接我们ID保存一下,这样的话,我们在调用这个方法的时候,我们就能获取到所有的详情信息。然后我们回到我们的这里面,这里面呢,我们先要注册一个。Amount amount的一个方法,在amount方法里边,我们需要获取到商品的详细的一个信息,那。在这里边写一下。On,忘记。
10:01
梦在这啊。嗯,获取到信息,这个加上一个构造方法。加一个参数啊,一个方法里边也不需要任何参数的,那我们把获取ID的这个放在这里边。这样的话,我们路由通过页面挂载完之后过去,或者你放在上面,这这是无所谓的啊,然后我们通过get,呃,Get de TL通过这个方法,但是这个方法我们在这看加自动引入了。对吧,在这块通过这个方法。然后我们就可以传一个ID,传一个路由的ID id.VE吧,传这个。那或者是。我们直接在这块接收ID也行,就看你页面上用不用,如果不用的话,你不用在外边接受对不对,你在这接收也行,付给他,然后呢,再通过它传进来就能获取商品的详情,然后THN。拉过来。知音res,我们获取这个数据。这里面。
11:01
得到这个数据,那这数据呢,我们得先声明,既然是商品信息,商品的信息,那我们在这里边就可以声明一个,先声明一个商品信息,比如说呃,整个商品信息,我们就得看一下我们的需求。你看商品信息,有的商品的图片,有商品详细的描述,然后商品的概述,商品的热评,这个在咱们这个接口详细信息里边,一个接口咱们都能取到,还有相关图书都可以取到,都在这儿呢,对吧,所以呢,我们这里边。呃,获取这个。嗯,在这里边声明一本书吧,一本书,然后呢,Re re。你看这里边儿现在没引入我们。保存一下,然后呢。说明一个现在是一个空对象,所以我们在这里得把这个引入对吧?Re,引入进来,引入进来呢,声明书的对吧,它有详情以及评论,比如说de,它的详情我们变成一个空对象。
12:01
到时候我们直接把这对象扔出去,那我们就直接可以使用说的对象对吧,相新控对象,然后还有相关的图书,相关的商品,就是类似的,很像的就like,比如说woods商品对吧,是个数组,可以有多少本,然后呢,还有针对这本书的评论。评论,针对这本书的评论,那评论的也是有多条,那我们也可以加上这些,这样呢都是这本书的信息,有书的详情,全图书和这个,那我们看一下,通过这本某一本书拿过来的这个res.rog我们就能找到这些所有东西。我们现在ID7刷新一下。你看这里边有这个。这个是书的详情,你看书的详情直接在gods商品详情里边,然后like喜欢的图书,喜欢图书这里边没有评论的呢,在书的详情里边,你看有评论信息,但是评论数据为空号,后端没有那个评论的数据,对吧?评论的数据你看在这里边有一个,所以呢,我们想它也是一个数字啊,相把这个数据模型,因为我们用的时候是用到这个数据模型,对不对,用这个数据模型,那我们就得给数据模型进行初始化,这个book里边的det,让它等于res.gos。
13:18
你看后去看,那如果你想把这个评论单独提出来,那希TS对吧,评论单独提出来的话,当然前面加顾客啊。这个你其实是不用单独提出来的,因为在这个里边,在这个里边对吧。我们下一层他就已经有这个,你不用单独提出来把这个去掉吧。然后喜欢的图书来。Gods,然后前面得是加上。点就跟它类似的,不是喜欢的类似的很像的图书,相关图书,也就是re里边有一。有一个属性是。就是like裤子对吧,那我们在这块也加上这个like like like。
14:02
或带进来,这样的话我们就可以获取到我们页面里边的所有数据了。当然获取这个页面里边。嗯,这些数据,那我们还需要干嘛呀,我们需要把这个数据全部给我们。呃,返回去。然后页面才可以用对吧,那这块。我们看用什么方法呢?我想把这两个单独返回去,不要说单独返回一个顾客,如果单独返回一个顾客的话,那我们用的时候就得用顾客里边点这个,再点这个对吧,然后里边还是对象,还得继续点上去,比较麻烦,所以我们用什么把它解构一下。用上这个方法。呃叫做什么叫,呃,To re FS加上这个,然后我们在这个位置上。加上返回的是把它解构里边的每一个单独的返回,相当于to re。这样的话,我们在页面使用的时候直接使用就行了,不能是。这个在页面中使用的时候,也就是在这个位置,我们在定义内容的时候。
15:03
那么直接使用deal里边点ID之类的就可以了,这就是商品的一个详情。嗯。啊,当然了,我们这块你加完先加大括号,你下我再给你写这个所有的数据吧,这个咱就不写了。看一下这块怎么还不错。嗯,没有根节点,也就是我们上面的时候,我加了一个这个把它根节点破坏好吧,然后说所有的页面一定要加一个什么,一定要加一个根节点。所以呢,我们写数据的时候需要在哪写啊,需要在这个里面写就可以了,把上层的div当成一个点就行了。来,我们看一下出不出错。啊,没出错,数据我们也获取到了,那下节课就往上摆放就行了。好,谢谢大家,这节课我们就讲到这里。
我来说两句