乐趣区

关于前端:基于Reactjs的后台管理系统开发全过程七

夏天好热啊~本文章举荐凋谢空调浏览😊👉便携式迷你小空调 \
\
因为采纳了黑科技,手机听筒放在脸庞能够有大风吹过,电脑端临时没有实现,后续会持续优化~.

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办法的第一个参数就是咱们数据里曾经创立好的那一个汇合,mongoosemongDB 模块 (model) 和汇合 (collection) 尽管名字不同,然而都是同一个概念。

6. 至此,咱们所有对于数据库连贯的操作曾经实现。

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

退出移动版