前言

隨著技術的不斷發(fā)展，前端工程師也被賦予了越來越多的職責。不再是從前只需要切個圖，加個css樣式就能完成任務的切圖仔了。接下來這篇文章，完成一個簡單的登錄注冊，能讓你快速上手，成為一個‘小全棧工程師’，here we go ！

koa快速開始

安裝

• 因為node.js v7.6.x已經(jīng)完全支持async/await語法，所以請保證node的版本在7.6以上

• 推薦一個node的多版本管理工具：nvm。如何安裝這里不再贅述，網(wǎng)上的教程有很多

  • https://github.com/creationix...

// 初始化package.json npm init// 安裝koa2 npm install koa

一個hello world

新建一個index.js，敲上以下代碼

//index.jsconst Koa = require('koa') const app = new Koa()app.use( async (ctx, next) => {ctx.response.body = '你好，我是內(nèi)地吳彥祖' })app.listen(3333, ()=>{console.log('server is running at http://localhost:3333') })

在我們的命令行敲上

node index.js

就可以看到運行結果啦:

幾個核心概念

中間件好基友ctx和next

在上面的代碼中，我們可以看到app.use后面使用了2個參數(shù)，ctx和next，下面我們介紹一個這哥倆到底干嘛的

ctx

ctx作為上下文使用，Koa將 node 的 request, response 對象封裝進一個單獨對象。即ctx.request 、 ctx.response。Koa 內(nèi)部又對一些常用的屬性或者方法做了代理操作，使得我們可以直接通過 ctx 獲取。比如，ctx.request.url 可以寫成 ctx.url。

next

next 參數(shù)的作用是將處理的控制權轉交給下一個中間件

經(jīng)典的洋蔥圖概念能很好的解釋next的執(zhí)行，請求從最外層進去，又從最里層出來。我們看一個例子

const Koa = require('koa') const app = new Koa()app.use(async (ctx, next)=>{let startTime = new Date().getTime()await next()let endTime = new Date().getTime()console.log(`此次的響應時間為：${endTime - startTime}ms`) })app.use(async (ctx, next) => {console.log('111, 然后doSomething')await next()console.log('111 end') })app.use(async (ctx, next) => {console.log('222, 然后doSomething')await next()console.log('222 end') })app.use(async (ctx, next) => {console.log('333, 然后doSomething')await next()console.log('333 end') })app.listen(3333, ()=>{console.log('server is running at http://localhost:3333') })

看一下運行結果：

如果將‘222’函數(shù)的next()去掉的話，會發(fā)生什么呢？

可以看到，后面的‘333’中間件直接不執(zhí)行了。所以中間件的順序對next的執(zhí)行有很大的影響

路由 koa-router

我們常用koa-router來處理URL

安裝

npm i koa-router --save

看一個例子：

const Koa = require('koa') const app = new Koa() const Router = require('koa-router')const router = new Router()router.get('/', async (ctx, next) => {ctx.body = '你好，我這里是index頁' })router.get('/user', async (ctx, next) => {ctx.body = '你好，我這里是user頁' })router.get('/error', async (ctx, next) => {ctx.body = '你好，我這里是error頁' })app.use(router.routes())app.listen(3333, ()=>{console.log('server is running at http://localhost:3333') })

koa-router也支持嵌套寫法，通過一個總路由裝載所有子路由，也非常的方便。看一個例子：

const Koa = require('koa') const app = new Koa() const Router = require('koa-router')// 子路由1 let oneRouter = new Router()oneRouter.get('/', async (ctx, next) => {ctx.body = '你好，我這里是oneRouter頁' })// 子路由2 let twoRouter = new Router()twoRouter.get('/', async (ctx, next) => {ctx.body = '你好, 我這里是twoRouter頁' }).get('/home', async (ctx , next) => {ctx.body = '你好, 我這里是home頁' })// 裝載所有子路由 let indexRouter = new Router()indexRouter.use('/one',oneRouter.routes(), oneRouter.allowedMethods()) indexRouter.use('/two',twoRouter.routes(), twoRouter.allowedMethods())app.use(indexRouter.routes()).use(indexRouter.allowedMethods())app.listen(3333, ()=>{console.log('server is running at http://localhost:3333') })

看一下運行結果：

獲取請求數(shù)據(jù)

koa-router提供了常見的 .get .put .post .del 接口來處理各種需求。實際開發(fā)中我們用的比較多的是get和post，我們來看看get例子:

const Koa = require('koa') const app = new Koa() const Router = require('koa-router') const router = new Router()router.get('/data', async (ctx , next)=> {let url = ctx.url// 從ctx的request中拿到我們想要的數(shù)據(jù)let data = ctx.request.querylet dataQueryString = ctx.request.querystringctx.body = {url,data,dataQueryString} })app.use(router.routes())app.listen(3333, ()=>{console.log('server is running at http://localhost:3333') })

在瀏覽器里輸入http://localhost:3333/data?user=wuyanzu&id=123456 ,可以看到運行結果

可以看到區(qū)別，.query返回的結果是對象，而.querystring返回的是字符串，這個很好理解。（chrome插件顯示成json格式）

如果遵從 RESTful 規(guī)范,比如請求要以 '/user/:id'的方式發(fā)出的話，我們可以用下面的例子來獲取到想要的數(shù)據(jù)

添加代碼

router.get('/data/:id', async (ctx, next) => {// 也從ctx中拿到我們想要的數(shù)據(jù)，不過使用的是params對象let data = ctx.paramsctx.body = data })

瀏覽器運行 http://localhost:3333/data/4396 看到結果

接下來我們看看post的例子

我們常用的請求post，它的數(shù)據(jù)是放在body當中的。這個時候就推薦一個非常常用且好用的中間件-koa-bodyparser

首先安裝

npm i koa-bodyparser --save

然后我們在剛才的代碼里添加

router.get('/post', async (ctx, next) => {// 模擬一段提交頁面let html = ` <form action="/post/result" method="post"><p>你長的最像哪位明星</p><input name="name" type="text" placeholder="請輸入名字："/> <br/><p>輸入一段你知道的車牌號</p><input name="num" type="text" placeholder="請輸入車牌號："/><br/> <button>確定不改了哦</button></form> `ctx.body = html })router.post('/post/result', async (ctx, next) => {// 我們可以從ctx的request.body拿到提交上來的數(shù)據(jù)let {name, num} = ctx.request.bodyif (name && num) {ctx.body = `hello，你最像的明星是:${name},ch你知道的車牌號是:${num}`} else {ctx.body = '啊哦~你填寫的信息有誤'}})

看一下運行結果

cache

koa操作cookie是非常方便的，也是從上下文ctx中獲取。

• ctx.cookies.get(name, [options]) 讀取上下文請求中的cookie
• ctx.cookies.set(name, value, [options]) 在上下文中寫入cookie

在我們剛才的post請求的代碼中加入:

router.post('/post/result', async (ctx, next) => {// 我們可以從ctx的request.body拿到提交上來的數(shù)據(jù)let {name, num} = ctx.request.bodyif (name && num) {ctx.body = `hello，你最像的明星是:${name},ch你知道的車牌號是:${num}`ctx.cookies.set('xunleiCode',num,{domain: 'localhost', // 寫cookie所在的域名path: '/post/result', // 寫cookie所在的路徑maxAge: 10 * 60 * 1000, // cookie有效時長expires: new Date('2018-09-17'), // cookie失效時間httpOnly: false, // 是否只用于http請求中獲取overwrite: false // 是否允許重寫})} else {ctx.body = '啊哦~你填寫的信息有誤'}})

看一下運行結果：

koa操作session的話，需要用到koa-session，?：

const session = require('koa-session')app.keys = ['some secret hurr']; const CONFIG = {key: 'koa:sess', //cookie key (default is koa:sess)maxAge: 86400000, // cookie的過期時間 maxAge in ms (default is 1 days)overwrite: true, //是否可以overwrite (默認default true)httpOnly: true, //cookie是否只有服務器端可以訪問 httpOnly or not (default true)signed: true, //簽名默認truerolling: false, //在每次請求時強行設置cookie，這將重置cookie過期時間（默認：false）renew: false, //(boolean) renew session when session is nearly expired, }; app.use(session(CONFIG, app));

小結

在涉及到自己沒有接觸過的領域時，我一直推崇先看看要怎么玩，等自己會玩了以后，再看看“究竟”怎么玩。我們通過上面的代碼和描述，已經(jīng)對koa及node有一個初步的印象和概念。下篇文章我們會有中間件的拆分，單元測試，記錄日志，管理規(guī)范等。讓我們共同成長！

廣而告之

本文發(fā)布于薄荷前端周刊，歡迎Watch & Star ★，轉載請注明出處。

歡迎討論，點個贊再走吧 ｡???｡ ～

總結

以上是生活随笔為你收集整理的【从前端到全栈】- koa快速入门指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。