最近因为公司要分享，于是简单做了一个后台管理系统。主要功能有登录注册，增删改查。前端技术栈：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
网友评论