相信這對於想要入門寫nodejs的朋友來說,一定會有所收穫,那麼,下面開始我們的正題(這裡不使用koa-generator腳手架,我們直接自己搭建專案,適用於前後端分離)
一:建立專案
可以在全域性中安裝koa依賴包 (保持專案版本的統一性)
npm install -g koa
複製程式碼
或者在我們本地專案中安裝
npm install koa --save
複製程式碼
最基本的開發環境我們已經搭建完了,可以開始koa之旅了:
const Koa = require('koa');
const app = new Koa();
// 對於任何請求,app將呼叫該非同步函式處理請求:
app.use(async (ctx, next) => {
await next();
// todo
});
app.use(async (ctx, next) => {
await next();
// todo
});
// 在埠8081監聽:
app.listen(8081);
複製程式碼
最原始的寫法就是使用app.use(async (ctx, next) => {}),只有當next()之後才能執行下一個app.use(),所以這裡引入了koa-router
二. 新增路由
npm install koa-router koa-bodyparser --save
複製程式碼
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const app = new Koa();
app.use(bodyParser()); // 解析request的body
const router = require('koa-router')()
router.get('/', async (ctx, next) => {
// todo
})
app.use(router.routes());
app.listen(9000);
console.log('app started at port 9000...')
複製程式碼
這樣直接訪問 http://localhost:9000, 就可以訪問到了
你也可以為你的路由加個字首
const Router = require('koa-router')
const router = new Router({
prefix: '/api'
})
複製程式碼
這樣只需要訪問 http://localhost:9000/api, 而我們寫介面的時候,這個字首就可以說是少不的了。
三.熱重啟的處理
每一次我們修改都要關閉程式,然後再npm start, 這是想起webpack的熱更是多麼的舒服,想著要用webpack搭建嗎,這時候就要用到nodemon(Nodemon是一個實用程式,用於監視源中的任何更改並自動重新啟動伺服器。完美的發展), 它還支援自定義配置nodemon.json這裡不做配置,直接使用
npm install nodemon --save
複製程式碼
修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js"
},
複製程式碼
執行npm start,這樣就達到了熱重啟的效果了,可以愉快的開發了
四.支援import模組的引入
由於目前原生的node是不支援import引入模組的,假如你使用import引入模組的話,會報如下的錯:
這時候我們安裝以下依賴
npm install babel-plugin-transform-es2015-modules-commonjs babel-register --save
複製程式碼
在根目錄下建立start.js
require('babel-register')
(
{
plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
}
)
module.exports = require('./app.js')
複製程式碼
在修改下package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon star.js"
},
複製程式碼
直接執行npm start, 這時候可以看到我們的專案已經支援import語法了
五.連線上mongodb和mongoose
這裡就不做mongodb的安裝教程了,小夥伴們可以自行先去安裝好mongodb,安裝好之後,看到如下圖片說明安裝和啟動成功了
npm install mongoose --save
複製程式碼
接下來我用簡單暴力的方法來連線我們的資料庫mongodb, 這裡為了方面讓大家明白,就不做層次的處理以及檔案的處理(實際專案這樣做估計是加不了薪的噢)
在app.js中新增
const db = mongoose.connect("mongodb://localhost/testDB")
// 賬戶的資料庫模型
var UserSchema = new mongoose.Schema({
username:String,
password:String,
email:String
});
var User = mongoose.model('User',UserSchema);
// 新增資料
var user = {
username: 'ydj',
password: '123123',
email: ''
}
var newUser = new User(user);
newUser.save();
router.get('/', async (ctx, next) => {
let val = null
const data = await User.findOne({username: 'ydj'})
console.log('data', data)
const result = {
code:200,
response: data,
ts: 12345
}
ctx.response.body = result
return result
})
複製程式碼
這裡的操作是: 新建一個使用者的資料模型,接著講user的資料加入到我們的testDB資料庫中,接著當我們訪問localhost:9000的時候,就會請求我們的資料庫,查詢到資料之後返回。可以從上面圖上看到,我們剛開始是沒有users這個集合的,當我們執行該程式的時候,我們的資料庫就會自動新增該集合了和資料了:
執行之後:
訪問我們的localhost:9000 前端的小夥伴們,看到這個會不會很雞凍,開啟就是後端每天給我們提供的介面資料了,淚崩ing。六.解決跨域
最後當我們寫好的介面要提供給別人的時候,跨域的問題是必須解決的,koa這邊也很好處理,提供了koa2-cors處理
npm install koa2-cors --save
複製程式碼
const cors = require('koa2-cors')
app.use(cors({
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
maxAge: 100,
credentials: true,
allowMethods: ['GET', 'POST', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
}));
複製程式碼
關於koa2-cors其他相關配置,大家可以自行網上搜尋
七.總結
專案目錄結構
├── node_modules 依賴包
├── routes 路由
| ├── index.js
| ├── user.js
├── app.js 主入口檔案
├── start.js 處理import配置檔案
└── package.json
複製程式碼
app.js
const Koa = require('koa')
const mongoose = require('mongoose')
const cors = require('koa2-cors')
const router = require('koa-router')()
// import router from './routes'
const app = new Koa()
// 處理跨域的配置
app.use(cors({
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
maxAge: 100,
credentials: true,
allowMethods: ['GET', 'POST', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
}));
const db = mongoose.connect("mongodb://localhost/testDB")
var UserSchema = new mongoose.Schema({
username:String,
password:String,
email:String
});
var User = mongoose.model('User',UserSchema);
router.get('/', async (ctx, next) => {
let val = null
const data = await User.findOne({username: 'yidong'})
console.log('data', data)
const result = {
code:200,
response: data,
ts: 12345
}
ctx.response.body = result
return result
})
app.use(router.routes());
app.listen(9000);
console.log('app started at port 9000...')
複製程式碼
package.json
{
"name": "yid",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-register": "^6.26.0",
"koa": "^2.5.3",
"koa-bodyparser": "^4.2.1",
"koa-router": "^7.4.0",
"koa2-cors": "^2.0.6",
"mongoose": "^5.2.17",
"nodemon": "^1.18.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js"
},
"author": "",
"license": "ISC"
}
複製程式碼
start.js
require('babel-register')
(
{
plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
}
)
module.exports = require('./app.js')
複製程式碼
routes/index.js
const router = require('koa-router')()
router.get('/', async (ctx, next) => {
ctx.body = "<div>Hello</div>"
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
// module.exports = router
export default router
複製程式碼
這時候我們就可以愉快的開始我們的nodejs+koa專案了,再稍微將檔案處理下,模組的區分,就可以完成一個基本框架的構建啦。