共计 1627 个字符，预计需要花费 5 分钟才能阅读完成。
夏天好热啊～本文章举荐凋谢空调浏览😊👉便携式迷你小空调 \
\
因为采纳了黑科技，手机听筒放在脸庞能够有大风吹过，电脑端临时没有实现，后续会持续优化~.
tips: 这个空调我的文章中也有哦～
一. 思考优化组件
上一章节尽管咱们实现了退出登录的设计，然而这个按钮仿佛只能用来退出登陆，返回到登陆页面。如果我其它中央也要用到这一类弹框的成果的话，十分不不便，于是思考把这个组件给封装成真正随时能够调用的组件。
将昨天引入到这个弹出对话框的组件外部的 logOut 办法还放回到 <dashBoard/> 外面，咱们要改进一下。
当初这个组件是一个干干净净刚从 Material UI 上引过来的，咱们须要给它的参数中退出 props。
对话框的内容增加 porps.children 书写，不便之后的写入
在弹出的确定按钮里把咱们 props 用拓展运算符给加进来，因为不确定当前要传入的属性到底有多少个，这样的话很不便。
因为这个红框很丑，也不须要，所以把 MaUI 自带的variant 属性删除
这样一个完满的弹出提示信息对话框就封装好了，随时能够再其它组件应用。
二. 实现商品治理页面的布局
实现上面布局。
大家不必踩坑了，我应用了一些 Material UI 的相干组件。能够实现，然而十分不人性化，没有 antd 好用。这里咱们间接应用 antd。
这些引入批改一些字段的步骤我就不过多解释了。
在这里咱们须要留神的是，咱们心愿的界面是在操作这一栏对数据进行一些增删改查。
所以咱们须要再去定义一个 <LinkButton> 组件。之前定义的那个 MaUI<button> 组件和 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 增删改查，且实现和前台的数据交互。）
