最近因?yàn)楣疽窒恚谑呛?jiǎn)單做了一個(gè)后臺(tái)管理系統(tǒng)。主要功能有登錄注冊(cè)，增刪改查。前端技術(shù)棧：react。后端技術(shù)棧：nodejs+koa2+mongdb。
主要頁(yè)面如下：
相信可能有很多人學(xué)過(guò)以上技術(shù)，但是到真正做出一個(gè)東西的時(shí)候，可能也是不知道從何下手，本文旨在告訴大家怎樣上手去寫一個(gè)項(xiàng)目(主要側(cè)重后端，前端默認(rèn)都懂)，至于技術(shù)細(xì)節(jié)，深入，請(qǐng)自行翻閱官網(wǎng)文檔。
首先，我這里采用的是前后端分離的開(kāi)發(fā)模式，所以沒(méi)用采用后端模板(ejs等)，僅僅后端只提供api接口。
下面開(kāi)始真正介紹如何搭建項(xiàng)目：
1.前端：create-react-app fe(項(xiàng)目名稱) 用react腳手架搭建一個(gè)前端項(xiàng)目。主要路由是/siginin 登錄注冊(cè)頁(yè)面。/home增刪改查主頁(yè)面 （如上圖）
2.后端：npm install -g koa-generator? ?，koa2 -e server(項(xiàng)目名稱) （-e 代表使用模板引擎ejs）。 這里采用mvc架構(gòu)（不懂自行百度）
前端（fe），后端(server)文件夾目錄如下：
3.安裝mongodb 數(shù)據(jù)庫(kù)（不懂自行百度）啟動(dòng)，我自己還安裝了一個(gè)mongodb可視化工具M(jìn)ongoDB Compass.便于查看數(shù)據(jù)庫(kù)。
4.這里，server文件夾的bin/www下已經(jīng)引用http模塊，腳手架生成了一個(gè)后臺(tái)服務(wù)器并監(jiān)聽(tīng)端口。主要代碼如下：
var server = http.createServer(app.callback());
server.listen(port);
5.到這里，我們?cè)趺窗亚昂蠖诉B接起來(lái)呢?在server文件夾的connect/index.js下.（這里mongoose這個(gè)是操作mongodb數(shù)據(jù)庫(kù)的,因?yàn)槔锩娣庋b了一些方法。比node直接操作數(shù)據(jù)庫(kù)便捷）
如果連接成功，命令行能夠打印“數(shù)據(jù)庫(kù)連接成功”。如果后端增加的接口對(duì)應(yīng)的路由是/addwares。前端訪問(wèn)”http://localhost:3000/addwares“就能訪問(wèn)后端接口了。同理，這里的localhost也可以換成局域網(wǎng)Ip,和后端一一對(duì)應(yīng)。(腳手架默認(rèn)端口3000)
6.至此，前端能夠訪問(wèn)后端接口，后端能夠通過(guò)mongoose操作數(shù)據(jù)庫(kù)。這里正式開(kāi)始寫接口，一個(gè)后端路由對(duì)應(yīng)一個(gè)接口。
具體的router層-------->controllers層-------->models層-------->controllers層(展示，因?yàn)槲覀儧](méi)有用后端模板，數(shù)據(jù)只在接口請(qǐng)求時(shí)展示)。接下來(lái)我給大家展示我的增加接口。如下
以上就是寫完一個(gè)增加接口的全流程（具體邏輯我就不分析了，說(shuō)一下流程，有些地方我封裝了一下）。
1.在server文件夾的routes/index.js,下寫增加接口對(duì)應(yīng)的路徑。
2.然后走到controller層定義一個(gè)goodAdd函數(shù)，這里我們要輸入商品名稱和價(jià)格，如果我們只輸入一個(gè)，后端報(bào)錯(cuò)，直接返回前端錯(cuò)誤信息（ctx.body是后端返回給前端的jason數(shù)據(jù)。）。如果輸入成功，然后從控制層到model層，去查找數(shù)據(jù)庫(kù)。
3.到數(shù)據(jù)庫(kù)這里，（大家自行了解Schema，model等名詞），Schema對(duì)應(yīng)著數(shù)據(jù)庫(kù)集合數(shù)據(jù)的定義。成功保存進(jìn)數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)返回狀態(tài)和數(shù)據(jù)到controller層，（用async,await,處理異步）。然后controller層根據(jù)服務(wù)器返回的信息，判斷，返回給前端。至此，增加接口結(jié)束。
4.
最后，代碼過(guò)兩天我會(huì)放在github上，把鏈接粘上來(lái)?，F(xiàn)在有些地方再優(yōu)化一下?？赡芪艺f(shuō)的不是很清楚，大家要是不懂盡量去官網(wǎng)學(xué)習(xí)。
文末放個(gè)我看著不錯(cuò)的文章的鏈接。https://blog.csdn.net/qq_32496215/article/details/82469147
