00:00
脚手架配置代理之后,接下来我们来写一个案例来实际去应用一下,那么我们写的案例是什么呢?就是豆瓣电影的一个搜索,它的这个页面大概就是这样,功能也比较简单,我们在这里去输入电影的名字,然后点击搜索,搜索到的相关的电影会展示到下面,诶,这就是我们要写的一个案例页面已经给大家准备好了啊,在这个目录里面,我桌面上放的这些都是临时文件,我会给大家都放到这个啊资料里,然后有必要的还会给大家放到代码里一份啊,那比如这个我就复制一份,然后。放到。我们的这个代码里面啊,放到哪呢?之前我们上一节课讲代理的时候,服务端代码放这儿了是吧,那我们把这个页面也放到这里。好,这个就是我们准备的这个电影的一个页面啊,打开可以看一下,里面就这一些东西啊,然后我们运行一下。会发现和刚才展示的这个页面是一样的,是不是好,那我们就把这个给关掉啊。
01:04
然后来看一下这个代码。呃,现在呢,只是这个HTML这样的一个页面,然后呢,没有写CSS啊,直接是使用的photop去,呃写的这些样式。接下来我们要做的什么呢?把这个htime面页面给整合到我们的react这个项目中,对吧?也就是说如果我们是写的一个项目,那这些页面可能我们就要一个一个的去写,是不是,但是现在是,哎,我们为了节省时间,是提前把页面写好,然后我们是把它给复制到。React项目中啊,这里给大家已经准备了一个啊,空的一个react项目啊,什么都没有,接下来我们把这个页面给放到react中来,首先对比一下它和react这个index al诶,它们有什么区别。因为是我自己写的页面,所以呢,我会呃,按照它这个大致的这么个一个结构,诶,然后把这个相关的代码呢,也写到了这个ID为root的这个里面,诶这样方便我们去把。
02:05
这个静态页面去放到react中啊,所以呢,诶可以看一下啊。呃,最终呢,它其实是要把这个app.gs啊,这里面的这个内容去挂载到public里面的这个。啊,这个节点上是不是啊,这个容器上,那所以那我这个页面的话,静态页面只要把这一块的这个内容,哎,我先给折叠一下,哎,是不是把它给拿到。我这里就复制一下啊,拿到放到哪里呢?放到这里就整个替换掉就可以了,是吧,因为最终哎它呢会挂载到啊public的这个。ID的这个容器上面。接着看一看,还有什么问题啊,它这已经是有红线,然后就呃有些错误啊,但是因为我们把这个HTML文件拿到了这个里面,它是什么?它是GS叉的一个语法对吧?呃,之前我们在学这个GS叉的语法说过,诶这里面它有一些规范,我们要注意啊,首先这个class我们要改成class name对吧?那之前我在粘贴的时候呢,因为这个编辑器比较智能,已经自动帮我改了,那接着还有什么问题呢?接着看啊,还有就是说诶,我们这个输入框。
03:11
它是不是要有闭合才可以。是不是这样的啊,那现在呃,可以看到这个红线已经没有了啊,那接着去找看看还有什么问题。继续往下看。这有一个啊,已麦计他也没有闭合。然后再往下看这一个隐麦机,它有没有闭合。表面上看起来没有什么问题了,是不是,但是还有问题啊,那这个注释肯定是不行的,之前在讲这个GS叉语法规则的时候给大家说过,我们在这个G叉里面你不能写这样的一个注释,好,那接下来我们把这样相关的注释都给删掉啊,首先是这个。好,那这个呢。呃,就不删了,我们只删这些,就是说文字内容的,那这种代码类型的呢,我们就先把它保留,因为我们还要用到啊,那保留呢,怎么保留,我们先把这两边的删掉,然后呃,就是使用这个GS叉的一个注释,如果你的编辑器比较智能的话,你把它选中之后,CTRL加这个斜杠,它会自动帮我们补全啊,好,接着看一看,这些文字类的就不要了。
04:17
好,文字类的就不要了。这些留着啊。那为什么要留这些呢?等会给大家说一下它有什么用?先把这个删了啊好,那接下来我们就说一下啊,它有什么用,那怎么说呢,我们在这个静态这个页面啊,静态这个页面里面给大家做一个演示诶。首先我来运行一下,这是这样的一个静态页面,对不对,好。呃,我留的这些代码呢,是就是说在我们进行交互的时候,它的一个不同时期的一个状态,那比如我输入的这个内容之后,哎电影,那我点击搜索的时候,点的时候呢,就是说在搜索中的时候呢,这个搜索这个按钮,它会发生一些变化,会发生什么变化呢?我把这个注释掉,那把这个打开。
05:13
哎。等一下啊。把这个打开。哎,它就会变成这样的一个状态,哎,这就是我留他的一个目的。清楚了吧,好,那这个清楚了之后呢,我们把这个打开之后看看。下面的,哎,这个。把它注出掉啊,看下下面我留的这些内容还是一样的啊,那我下面留的这些还是不同时期的一个状态,比如这个是first,就是第一次当我们进入到这个呃页面的时候,进入到这页面时候呢,因为你还没有搜索,所以说还没有这些电影数据,那没有这些电影数据,你不能展示这么一个空白吧,那我们这时候干什么,就告诉他,诶请输入这个关键字搜索电影,好,他输入关键字了搜索吧,啊搜索诶点了搜索之后呢,这里就不显示了,那显示谁呢?显示它,哎它呢是一个搜索中呢,就是说转动的一个状态,那在它转动的过程中呢,当然你这个按钮啊,也要是去显示一个搜索中的一个形态,就是这样的一个,看到了吧啊。
06:20
好,当然你感觉可能有点重复啊,这有一个,这有一个啊,其实留一个就可以啊,当然我写页面的时候,当时是都给写上了,接着当搜索完成之后,那这个是不是就没有了。对吧,那就是。呃,显示我们的电影,哎,如果找到了电影,哎,就展示这个电影对不对,那如果没有找到电影干什么呢?就是给他显示这个,哎未找到资源对不对?如果当我们请求发生了错误,哎,查询失败了,就是说请求发生了错误,没有请求到怎么的,就是查询失败。好,我注释的这些内容就是这些啊,不同情况的一个交互,所以大家知道就可以了。啊,清楚了吧,所以这里呢,我们在嗯,把它给拿到这个react中,我就先也给注释掉,先先不删除了啊。
07:09
因为我后面会用的啊,那接下来呢,再来看一看啊。这里啊,它用了一个什么,用了一个bootrup点密点CS对不对,因为大家可以看到我并没有写这个CS,你如果呃没有CS,那这些样式,它就呃就是没有样式是不是,那可以运行来看一下啊来。Start吧。可以看一下是不是没有任何样式啊,所以呢,我们要把这个呃,Boop。也给拿到啊。这个Bo对于一些比较成熟的一些第三方的一些这种这种类库的话呢,我们一般是在这个public目录下,我们去建一个目录啊,来放这些GS啊,CSS啊,那我这里就建一个CSS好建好这个CSS目录之后,哎,注意我是在这个movie目录下啊,建好这个CSS之后呢,找到诶auto up这个文件复制一下,粘贴到这个CS里面。
08:10
啊。来把它给关掉啊,大家不要搞混了,这个只是我给大家准备的页面的原始文件啊,用于我们去往这个react中去去进行复制用的啊好,那这个stop这个文件复制到这个set里面之后要干什么?在这个index这个里面,诶,我们要写一个link去引入这个样式啊。来。Link。当前目录下CSS目录下的这个boot。在引入之后,等它编译完成,去浏览器中再看一下。刷新是不是样式已经有了,那是不是和这个啊,样式是一样的,来刷新一下都一样的是吧,好。
09:00
那这个已经完成了啊,但是呢,还有一点细节,就是我们刚才说的,那我们写这个react项目是不是都是以组建的这个形式,对不对,哎,我们不可能说把这个代码啊,你看都放到这里,我们要把它给拆成一个的组件,那关于怎么拆分呢?刚才给大家也已经哎说过了,我们去简单的去拆分啊,就是这是一个APP啊,那这个我们就不管了,那这是一个。哎,上面这个是一个色系组件,对不对,这是一个绿色的组件,我们就这么简单的拆分好吧。来,现在就开始拆,你如果想把它再拆成STEM,拆的细点的话,你可以试一下。在这个。Src目录下新建一个目录啊,放我们的组件。Components。接着在里面建一个目录。色系,哎,这是我们的色系组件。那再建一个什么一个历史的组件。
10:03
历史的主见。接下来在。哎,这个组件里面新建一个啊文件。index.ts叉,诶。写一个组件啊,RC。不全,把名字改了search。接着。这里面就写头部搜索的那些代码,我们来看一下头部怎么去拆分呢?它其实是呃,比较好拆分的。把这些给折叠一下。看一下啊,这里是最外层,那这里是不是这个头部的这个我们折叠看一下来,接着再看这里,这里应该就是呃,列表的这个是吧,我们来折叠是不是就这么两块,这个是啊,色气就是我们头部搜索的这个,那这个就是粒子的哎,展示列表去的那个。所以那如果我们去把这个代码呢,去放到这个search这个组件中,是不是直接把这一块给拿掉就可以了,对吧,拿掉放到。
11:09
嗯。这个四的。这个index点儿GS叉里面,哎,就是这个文件啊。啊,就是这个组建的这个文件里面,哎,这个。来这个就不要了,整个替换掉啊,把它给展开。是不是这样的一个内容。接下来呢,呃,你这里是把它给拆出去了,但是在这里是不是还要用,对不对。哎。Import。色。诶,自动给我补全了啊,那这里使用这个色系。好,接着去拆这个list,同样的在list的这个组件里面去新建一个index.g差。嗯,少个X。
12:00
重命名一下。Rcc,哎,Type键补全之后把名字给改了,历史组件那这块呢就不要了,替换成谁呢,替换成。这个内容是不是,你看这个是整个这块,就是list列表区域的一个内容嘛,对吧。来把它给折叠,然后。剪切,哎,剪切之后粘贴到啊这个list这个index叉里面,哎,这里面把它一展开,这个就是我们list的这个组件好。之后呢,你要在这个app.gs里面啊去用上才可以啊。来这里来input。List。来在下面去用一下啊,List保存,等它编译完成我们去。呃,看一下是不是一样的啊结果。刷新了。
13:00
是不一样的。接下来打开控制台,看有没有什么问题啊。啊,这有个警告,警告的意思大概说啊,这个已迈进呢。啊,你必须要有这个啊,这个al这个属性啊,那我们把它给加上啊找一下。那image是在这个list里面找到这个image标签,我们给它加一个。Al。啊,这里面啊,写什么内容呢。我现在随便写啊,把这个也加一下,比如我写个啊已卖保存看一下。好,这里又说了啊,他又说,呃,你这个al这个。这个属性呢,你不能是image photo,或者是这个picture,是不是他不让你用这些字。哎,这个也是大家注意啊,我们按照它的一个规范来。咱们把它改成什么,其实一般像这个alt,它怎么在图片加载不出来的时候显示对吧?好,所以这个一般就是这个电影的这个这个名字就可以了,对不对。
14:02
这样写上啊。接下来再去看一下。把它清空刷新可以看到啊,已经没有那个警告了,那这个是什么,这个是这个谷歌这个开发者工具啊,我们这个调试工具。他要去找啊,这个的这个这个map。因为我们使用的这个bos trouble哎,看一下这个是点in点那什么点面就是它是一个呃,压缩后的一个文件。看到了吧,它是一个压缩后的文件,所以为了便于我们调试呢,它会去找这个对应的压缩文件的这个呃,Map,如果你不想让它显示这个警告呢,就把它给关掉就可以了,在这个设置里面这里啊点掉啊,这个是它去要找这个set的source maps,那你把它关掉之后呢,你再刷新,它就不去找对应的这个map sources。现在我们已经把静态页面给放到了RA中,并且把对应的组件给完成了一个拆分啊,有几个地方大家需要注意一下,就是如果你把一个静态页面去放到这个react的这个GS叉里面的时候,有一些这个呃,细节你要注意,也是我们之前在讲GS叉语法规则的时候啊,那比如那之前这个页面里面所使用的这些class你要注意啊,把它改成class name对吧,那如果你。
15:19
这个有使用到这个style,就是说内联样式的时候,那你还要改对不对,你如果你使用这个内联样式,哎,那我们挪过来的时候可能就是这样是吧,那它会也会报错啊,所以这个时候你也要去把它改成嗯,GS叉语法规则里面的这个style啊,当然我们这里没有用到,就不说了。还有就是呃,因为在这个HL这页面中啊,像这个input呀,像这个image啊,它不闭合也没有问题的,看到了吧,但是在这个呃GS叉里面,像这些单标签,你必须要闭合才可以哎,不然它也会出问题啊,这也是一点啊,再一点要注意的就是呃,像这个图片啊,它要有这个属性啊,不然它会给你一个警告,当然不影响你使用,那你如果想把这个警告给去掉,要加上这个。
16:05
加上这个属性就可以了啊啊,这是一些要注意的地方啊,还有一点就是这个注释啊,因为你在这个H2里面是这种注释啊,那我们在这个GS叉里面,你要改成GSX相关的一个注释。啊,如果你的编辑器啊,就说你CTRL加斜杠不能自动帮你去补全的话,那你就自己去写一下就可以了啊,就是两个大括号,两个大号里面呢,再加上这个斜杠星号,哎,以及这个星号斜杠结束就可以了,那里面包裹的就是我们要注释的一个内容。好,这节课我们就先把静态页面给完成,下节课开始去继续完成我们这个电影搜索的这个案例。
我来说两句