最近因为公司要分享,于是简单做了一个后台管理系统。主要功能有登录注册,增删改查。前端技术栈:react。后端技术栈:nodejs+koa2+mongdb。
主要页面如下:
相信可能有很多人学过以上技术,但是到真正做出一个东西的时候,可能也是不知道从何下手,本文旨在告诉大家怎样上手去写一个项目(主要侧重后端,前端默认都懂),至于技术细节,深入,请自行翻阅官网文档。
首先,我这里采用的是前后端分离的开发模式,所以没用采用后端模板(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直接操作数据库便捷)
如果连接成功,命令行能够打印“数据库连接成功”。如果后端增加的接口对应的路由是/addwares。前端访问”http://localhost:3000/addwares“就能访问后端接口了。同理,这里的localhost也可以换成局域网Ip,和后端一一对应。(脚手架默认端口3000)
6.至此,前端能够访问后端接口,后端能够通过mongoose操作数据库。这里正式开始写接口,一个后端路由对应一个接口。
具体的router层-------->controllers层-------->models层-------->controllers层(展示,因为我们没有用后端模板,数据只在接口请求时展示)。接下来我给大家展示我的增加接口。如下
以上就是写完一个增加接口的全流程(具体逻辑我就不分析了,说一下流程,有些地方我封装了一下)。
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