28_尚硅谷_React全栈项目_Admin组件_搭建整体界面结构

那那上午呢，我们已经相当于把登录的功能都做完了，那下面要做的肯定就是这个界面了，是吧，那做这一个界面呢，大家看一下整体我们登录上是这个样子。那这么复杂的界面，这咋做呀？对，一个复杂的结构首先得干嘛呀，是不是拆解，要分解出来它的整体结构是一个什么结构啊，那它其实整体先是一个左右还是个上下结构啊，左右应该是个左右结构。能看到吧，啊，那个右边它是不是有一个头部中间有一个主体区域，而主体区域是不是随着我左侧点击的变化，它是不是也在随之改变了，这实际上就是二级路由显示区域。其实底部还有一个福，是不是这个这个最简单的吧，对，那也就是说最后我们要搭建出来这样一个，先你要写个布局，写出这样的一个布局效果来，当然不一定是我们亲自写，一点一点的写，对吧，如果啊有主件能帮我们搭起来，是不是能更好一些。

那有没有了，安地里面就有专门的布局来搭这样的结构。我们来看一下二的力。诶，这个速度还还可以是吧。好，来看看。在这里面就有有两个东西，一个叫三格系统，还记得三格系统吧，一共是不是24格啊啊好，这这个就什么布局。哎，下面呢，就有一些说明，诶，这就是一些常见的一些布局的。一个结构是吧，我们是这个结构吗？不是，那总得找到我们要的这个A。

是吧，啊，因为后台管理系统的结构也就这么多。啊，你不能造出一个稀奇古怪的结构，让别人看着还舒服，听懂了吧？那是不是应该用最后这一个呀，那最后一个的那代码该怎么写呢。打开呀，是不是它实际上是整个里面列了好几个结构，我们刚才看到的最合适的，是不是最后一个能听到不啊，那在这里面先要引入一些东西吧。啊，引入一些东西，引入一些主见嘛，找到我们的命吧。这不是我的命吗？相相当于它是不是有一个组件叫layout，专门用来做布局整体结构布局的，是不是？而这个layout里面呢，又有一些内部包含了一些组件是不是？但我能写在这里吗？不能啊，不能写在这里啊，我们应该怎么着写在这个port什么下面才行？

能看到吧，能看懂啊好，那下面该怎么写了，用最后一个是不是。嗯。踢完了他吧，啊，踢完了他。我们现在是不是可以去看一下它到底是个什么样的，是不是啊。好来，这里面就一些问题出来了，有几个问题，首先整体结构上的高度不够，是不是高度没被撑开，那我可以把这一个指定一个高度，为什么100%加一个代，这是不是两个大括号，外面的大括号是起什么作用？说明里面是不是GS代码，而里面的这个大号了，代表一个什么GS的对象。

能听到不好，那这个地方我要许一个高度呗，为什么100%。那这个时候为什么报错呢？这个地方得是个什么，是不错。有没有看到还有一些小事情，什么小事情呢？这看不见，为什么？估计对字体吧，黑色是不是包括这个是不是也有呢？其实有是不是其实有能听到不就是它不可见，能理解吧，能理解啊，而且要说一个事情啊，而且是这就是那个左侧的那个那个导航吧。用来这一个结构，整体结构是不是啊，大家看一下。这是3000。我们。我看一下这个左侧的是不是相对来说还是有点复杂度的吧，所以我们最后肯定会抽取一个什么组件的啦。

听懂了吧，啊，包括这个头部还是有一点复杂度，对不对，我们也可以把头部是不是抽成一个主线，但是这个底部有必要吗？没有太简单了。就是一个文本，是不是这就没有必要写成组件，那也就是说我们的左侧和顶部头部是不是会单独写成主键来我们把它写一下啊，这个没什么难度，先写一个简单的就行，那这是路由组件吗？那左侧导航和头部不是路由组件吧？啊，那它应该建在哪个文件夹去啊？Components，所以我应该在这里面来看好了，创建两个，一个是左侧导航的，我叫它ni level，诶首先得说我们现在的规律是不是都写小写啊，文件夹和文件名都写小写，再一个如果有两个名字连接，我应该怎么做呢？是不是用杠连接起来？一你说老师为什么要这么做？

我要不连接起来，你就他看不出来是两个单词，听懂了吗？而我这样连接起来，是不是很容易看出来是两个单词啊，啊一定要理解是为什么要这么做啊，你你就实际这个是不合理的啊好再另一个。好，这里面我有一种文件类型。看好了叫GSX文件，看我用一下，先估计大家有可能没有，不知道有没有，你们有那就更好，那就不用说了啊，有就更好啊，这个东西叫什么。叫文件模板。我们平常是不是还可以去六什么HT这些都是文件模板，只是有的是内置就定义好的对不对，而这一个需要我们自己去定义吧，能听懂不来好行没问题，那这个写个简单的注释，这是我们左侧导航的组件，对吧。

能看到吧，能好没问题，来下面再来一个，再来一个啊。还有一个头吧，头我们可以用什么？你把这个改成什么，把这个文件名稍微改一下，要改成什么还。但里面的是不是也要做一个修改啊，Hand hand。这能听懂吗？可以吧，可以啊，那可以之后下面来。我是不是可以把这两个给他引入过来。能听到不啊，我不抽取了两个部分吗？来引入一下啊，引入一下，在这里引入我的一个是never是吧，From。

这个时候得或者多退几层啊，这个怎么退多少层，你可能写的时候没有我这么熟练，慢一点都没关系。啊，自己要确定要有这个技能，也就是说我看到这个结构，我肯定是能够确定这个关系的，我会写，可能写的比我慢一点，那个没有任何关系，听懂吧，啊好，接着去找谁了，Next level下面的什么，诶这个说一下。我们这一次不用这个名字了。我们说是不是有两种命名的方式，是不是一种是跟这个文件夹命名一样，不是一种用什么index，那我就用什么index去写一下，那这个也是什么index。能懂吧，那我引入的时候是不是引入到文件夹就可以了。那下面啊，类似的是不是现在是什么hand。

啊确一下，OK，没问题，这是大写的汉的对吧，组件连B大写能看懂不能看懂，好，那也就是说这个里面这个左侧的是不是套着我的那个谁。那level能听到吧，接着他是整体是一个，大家看他整体是一个内奥，那个内奥的左侧是不是这个你呀，而是你靠着我的那个level，而右侧又是一个什么。Layout啊，一个类子的layout对不对，而接着是不是上中下的三个结构。能听懂吧，上面的这个头部开始是用了他自己的hand的。啊，我不要他的hand可以，当然你可以要他的hand的，但是你要他的hand吧，这里面名字就不要跟他一样了，听懂不？我觉得没有必要，我我当然开始我也不能完全确定到底可不可以不要，当然测试完之后你就发现是可以不要的。

嗯，也就这个。但是这一个的要，因为它是放在那个整个结构的左侧的，听到不啊。能理解吧，能理解好接着是以及什么。那也就是说现在我们整个结构里面加入了我们的level以及什么？是来看一下整个结构。啊，当然慢慢调，首先要把看不见的区域让他看见，是不是这个好做一点一点搞啊，这这就是一点一点调啊，一点调找到level啊，当然我们一般是不是可以给他指定一个类比，就叫它什么当level。可以吧，那名最好是写，尽量写小写啊，尽量写小写，好来next level，我在这个地方找到我的next level，呃，要写个样子吧，那我这个时候用什么样式的名字，是不是用index。

能看到吧，好，这里面写一个，他接着让它的字体颜色是什么白色，但是写了起作用了吗？没有，因为没有什么没有引入。好，引入一下input，这没什么难度啊，点斜杠什么index，这时候我点ex能省略吗？不来。在这里面GS和GSX可以略，对不对啊，别的别省略了，听懂了吧，你要没有，你要这里面没写，那就自己找自己了。听懂了吧，啊，这是为啊不行的啊，这是这一个。好，来看一下啊，大家写好啊，写后想测试之前一定要尽量按下CTRL键S。

啊。好了吧，好吧，那接下来慢慢再调啊，这个这个左边的上面上面我想给他一定的高度可以吧。给他一定的高度，这样就能撑大家看上面的这个结构，这不上面有一定的高度吗。这我说一下结果，这个是80个像素。听懂了不，那我就很可以很轻松就能搞定找到我的汗的。同理，我是不是也要去啊，跟刚才一样，只是样式稍微写的不太一样，对不对？这个叫什么合适看一下呗。可以吧，那现在我是不是要去写写一个样子，那我直接就引入得了，好吧，点什么，那因为这个咱刚才写过了吗。在看那里面干嘛去？新建一个index文件是吧。那接着呢，在这里干嘛写一个点hand指定它的什么高度，是不是指定一下高度啊啊，哪一个hit为多少80。

能听到不来这样的话，我们来看一下我们的。哎，他估计没有发现，我刚才后，因为我是先引路后后出，他没发现。啊，没发现，那我就再给他让他去啊。啊，典型犯罪啊，因为他这样去哪里找了，去no到model里面找了，应该写相对路径是不是啊好。来啊。是不是可以好，为了让这三个是本来是有分界的，但现在吧，因为颜色一模一样，所以导致它是没有分界呀，来，我这样做也很简单，找到我们的刚才的那个me。也就是说我可以这么做，大家看我做一下你就懂了，在这里面来一个style，给它一个颜色，不就区别开来了吗？

给中间一个是上中下是不是都区别开来了，来做一下，搞一个什么BG color。哎，这不能还得自己写是吧，Background啊，Color这么写吧。那种吧，啊，来个什么颜色。白色啊，这样是白色可以吧，可以都可以啊。是不是修改了，能看到吧，能看到好来下面。我们下面的这个文字啊，文字呢，是这个文字，因为这个比较简单，我们直接给它做了，它是不是要居中，并且是一个灰色的，对不对，能看出来不好，那我把这个给做一做啊，因为这个比较简单。实际上就是要给他加点什么样式。那大家看一下啊，加样式加了哪些样式呢？大家注意观察啊，我们现在是已经是一个是垂直居中了，现在是不是要水平居中，水平居中大家看到它是不是在左侧，现在我是不是要搞一个就行了，看到这个就能看到吧，能那我就来个什么text。

呃，来算选了吗？好像不对。啊，AI来了是吧，来它的值啊是什么生的啊，那也是来个串吧，能看到吧，啊能看到这是一个还有一个那个字。颜色是不是稍微让它透明一点是吧，灰一点就行，透明灰一点就行，来个什么color了，呃，写个颜色，比如说哦CC灰色的吧，啊大概这个样子就行啊，这没关系。

明白没有？整体结构我们是不是就搞出来了吧，当然后面还有结构还会慢慢再调一些，那慢慢再调，你现在想太多没用，你整体结构先出来，简单的我是不是直接一步到位了，那可能有的后台复杂的，那就得慢慢去写。美女吧，好，这一个是搭建了我们。