00:00
好嘞,各位同学,那咱们呢,刚刚讲完了合并参数,那那接下来咱们要接着搞什么了,还是得搞咱们的home的首页。四那这里呢,老师要说一下咱们接下来要干什么,接下来要开发咱们的后首页。OK吧?那也就是说咱们的home首页呢,还没有完事。那首先说咱们的后首页当中还有一个谁,咱们要搞搞,就是这个轮播图。对不?那当然老师得说一下子,像轮播图这里服务器是没有数据的。咱们可以看一下。就是咱们发的这个请求啊。它只返回了商品分类的数据,这不就是咱当年用的商品分类的数据,而没有这些像所谓的这个轮播图的数据。对,不但这里的数据也是假的,也是没有数据。
01:00
这能懂不?这能不能懂,就是这儿也是假的数据,服务器也没有给咱返回数据,咱也不做了,对不?那当然咱们这里是要做的。那虽然说服务器没有给咱返回数据,但是一会儿老师会教你们一个技术,叫做mark。自己模拟一些数据。OK,不,那当然像这里就是一些图片的展示也是假的数据,那以及这里热卖拍行也都是一些图片,也都是假数据。对,不像这个布局啊,有的同学可能到项目阶段说老师以后工作了,我怕布局,这有什么难的呢?这是咱们入学做的第一件事儿,对吧,布局就这点儿东西浮动定位。对不?当然还有一些其他系数要扣的对吧?那以及猜你喜欢这里也都是死的数据,就是一些图片。那当然,家用电器这里,咱们到时候也得去摸一些假数据。OK吗?那当然,底下这里都是假数据。
02:01
OK,不,既然老师说了这么多,就是想告诉你一件事,什么事?咱们的home首页当中,只有这里才是服务器返回的数据,而其余的数据都是没有的。OK吧,那虽然没有,但是咱的还有一些业务逻辑,咱们得搞搞,就是首页当中这个轮播图啊这里。咱们得搞搞,以及还有谁呢?还有这个财,还有这个家用电器,这里咱们也得搞搞。那虽然说服务器没有给咱返回数据,但是咱可以造数据。比如说前台是可以造数据的,说老师是不是用node JS不是。所以说咱们接下来得学一个东西,开发首页当中哪个组件,咱得说一下,还记不记得这个组件是哪个组件来的。叫做list container你看嘛。就是谁,就是咱们home下的,因为它是home下的,Home下的是不是有个叫做list container是不是带有轮播图的这个。
03:03
对不,所以说咱们接下来开发首页。当中的这个叫做list con,哎呀,Container组件与谁与?这个应该叫什么呢?应该是倒数第几个呢?应该是倒数第二家用电器,咱看一下这个组件叫啥。这个组件应该叫flower对不?所以咱们接下来开发首页当中list container组件与组件。Flower flower组件。对,不,但是这里要注意一件事,哎,但是这里需要知道一件事情。也就是说咱们服务器返回的数据只有就是那个接口。哎,就是那个接口只有商品,哎分类就是那个菜单分类的数据。
04:00
而对于这两个组件的数据,它是没有,哎,对于这两个组件的数据,服务器是没有提供的。OK,不,那所以说咱们接下来要学一个技术叫什么,叫做莫。我不知道你们以前有没有听过默,有没有听过,有听过的给老师扣一个一叫做默。默克数据。莫,咱们先别说别的,咱们先看这个单词是什么意思啊,咱们搜一下子就搜一下百度翻译。哎,百度犯规去了,咱们搜一下,你看这个默这个单词是什么意思啊,没学过没事啊,本来就没学过对吧,看mark是有什么意思,有嘲弄,嘲笑,不尊重,蔑视,那当然咱不是这个含义。咱用的是形容词模拟。这能懂不叫模拟?所以说以后工作当中有的时候咱们经常会磨一些数据。
05:02
什么叫墨?就是模拟啊,模拟。OK吗?O,不OK,那这里面这里面哎,就是这里面,比如说如果你想默数据。比如说。模拟一些数据啊。那你需要用到一个插件叫啥叫Mo GS。这个插件可以帮咱们模拟一些数据。OK不OK吧?那当然这个work GS咱没有学。那咱们呢,去搜一下他的官网啊,我不知道这这个网站你们有没有,就是这个印记中文有没有这个网站,这个网站比较好,就是前端一些常用的库啊,它这里面都有这个老师给你们留个地址啊。或者你百度一下都有,你就在这个网站当中直接搜搜more,你看有没有。有吧,叫Mo GS,来咱们进一下它的官网,咱稍微看看。
06:00
咱们呢,先别看人家的语法怎么怎么地啊,咱就先看一下老师先点一下看能不能进去啊啊进不去,这网速不给力啊。行,咱呢,就先看看人家这个官网啊,你看一下人这个官网,你就先读读这句话啥意思。生成随机的数据。咱们先别管别的老师问你work GS可不可以生成数据。但是前面加了俩字,叫做随机数据。对,不拦截阿贾克斯请求。那读完这句话呢?你可能不懂,但老师就问你件事,咱有一句话,人话能听懂,就是生成数据。这句话能不能懂?随机咱们先不管,就是生成数据能不能懂,能懂吧,还有一句话就是拦截阿贾克斯请求啥意思呢?看这。老师呢,给你画一个图。老师呢,给你画一个图,它这里面有一句话叫做拦截阿贾克斯,请求看这啊,老师呢,给你们画一个图,咱去看一下。
07:09
来看这老师呢,给你们画一个。那首先说啊,咱们搞前台的学过阿贾克斯。那就比如说这是咱们的前台,看着啊,这是咱们的前台。OK吗?就是前端,那这个是哪端,这个是后端啊,就说服务器后端。啊,后端当然你说你用的是Python或者Java都行,那咱们应该知道,正常说前端和后端是不是要通信。那你前端得怎么的,你前端是不是得发请求。是不是得向这个服务器发请求?对不,那服务器接收到这次请求一看啊,你找我要的数据,是不是服务器做出相应的响应,给你返回数据。对不对?这是咱当年学的阿贾克斯,就这没问题吧?哎,就这没问题吧。
08:02
哎,这个老师呢,把这个箭头还能不能给他。倒饬过来,回手掏。A,这个能给它整直一些。诶,完美。这是咱当年学的,就是你前台可以向后台发请求,服务器接入到请求是不是返回数据,而你要注意ma GS它的发的请求是会被前端的浏览器给他拦截的。什么叫拦截?也就是说你work的数据并不会向这个后台发请求的,他只是在你前台项目当中自己玩耍。比如说他的请求是发不出去的。这种懂不?这能不懂,比如说这个老师给给这个建议,给你去掉,比如说默的数据,它会被浏览器拦截到,他发不出去的,他只能在你的前台项目当中玩玩。OK吗?就这个能不能懂。这个能不能懂,能懂的给老师扣一个一,也就是说你默的数据,你只能在前台你的项目当中自己去玩耍。
09:05
他不会向服务器发请求的。但是你默的这个数据,你就把它当做服务器真实的接口返回数据就行了,咱们知道啊,就假装是服务器返回就行了,但是你得知道。你默的数据前端发请求的时候跟后端是没有任何关系的,他只是咱前端程序员在自己的本地项目当中自己在玩耍。这能懂不?所以说这块呢,老师呢,也给你来一个小标记,这块一定要切记。这块呢,一定一定要切记啊,也就是说咱前台work的这些接口数据写一下,也就说前端啊,工程师自己默的这些假数据啊,就说模拟的数据,墨的数据啊数据那么不会和你。的服务器怎么的啊,进行啊任何的通信。
10:04
也就是说只是你前台的项目当中,你自己在玩耍,你自己work的这些数据。OK吧,就是跟后台,他不会向后台发请求,后台也不会接受到请求,也不会返回数据,他只是莫JS这个插件。它可以让你在自己的项目当中自己玩这些虚拟的数据。就这能不能懂,能懂吧,所以说他有一句话叫什么话,叫做拦截阿贾克斯请求,谁拦截浏览器,浏览器不会让你这次阿贾斯请求发到服务器上的。你只是利用ma GS这个插件在你的项目当中自己去玩耍。这些。OK不OK吧,那当然老师呢,点进去看一下,看能不能点进去。咱们稍微等一下,我看墨JS有没有中文的啊,就是墨啊,点JS中文看有没有中文。
11:02
要不然这个有点进不进去,它一直加载中文。看一下有没有官网,他还是他。跳不进去是吧,我想让你们,哎,这是跳到get get,咱跳不进去啊,我想搜下莫的一个中文文档,我看有没有。这又是他应该又进不去,看有没有中文的啊。他有没有中文的,我想让你们看看文档,这也没有,行,我再往底看CSDN呢。啊,CSDN也没有是吧啊。行,因为老师想让你们看他可以就是就是他是怎么用的。OK,不,以及它是可以随机一些数据的。OK吧?呃。行,那这里呢,老师大概随便找个网站啊,这个带你们看一下,我把右侧给你关掉啊,右侧给你关掉。
12:00
这样式的,诶我知道去哪去这搜NPM。对不?咱搜NPM找你NPM你再给我搜莫。Mo JS。对不?走,这不有吗?哎,咱进这儿看看啊。虽然说它的下载量呢,咱们先看下载量,你看一下子啊,每周大概有。呃,五万多,最新版本是一点几对不?哎,当然它这里面没有文档。是不,哎,没有文档,文档又要跳到这,又跳到这又进不去了。行了。呃,这个老师说一下子,这里面有一个叫做随机数据,这里老师说一下子吧,我看一下子啊,就是默JS,呃,看有的同学说这个网站,那咱看一下啊,这个HTPS。对不呃,3W点,哎点。B啊。BOT啊,Boot c DNC dn。
13:04
呃,点CN看一下。对不,咱搜一下mark啊GS看有没有。啊,这有是吧,啊看一下。随便找一个版本吧,咱们看一下有没有相应的这个这个这个这个官网啊,这个没官网啊,你不扯淡呢吗?这官网又跳到这来了。对不啊。行了,那这个呢,老师大概说一下这个这个墨GS啊,它是有这个模块的,而且它可以生成随机数据啊,随机数据呢,到时候你可以点去看一下它的语法,语法很简单。OK吧,好了。那咱们呢,就得用这个模块,那老师问你,咱们的项目当中有这个work GS这个模块吗。哎,老师问你,咱们项目当中有这个work JS这个模块吗?没有吧,你看吧,咱现在是不是有Asia,有lies,有n progress,有voee root VO叉,而没有work JS。那所以说啊,咱们做的第一件事是什么?是把咱们的work GS先给它装上。
14:06
那所以说CD进到咱们的项目维加当中,按一下子CNPM。对,不in到more mockwork GS,记住是work GS,不是mo.gs。OK,不,所以说咱们把这个模块给人家安上。OK,不,而且要记住,如果你忘记了有没有点,刚刚老师告诉你们一个网站叫做NPM。对不,因为你像咱们下是从哪下是从NPM下,你就搜Mo JS,你看人家安装的时候是不是会告诉你叫做,呃,看哪是不是NP miwork JS没有点,这一定要记住没有点。OK,不,那所以说咱们的work GS已经安装上了,那接下来咱们就得看看它怎么用了。对不?咱们找一下莫GS有没有安上瞄眼啊瞄眼,我记得我好像刚刚安了的。
15:03
我刚刚按没按。好像是安利的吧,是吧,来再安一下吧,忘了。来,呃,我刚刚安啊,我还真忘了。啊,好像是啊,等会啊老师找到。给它关掉一个,只留一个,OK,行,那咱CD一下CD走CS所n PM in到杠杠save more JS对,刚刚忘记了杠杠save啊,给它装上好了,那这回咱们再看一下mor GS有没有,那这回不就有了吗?看一下子啊,是不是这一定要记住没有点,那这个Mo GS怎么用呢?老师说一下来看这。老师呢,把这个步骤我给你写上。来我找一下笔记来Mo GS怎么使用,就是使用的步骤,哎,使用的步骤。首先说第一步。第一步,第一步干什么?在你的项目当中,就是在项目当中的src文件夹中。
16:05
创建一个叫做work文件夹。OK吧,所以说在咱们的src目录下,你创建一个文件夹,叫做默。那这个文件夹是干什么的,是提供。假数据的,但是你就记住了,它不会向服务器发请求,咱就当做一个真数据用就行了。OK,不,那第二步你得怎干什么?你得准备你那些假的数据。第二步,准备接数据。对不,这个第二步步写错了。而咱们这里的这个数据,就比如说咱们这个项目当中这个轮廓图的要用的数据。对,不,轮播图,这要用的数据咱们得以杰森的形式进行展示。以及底下的这个家用电器,这里的数据咱们也得用杰森的格式进行展示。对,不但是这些阶层数据格式呢,老师呢,已经给你们准备好了。
17:01
在咱们的这个课件当中,是不是有个上归谷?这个课件,这个课件当中,老师已经给你们准备好那个杰森数据格式了。所以说将来你们也是到这里去把数据格式给老师捞过来。那所以说咱们看一下在哪呢,看这。啊,咱们找到work work模块找一下这呢,看这啊,模拟数据接口在这呢,啊在这呢。OK吧,咱们有两条数据要模拟出来,第一个是这个list container当中这个轮播图,第二个呢,就是咱们这个家用电器这里。OK吧,那咱们找一下在哪在这。这个是谁首页广告轮播图的数据?OK吗?他是一个杰森,那咱就直接给他捞走。看这就给他捞走。这个其实结构很简单啊,你看它就是一个数组,数组里面有四个对象,对象有相应的图片的啥,图片的地址。
18:06
OK吧,那所以说来。把这个准备啊,准备阶层,数据格式括弧在哪里?准备在work文件夹中。创建相应的接文件,准备这些数据。那所以说来,咱们先准备在墨文件夹当中,咱来第一个叫阶层文件,叫做。Banner点杰森。那这个就是咱们所需要的数据了。它是一个数组,数组里面有四条数据,那就说明将来咱的轮播图有几个图,有四张图。而且你要注意这个数据当中,这个图片的地址是以杠开头,杠咱们应该知道是不是根目录。还有这个杠。它是相对HTML的根目录的,是要放在这儿的,这些图片资源咱还没有呢,但你先不用管这是不是一个数字输入,里面是不是有四个对象,这就是将来咱们这个list container当中的这个轮播图的这个数据。
19:09
OK,不,那当然还有一个就是咱们底下这个家用电器,就是这个flower组件的数据,咱们也得mark。数据在哪在哪,在这,你看首页楼层数据。对,不,但是这个数据有点大,你慢慢呼走往底下。找还挺多的,看这找找找找,哎,到这儿。对不把它也复制粘贴出来。把它放到咱们的work文件夹下,咱起个名字叫做flower。I叫做flower floor flower点杰森。对不,那咱们把它也给它放在这儿,咱拷贝一下。格式化这块一定要去,一定要格式化一下,你千万别给我留空格,留空格你是跑不起来的。
20:00
老师说一下这块一定要注意啊,就是这个积分数据格式一定要格式化一下。别留有空格,别留有空格,留有空格,你的项目是跑不起来的。这里一定要注意。OK,不,那所以说咱们模拟的假数据已经有了,但是一定要注意,将来你请求这个数据的时候,这个数据当中是有图片地址的,而图片地址咱们还没有整好。那你要注意它是不是有一个叫杠。以妹制资下的什么班得一班二,班得三,班得四,这些四张图片一定要注意,将来咱们项目一打包会有一个Dis的文件夹。对不?对不对。对不?那你一定要注意,你要把这些图片放到哪,放到public文件夹去。所以这块老师给你写一下子写个步骤,第几步,第三步。第三步。就是把work数据需要的图片放置到哪,放置到public文件夹当中,Pub文件夹中,这个咱们应该知道。
21:11
Public。文件夹在打包的时候会把相应的资源原封不动,原封不动的打包。到哪到Dis的文件夹中。对不,这个知道吧。老师,你们这个知不知道,就是在打包的时候,他会把public文件夹下的这些静态资源会原封不动的放到那个diss的文件夹当中。所以说到时候咱们这些模拟的假数据是需要这些图片的,所以说要把这些图片放到这里。OK吧,那所以说在这咱来一个文件夹,叫做以昧之资。OK吗?把咱们所需要的这些图片来。咱找找谁呢?就是list container当中,咱找一下应该是在哪。
22:04
在view当中,在list container文件夹当中所需要这这些图片,CTRLC。这样的咱给他捞走。老师往这边挪挪。呃,这几个都给他捞走啊。先给它捞走CTRLC。把它放到public中。OK,不,当然多了一个文件夹,以昧之资啊。23456行CTRLC把它拉过来,当然有几个是不用的啊,就是这个ADE是不用的。对不,因为他就四张图嘛,还有这个icon咱也不用。那就给他删了,那以及还有谁还有flower组件当中这些图片。咱找一下flower。Flower应该是home下的flower下头这些图片咱也给它扔进去。这几个123456789 ctrl c log。
23:00
对不CTRLV。对不?那当然,咱们现在已有的这些图片先别删,因为一删全没了。这能懂不?这能不能懂,就这个现在已有的先别删,咱最后再删。OK吧,啊好嘞,这是它。但是现在还是这个样子。对不,那接下来走你第四步干什么?老师也做一下笔记,第四步,哎,第四步。四。第四步就是第四步就是开始work虚拟的咱们这些虚拟的数据了。OK吗?需要通过哪个模块,通过ma GS模块实现。OK吧,那所以说回到咱的Mo文件夹下,给他创建一个模块。哎,叫什么呢?叫做work serve。点JS文件。
24:00
那就是用这个文件去模拟咱们的数据,因为这些数据已经准备好,就是用它去模拟咱们那些假数据。所以说这块呢,老师也写一下子,哎,那这第四步老师重写一下吧,就是创建咱们的work serve ser VR啊ER VR serve.j通过mark。JS插件,哎,实现模拟数据OK不OK吧,好嘞,那所以说来看这你得引入相应的数据。那咱们先引述于直言你第一件事,你是不是得先引入ma GS模块?对不,因为你得用它去模拟假数据,所以说咱们写一下就是inport,谁呀,叫做mark,要注意是大写的。要注意是大写的从谁那儿引,从work JS。记住,没有点。
25:02
这里一定要记住啊,是大写的墨,它是个对象。OK吗?是从work GS模块里边引的,记住没有点。那以及咱们要把把什么把那些Json数据格式引入进来?OK吗?In port,咱们的banner for谁banner,这就是那个home当中的那个轮播图的数据。点杠ban banner点杰森。对不,那以及还有谁?In port叫做flower。For点杠。哎。点杠,咱们的flower点杰森floor flower点森老师还没写别的呢,我问你,你们有没有一个疑惑?老师还没有写别的地儿,你们有没有一个疑惑?
26:04
咱先别往底下写,就到这儿,有没有一个疑惑,就这。什么疑惑呢?你看这儿。首先说这两个杰森文件,老师根本没有对外暴露,你发没发现?你看嘛。这两个杰森文件,我对外根本没有暴露。看这儿。就这两个杰森文件老师根本没有暴露,但是我在引入的时候,你看我是不是直接引了。哎,对不对。他这样,虽然说老师写的时候,可能你们自己都不知道有没有疑惑,但老师给你们说,你真得有疑惑,什么疑惑?就是这个杰森数据格式老是没有对外暴露。点阶层我也没有对外暴露,但是我在引入的时候,你看。我是不是直接引了。对不对,对吧,为什么呀。为什么?就这块儿老师写一下,就是你会发现一件事,什么事就是老师,就是杰森。
27:04
数据格式。我根本没有对外暴露。对外暴露,但是可以引入,为什么?为啥就说明no学的不精?你要记住啊。Web pack当中它默认对外暴露的模块有哪些?就web派对外。比如说呃,写一下吧,就是这个这个挖。派默认对外暴露的资源就是暴露的,有哪些就默认就对外暴露,有谁有图片?图片的文件是默认对外暴露的,以及还有谁杰森数据格式。他们都是默认对外暴露。你就想想咱们学的时候,你引一些图片是不是inport QQ from qq.pg inport,微信from微信点PG。
28:01
那图片它是一个张图片,它能对外暴露吗?不能吧,这是啊,这是因为它默认暴露。OK吗?以及杰森数据格式也是一样的,它都是默认对外暴露的。而不像JS文件,JS文件你得写X pro,你得对外暴露,而像这些JS和图片,你不需要对外暴露,在别的模块当中也可以引入,这个能不能懂?能走的给老师扣一个六。能懂的给老师扣一个六。一定要注意,像图片,像杰森数据格式是默认对外暴露的。OK吗?你不需要export。OK,不,你别到时候晚上自己练的时候,诶,这个杰森怎么没有对外暴露,而这块可以引的是可以的。OK吧,好嘞,那接下来咱们就要咋的了,哎,去work咱们的数据,Work数据。
29:05
怎么整?很简单,就是mark对象身上有一个叫做墨方法。OK吗?叫做点墨,但一定要注意大小写,Mor是一个对象。对象的身上有个方法叫做墨,因为那个官方文档进不去啊,你们到时候可以看一下官方文档,OK吗?它是一个方法。它需要有两个参数。第一个参数。是你请求的地址。OK吗?第个哎,第二个参数上是你请求这个地址箱的啥数据。OK吧,所以说咱们请求的地址是什么呢?模拟的假数据老师都是以杠莫开头的,杠莫下的谁班。这是请求的地址,第二个请求的数据,老师放了一个对象,我也给放的扣的,如果成功,老师也返回个200。
30:01
以及数据是谁,数据是咱那个阶层对象班的。就这能不能看懂。可以吧,还有一条数据,这是谁的数据,这是不是在模拟?首页那个大的,哎,大的。轮播图的数据。对不,那咱们还有个啥,是不是flower那个组件的数据就是mark.mark。mo.mo地址是谁,是杠?Mark下的谁呢?咱们就叫做flower。对不,数据是什么?那也是一样,扣的200代表成功,数据是谁?数据是咱的flower。就那个杰森。就这能不能懂。这能不能懂,能懂吧,但是你要注意你现在写的这个JS文件,你别看文件多,就假如咱项目当中现在只有这一个文件,老师问你这个文件咱执行了。
31:03
老师问你,就是当前的这个JS文件有对外暴露吗?没有吧?但是还有一件事,他执行了吗?告诉老师有没有执行。告诉老师有没有执行。没执行吧。那没执行就跟没写没什么区别,这能不能保?但是你要注意,当前这个模块有对外暴露吗?没有对外暴露。咱别管说暴不暴露,你最基本一件事,你想模拟一些假数据,你这里面代码你至少得执行,你根本没有执行。就是最后一步干什么,看这最后一步。第五步。把咱们的mark solve.js文件。在入口文件中引入,因为这个模块它至少需要执行一次才能,咋的才能模拟模拟数据,如果你连执行都不执行,跟没写没什么区别。
32:06
所以说最后把咱们的墨的这个数据在哪,在咱们的命点GS当中,咱们再引入一下,让他执行一次。咱只是引入,因为因为什么,因为这个模块对外根本没有暴露。你不用写什么引炮的a from b了,他没有对外暴露,你只需要把它引进来,让它执行一次就行,就跟咱引样式是一样的。所以说咱们引入more。serve.gs对不,这是啥?这是咱work虚拟的数据。对不?那就引part,谁是不是应该是咱的爱杠?看看夜是不是墨?Mark下的是不是这个叫做more so?就这能不能懂。就这个,能不能懂,同志们。这个能不能懂,能懂吧,其实就是利用了一个小插件叫做Mo GS,它对外暴露了一个对象叫默,通过这个对象的默的默方法可以模拟一些数据。
33:07
但是这些数据呢,咱们要用杰森去装。但是你要注意,这个模块搞完之后,你别忘记在入口文件,你这是要引入,因为至少让他执行一次。OK吗?这个能不能懂?可以吧,好嘞。
我来说两句