koa基礎實踐

 

1.訪問靜態文件： 使用中間件koa-static

const koa = require('koa');
const static = require('koa-static');

let server = new koa();
server.listen(8080);

// 訪問靜態文件
server.use(static('www'));

  在根目錄創建www文件夾，並新建1.html文件，瀏覽器訪問路徑 http://localhost:8080/1.html 可訪問到對應文件。

2.1訪問接口：使用中間件koa-route

const koa = require('koa');
const route = require('koa-route');
let server = new koa();
server.listen(8080);

//接口 /reg?user=xxx&psw=xxx
server.use(route.get('/reg',async (ctx,next)=>{
    ctx.response.body = 'hello world';
    console.log(ctx.request.query);
}));

//如何獲取路由參數
server.use(route.get('/catch/:user/:psw',async (ctx,username,psw,next)=>{
    ctx.response.body = 'hello,' + username;
    console.log(username,psw);
}));

瀏覽器訪問路徑 http://localhost:8080/reg?user=bboyjoe&psw=123456

node控制檯會輸出：

{user: 'bboyjoe', psw: '123456'}

瀏覽器訪問路徑 http://localhost:8080/catch/bboyjoe/123456

node控制檯會輸出：

bboyjoe 123456

2.2 訪問接口：使用中間件koa-router

const koa = require('koa');
const router = require('koa-router');
let server = new koa();
server.listen(8080);

let r1 = router();
server.use(r1.routes());

//接口 /login?user=xxx&psw=xxx
r1.get('/login',async (ctx,next)=>{
    console.log(ctx.url);
    ctx.response.body='登錄';
});

//接口 /reg/xxx/xxx
r1.get('/reg/:user/:psw',async (ctx,next)=>{
    console.log(ctx.params);
    ctx.response.body='註冊';
});

瀏覽器訪問路徑 http://localhost:8080/login?user=bboyjoe&psw=123456

node控制檯輸出：

/login?user=bboyjoe&psw=123456

瀏覽器訪問路徑 http://localhost:8080/reg/bboyjoe/123456

node控制檯輸出：

{user: 'bboyjoe', psw: '123456'}

3.自己寫一個訪問靜態文件的中間件：

 現在libs文件夾下創建my-static.js

const fs = require('fs');
const assert = require('assert');

module.exports = function (root) {
    assert(root,'argument root is required');
    assert(typeof root === 'string', 'root must be string');

    return async (ctx) => {
        ctx.response.body = await new Promise((resolve,reject)=>{
            fs.readFile(`${root}${ctx.request.path}`,(err,data)=>{
                if(err){
                    reject(err);
                }else{
                    resolve(data.toString());
                }
            })
        })
    }
}

在實際中引用my-static：

const koa = require('koa');
const myStatic = require('./libs/my-static');

let server = new koa();
server.listen(8080);

// 訪問靜態文件
server.use(myStatic('www'));

在根目錄創建www文件夾，並新建1.html文件，瀏覽器訪問路徑 http://localhost:8080/1.html 可訪問到對應文件。

4. 處理post數據：使用中間件koa-better-body來處理數據，使用koa-convert來兼容版本

<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
    <input type="text" name="username"><br/>
    <input type="password" name="psw"><br/>
    <input type="file" name="f1"><br/>
    <input type="submit" value="提交">
</form>

const koa = require('koa');
const body = require('koa-better-body');
const convert = require('koa-convert');

let server = new koa();
server.listen(8080);

server.use(convert(body({
    uploadDir: './upload/',
    keepExtensions: true
})));

server.use(async ctx=>{
   console.log('body: ',ctx.request.body);
   console.log('files: ',ctx.request.files);
   console.log('fields: ',ctx.request.fields);
});

瀏覽器訪問該表單頁面，並提交數據，可以得到包含文件在內的數據。

5. cookie操作

const koa = require('koa');

let server = new koa();
server.listen(8080);

//cookie加簽名
server.keys = ['jfdsakljhfgklashgkjh','iouoifoknhkjfklsdjflk','zjfjhasofjoiujofdsf'];

server.use(async ctx=>{
    ctx.cookies.set('user','keven',{
        maxAge: 24*3600*1000,
        path: '/',
        domain: 'localhost',
        signed: true
    });
    console.log(ctx.cookies.get('user',{signed: true}));
})

瀏覽器訪問http://localhost:8080,F12查看相應cookie信息。

6.session操作：使用中間件koa-session

const koa = require('koa');
const session = require('koa-session');

let server = new koa();
server.listen(8080);
server.keys = ['fdsajklsjalkgjlk','uioweuojlgkjsdlkj','fkljflkjeruoiu'];
server.use(session({
    maxAge: 20*60*1000    //koa裏默認是一天
},server));

server.use(async ctx=>{
    if(!ctx.session['n']){
        ctx.session['n'] = 1;
    }else{
        ctx.session['n']++;
    }
   console.log(ctx.session);
   ctx.response.body = `這是你第${ctx.session['n']}次來訪`;
});

瀏覽器訪問http://localhost:8080,可在node控制檯查看結果

7.mysql操作：使用中間件koa-mysql

const koa = require('koa');
const mysql = require('koa-mysql');

let server = new koa();
server.listen(8080);

const db = mysql.createPool({host:'localhost',user:'root',password:'',port:3306,database: 'an_ju_ke'});

server.use(async ctx=>{
   let p = new Promise((resolve,reject)=>{
      let fn = db.query('SELECT * FROM house_table');
      fn(function (err,data) {
          if(err){
              reject(err);
          }else{
              resolve(data);
          }
      })
   });
   let datas = await p;
   console.log(datas);

   ctx.response.body = datas;
});

8.自己封裝mysql中間件：

const mysql = require('koa-mysql');

module.exports = {
    createPool(json){
        const db = mysql.createPool(json);
        let _query = db.query.bind(db);

        db.query = function (sql) {
            return new Promise((resolve,reject)=>{
                _query(sql)((err,data)=>{
                    if(err){
                        reject(err);
                    }else{
                        resolve(data);
                    }
                })
            })
        };

        return db;
    }
};

const koa = require('koa');
const mysql = require('./libs/koa-better-mysql');

let server = new koa();
server.listen(8080);

const db = mysql.createPool({host:'localhost',user:'root',password:'',port:3306,database: 'an_ju_ke'});

server.use(async ctx=>{
    let datas = await db.query('SELECT * FROM house_table');
    console.log(datas);
    ctx.response.body = datas;
});

9.服務端渲染：使用中間件koa-ejs

const koa = require('koa');
const mysql = require('./libs/koa-better-mysql');
const ejs = require('koa-ejs');

let db = mysql.createPool({ host: 'localhost', user: 'root', password: '', port: '3306', database: 'an_ju_ke'});
let server = new koa();
server.listen(8080);

ejs(server,{
    root: './template',
    layout: false,
    viewExt: 'ejs',
    cache: false,
    debug: true
});

server.use(async ctx=>{
    let houses = await db.query('SELECT * FROM house_table');
    await ctx.render('index',{
        houses
    })
})

 在template文件夾下創建index.ejs文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ejs服務端渲染</title>
</head>
<body>
    <% houses.forEach(json=>{ %>
        <h4><%= json.title -%></h4>
    <% }); %>
</body>
</html>

瀏覽器訪問localhost:8080可查看效果