一,初始化koa
1, npm init -y //初始化項目
2,npm install -g cnpm --registry=https://registry.npm.taobao.org //切換鏡像
3, cnpm install koa --save //安裝koa
4, 編寫基本代碼
const koa=require('koa');
const app = new koa();
app.use(async(cxt)=>{
cxt.body='我運行成功了'
})
app.listen(3000,()=>{
console.log('我在3000端口運行')
})
5,跑成功了
二, 準備es6語法,我這裏就不寫了
三,在寫一遍scync 和 awite 和 Promise
function testAwait(){
console.log("testAwait");
}
async function helloAsync(){
await testAwait(); //等待上面函數解決結果
console.log("helloAsync");
}
四,路由
cnpm install koa-router --save 安裝路由
路由使用
const Koa = require('koa');
const Router = require('koa-router');//引入路由
const app = new Koa();
const router = new Router();
router.get('/',async (ctx)=>{
ctx.body='111';
}).post('/',async (ctx)=>{
ctx.body='222';
})
app.use(router.routes()).use(router.allowedMethods());//使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000,()=>{
console.log('我在3000端口運行')
})
get 傳值 實例
const Koa = require('koa');
const router = require('koa-router')();//引入路由
const app = new Koa();
router.get('/',async (ctx)=>{
console.log(ctx.request) //原生請求
console.log(ctx.query) //這個是返回對象
console.log(ctx.querystring) //這個是返回字符串
console.log(ctx.url)//獲取get url 地址
ctx.body='111';
})
app.use(router.routes()).use(router.allowedMethods());//使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000,()=>{
console.log('我在3000端口運行')
})
動態路由
const Koa = require('koa');
const router = require('koa-router')();//引入路由
const app = new Koa();
router.get('/index',async (ctx)=>{
console.log(ctx.params) //獲取動態路由,這裏注意,可以傳入多個動態路由,還需要注意,如果定義了就一定要傳入,這裏需要在研究遊戲,動態路由
ctx.body='121';
})
router.get('/index/:id',async (ctx)=>{
console.log(ctx.params) //獲取動態路由,這裏注意,可以傳入多個動態路由,還需要注意,如果定義了就一定要傳入
ctx.body='111';
})
app.use(router.routes()).use(router.allowedMethods());//使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000,()=>{
console.log('我在3000端口運行')
})
五,中間件
圍繞路由的操作,包括,在匹配路由之前,做某件事,匹配路由之後做某件事,可以理解 生命週期,鉤子函數,代理等等
應用級中間件//在主程序調用,兩個參數,一個是,對應路由,二個是對應的操作
app.use('/',async(cxt,next)=>{
ctx.body='777'
await next() //代表往下執行,就卡住這裏了
})
路由級中間件
在路由內使用的中間件//執行完可以繼續向下匹配
router.get('/index',async (ctx,next)=>{
console.log(11221);
await next()
})
router.get('/index',async (ctx)=>{
console.log(11222221);
})
錯誤中間件
這裏主要是執行順序,最後執行的纔是404
這裏需要理解 洋蔥頭 執行順序
先執行 next 之前的,然後等待 next 執行完, 在執行next 之後的
const Koa = require('koa');
const router = require('koa-router')();//引入路由
const app = new Koa();
app.use(async(ctx,next)=>{
console.log(111);
await next()
if(ctx.status==404){
ctx.status = 404;
ctx.body="這是一個 404 頁面"
}
})
router.get('/index',async (ctx,next)=>{
console.log(11221);
await next()
})
router.get('/index',async (ctx)=>{
console.log(11222221);
ctx.body='1111'
})
app.use(router.routes()).use(router.allowedMethods());//使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000,()=>{
console.log('我在3000端口運行')
})
六,模版 引擎
安裝 cnpm install --save koa-views //安裝視圖
安裝 cnpm install ejs --save 模版引擎
引入 var views = require(‘koa-views’); //views引入
使用 視圖中間件 ,並把 引擎設置爲ejs,第一個代表是 模版的位置,第二個是參數
app.use(views(__dirname + '/views', { //這個是帶參數的,默認後綴是html
map: {
html: 'ejs'
}
}));
或者
app.use(views(__dirname, { extension: 'ejs' })) //這個應該是簡寫
使用引擎,渲染數據 //基本跑起來了
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const views = require('koa-views'); //引入視圖
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
let title = 'hello koa2' ; //設置變量
await ctx.render('index',{ //輸出index 模版,並設置數據title //主要,一定要await 這裏是異步操作
title
})
})
app.use(views(__dirname+'/view', { extension: 'ejs' }))
app.use(router.routes()).use(router.allowedMethods()); //使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000, () => {
console.log('我在3000端口運行')
})
ejs基本使用方法
<%=h%> 綁定數據
<%for(var i=0;i<list.length;i++) { %> //循環輸出數據
<li><%=list[i] %></li>
<%}%>
<% if(true){ %> //條件判斷
<div>true</div>
<%} else{ %>
<div>false</div>
<%} %>
<%- include header.ejs %> 引入數據
<%-h%> //引入 html 用來解析html 用= 會把數據原樣輸出,不替換html
對所有添加一個公共變量
//寫一箇中間件配置公共的信息 //這個是模版引擎的用法
app.use(async (ctx,next)=>{
ctx.state.userinfo='張三';
await next();/*繼續向下匹配路由*/
})
七,post 提交數據
原生方法 //下面是原生使用,記住,await 等待的是 promise 數據 //這裏要學習
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);
}
});
}
使用中間件,koa-bodyparser
安裝 cnpm install koa-bodyparser --save
引入 const bodyParser = require(‘koa-bodyparser’)
使用 app.use(bodyParser());
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const views = require('koa-views'); //引入視圖
const bodyParser = require('koa-bodyparser'); //引入post 引擎
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
await ctx.render('index')
})
router.post('/',async (ctx)=>{
ctx.body=ctx.request.body; //這樣使用
})
app.use(bodyParser());
app.use(views(__dirname+'/view', { extension: 'ejs' }))
app.use(router.routes()).use(router.allowedMethods()); //使用路由,1,這個在最後調用,2,allowedMethods應該是攔截的意思,說明最後根據情況設置相應頭,建議添加
app.listen(3000, () => {
console.log('我在3000端口運行')
})
八,靜態資源
安裝 cnpm install koa-static --save
引入 const serve = require(‘koa-static’);
使用 app.use(serve(‘test/fixtures’)); 或者 app.use(serve(__dirname + ‘/test/fixtures’));
//這裏需要注意的是中間件可以配置多個,配置多個目錄是靜態文件
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const views = require('koa-views'); //引入視圖
const bodyParser = require('koa-bodyparser'); //引入post 引擎
const serve = require('koa-static'); //引入靜態資源
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
await ctx.render('index')
})
app.use(serve('static'));
app.use(bodyParser());
app.use(views(__dirname+'/view', { extension: 'ejs' }))
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('我在3000端口運行')
})
九,art-template 另一個模版,騰訊公司出品
安裝 cnpm install art-template --save
cnpm install koa-art-template --save
引入 const render = require(‘koa-art-template’);
render(app, {
root: path.join(__dirname, 'view'), //模版地址//這裏使用了,path 了
extname: '.html', //後綴名稱
debug: process.env.NODE_ENV !== 'production' //是否開啓調試模式//直接用真假就行
});
可以參考官方文檔
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const bodyParser = require('koa-bodyparser'); //引入post 引擎
const serve = require('koa-static'); //引入靜態資源
const render = require('koa-art-template'); //騰訊高效模版引擎
const path = require('path'); //這個是內置path 模塊
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
await ctx.render('index')
})
//配置模版引擎
render(app, {
root: path.join(__dirname, 'view'), //模版地址//這裏使用了,path 了
extname: '.html', //後綴名稱
debug: process.env.NODE_ENV !== 'production' //是否開啓調試模式//直接用真假就行
});
app.use(serve('static'));
app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('我在3000端口運行')
})
語法,非常好,複製文檔就行
十,cookie
這個內置功能,直接用ctx
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
ctx.cookies.set( 'cid', 'ddddd', //可替換爲token
{ domain: 'localhost', // 寫cookie所在的域名
path: '/', // 寫cookie所在的路徑
maxAge: 10 * 60 * 1000, // cookie有效時長
//expires: new Date('2017-02-15'), // cookie失效時間
httpOnly: false, // 是否只用於http請求中獲取
overwrite: false ,// 是否允許重寫
})
}).get('/index',async (ctx)=>{
console.log(ctx.cookies.get('cid'));
})
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('我在3000端口運行')
})
不能設置中文
使用base64
console.log(new Buffer('hello, world!').toString('base64'));// 轉換成 base64 字符
console.log(new Buffer('aGVsbG8sIHdvcmxkIQ==', 'base64').toString());// 還原 base64
const Koa = require('koa');
const Router = require('koa-router'); //引入路由
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
let wo=new Buffer('水電費').toString('base64');
ctx.cookies.set( 'cid', wo)
}).get('/index',async (ctx)=>{
let wo=ctx.cookies.get('cid');
console.log(new Buffer(wo, 'base64').toString());
})
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('我在3000端口運行')
})
十一, Session
安裝 cnpm install koa-session --save
引入 const session = require(‘koa-session’);
配置
app.keys = ['some secret hurr']; //這個是簽名,默認
const CONFIG = {
key: 'koa:sess', //這個是簽名,默認
maxAge: 86400000, //過期時間
autoCommit: true, //自動設置頭,默認
overwrite: true, //是否覆蓋,默認
httpOnly: true, //是否只有服務器端訪問
signed: true, //簽名,默認
rolling: false, //每次是否刷新session
renew: false, //快過期時候刷新session,應該開啓
};
app.use(session(CONFIG, app));
4,使用
//設置值 ctx.session.username = "張三";
//獲取值 ctx.session.username
const Koa = require('koa');
const router = require('koa-router')(); //引入路由
const session = require('koa-session');
const app = new Koa();
router.get('/', async (ctx) => {
ctx.session.username = "張三";
}).get('/index',async (ctx)=>{
console.log(ctx.session.username)
})
app.keys = ['some secret hurr']; //這個是簽名,默認
const CONFIG = {
key: 'koa:sess', //這個是簽名,默認
maxAge: 86400000, //過期時間
autoCommit: true, //自動設置頭,默認
overwrite: true, //是否覆蓋,默認
httpOnly: true, //是否只有服務器端訪問
signed: true, //簽名,默認
rolling: false, //每次是否刷新session
renew: true, //快過期時候刷新session,應該開啓
};
app.use(session(CONFIG, app));
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('我在3000端口運行')
})
十二, js 類和繼承
十三, 有關數據庫的封裝,這裏先不封裝了,過一段時間再說。
十四,路由的模塊
先了解官方的模塊安裝(官方項目生成器)
1、全局安裝 cnpm install koa-generator -g
2、創建項目 koa koa_demo
3、安裝依賴 cd koa_demo
npm install
4、啓動項目 npm start
大模塊處理
首先新建文件,設置路由文件 //下面是新建文件內容,舉例,下面是index.js
const Router = require('koa-router'); //引入路由
let router = new Router(); //實例化路由
router.get('/',async(ctx)=>{ //這裏定義了三個路由
ctx.body="這是前臺首頁";
})
router.get('/news',async(ctx)=>{
ctx.body ='這是前臺新聞頁面';
})
router.get('/user',async(ctx)=>{
ctx.body ='這是用戶頁面';
})
module.exports=router; //這裏是暴露路由,也可以在這裏實例化
在主文件引入,並使用 這裏是可以多級引入的,就是在子文件夾,在建文件夾,在引入文件
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
let index=require('./module/index.js');
//裝載所有子路由
let router = new Router();
router.use('/index,index.routes());
//加載路由中間件 下面也不能省
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
模版的模塊處理
前臺模版,直接使用就行,
router.get('/', async (ctx) => {
await ctx.render('index/index')
})