夏天好热啊～本文章举荐凋谢空调浏览😊👉便携式迷你小空调\
\
因为采纳了黑科技，手机听筒放在脸庞能够有大风吹过，电脑端临时没有实现，后续会持续优化~.
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增删改查，且实现和前台的数据交互。）
发表回复