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

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

主要页面如下:

登录页面(ui还没有来的急调整)
主页面(以上增删改查功能,分页皆可实现)

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

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

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

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

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

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


后端文件夹
前端文件夹

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直接操作数据库便捷)


mongoose.connect()函数连接数据库。这里localhost可以换成局域网ip。my_admin是我的mongdb创建的数据库的名称。

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

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


server文件夹的routes/index.js。这里写的是对应的接口路由。

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

server文件夹的controllers/good.controllers下
server文件夹的models/
server文件夹的common/createModel.js下


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.

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

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

//www.greatytc.com/p/cbb21c6f3427

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • 框架提出的背景 ES6/7带来的变革 自ES6确定和ES7中async/await开始普及,Node的发展变得更加...
    宫若石阅读 8,497评论 1 14
  • 高并发平台架构 设计理念 1. 空间换时间 多级缓存,静态化前端页面缓存(HTTP Header中包含Expire...
    AkaTBS阅读 3,017评论 0 13
  • 原文出处: 杨步涛的博客 一、 设计理念 1. 空间换时间1) 多级缓存,静态化客户端页面缓存(http head...
    CookieziSui阅读 2,508评论 0 48
  • -----“个转企”政策宣讲暨“中银个企达”产品发布会 11月28日,中国银行韶关分行联合韶关市工商行政管...
    MARSPING阅读 340评论 0 0