NodeJs+MongoDB+Koa2+react后台管理系统

最近因为公司要分享,于是简单做了一个后台管理系统。主要功能有登录注册,增删改查。前端技术栈:react。后端技术栈:nodejs+koa2+mongdb。

主要页面如下:

NodeJs+MongoDB+Koa2+react后台管理系统_第1张图片
登录页面(ui还没有来的急调整)
NodeJs+MongoDB+Koa2+react后台管理系统_第2张图片
主页面(以上增删改查功能,分页皆可实现)

相信可能有很多人学过以上技术,但是到真正做出一个东西的时候,可能也是不知道从何下手,本文旨在告诉大家怎样上手去写一个项目(主要侧重后端,前端默认都懂),至于技术细节,深入,请自行翻阅官网文档。

首先,我这里采用的是前后端分离的开发模式,所以没用采用后端模板(ejs等),仅仅后端只提供api接口。

下面开始真正介绍如何搭建项目:

1.前端:create-react-app fe(项目名称) 用react脚手架搭建一个前端项目。主要路由是/siginin 登录注册页面。/home增删改查主页面 (如上图)

2.后端:npm install -g koa-generator   ,koa2 -e server(项目名称) (-e 代表使用模板引擎ejs)。 这里采用mvc架构(不懂自行百度)

前端(fe),后端(server)文件夹目录如下:


NodeJs+MongoDB+Koa2+react后台管理系统_第3张图片
后端文件夹
NodeJs+MongoDB+Koa2+react后台管理系统_第4张图片
前端文件夹

3.安装mongodb 数据库(不懂自行百度)启动,我自己还安装了一个mongodb可视化工具MongoDB Compass.便于查看数据库。

4.这里,server文件夹的bin/www下已经引用http模块,脚手架生成了一个后台服务器并监听端口。主要代码如下:

var server = http.createServer(app.callback());

server.listen(port);

5.到这里,我们怎么把前后端连接起来呢?在server文件夹的connect/index.js下.(这里mongoose这个是操作mongodb数据库的,因为里面封装了一些方法。比node直接操作数据库便捷)


NodeJs+MongoDB+Koa2+react后台管理系统_第5张图片
mongoose.connect()函数连接数据库。这里localhost可以换成局域网ip。my_admin是我的mongdb创建的数据库的名称。

如果连接成功,命令行能够打印“数据库连接成功”。如果后端增加的接口对应的路由是/addwares。前端访问”http://localhost:3000/addwares“就能访问后端接口了。同理,这里的localhost也可以换成局域网Ip,和后端一一对应。(脚手架默认端口3000)

6.至此,前端能够访问后端接口,后端能够通过mongoose操作数据库。这里正式开始写接口,一个后端路由对应一个接口。


NodeJs+MongoDB+Koa2+react后台管理系统_第6张图片
server文件夹的routes/index.js。这里写的是对应的接口路由。

具体的router层-------->controllers层-------->models层-------->controllers层(展示,因为我们没有用后端模板,数据只在接口请求时展示)。接下来我给大家展示我的增加接口。如下

NodeJs+MongoDB+Koa2+react后台管理系统_第7张图片
server文件夹的controllers/good.controllers下
NodeJs+MongoDB+Koa2+react后台管理系统_第8张图片
server文件夹的models/
NodeJs+MongoDB+Koa2+react后台管理系统_第9张图片
server文件夹的common/createModel.js下


NodeJs+MongoDB+Koa2+react后台管理系统_第10张图片
server文件夹的schema下面的good.list.js下(此处参数还可以规定必传不必传)

以上就是写完一个增加接口的全流程(具体逻辑我就不分析了,说一下流程,有些地方我封装了一下)。

1.在server文件夹的routes/index.js,下写增加接口对应的路径。

2.然后走到controller层定义一个goodAdd函数,这里我们要输入商品名称和价格,如果我们只输入一个,后端报错,直接返回前端错误信息(ctx.body是后端返回给前端的jason数据。)。如果输入成功,然后从控制层到model层,去查找数据库。

3.到数据库这里,(大家自行了解Schema,model等名词),Schema对应着数据库集合数据的定义。成功保存进数据库,数据库返回状态和数据到controller层,(用async,await,处理异步)。然后controller层根据服务器返回的信息,判断,返回给前端。至此,增加接口结束。

4.

NodeJs+MongoDB+Koa2+react后台管理系统_第11张图片

最后,代码过两天我会放在github上,把链接粘上来。现在有些地方再优化一下。可能我说的不是很清楚,大家要是不懂尽量去官网学习。

文末放个我看着不错的文章的链接。https://blog.csdn.net/qq_32496215/article/details/82469147

https://www.jianshu.com/p/cbb21c6f3427

https://blog.csdn.net/momDIY/article/details/76285369

你可能感兴趣的:(NodeJs+MongoDB+Koa2+react后台管理系统)