簡潔是智慧的靈魂，冗長是膚淺的藻飾 --《哈姆萊特》
書接上回koa2安裝，在koas的項(xiàng)目中我們開啟了服務(wù)，看見了hello，world。在后端的開發(fā)實(shí)際中，這些是不夠的。不急，跟著文章走，不能保證你精通，但絕對夠你入門。
本文收錄于：js全棧工程師
理解：在我膚淺的開發(fā)之中。路由管理，大部分是接收不同的api請求，返回?cái)?shù)據(jù)的。例如一個(gè) api／user的請求，發(fā)送過來賬號(hào)，md5加密后的密碼，我們把路由帶進(jìn)來的參數(shù)與數(shù)據(jù)庫比對，給出相應(yīng)的返回。
- 安裝路由管理插件
npm install koa-router -s
在webstom中的命令行中鍵入命令即可
- 編輯路由文件
后端的復(fù)雜，大抵就是不知道業(yè)務(wù)會(huì)拓展到什么狀況，功能多么復(fù)雜。因此這里我們使用文件夾來管理。
目錄是 ./router/index
const router = require('koa-router')(); //引入路由函數(shù)
router.get('/',async(ctx,next)=>{
"use strict";
ctx.redirect('/index')
})
// 路由中間，頁面路由到／，就是端口號(hào)的時(shí)候，（網(wǎng)址），頁面指引到／index
router.get('/index',async(ctx,next)=>{
"use strict";
let html = `
<h1>請你使用post來獲取json</h1>
<form action="/api" method="post">
<input type="text" name="name" >
<input type="text" name="ages">
<button type="submit">提交</button>
</form>
`
ctx.body= html
})
//在index的路由的時(shí)候返回一段html，（實(shí)際開發(fā)中，不會(huì)這樣做的） 頁面是一個(gè)表單，模擬我們的前端或者移動(dòng)
// 操作動(dòng)作，（記住，這是動(dòng)作。后面的redux中是很重要的一部分）提交數(shù)據(jù)到／api的路由中
router.post('/api',async(ctx, next) => {
let apps = ctx.request.body
console.log(ctx.request.body )
ctx.body = '111111'
})
//頁面路由到api的時(shí)候，
// ctx.redirect.body及時(shí)之前提交表單的數(shù)據(jù)
// ctx.body就是頁面的返回體，之前說過了，這里賦值是什么，就返回什么。
module.exports = router
//將頁面暴露出去
還有app .js編輯
const Koa = require('koa') //koa2中間件依賴
const app = new Koa() //js的繼承
const Router = require('koa-router') //路由依賴的中間間
// app.use( async ( ctx ) => {
// ctx.body = 'hello world'
// }) //koa2中間件，使用路由的(使用路由后，這里就不會(huì)在編輯代碼了)
app.use(require('./router/index').routes())
app.listen(3000) //服務(wù)啟動(dòng)端口
console.log('啟動(dòng)成功') //日志打印
執(zhí)行代碼效果
點(diǎn)擊提交后。
頁面也能路由到api頁面了。但是，我們要獲取的是表單內(nèi)提交的數(shù)據(jù)。而不是11111。（這里有個(gè)坑，自己爬....）還差一個(gè)插件，這就是kao2我認(rèn)為的一個(gè)好處，按需使用。靈巧，便捷。
- koa-bodyparser 上下文解析插件
安裝命令
npm install koa-bodyparser -s
app.js項(xiàng)目入口文件使用。
const Koa = require('koa') //koa2中間件依賴
const app = new Koa() //js的繼承
const Router = require('koa-router') //路由依賴的中間間
const bodyParser = require('koa-bodyparser') //請求體，返回體解析類似json，text，圖片等
// app.use( async ( ctx ) => {
// ctx.body = 'hello world'
// }) //koa2中間件，使用路由的(使用路由后，這里就不會(huì)在編輯代碼了)
app.use(bodyParser()) //使用解析上下文插件
app.use(require('./router/index').routes())
app.listen(3000) //服務(wù)啟動(dòng)端口
console.log('啟動(dòng)成功') //日志打印
路由頁面修改
const router = require('koa-router')(); //引入路由函數(shù)
router.get('/',async(ctx,next)=>{
"use strict";
ctx.redirect('/index')
})
// 路由中間間，頁面路由到／，就是端口號(hào)的時(shí)候，（網(wǎng)址），頁面指引到／index
router.get('/index',async(ctx,next)=>{
"use strict";
let html = `
<h1>請你使用post來獲取json</h1>
<form action="/api" method="post">
<input type="text" name="name" >
<input type="text" name="ages">
<button type="submit">提交</button>
</form>
`
ctx.body= html
})
//在index的路由的時(shí)候返回一段html，（實(shí)際開發(fā)中，不會(huì)這樣做的） 頁面是一個(gè)表單，模擬我們的前端或者移動(dòng)
// 操作動(dòng)作，（記住，這是動(dòng)作。后面的redux中是很重要的一部分）提交數(shù)據(jù)到／api的路由中
router.post('/api',async(ctx, next) => {
let apps = ctx.request.body
console.log(ctx.request.body )
ctx.body = apps
})
//頁面路由到api的時(shí)候，
// ctx.redirect.body及時(shí)之前提交表單的數(shù)據(jù)
// ctx.body就是頁面的返回體，之前說過了，這里賦值是什么，就返回什么。
module.exports = router
//將頁面暴露出去
- 重啟項(xiàng)目
這里輸入數(shù)據(jù)，點(diǎn)擊提交。
頁面返回你輸入的數(shù)據(jù)，即表示路由成功
還是那句話，或看官網(wǎng)api，對于學(xué)習(xí)koa回更好。
總結(jié)
在實(shí)際的開發(fā)中，后端只是返回不同的json，路由只是對應(yīng)的返回?cái)?shù)據(jù)。koa-bodyparser插件的作用來解析請求題的參數(shù)，json，圖片，文件什么的。后期會(huì)有詳細(xì)的講解。這里了解一下就好。
是不是覺得后端也不難，那就對了，我們不要急，循序漸進(jìn)的學(xué)習(xí)koa。
后端之中，數(shù)據(jù)庫是很關(guān)鍵的一點(diǎn)。我更新慢，因?yàn)槭露?，（最近寫小程序）。建議去看看數(shù)據(jù)庫，mysql。我也有寫了一篇，3000多字，關(guān)鍵我覺得垃圾。但以我的尿性，肯定是推翻重來的。
關(guān)注我，下章講靜態(tài)資源管理，徹徹底底的前后端分離開發(fā)。
我愛你，就像星星愛著月亮。感謝你們的點(diǎn)贊與關(guān)注
