00:00
大家好,那这节课继续初始化我们的项目。在上节课我们已经把没有嗯,用到的一些文件,就是说脚手架自带的文件给删掉了,对吧,那这节课我们主要进行这个logo以及显示文字的一个替换,把它改成我们项目的啊,这也是很重要的一个地方啊。呃,首先我们使用的这个模板啊,我们使用的这个布局是他继承的一个布局,对吧。就是我们找找它那个文件在哪,怎么去改它。呃,还是看这个路由啊,分析这个路由我们往上一层一层的去找的话,你会发现它使用的是这个baseline out,对不对,那我们就去呃,这个layout里面去找这个base out。啊,在这里面。啊,大家可以看到啊,嗯。Default foot就是默认的底部啊,底部的一个定义,那在这里呢,我们可以看到有这个嗯,K,然后有这个啊抬头以及跳转的这个链接,对吧?啊,你不确定是不是这样的情况下,你先删两个保存看看。
01:02
会怎么样,是不是就没了,那get up什么的就没了,对吧,那现在还有一个这个东西啊。那这个参数呢啊,大家也可以看到是link对吧,那link控制的就是上面的这一排的,它可以点击这些链接啊,之前有三个,现在我删个剩一个了,对不对?好,但是如果这一个我们也不想要的话,怎么办呢?那你是不是想的就是把它删掉呢?嗯,我们来试一下啊,你看看啊。好,现在我直接把它删掉了,哎,你会发现它又多出来这么几个,对不对,哎,所以删掉是不行的,删掉的话它没有这个属性,它会去用默认的。清楚了吧,啊好,那我们来给一个no。这时候再来看一下就没了,是不是啊。就是不要这个link啊,接着它最后一个这个,最后这个是谁控制的呢?就是这个,你看这个copyright对吧?啊,那我们,嗯,前面这是一个时间啊,获取的是就是说当前的这个现在的一个年,然后后面是我们的这个名字对吧,那我们只要把这个改了,改成我们的,比如说啊融资商城啊。
02:07
这样我们底部就改好了。看到了吧,好,那接下来要改的是什么呢?改的是这一块啊,这一块呢,它是一个logo,以及我们的这一个title。那这两个呃怎么改呢?首先啊,之前在给大家介绍这个目录结构的时候,我们是不是介绍过这个config里面有一个。啊,Default setting一个默认的一个配置,对吧,你找到这里面的话,你会看到这里面有一个title啊,这个就是我们网站的标题啊,它这里呢,用的就是网站的标题,还有这里都是啊,啊当然我们如果呃找到源码,找到这一块,你会发现它取的就是。这个配置啊。我们先把这个标题给改了,然后再给大家说是啊,从哪个地方去去找啊。改成文值商城来保存看一下。
03:01
那这个title以及这个title就改变了,对吧,好。那你要是说你怎么去找这个位置呢,它肯定还是在我们这个布局这个里面啊,就是我们的啊。Base布局这里面啊。继续往下找啊,找到组件渲染的地方啊,也就是这个啊。Layout使用这个的地方,那我们可以看到这里它使用的这个logo对吧,那这个logo就是我们这里看到的这个logo好。等会我们再改这个logo,先给大家说说啊,就是。它这个配置是怎么来的,来看一下它这里是不是传了一个settings,就是把配置传了过去,那你往上找啊,我们来直接点进去了,你可以看到这个,呃,Settings是。从这个props里面去解构出来的,对吧,那如果我们不传这个呃塞词,你可以看到它这个标题什么的就没了。清楚了吧,啊,所以标题是啊,这么设置过来的,就是还有一些这个配置,就是我们默认这些配置啊。
04:00
都会通过这个pop的形式传给这个布局啊,这个组件,然后他去进行设置好,那接下来就说到这个logo了,我们把这个logo改了,看一下logo它使用的是谁使用的这个logo对不对,这个logo哪来的点击啊看一下啊是。这样的一个图对吧?当然我们不是想看原文件,我们是看看它在上面在哪定义的对吧?那看一下这个logo是在这import logo啊,From that下面的这个logo对不对?好,接下来我们把这个图给替换掉,来找到这个。里面的这个logo啊,就是它对吧。好,那我不想要这个logo,我给大家准备了我们自己的一个logo啊,在这个素材里面,我们来复制一下。这个logo啊。呃,复制完这个之后呢。呃,把它给。粘到这个里面。啊,文件名一样没事,它后缀不一样,那这个里面我们就不使用这个点S为基的了,使用你这个自己准备的这个点偏激的。来保存看看效果。
05:00
这个logo是不是就有了啊,这个图片啊,因为是个透明图,所以刚好和这个黑色背景。就是。显成显示成这样的一个效果了啊,那logo和这个文字我们就改完了啊,包括底部的这个文字,好接下来我们再来看一个东西,看什么呢?啊,现在我要刷新,大家注意啊,我刷新可以看到这有一个pro,以及当我在刷新的时候,我我在快速刷新啊。有一个那个,就是当他这个loading的时候,有一个那个。图标对吧,是那个pro,然后那个肯定也是正确的啊,包括loading时候,它的一个文字显示也是不对的,那怎么找这个呢。先给大家复现一下是什么情况啊?嗯。再来看一下啊,我来强制刷新。就是这个啊,它的这个logo以及下面的这个文字也是不对的,那这个是去哪找呢。这个你要找起来就就比较麻烦,你要不知道的话,你可能还真找不着啊,我可以直接告诉你在哪,但是我想让大家知道是怎么去寻找他啊。
06:08
呃,首先你来分析啊,它用到的是这个图标,而且这个图标呢,呃,它要么出现在两个目录里面,一个是public,一个是这个access,对吧。呃,这个access access里面明显没有看,一个是这个,一个是我们新放进来的,对不对,那只有哪里没有,只有这个。Public了,那我们来一个一个的找。啊,其实你随便翻一翻,你就会发现是在这对吧,这是一种方式,还有一种方式是你去呃监监测他的这个网络请求啊,看他的网络请求,看他请看他请求的这个图片。是什么啊?比如说啊,你在这里你就会发现它是使用了这个这个logo对吧?啊,就是刚才这个pro对不对,那你就。全局搜索这个名字,就这个图片名字,你看看谁用了。好,我们来粘贴一下,你看看谁用了。啊,你会发现。是在这个documents e GS这里面用了对吧。
07:02
啊,我们之前说过,这个是我们的。模板文件在讲五米线时候说过,这是我们的这个模板文件,对不对?好,那既然是这里用了。对吧?好,那我们也可以做个验证,我先把它给删掉,这时候我再回过头来刷新,看看还有没有那个logo来,现在刷新是不是就没有了,那说明就是这里,那我们只要改这里就可以了。对不对?好,之前在给大家讲无米GS讲这个模板的时候,我们说过在这个document里面可以使用这个contact获取的一些配置信息,对不对?让获取到public路径,然后去找到这个图片,好。嗯,那这个时候我们只需要呃,把这个图片给替换掉就可以了,那替换成哪个呢。嗯,还是使用我们的这个logo啊,使用这个logo。啊,不要只有不要直接使用这个access里面的注意啊,因为这个是EGS是我们的模板文件,它从这里发起请求的话,会,呃,就是说从我们的服务器的这个public目录去找。啊,因为这个是我们的源码目录,这个我们最终要经过编译的。
08:01
所以我们复制一份放到public里面啊,就叫logo啊,那这里就改成。Logo盖。PG啊,这样的话图片我们就改完了,来刷新看一看,图片已经有了是吧,还有下面的这两行字啊。这两行字就更简单了。是不是这个是我们的这个图标啊,以及这个是我们的内容,内容改成我们的颜值商城。嗯,图标的话呢,还使用这个图标就可以啊,还使用这个图标就可以,因为这边加了这个外,就是它不会显得那么大啊,我们来看一看啊。是不是就有了啊,接下来还要改一个东西,哎,大家可能也发现了,就是这个icon,它现在是这个pro对吧,我们要换成我们自己的啊。那这个就比较好找了,你还是呃一样,你从这个网络请求里面,你看他看他就是说。嗯,用的这个icon啊,就知道一般的话都是在public目录下啊,这个文件是还是比较固定的啊,所以我们去找一个已经准备好的这个。
09:03
啊,Icon,然后。把它给。替换掉啊,就是我们的这里面这个啊,直接把文件替换掉就可以了。嗯,当然你要找到就说使用这个icon的地方,你去把它给改掉也可以啊,我们直接替换就行啊,那我先把这个删掉,然后把我们的这个呃粘贴过来,OK。呃,接下来再回浏览器中去看一下啊,刷新一下。是不是就改变了,如果没有改变的话,你就强制刷新。好,那这个呃,Logo我们也改完了啊,包括这个抬头啊logo,以及我们看到的这个地方啊,这块文字都改成我们需要的这个文字了。接下来继续初始化我们的项目,那我们现在能看到的地方至少已经改过了,那还有看不到的地方,比如我们来看一个东西,在路由这里面,大家会发现是不是还有一个登录页面,对不对,而且登录页面使用的是这个模板,那我们来看一看登录页面它是长什么样的,呃,因为我们写项目的话,就是后台的话,登录页面的话直接用他这个就可以了,没必要自己再去写一个登录页。
10:07
啊,那这个就是他自己的这个登录页啊,然后可以根据我们自己的情况改一改,比如把这个logo改了,文字改了,然后如果我们后台没有手机登录,那这个我们就不要了是不是。那包括这个其他登录方式也不要包括底下的文字,那我们把这个登录来改一改啊。嗯,首先你改这个东西的话,你第一想法肯肯定是去这个登录页面去找看有没有对不对,那我先把这些都折叠一下啊。先找到。Src配第四。里面的这个登录呀,在user里面login啊,Log里面的index,那你去这里面去找看看有没有要改的一个东西,对吧。嗯,这个里面我们能改什么,看一看。好,这个里面,嗯,只能改改这块,手机号登录和账号密码登录这一块啊,那我们先把它给改了吧,就手机号登录我们不要对吧,不要我们把它给诶注释掉啊。
11:04
先找到就是说tap这里进行切换这里啊,Tap这里这是两个标题,那我先把这个标题给给删掉,不要了啊。呃,之后就留了一个账号密码登录那,但实际上那个手机号登录的密码还是有的,我们把那个给删掉。啊。这个这个是判断是账户登录的,那下面应该会有一个判断是这个手机号登录的,那其实从这一下啊,这些我们都不要了,包括这个验证码。包括啊一直到这里。这个验证码错误的提示消息也可以不要啊。嗯,接着来改。这个是判断这个账号登录的。啊,那其实我们就没必要判断了,现在我们只有账号登录是吧。啊,我来看看从哪删。
12:02
这个应该是到这儿啊,到这是一对。我把上面这个也删了。然后再看一下这个空的这个结束符也可以不要了啊。接着看一下在删什么。那。这个判断我们就不要了,就是说呃,和登录类型相关的判断就不要了,我们只判断就是说它的这个状态有没有啊等等啊,这个就不要了。K等于这个tap change等于set tap啊,其实这个你要想改的话,你删了也行,直接给只让他默认第一个就可以了。啊,那这个我先不处理了,先这样啊,我们把这个自动。自动登录给忘记密码也给删掉,以及其他登录方式也给删掉,找到自动登录,这里应该是在下面。
13:01
这里啊,自动登录以及忘记密码。嗯,这个是一组。然后是这个A标签,也就是整个这个div里面的东西,我们就不了。嗯,接下来其他登录方式的话,那这一块的也也也不要了。先把这个登录页我们进行一下精简啊,接下来再去改改这些东西,以及这些东西,大家会发现这个页面已经没有能改的了,对吧,你看。已经没啥能改的了。是吧,啊,那这些用不到的,我们就可以就不引入了。那说明呃,这个已经已经改完了是吧,那剩下这个头部和这个地方怎么办呢?那你只能去继续再往上看路由,看一下我们用的这个路由组,它使用的是哪个模板,是不是user来。
14:01
对不对,好,这时候你去。呃,这个layout里面去找到这个use layout,我们来找一下。卖奥里面的us。My out。嗯呃,已经可以看到这这个字了,是吧?啊,我们从从上面往下面改吧,首先它使用的一个logo啊,那我们就不使用这个SVG的,使用我们自己复制的这个PNG的啊,那这样的话。啊,这个logo应该是改了的啊。刷新一下啊,Logo是改了的,接着是这个字啊。这个字呃,比较好找,它和logo挨着的对吧,那我们就看哪里用了logo嘛,往下找啊会发现是啊这里用的这个logo对不对,那就是我们的这个字,我们把它改成用指相乘。中文啊。嗯,下面是。呃,底下的这个。这个这个描述啊,底下的这个描述。
15:02
啊,我们把这个描述给改了。通知生成后台管理系统。没有改变啊,那不是我们改的有问题,是这个是。Form message它用的这个是国际化,然后他去找啊,这个ID里面配的这个title,所以我们默认这个消息就就没有效啊,其实如果你你不做国际化的话呢,那你。这个就可以,不要直接写这个字就可以了,听懂吗?来来看一看啊。啊,如果你想要做国际化呢,那我们就找到,嗯。就说。配置这个title的这里。就是。找到国际化,这里我给大家找一下。嗯,国际化在。Locust。然后我们找到中文这里。有一个pages看到了吗?Page,然后去找那个。
16:02
啊,就是。我们来搜索这个东西啊。哎,就是它我们把它给改了就行了,如果你想要做做这个国际化的话啊。好,那我们把它给改掉,那其实这个default,这个message now不要也可以啊。是吧,这样也是可以的,就是你要做国际化就去改它,你要不做国际化,其实这个就可以删掉都行啊。我们把这些都。关掉啊,折叠一下,开的有点多了,然后看一看还有什么要改的啊。嗯,登录页我们调整的应该是。差不多了对吧,然后这还有一个这个。这个国际化。啊,这个留着吧,如果你不想做的话,也可以把它给删掉啊,好,回到这里面继续去改一下,嗯。像这个使用文档,还有这个搜索,那这个我们是是不要的,对吧?啊,那直接全局搜索这个UI。看看在哪用的。
17:00
嗯,是write content啊,这里面去用的。这个害的色情。我是直接啊搜索的找过来的啊,你如果一点点找,还是从模板去分析,然后去找他这个write,呃呃,Write comp,嗯,给大家也也看一下吧,一起。首先我们这个它使用的是这个。模板是使用的thisl模板对不对,然后你在这里面去找,你可以找到。嗯,他使用的这个content。啊,Red container又是格里面的这个东西啊。然后我们就进到了这个文件,对吧,就可以看到这个搜索他的设计嘛。之后如果你不想要搜索,就把它给删掉,那这个搜索就没了。使用文档。嗯,也可以删掉啊。好,然后是头像。
18:00
啊,以及这个国际化,国际化的话呢,你要要就留着,不要也就删掉就可以了,我们把这国际化给留着。啊就就留这些就可以了。那基本上我们能看到的地方,包括图标啊,包括logo啊,包括一些呃呃不要的元素,我们都都改过了,然后顺便把这个登录页也改了,这样的话,我们在写登录页面的时候呢啊,就直接写就可以,就不用再去调整这个页面了,User log啊。然后呃,接下来我再干一件事情啊,就是这个user looking感觉。怪就说挺别扭的,对吧,我们把这个链接给他调一调好吧,就是不让他在这个。User下了,我先把这个折叠一下找到。Pages啊。找到这里。Login。看一下他用了这个些东西啊。这是样式。也就是说,我不想让它在logo上了,User上,我直接把它拖到最外面啊。然后给它重并一下,因为组件的话,我们让它大写嘛L啊。
19:04
啊,这个user就没有用了,删掉直接。嗯,接下来。你一旦动了这个东西的话,你要改这个东西就多了啊,所以说以后不要轻易的去去改这些东西,当然我们现在是项目初始化阶段,所以说嗯。改了就就慢慢去去找东西改嘛,那首先肯定要是改路由,你这个都改变了,那你路由里面肯定得去就不能是这个,呃,这个user里面的log了,而是直接当前录下的这个log,对吧?啊,包括我们这个请求的路径也都给他改了啊,Name也给他改了。啊,其他的就就不用动了,那这个pass。这个我们也改一下,就不叫user啊,我们就叫log好。啊,这样,呃,这个是没问题的,他匹配login的时候也会会匹配到他。注意不要叫这个根啊,你要叫根木的话,就是会进到这里面,那下面这就匹配不到了啊,这个大家要注意,我们这样log跟就可以了,好,那既然这改了这个名字是不是也怪怪的啊,好,我们就叫啊login lay out。
20:04
那这个改了的话,那你这个模板文件就得改啊,找到我们的。User,来来重命名一下rename log out,然后这个是它会自动帮我们去把所有引用的地方给给进行一个一个更改啊。是点了就行了,如果没有没有帮我们更改,我们都会手动再去确认一下啊。同样这个也给改了。Login login less肯定是它里面去引用的,对吧,那我们直接在这里先把这个login less给改了啊呃,那这个。Logan layout,那这个的话应该是就是root里面去使用的啊,来我们来看看效果。它就是没有问题的,那这个这个地址是没了,那我们直接去回到这个根来看一看啊,跟跟下面的log是没问题的啊,模板什么都有,然后回到我们的这个首页也都是正常的。
21:01
那这样的话,包括这个文件名,目录结构以及这个呃,路由我们基本上就。就改改完了啊,那这小节我们就先到这里。主要对我们的木质结构啊,对我们的这个logo和文字进行了一个优化。
我来说两句