00:00
好了各位啊,那学完了啊,这主艾的脚手架里边配置代理的两种方式呢,那我们就得用一用是吧,回到课件当中来吧,同学们,接下来呢,咱得做点案例了啊,你先别着急看这啊说这X4啊,这文档怎么怎么样,别急同学啊,咱先直接的往下滑,咱要做这么一个案例,就是gith up搜索这么一个案例啊看一下,首先一上来呢,页面这哎说啊整个这个区域,哎说请你输入内容,然后点我进行搜索是吧,那这儿呢,还有一个I提示什么啊,输入你的名字啊,然后去搜索对吧?然后呢,看一下啊,刚才我的画笔一停吧,它那个就断了,哎一搜索ES等着。他就会把ES相关的用户就都给你返回,诶你瞧瞧这么多人是吧?哎,来我们就写写他同学不要想太多啊,说老师这代理怎么配数据我怎么拿,不要想那么多,先把静态组件实现,咱还是可以的,那同学我想问一下,你觉得这个应用应该拆成几个组件呢?哎,我先抢答,最外壳的肯定是APP对吧?哎,你看我就这么坏,先抢答,我先把最简单的说完了,红色的是什么呢?APP你觉得里边应该怎么拆呀?
01:14
首先你必须现在得有感觉了,它是不是可以作为一个组件,蓝色的叫什么名字呢?是不是search搜索组件?那我再问你,下边这是不是展示一堆人的列表,你说它叫什么组件呢?你当然也可以继续的叫它list组件,那我再问你,同学,这里边的每一个,哎,这是一个人的信息,这又是一个人的信息,那我想问你,如果你还想拆的话,它是不是也可以叫做item呀,对吧?那么我们在写todo list这个案例的时候呀,已经拆过一次带有item的了,是吧?那这回呢,我们就不再写这item了,同学,你自己下去练习的时候,真的随你的便,想怎么拆就怎么拆,但是至少你得拆的合理,至少你拆完那东西。
02:02
你得能命出名来对吧?啊OK,来吧,几个组件呀,算APP3个不算APP是不是两个,一个search,一个list,回到代码当中,做好准备性工作,打开src,这个删掉,为啥删了,因为这里边已经有全套的了,对吧?配置代理这个呢,先暂时给它删掉是吧,知道肯定得配啊,但是怎么配还不知道呢,就先这么写着啊index.js里边是不是不用改,APP里边呢,那我得改一改了,这刚才测试的这么一堆删掉rcc出了一个新的APP,哎,慢点rcc,有的时候呀,你安装完这个插件之后呢,你看就现在这种状况,你打了rcc没反应,那怎么办呢?全选删掉,然后把这文件关掉,重新再打开,然后你慢着点敲rcc,哎,可能它就出来了,好吧,APP走放在这儿,诶放在这复制啊,放在这儿点点点点点点点好,启动一下脚手架吧,N bm start,看能不能行吧。
03:04
走,慢慢来啊,控台也开起来啊,看万一有什么警告啥的,OK,没问题了,那接下来呢,哎,找到那个静态页面,静态页面在哪呢?同学在这呢,React全家桶静态页面,这里边有一个user配置,那在这呢,那打开吧,啊我就按照我这个白板去给它打开吧,打开我这个白板,然后把这文件夹呢拖到里边来走哎,同学你注意啊,他确实写了一些自己的结构,也确实写了一些自己的样式,但是你注意了,同学,人家用到了一个第三方的样式库啥呀,你之前学过的是不是bootrap呀。慢慢来,样式压根不管,我就先看结构整体,一折叠,APP1折叠,所有东西都收起来了,那我再折叠一下,同学到底带不带着这个APP呢?就像咱之前说的,你回到index里边,你搜一下它有没有通过APP这个ID上样式,没有,那所以说同学既然没有,那最外侧这个APP我是不是可以就不带着了,那为什么非得多带一层结构呢?那把这些东西全选啊,复制,然后回到这个里边,统一都给它替换掉。
04:19
啊,然后呢,我先把这个给它隐藏缩进,是不是不对呀,我们调一调啊,走走这回就对了,那同学一定要冷静啊,接下来我们干嘛呢?都是固定的小节目,把class等号是不是得替换成class name,哎,早起这写上叫做class name啊,是不是得批量替换啊?哎,走起替换完了还得检查另外一个人谁呢?就是style对吧?哎呦呵,还真有啊。而且好像还不少呢,是吧,那我们就先改着吧,这怎么写呀?啊style得等于双划括号,然后呢,5S宽度啊值呢100PX对吧?哎,得这么写,那我就匹配一下吧,把所有的这个东西都得替换成这种形式是吧,来统一全部替换完事。
05:15
啊,那看看别的地方还有没有了style那种写法啊,我再搜一下style一个一个看这些都改完了,OK,没了是吧?好,那结构是不是就改好了呀?OK,别急啊别急,那我把这些呢整体折叠,那么我右键新建一个叫做app.css那接下来干嘛呢?把他这边来回到我的那个,诶这个文本编辑器里边,把他所写的所有的这些样式其实也没多少,一共20多行啊,复制回到咱们的代码当中粘过来,然后在这儿怎么的,是不是得引入app.dsport当前路径下的啊app.css啊,当然了,这A呢得大写的是吧?app.css好说老师,那看效果吧,别急,回到文本编辑器BOO strap,你是不是还没引入呢?
06:11
啊,那怎么引入啊,同学呢,说一下啊,你像boru这种成型的第三方的样式库,你最好放在public里边,你建立一个文件夹叫CSS。ICSS,然后呢,你把那个boot strap的样式放在这里边,那回到我的文件夹当中,这不有个user配置吗?那这不是有一个boat stra.CSS吗?摁住,哎,完了放这里边,松手是不是过来了。那这只是说存上去了,但是没有引入,所以说你得在这儿来一个link啊,然后是当前目录下的CSS下的bootrap.css这是不是就引入了呢?那你关掉,你看结构呢,也带来了自己写的样式,也有第三方成型的这个样式库也引入了,那你是不是得最终看一下效果了呀,来打开终端。
07:03
按住CTRL点按钮回来是不对,我这儿呢,是放的有点太大了啊,我摁一下CTRL0不缩放,你看是不是这效果,哎,搜索giha的用户,你看这些固定的结构是不是写好了啊,和你这边看到这个其实应该是一样的才对,来右键浏览器中打开啊,你瞧吗?你看这两个一模一样对吧?一点样式也不差,OK,那咱就把这个,哎,静态的这个结构就写好了,但是不代表你写完了呀,同学你组件拆了吗?设备没有呢啊,那来拆一下组件吧,右键新建components,那里边都有什么呀。啊,右键来,首先有一个刚才商量好的是不是search搜索嘛,那还有一个list是不是列表啊啊,那你这儿呢,新建一个index.gs叉,那你这也得又建新建一个index点儿GS叉啊好了,那这里边呢,Rcc走名字改list,这里边rcc名字改叫search,好东西都准备好了,接下来把结构往里放。
08:12
一会儿再考虑样式打开这,哎呀说老师这有点乱呀,不乱慢慢来。你看啊,你现在一折叠这个整体都折叠了,那不对,再往里边啊,再进入里边一个层级再折叠,这一折叠好像收起来点,这一折叠好像收起来点,那我说呀,同学,这儿就是那个search区域,那这就是list的区域,所以说你需要做的就是这一堆带走了。那在这替换成哪个组件呢?是不是search啊,啊,Search那不能光说呀,你是不是得引入search啊,Import search from当前路径下的components下的search,由于叫index,我就不写了啊来,那回到search里边,把刚才粘过来那一堆带过来,缩进调一调走好保存。
09:05
关掉,然后接下来怎么办?哎,那这就是列表了吧,说老师列表也看不到ul和Li呀,这没有用u Li和Li写,直接用div写的,你看啊,回到页面看效果,我有几个人,123456,是不是有六个人,是不是有六个人好最小化。你就发现啊,一个人两个人三个人四个人五个人啊,应该是六个人是吧,12345,那我看一下这是123啊,这是五个哈嘿,数数错了啊,不是六个,是五个啊,三加二嘛,五个啊回头来,那你看是不是五个呀,那所以说呢,你得把这一堆啊都给他带走,取而代之的是list组件对吧?那你在这儿啊,就得引入这个list,哎,走起,那这呢list呗,那这呢就把东西粘过来呗,走完了缩进调一调啊调一调,这得往前动了走啊一个人两个人,三个人,四个人五个人对吧?OK,保存这就是list组件啊,那不出意外的话,现在应该跟刚才的效果是一样的对吧?刷新你看,哎也是这样的对不对?好,那同学我问你结构是不是拆完了,但是样式是不是还没拆呢?哎呦喂,这样式。
10:24
老师这点卡的这一块啊,那我说一下同学,如果你细心观察的话,你发现我所有这里边所写的样式其实都是给谁的呢?都是给整个list的,哎,都是给他的啊,那所以说呢,就应该把这些啊样式都带走同学,由于是我写的样式,咱得说实在话,这样式是我写的,所以说我才知道它是谁的,那如果说你拿到一个别人写的样式,人家还没写注释,你就只能一点一点缺啊,右键审查元素一点点去看,OK,右键这删掉不需要app.css了,那你这里边是不是也不要再去引入app.css了呀,那在这引入一个index.css把东西是不是拿过来,那你在这呢,是不是得最上方就得引入当前路径下的谁呀index.css回到页面看效果刷新,哎,是不是也是可以的呀,嗯,但是别觉得呀,你就写长了,有一个小小的问题哦。
11:24
这些警告什么情况?读一读,他说list组件index JS叉的第九行有问题,那赶紧的吧,回到代码当中,List里边index JS第几行,第九行打开第九行,哎呀,A标签有问题是吧?啥问题呀?啊,回头来看他说什么呀?他说你使用了这个东西。他给他下划线,Blank,这是干嘛的呀?这是干嘛的呀?是不是控制A标签点完这东西是在当前页签打开,还是选择跳到一个新的页签打开,对不对啊,他说你用了这个东西,但是你却没有使用这个属性real啊,然后写的叫做no refer啊,No refer,那这怎么个意思呢?他的意思是你用了这个蓝色的东西,就不能不用这个红色的,你不用可能会有一些安全问题,那你就听话呗,来到这儿把这玩意儿复制啊,回到这里边找到A标签空格,走加上,回头你看你加上呢,这个问题应该就没有了,刷新一下走,你看第九行那个报错就没有了吧,朱老师,那我再看看所有带种带有这种东西的。
12:33
哎,全都是A标签产生的问题,那所以说接下来你觉得是不是应该这么做呢?这也是个A标签吧,加过来这也是一个A标签吧,加过来那这儿呢,是不是也是A标签啊,那这呢,走是不是也是啊好了,保存回到这刷新一下同学,你就发现警告就没了好多,那还有一些东西有警告哪呢?发现是image标签的问题。index.js叉的第十行,回到代码当中,瞄到第十行,什么问题呀?哎啊,妹纸标签啊,你忘了配置一个属性,Out,就是如果啊,这个东西加载不出来,展示哪些文字对吧?那同学啊,你看一下案例,你觉不觉得呀,他所展示的图片呢?其实都是这个人的头像对吧?哎,这个人头像,那所以说在这儿呢,那写一下呗,你最好别写中文是吧?头像啊,那怎么搜呢?哎,有道查一下呗,看看头像,这怎么写呢?说老师要不随便写一个,哎,同学正好聊到这了,你看着我给你随便写一个,你比如说很多人都写什么呢?Picture图片你看一下,你写picture,回头我给你刷新一下页面,你看他告诉你啥呢?他说呀,啊,妹纸标签。
13:49
你不允许使用这些词作为out值什么image啊,Photo啊,Picture啊,哎,同学你看它烦不烦人,其实呢,写的时候觉得挺烦,其实这是脚手架在检查你代码的一个标准化规范,尽量不要用这些东西是吧?啊那搜一下头像,头像,哎,叫什么呢?啊,叫做had是吧,Had photo,那有没有别的呢?嗯,比如说这个啊,Had,那就叫这个吧,啊,前面加一个单词叫做had是吧?啊回到代码当中来走head head下划线它那所以说所有的image标签是不是都得加上这个呀,走走。
14:29
走走好,加上了吗?保存回到页面刷新看效果,一个警告也没有了,对不对,哎,好了,同学,那我们就把这个静态的组件是不是就实现了呢?嗯,OK。但是我多说一个事儿啊,同学你说啊,我现在src里边写的案例是不是github搜索用户那个案例。哎,你注意了,有些同学呢,拿到我的代码之后说老师啊,我想再看看你的这个东西,Todos这没敲完呢,我想运行一下您的这效果啊,完了我看一看您之前教我的嘛,把这SRRC呢,目前写这个,哎给它换个名,比如说叫SRC0啊,那这不让换是为什么呢?因为你这开着呢是吧,脚手架开着呢,把脚手架停掉,哎,他就让你换了,老师,你看你之前教我的嘛,右键重命名对吧,完了把这个改成src,说老师,然后你教我的,然后一启动这个东西,不就能看那个todo那个案例了吧,那你看一下啊,接下来就有点小问题了,你看一下有什么问题啊,打开。
15:37
稍等啊,咱说一下,因为同学们练习的时候是会出现这个问题的,同学,哎呀哎呀呀,哎,老师这挺好的嘛,挺好看的,不对,这和我当时设计的不一样喽,你不觉得这东西小了吗?而且这东西你看这对齐都有问题了,那是怎么个意思呢?同学我说一下啊,因为呀,刚刚你是不是在public里边引入了BOO stra,哎,BOO strap有一些样式呢,跟我之前写的产生了干扰,所以说如果在我已经写完了giub搜索这个案例之后啊,你想你还想看这个hello react,或者说你看这个呃,这个什么,这个todo list,你就需要把这个boat呀,你给它注掉。
16:18
同学,到现在你还没发现这规律吗?就是你自己写的一些东西,如果觉得样式还不错,但是想用Bo,很有可能BOP1引入,把你原来的样式全都干扰了,所以说你把这个注掉,然后呢,回到页面,你再看同学它就好了,明白不?你看这儿呢,它也对齐了。哎,这是一个细节上的小事儿,跟大家说一下行吧,哎,如果你看的是GI top搜索,确实拿boat strap写的,你再引入这个,OK,哎,好了,那这呢解开啊,那然后怎么办呀,脚手架停掉,我得把SRRC重新改名为03SRC图do list,我得把这SRC0重新改回正常的src,对吧?哎,那我n PM start我看一下啊,瞧瞧现在这东西还能不能起来啊,起来的效果还是不是GI up搜索那个案例了,对不对,稍等。
17:12
大家等会儿好像还是这个案例,说老师这怎么回事呢?同学,我说一下啊,这不是咱们的锅,你发现这个东西都出来了,那证明什么呀,证明是网络请求的问题,知道不?就这个图片它加载不出来了,不是你的锅啊,你看他说不能够去加载,哎,资源再刷新一下,咱再试一下,有的时候网络不好,它就加载不出来了啊,那正好遇到这个问题了,防止同学们练习的时候也出现这个问题,那我改一下吧,同学们,行吧,我来到src里面,我找到components,我找到list这里边同学啊妹,标签是不是配置的全是这个人的头像啊,对吧。其实这个图像访问不了了,你把它复制你来到浏览器里边,有可能你在这一搜索,你看这图片转呀转呀,你看无法访问,不是你的,我是这个地址有问题,所以说P一个地址来,同学咱百度啊,搜点这个这个东西说老师搜点什么呢?搜个美女吧啊,百度是不能搜美女的,我发现这个特点了,再给大家讲课和录视频的时候,如果用百度去搜美女呢,有点太劲爆了,我就搜什么呢?头像走,点击图片啊,选一个大家觉得挺好的这个这个头像是吧?哎,我觉得这还不错啊,这不错,来就它了啊,然后右键选择在新标签页中打开啊,但这个我不能用,因为这里边它写了一个BASE64的编码,特别长啊,咱换一个吧,我想写一个在线的地址,找一个找一个哪个呢?啊找一这这也不错啊来右键新标签页中打开,诶这是一个地址对不对,你看什么什么点诶那把它给它复制过来,回到代码当中,把所有这个东西都得记。
18:50
进行一次更改啊,我复制一下CTRLF查找所有这个地址都得替换为回到这儿,把这地址CTRLC回到这CTRLV全都替换好了啊,地址就都替换了,那回到页面当中呢,走,你刷新一下,诶,你看这小头像是不是出来了,还行,挺好看的哈,哎,那咱就这样行,那咱就实现了GI up搜索这个案例的静态组件啊,我们这小节呢,停一下。
我来说两句