重新認識Koa2
Node.js
是一個非同步的世界,官方 API
支援的都是 callback
形式的非同步程式設計模型,這 會帶來許多問題,例如:
callback Koa
Koa – 基於 Node.js 平臺的下一代 web 開發框架
koa
是由 Express
原班人馬打造的,致力於成為一個更小、更富有表現力、更健壯的 Web 框架。 使用 koa
編寫 web
應用,可以免除重複繁瑣的回撥函式巢狀, 並極大地提 升錯誤處理的效率。 koa
不在核心方法中繫結任何中介軟體, 它僅僅提供了一個輕量優雅的 函式庫,使得編寫 Web 應用變得得心應手。開發思路和 express 差不多,最大的特點就是 可以避免非同步巢狀
1.2 Koa2.x 框架的安裝使用
1. 安裝 Node.js 8.x 以上的版本
開發 Koa2
之前, Node.js
是有要求的,它要求 Node.js
版本高於 V7.6
。因為 node.js 7.6
版本 開始完全支援 async/await
,所以才能完全你支援我們的 Koa2`
2. 安裝 Koa
安裝 Koa
框架和我們以前安裝其他模組是一樣的
npm install --save koa / cnpm install --save koa
--save
引數,表示自動修改 package.json
檔案,自動新增依賴項
簡單使用
二、koa 路由 get傳值、動態路由
2.1 Koa 路由
- 路由(
Routing
)是由一個URI
(或者叫路徑)和一個特定的HTTP
方法(GET
、POST
等)
組成的,涉及到應用如何響應客戶端對某個網站節點的訪問 - 通俗的講:路由就是根據不同的
URL
地址,載入不同的頁面實現不同的功能 -
Koa
中的路由和Express
有所不同,在Express
中直接引入Express
就可以配置路由,但是在Koa
中我們需要安裝對應的koa-router
路由模組來實現
npm install --save koa-router
2.2 Koa 路由 get 傳值
在 koa2
中 GET
傳值通過 request
接收,但是接收的方法有兩種: query
和 querystring
query querystring
2.3 Koa 動態路由
三、koa 中介軟體及執行流程
3.1 koa中介軟體的洋蔥圖執行流程
3.2 koa 中介軟體
3.2.1 什麼是 Koa 的中介軟體
- 通俗的講:中介軟體就是匹配路由之前或者匹配路由完成做的一系列的操作,我們就可以
把它叫做中介軟體 - 在
express
中介軟體(Middleware
)是一個函式,它可以訪問請求物件(request object (req)), 響應物件(response object (res)
), 和web
應用中處理請求-響應迴圈流程中的中介軟體,一 般被命名為 next 的變數。在Koa
中中介軟體和express
有點類似。
中介軟體的功能包括
- 執行任何程式碼
- 修改請求和響應物件
- 終結請求-響應迴圈
- 呼叫堆疊中的下一個中介軟體
如果我的 get
、 post
回撥函式中,沒有 next
引數,那麼就匹配上第一個路由,就不會往下匹 配了。如果想往下匹配的話,那麼需要寫 next()
3.2.2 Koa 應用可使用如下幾種中介軟體
1. 應用級中介軟體
2. 路由中介軟體
3. 錯誤處理中介軟體
4. 第三方中介軟體
3.2.3 Koa 中介軟體的執行順序
Koa
的中介軟體和 Express
不同, Koa
選擇了洋蔥圈模型
四、koa ejs模板引擎使用 以及ejs配置全域性資料
1. 安裝 koa-views 和 ejs
koa-views npm install --save koa-views / cnpm install --save koa-views ejs npm install ejs --save / cnpm install ejs --save
2. 引入 koa-views 配置中介軟體
const views = require('koa-views'); app.use(views('views', { map: {html: 'ejs' }}));
3. Koa 中使用 ejs
router.get('/add',async (ctx)=>{ let title = 'hello koa2' await ctx.render(index',{ title }) })
4. Ejs 引入模板
<%- include header.ejs %>
5. Ejs 繫結資料
<%=h%>
6. Ejs 繫結 html 資料
<%-h%>
7. Ejs 模板判斷語句
<% if(true){ %> <div>true</div> <%} else{ %> <div>false</div> <%} %>
8. Ejs 模板中迴圈資料
<%for(var i=0;i<list.length;i++) { %> <li><%=list[i] %></li> <%}%>
五、koa post 提交資料 koa-bodyparser 中介軟體的使用
5.1 原生 Nodejs 獲取 post 提交資料
function parsePostData(ctx){ return new Promise((resolve,reject)=>{ try{ let postdata=""; ctx.req.on('data',(data)=>{ postdata += data }) ctx.req.on("end",function(){ resolve(postdata); }) }catch(error){ reject(error); } } }); }
5.2 Koa 中 koa-bodyparser 中介軟體的使用
1. 安裝 koa-bodyparser
npm install --save koa-bodyparser
2. 安裝 引入配置中介軟體
var Koa = require('koa'); var bodyParser = require('koa-bodyparser'); var app = new Koa(); app.use(bodyParser()); app.use(async ctx => { ctx.body = ctx.request.body; })
3. 使用
ctx.request.body // 獲取 post 提交的資料
六、koa-static靜態資源中介軟體
1. 安裝 koa-static
npm install --save koa-static
2. 引入配置中介軟體
const static = require('koa-static'); app.use(static( path.join( __dirname, 'public') ))
七、koa art-template高效能模板引擎的使用
7.1 常見模板引擎的效能對比
適用於 koa
的模板引擎選擇非常多,比如 jade
、 ejs
、 nunjucks
、 art-template
等
-
art-template
是一個簡約、超快的模板引擎 - 它採用作用域預宣告的技術來優化模板渲染速度,從而獲得接近 JavaScript 極限的執行 效能,並且同時支援 NodeJS 和瀏覽器。
-
art-template
支援ejs
的語法,也可以用自己的類似angular
資料繫結的語法 - 中文文件: http://aui.github.io/art-template/zh-cn/docs
7.2 在 Koa 中使用 art-template 模板引擎
npm install --save art-template npm install --save koa-art-template
const Koa = require('koa'); const render = require('koa-art-template'); const app = new Koa(); render(app, { root: path.join(__dirname, 'view'), extname: '.art', debug: process.env.NODE_ENV !== 'production' }); app.use(async function (ctx) { await ctx.render('user'); }); app.listen(8080);
7.3 art-template 模板引擎語法
參考: http://aui.github.io/art-template/zh-cn/docs/syntax.html
八、koa Cookie的使用
8.1 Koa Cookie 的使用
1. Koa 中設定 Cookie 的值
ctx.cookies.set(name, value, [options])
通過 options
設定 cookie name
的 value
2. Koa 中獲取 Cookie 的值
ctx.cookies.get('name');
8.2 Koa 中設定中文 Cookie
console.log(new Buffer('hello, world!').toString('base64'));// 轉換成 base64 字元 串:aGVsbG8sIHdvcmxkIQ== console.log(new Buffer('aGVsbG8sIHdvcmxkIQ==', 'base64').toString());// 還原 base 64 字串:hello, world!
九、koa Session 的使用
9.1 Session 簡單介紹
session
是另一種記錄客戶狀態的機制,不同的是 Cookie
儲存在客戶端瀏覽器中,而 session
儲存在伺服器上
9.2 Session 的工作流程
當瀏覽器訪問伺服器併發送第一次請求時,伺服器端會建立一個 session
物件,生 成一個類似於 key
, value
的鍵值對, 然後將 key(cookie)
返回到瀏覽器(客戶)端,瀏覽 器下次再訪問時,攜帶 key(cookie)
,找到對應的 session(value)
。 客戶的資訊都儲存 在 session
中
9.3 koa-session 的使用
1. 安裝 express-session
npm install koa-session --save
2. 引入 express-session
const session = require('koa-session');
3. 設定官方文件提供的中介軟體
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, //簽名預設 true rolling:false, //在每次請求時強行設定cookie,這將重置cookie過期時間(預設:false) renew: false, //(boolean) renew session when session is nearly expired } app.use(session(CONFIG, app));
4. 使用
//設定值 ctx.session.username = "張三"; // 獲取值 ctx.session.username
9.4 Cookie 和 Session 區別
-
cookie
資料存放在客戶的瀏覽器上,session
資料放在伺服器上 -
cookie
不是很安全,別人可以分析存放在本地的COOKIE
並進行COOKIE
欺騙 考慮到安全應當使用session
-
session
會在一定時間內儲存在伺服器上。當訪問增多,會比較佔用你伺服器的效能 考慮到減輕伺服器效能方面,應當使用COOKIE
- 單個
cookie
儲存的資料不能超過4K
,很多瀏覽器都限制一個站點最多儲存20
個cookie
十、Koa 操作 Mongodb 資料庫
官方文件: http://mongodb.github.io/node-mongodb-native/
十一、Koa 應用生成器以及 Koa 路由模 塊化
11.1 koa 應用生成器
通過應用 koa
腳手架生成工具 可以快速建立一個基於 koa2
的應用的骨架
1. 全域性安裝
npm install koa-generator -g
2. 建立專案
koa koa_demo
3. 安裝依賴
cd koa_demo npm install
4. 啟動專案
npm start