ejs koa

fredshare 發(fā)布于2019-08-23 11:29 / 2477人閱讀

摘要：中運行異步靜態(tài)資源路由處理函數(shù)異步函數(shù)中間件結(jié)果所有的都要使用異步操作，由于全部都是異步，將會先調(diào)用最后的一個，接著調(diào)用中間件的內(nèi)容。

ejs

簡介

中文官網(wǎng) https://ejs.bootcss.com/
npm https://www.npmjs.com/package...
github https://github.com/mde/ejs
官網(wǎng) http://ejs.co/

安裝

 npm install --save ejs

下面接著創(chuàng)建package.json

npm init

繼續(xù)安裝koa

網(wǎng)址 https://koa.bootcss.com/
github https://github.com/koajs/koa
官網(wǎng) https://koajs.com/
npm https://www.npmjs.com/package...

npm --install --save koa

koa2基礎(chǔ) 架設http服務器

const koa = require("koa");
const app = new koa();

app.listen(3000);

輸入網(wǎng)址 http://127.0.0.1:3000/ 即可完成假設

輸出hello world

const koa = require("koa");
const app = new koa();

const main = ctx => {
    ctx.response.body = "hello world";
}

app.use(main);
app.listen(3000);

上方是回調(diào)，將會使用main，main進行回調(diào)一個匿名函數(shù)，完成body的設置。

ctx.response

代表著一個http的請求

不同的請求返回不同的類型

const koa = require("koa");
const app = new koa();

const main = ctx => {
    if (ctx.request.accepts("xml")) {
        ctx.response.type = "xml";
        ctx.response.body = "hello world";
    } else if (ctx.request.accepts("json")) {
        ctx.response.type = "json";
        ctx.response.body = {"data": "hello world"};
    } else if (ctx.request.accepst("html")) {
        ctx.response.type = "html";
        ctx.response.body = "hello world"
    } else {
        ctx.response.type = "text";
        ctx.response.body = "hello world";
    }
}

app.use(main);
app.listen(3000);

ps 使用https://www.getpostman.com/ 編輯http請求，發(fā)送http請求

即可完成。

網(wǎng)頁模板

使用fs模塊，使用流，將客戶端和文件之間建立流的關(guān)系，然后將其對接

const koa = require("koa");
const fs = require("fs");
const app = new koa();

const main = ctx => {
    ctx.response.type = "html";
     ctx.response.body = fs.createReadStream("./index.html");    // 創(chuàng)建一個流，將流進行對接
}

app.use(main);
app.listen(3000);

路由 ctx.request.path

ctx.request.path 外加if語句實現(xiàn)路由

使用koa-route

繼續(xù)下載

npm install --save koa-route

編寫代碼

const koa = require("koa");
const route = require("koa-route");
const app = new koa();

const about = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world"
}

const main = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world"
}

app.use(route.get("/", main));
app.use(route.get("/about", about));
app.listen(3000);

訪問
http://127.0.0.1:3000/about
http://127.0.0.1:3000/
完成路由

靜態(tài)資源

koa-static
npm https://www.npmjs.com/package...
接著下載安裝

npm i koa-static

編寫入口文件。

const koa = require("koa");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

const static = server(__dirname + "/public");
const about = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world";
}

app.use(route.get("/about", about));
app.use(static);

app.listen(3000);

訪問 http://127.0.0.1:3000/1.png 將會返回public下的1.png文件
訪問 http://127.0.0.1:3000/about 將會被路由進行捕獲

重定向

const koa = require("koa");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

const static = server(__dirname + "/public");
const about = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world";
}
const redirect = ctx => {
    ctx.response.redirect("/");
    ctx.response.body = "Index Page"
};

app.use(route.get("/about", about));
app.use(route.get("/redirect", redirect));
app.use(static);

app.listen(3000);

上方完成了一次頁面的跳轉(zhuǎn)

中間件

const koa = require("koa");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

const static = server(__dirname + "/public");
const about = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world";
}
const redirect = ctx => {
    ctx.response.redirect("/");
    ctx.response.body = "Index Page"
};
const main = ctx => {
    ctx.response.body = "hello world";
}

// 中間件
const logger = (ctx, next) => {
    console.log("info!")
    next();    // 繼續(xù)調(diào)用下一個中間件
}
app.use(logger);
app.use(route.get("/", main));
app.use(route.get("/about", about));
app.use(route.get("/redirect", redirect));
app.use(static);

app.listen(3000);

上方的加載所有的都會使用一個中間件

中間件棧

中間件棧實現(xiàn)的是一個先進后出

PS C:UsersmingmDesktopejs> node index.js
> one
> two
> three
< three
< two
< one

const koa = require("koa");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

const static = server(__dirname + "/public");
const about = ctx => {
    ctx.response.type = "html";
    ctx.response.body = "hello world";
}
const redirect = ctx => {
    ctx.response.redirect("/");
    ctx.response.body = "Index Page"
};
const main = ctx => {
    ctx.response.body = "hello world";
}

// 中間件
const one = (ctx, next) => {
    console.log("> one");
    next();    // 裝載下一個中間件
    console.log("< one");
}
const two = (ctx, next) => {
    console.log("> two");
    next();    
    console.log("< two");
}
const three = (ctx, next) => {
    console.log("> three");
    next();
    console.log("< three");
}
app.use(one);
app.use(two);
app.use(three);
app.use(route.get("/", main));
app.use(route.get("/about", about));
app.use(route.get("/redirect", redirect));
app.use(static);

app.listen(3000);

異步

是滴，node.js最重要的是異步，以及回調(diào)

es7的異步函數(shù)

一段代碼直接說明

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("resolved");
      console.log("我是執(zhí)行結(jié)果4")
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  console.log("我是執(zhí)行結(jié)果3")
  var result = await resolveAfter2Seconds();
  console.log(result);
  console.log("我是執(zhí)行結(jié)果2");
  // expected output: "resolved"
}

asyncCall();
console.log("我是執(zhí)行結(jié)果1");

輸出結(jié)果為

> "calling"
> "我是執(zhí)行結(jié)果3"
> "我是執(zhí)行結(jié)果1"
> "我是執(zhí)行結(jié)果4"
> "resolved"
> "我是執(zhí)行結(jié)果2"

運行過程為先運行函數(shù)asyncCall，接著輸出calling和結(jié)果3，繼續(xù)到await語句的時候，為一個回調(diào)的語句，此時主線程，因為遇到await語句，將會直接進行輸出執(zhí)行結(jié)果1的內(nèi)容，等待著resolveAfter2Seconds后執(zhí)行完畢，進行回調(diào)。（Promise 對象為一個暫時保存回調(diào)內(nèi)容的一個對象）Promise對象將會暫時保存運行的結(jié)果，運行結(jié)果為結(jié)果4和resolved，等待執(zhí)行完畢以后，將會把暫時保存的內(nèi)容，賦值給result變量，由于此時已經(jīng)執(zhí)行完畢，將會繼續(xù)運行下方的內(nèi)容，輸出result中的內(nèi)容，result中的內(nèi)容為異步的執(zhí)行的內(nèi)容，接著，輸出結(jié)果2，完成運行。

koa2中運行異步

const koa = require("koa");
const fs = require("fs");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

// 路由處理函數(shù)
const static = server(__dirname + "/public");
const main = async ctx => {
  ctx.response.type = "html";
  console.log("one one one one");
  ctx.response.body = await file();
  console.log("one one one");
};
// 異步函數(shù)
function file() {
    return new Promise((resolve, reject) => {
        fs.readFile("./index.html", "utf8", (err, data) => {
            if (err) {
                reject(console.log(err));
            } else {
                resolve(data);
                console.log("one one");
            }
        })
    })
}
// 中間件
const one = async (ctx, next) => {
    console.log("one");
    await next();
    console.log("one one one one one one ")
}


app.use(one);
app.use(route.get("/", main));
console.log("one one one one one one ")
app.use(static);

app.listen(3000);

結(jié)果

oen one one one one
one
one one one one
one one
one one one
one one one one one one

所有的都要使用異步操作，
由于全部都是異步，將會先調(diào)用最后的一個，
接著調(diào)用中間件的內(nèi)容。
由于中間件也為異步，將會繼續(xù)異步main，
由于main也為異步，將會調(diào)用異步函數(shù)file中的內(nèi)容。
接著，按照上面的順序倒著回來，最后完成中間件

ps 由于中間件的異步，這樣就成功的模擬的中間件的正常的模型

正常的中間件

const koa = require("koa");
const app = new koa();

const main = ctx => {
    ctx.response.type = "html";
    console.log("3")
    ctx.response.body = "hello world"
    console.log("4");
};

const one = (ctx, next) => {
    console.log("info!");
    console.log("1")
    next();
    console.log("2")
}

app.use(one);
app.use(main);

app.listen(3000);

運行結(jié)果

info!
1
3
4
2

先進去，等到全部執(zhí)行完成以后，在出來，中間件包裹著全部

不加異步的中間件

const koa = require("koa");
const fs = require("fs");
const app = new koa();
const server = require("koa-static");    // 靜態(tài)資源
const route = require("koa-route");

// 路由處理函數(shù)
const static = server(__dirname + "/public");
const main = async ctx => {
  ctx.response.type = "html";
  console.log("one one one one");
  ctx.response.body = await file();
  console.log("one one one");
};
// 異步函數(shù)
function file() {
    return new Promise((resolve, reject) => {
        fs.readFile("./index.html", "utf8", (err, data) => {
            if (err) {
                reject(console.log(err));
            } else {
                resolve(data);
                console.log("one one");
            }
        })
    })
}
// 中間件
const one =  (ctx, next) => {
    console.log("one");
     next();
    console.log("one one one one one one ")
}


app.use(one);
app.use(route.get("/", main));
console.log("oen one one one one");
app.use(static);

app.listen(3000);

運行結(jié)果

oen one one one one
one
one one one one
one one one one one one
one one
one one one

可以發(fā)現(xiàn)，變現(xiàn)的"溢出"

中間件的合成

koa-compose

npm https://www.npmjs.com/package...
下載安裝
比較簡單，看文檔就行。

錯誤處理

同try類似使用throw拋出錯誤。

cookies

ctx.cookies 用來讀取cookies客戶端發(fā)送的cookies內(nèi)容

const koa = require("koa");
const app = new koa();
const route = require("koa-route");

const main = (ctx) => {
    const n = Number(ctx.cookies.get("view") || 0) + 1;    // 獲取客戶端的cookice，如果不存在，直接取0，括號內(nèi)的為一個選擇語句，然后將其cookice進行加1操作
    ctx.cookies.set("view", n);    // 發(fā)送讀取到的cookice
    ctx.response.type = "html";
    ctx.response.body = n + "views";     // 將結(jié)果輸出
}

app.use(route.get("/", main));

app.listen(3000);

完成操作

表單操作

即post和get操作
繼續(xù)使用模塊 koa-body
github https://github.com/dlau/koa-body
npm https://www.npmjs.com/package...
安裝

npm i koa-body

支持json格式數(shù)據(jù)的提交哦

const Koa = require("koa");
const koaBody = require("koa-body");

const app = new Koa();

const main = ctx => {
  ctx.body = JSON.stringify(ctx.request.body);
};

app.use(koaBody());
app.use(main);

app.listen(3000);

客戶端發(fā)送

name=Jack

格式為

text/plain

返回的都為字符串
文件上傳暫時搞不定。

ejs 需要先安裝koa模板中間件

官網(wǎng) https://www.npmjs.com/package...

npm install --save koa-views

index.js文件

const koa = require("koa");
const views = require("koa-views");
const path = require("path");
const app = new koa();

// 加載模板引擎
app.use(views(path.join(__dirname, "./view"), { extension: "ejs" }));

const main = async ctx => {
  let title = "hello";
  await ctx.render("index", {title})
}
app.use(main);
app.listen(3000);

view下的index.ejs文件




    <%= title %>


<%= title %>
hello world

訪問http://127.0.0.1:3000/
內(nèi)容完成動態(tài)的更新

ps 上傳文件還是不太會，無奈

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97042.html

發(fā)表評論

登陸后可評論

0條評論

fredshare

男|高級講師

我要關(guān)注我要私信

TA的文章

anaconda下安裝tensorflow

閱讀 1896·2023-04-25 23:28
tensorflow詳解

閱讀 607·2023-04-25 22:49
微信小程序使用WeUI入門教程

閱讀 2327·2021-09-27 13:34
主機域名的一般格式是什么-域名的格式？

閱讀 5297·2021-09-22 15:09
CSS垂直居中和水平居中

閱讀 3635·2019-08-30 12:52
Java 學習路線之四個階段

閱讀 2772·2019-08-29 15:26
js 數(shù)據(jù)類型

閱讀 679·2019-08-29 11:12
河內(nèi)之塔（漢諾塔）

閱讀 2220·2019-08-26 12:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ejs koa

hello world

hello world

hello world

hello world

hello world

正常的中間件

hello world

不加異步的中間件

<%= title %>

相關(guān)文章

**node項目實戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個前端論壇**

**node項目實戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個前端論壇**

**Node+Koa2+Mysql 搭建簡易博客**

發(fā)表評論

0條評論

fredshare

男|高級講師

TA的文章

anaconda下安裝tensorflow

tensorflow詳解

微信小程序使用WeUI入門教程

主機域名的一般格式是什么-域名的格式？

CSS垂直居中和水平居中

Java 學習路線之四個階段

js 數(shù)據(jù)類型

河內(nèi)之塔（漢諾塔）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ejs koa

hello world

hello world

hello world

hello world

hello world

正常的中間件

hello world

不加異步的中間件

<%= title %>

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！