簡(jiǎn)述
純屬小白哈，在邊摸索邊總結(jié)吨掌，本篇主要總結(jié)一下前端和node搭建的后臺(tái)之間的簡(jiǎn)單交互爆价、mongoose如何操作數(shù)據(jù)庫司草、以及使用koa進(jìn)行處理URL請(qǐng)求等
1 后臺(tái)模塊
1.1 使用Express搭建腳手架
- 安裝Express生成器
npm install -g express-generator - 初始化一個(gè)Express應(yīng)用
express node-blog
初始化話的過程中，根據(jù)提示選擇需要或者不需要 - 目錄結(jié)構(gòu)
目錄結(jié)構(gòu)是已經(jīng)整合分離過的使用的mongoose操作數(shù)據(jù)庫，Koa處理異步請(qǐng)求API，并統(tǒng)一規(guī)范了異步請(qǐng)求的路由，至于中間的過程處理到時(shí)候在寫一篇總結(jié)哈
node-blog
│ app.js
│ package.json
│ node_modules
├─bin
│ www
├─server 自定義的目錄
│ config
│ db.js 通過mongoose連接數(shù)據(jù)庫
│ controllers 分離出來的操作異步請(qǐng)求的API
│ index.js
│ user.js
│ models 模型目錄（使用mongoose.model操作數(shù)據(jù)）
│ user.js
│ schema
│ user.js 數(shù)據(jù)庫數(shù)據(jù)信息（可以理解為數(shù)據(jù)庫中表的信息）
│ controller.js 自動(dòng)掃描和處理controllers中的異步請(qǐng)求旷档，并將請(qǐng)求的路由使用koa-router進(jìn)行統(tǒng)一的規(guī)范處理（router = require('koa-router')();）
└─views
error.jade
index.jade
layout.jade
app.js通過上面的分離就可以簡(jiǎn)化為：
const Koa = require('koa');
const logger = require('koa-logger');
const bodyParser = require('koa-bodyparser');//解析原始request請(qǐng)求
const app = new Koa();
// 導(dǎo)入controller middleware:
const controller = require('./server/controller');
//由于middleware的順序很重要，這個(gè)koa-bodyparser必須在router之前被注冊(cè)到app對(duì)象上歇拆。
app.use(bodyParser());
// 使用middleware:
app.use(controller());
app.listen(8686, ()=> {
console.log(`server running success at port 8686`)
})
module.exports = app;
1.2 應(yīng)用的啟動(dòng)
首先鞋屈，先要安裝應(yīng)用的依賴包。npm i
- 啟動(dòng)node后臺(tái)
node app.js - 啟動(dòng)數(shù)據(jù)庫服務(wù)器
首先啟動(dòng)服務(wù)器mongodmongod --dbpath D:\G\mongondb\data\db - 啟動(dòng)并連接數(shù)據(jù)庫
這邊是找到db.js的位置故觅，然后命令行輸入node db.js - 可以使用Robo 3T來實(shí)現(xiàn)數(shù)據(jù)庫數(shù)據(jù)的可視化查看
注意：在啟動(dòng)node的時(shí)候厂庇，可能會(huì)出現(xiàn)這樣的錯(cuò)誤
Error: listen EADDRINUSE :::8686這是因?yàn)槎丝诒徽加?br> 解決方法：cmd 輸入netstat -aon|findstr "8686"找到對(duì)應(yīng)占用的PID-----任務(wù)管理器----查看---選擇列----勾選PID----確定----找到對(duì)應(yīng)的PID----右鍵結(jié)束進(jìn)程就可以了。
這樣的話输吏，基本后臺(tái)都OK啦
2 前端模塊（Vue）
2.1 腳手架的搭建使用的是vue-cli 這里就不細(xì)說了
2.2 前端和后臺(tái)的連接
找到config目錄下的index.js文件权旷，在里面配置好前端的端口號(hào)，和proxyTable對(duì)象中的屬性即可完成前端和后端的交互
proxyTable: {
'/api': {
target: 'http://localhost:8686/',
changeOrigin: true,
pathRewrite: {
'^/api': 'http://localhost:8686/'
}
}
}
到這里，基本上前端拄氯、后臺(tái)躲查、數(shù)據(jù)庫都能夠連接整合起來了，但是具體的功能實(shí)現(xiàn)译柏，細(xì)節(jié)優(yōu)化還有很長(zhǎng)的路镣煮。后面再慢慢完善，這篇只能算簡(jiǎn)單的梳理篇鄙麦。搬磚的路典唇，永無止境。
