摘要：前言隨著技術(shù)的不斷發(fā)展，前端工程師也被賦予了越來越多的職責(zé)。接下來這篇文章，完成一個簡單的登錄注冊，能讓你快速上手，成為一個小全棧工程師，快速開始安裝因為已經(jīng)完全支持語法，所以請保證的版本在以上推薦一個的多版本管理工具。

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

因為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

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

//index.js

const 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

就可以看到運行結(jié)果啦:

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

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

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

經(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(`此次的響應(yīng)時間為：${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")
})

看一下運行結(jié)果：

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

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

我們常用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")
})

看一下運行結(jié)果：

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.query
  let dataQueryString = ctx.request.querystring

  ctx.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 ,可以看到運行結(jié)果

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

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

添加代碼

router.get("/data/:id", async (ctx, next) => {

  // 也從ctx中拿到我們想要的數(shù)據(jù)，不過使用的是params對象
  let data = ctx.params

  ctx.body = data
})

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

接下來我們看看post的例子

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

首先安裝

npm i koa-bodyparser --save

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

router.get("/post", async (ctx, next) => {
    // 模擬一段提交頁面
  let html = `    
    

        
你長的最像哪位明星
         
        

        
輸入一段你知道的車牌號
        
        
 
        確定不改了哦
     
 `
  ctx.body = html
})

router.post("/post/result", async (ctx, next) => {
  // 我們可以從ctx的request.body拿到提交上來的數(shù)據(jù)
  let {name, num} = ctx.request.body

  if (name && num) {
    ctx.body = `hello，你最像的明星是:${name},ch你知道的車牌號是:${num}`
  } else {
    ctx.body = "啊哦~你填寫的信息有誤"
  }

})

看一下運行結(jié)果

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.body

  if (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 = "啊哦~你填寫的信息有誤"
  }

})

看一下運行結(jié)果：

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