基于React.js的后台管理系统开发全过程(七)

夏天好热啊～本文章推荐开放空调阅读😊👉便携式迷你小空调\\由于采用了黑科技，手机听筒放在脸庞可以有微风吹过，电脑端暂时没有实现，后续会继续优化~.

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.如何配置MongDB2.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增删改查，且完成和前台的数据交互。）