likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 25

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

tips:这个空调我的文章中也有哦~


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

一.思考优化组件

上一章节虽然我们完成了退出登录的设计,但是这个按钮似乎只能用来退出登陆,返回到登陆页面。如果我其它地方也要用到这一类弹框的效果的话,非常不方便,于是思考把这个组件给封装成真正随时可以调用的组件。

将昨天引入到这个弹出对话框的组件内部的logOut方法还放回到<dashBoard/>里面,我们要改良一下。

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

现在这个组件是一个干干净净刚从Material UI上引过来的,我们需要给它的参数中加入props。

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

对话框的内容添加porps.children书写,方便之后的写入

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

在弹出的确定按钮里把我们props用拓展运算符给加进来,因为不确定以后要传入的属性到底有多少个,这样的话很方便。

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

由于这个红框很丑,也不需要,所以把MaUI自带的variant属性删除

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

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

这样一个完美的弹出提示信息对话框就封装好了,随时可以再其它组件使用。

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

二. 完成商品管理页面的布局

完成下面布局。

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

大家不用踩坑了,我使用了一些Material UI的相关组件。可以实现,但是非常不人性化,没有antd好用。这里我们直接使用antd。

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

这些引入修改一些字段的步骤我就不过多解释了。

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

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

在这里我们需要注意的是,我们希望的界面是在操作这一栏对数据进行一些增删改查。所以我们需要再去定义一个<LinkButton>组件。之前定义的那个MaUI<button>组件和Antd搭配起来有一些难以接受的效果。所以我们再自己封装一个。

1. 在Components目录下创建一个linkButton文件。

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

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

然后更改button的样式

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

最终效果如下:

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

(react脚手架默认配置是sass,但是antd使用的是less,所以还得自行配置,由于这里不需要使用less的特殊语法,直接先用用css代替)

三. 完成对数据库服务器的链接

1. 这里使用mongoose和express搭建一个小型服务器+数据库。用来完成我们的CURD。

如果需要,可以查阅我之前的相关文档来大概了解一下什么是MongoDB和基础用法。

1.如何配置MongDB2.MongDB基础笔记(一)3MongDB基础笔记(二)

在server.js文件内引入一些我们需要用的模块。

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

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

2. 打开mongoDB compass,因为我之前创建好了一个数据库user,并且在里面已经创建了两个集合准备来使用,重点不是怎么创建集合和数据,重点是如何在Node中连接这个数据库。

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

3. 因为数据库的服务器已经启动了,默认端口号是localhost://27017所以转回我们的server.js文件,使用mongoose的相关命令来链接这个user数据库。

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

mongoose对象上有一个connect的方法,将相关参数填写,即可链接到我们的user数据库。

4. 注意,链接数据库,仅仅只是链接。要注意这个概念,现在还无法操作集合,数据。在mongoose里,集合被认定为一个模块,模块里的数据就是文档。要想操作模块,就得先创建一个模块实例,这和类的概念很相似,这里模块的实例,就是你要链接的mongDB的那个集合categorys。(tips:注意这个s,后面会讲这里有个很大的坑。)

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

我想用这个集合模块,我首先就得定义好这个集合内部的一些信息,newSchema构造函数接受一个配置对象,如下。

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

5. 好了Sechema配置好了,接下来就是引用我们数据库里的categorys

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

这里需要特别注意的是,mongoose.model方法的第一个参数就是我们数据里已经创建好的那一个集合,mongoosemongDB模块(model)和集合(collection)虽然名字不同,但是都是同一个概念。

6. 至此,我们所有关于数据库连接的操作已经完成。

(下一章预计更新数据库CURD增删改查,且完成和前台的数据交互。)