夏天好热啊～本文章推荐开放空调阅读便携式迷你小空调\
\
由于采用了黑科技，手机听筒放在脸庞可以有微风吹过，电脑端暂时没有实现，后续会继续优化~.
tips:这个空调我的文章中也有哦～
一.思考优化组件
上一章节虽然我们完成了退出登录的设计，但是这个按钮似乎只能用来退出登陆，返回到登陆页面。如果我其它地方也要用到这一类弹框的效果的话，非常不方便，于是思考把这个组件给封装成真正随时可以调用的组件。
将昨天引入到这个弹出对话框的组件内部的logOut方法还放回到
现在这个组件是一个干干净净刚从Material UI上引过来的，我们需要给它的参数中加入props。
对话框的内容添加porps.children书写，方便之后的写入
在弹出的确定按钮里把我们props用拓展运算符给加进来，因为不确定以后要传入的属性到底有多少个，这样的话很方便。
由于这个红框很丑，也不需要，所以把MaUI自带的variant属性删除
这样一个完美的弹出提示信息对话框就封装好了，随时可以再其它组件使用。
二. 完成商品管理页面的布局
完成下面布局。
大家不用踩坑了，我使用了一些Material UI的相关组件。可以实现，但是非常不人性化，没有antd好用。这里我们直接使用antd。
这些引入修改一些字段的步骤我就不过多解释了。
在这里我们需要注意的是，我们希望的界面是在操作这一栏对数据进行一些增删改查。
所以我们需要再去定义一个
1. 在Components目录下创建一个linkButton文件。
然后更改button的样式
最终效果如下:
（react脚手架默认配置是sass，但是antd使用的是less，所以还得自行配置，由于这里不需要使用less的特殊语法，直接先用用css代替）
三. 完成对数据库服务器的链接
1. 这里使用mongoose和express搭建一个小型服务器+数据库。用来完成我们的CURD。
如果需要，可以查阅我之前的相关文档来大概了解一下什么是MongoDB和基础用法。
1.如何配置MongDB
2.MongDB基础笔记（一）
3MongDB基础笔记（二)
在server.js文件内引入一些我们需要用的模块。
2. 打开mongoDB compass，因为我之前创建好了一个数据库user，并且在里面已经创建了两个集合准备来使用，重点不是怎么创建集合和数据，重点是如何在Node中连接这个数据库。
3. 因为数据库的服务器已经启动了，默认端口号是localhost://27017
所以转回我们的server.js文件，使用mongoose的相关命令来链接这个user数据库。
mongoose对象上有一个connect的方法，将相关参数填写，即可链接到我们的user数据库。
4. 注意，链接数据库，仅仅只是链接。要注意这个概念，现在还无法操作集合，数据。
在mongoose里，集合被认定为一个模块，模块里的数据就是文档。要想操作模块，就得先创建一个模块实例，这和类的概念很相似，这里模块的实例，就是你要链接的mongDB的那个集合categorys。(tips:注意这个s，后面会讲这里有个很大的坑。)
我想用这个集合模块，我首先就得定义好这个集合内部的一些信息，newSchema构造函数接受一个配置对象，如下。
5. 好了Sechema配置好了，接下来就是引用我们数据库里的categorys。
这里需要特别注意的是，mongoose.model方法的第一个参数就是我们数据里已经创建好的那一个集合，mongoose和mongDB模块(model)和集合(collection)虽然名字不同，但是都是同一个概念。
6. 至此，我们所有关于数据库连接的操作已经完成。
（下一章预计更新数据库CURD增删改查，且完成和前台的数据交互。）