ejs koa

fredshare 發布于2019-08-23 11:29 / 2458人閱讀

摘要：中運行異步靜態資源路由處理函數異步函數中間件結果所有的都要使用異步操作，由于全部都是異步，將會先調用最后的一個，接著調用中間件的內容。

ejs

簡介

中文官網 https://ejs.bootcss.com/
npm https://www.npmjs.com/package...
github https://github.com/mde/ejs
官網 http://ejs.co/

安裝

 npm install --save ejs

下面接著創建package.json

npm init

繼續安裝koa

網址 https://koa.bootcss.com/
github https://github.com/koajs/koa
官網 https://koajs.com/
npm https://www.npmjs.com/package...

npm --install --save koa

koa2基礎 架設http服務器

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

app.listen(3000);

輸入網址 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);

上方是回調，將會使用main，main進行回調一個匿名函數，完成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請求，發送http請求

即可完成。

網頁模板

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

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");    // 創建一個流，將流進行對接
}

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

路由 ctx.request.path

ctx.request.path 外加if語句實現路由

使用koa-route

繼續下載

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/
完成路由

靜態資源

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");    // 靜態資源
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");    // 靜態資源
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);

上方完成了一次頁面的跳轉

中間件

const koa = require("koa");
const app = new koa();
const server = require("koa-static");    // 靜態資源
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();    // 繼續調用下一個中間件
}
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);

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

中間件棧

中間件棧實現的是一個先進后出

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");    // 靜態資源
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最重要的是異步，以及回調

es7的異步函數

一段代碼直接說明

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

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

asyncCall();
console.log("我是執行結果1");

輸出結果為

> "calling"
> "我是執行結果3"
> "我是執行結果1"
> "我是執行結果4"
> "resolved"
> "我是執行結果2"

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

koa2中運行異步

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

// 路由處理函數
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");
};
// 異步函數
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);

結果

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

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

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);

運行結果

info!
1
3
4
2

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

不加異步的中間件

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

// 路由處理函數
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");
};
// 異步函數
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);

運行結果

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

可以發現，變現的"溢出"

中間件的合成

koa-compose

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

錯誤處理

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

cookies

ctx.cookies 用來讀取cookies客戶端發送的cookies內容

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，括號內的為一個選擇語句，然后將其cookice進行加1操作
    ctx.cookies.set("view", n);    // 發送讀取到的cookice
    ctx.response.type = "html";
    ctx.response.body = n + "views";     // 將結果輸出
}

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

app.listen(3000);

完成操作

表單操作

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

npm i koa-body

支持json格式數據的提交哦

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);

客戶端發送

name=Jack

格式為

text/plain

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

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

官網 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/
內容完成動態的更新

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

GPU云服務器云服務器 koa linux koa koa2 koa.js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97042.html

node項目實戰-用node-koa2-mysql-bootstrap搭建一個前端論壇

摘要：項目初始化此時已經創建好了文件了。接下來向添加數據庫操作語句，建表增刪改查。。。前端頁面開發項目基本結構搭建好后，就可以進行前端頁面的編寫了。前言在學習了koa2和express并寫了一些demo后，打算自己寫一個項目練練手，由于是在校生，沒什么好的項目做，即以開發一個前端論壇為目標，功能需求參照一下一些社區擬定，主要有：登錄注冊個人信息維護、頭像等基本信息發表文章，富文本...

beanlam 2019-08-22 16:58 評論0 收藏0
node項目實戰-用node-koa2-mysql-bootstrap搭建一個前端論壇

摘要：項目初始化此時已經創建好了文件了。接下來向添加數據庫操作語句，建表增刪改查。。。前端頁面開發項目基本結構搭建好后，就可以進行前端頁面的編寫了。前言在學習了koa2和express并寫了一些demo后，打算自己寫一個項目練練手，由于是在校生，沒什么好的項目做，即以開發一個前端論壇為目標，功能需求參照一下一些社區擬定，主要有：登錄注冊個人信息維護、頭像等基本信息發表文章，富文本...

RobinQu 2019-08-02 10:22 評論0 收藏0
Node+Koa2+Mysql 搭建簡易博客

摘要：搭建簡易博客預覽地址寫在前面本篇教程一方面是為了自己在學習的過程加深記憶，也是總結的過程。 Koa2-blog 2018-1-5 更新教程（新增上傳頭像、新增分頁、樣式改版、發布文章和評論支持markdown語法）現在GitHub的代碼結構有變現在GitHub的代碼結構有變，接口名也有變動。 Node+Koa2+Mysql 搭建簡易博客預覽地址 http://blog.wclimb....

darkbug 2019-08-21 11:48 評論0 收藏0

發表評論

登陸后可評論

0條評論

fredshare

男|高級講師

我要關注我要私信

TA的文章

anaconda下安裝tensorflow

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

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

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

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

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

閱讀 2740·2019-08-29 15:26
js 數據類型

閱讀 659·2019-08-29 11:12
河內之塔（漢諾塔）

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ejs koa

hello world

hello world

hello world

hello world

hello world

正常的中間件

hello world

不加異步的中間件

<%= title %>

相關文章

**node項目實戰-用node-koa2-mysql-bootstrap搭建一個前端論壇**

**node項目實戰-用node-koa2-mysql-bootstrap搭建一個前端論壇**

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

發表評論

0條評論

fredshare

男|高級講師

TA的文章

anaconda下安裝tensorflow

tensorflow詳解

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

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

CSS垂直居中和水平居中

Java 學習路線之四個階段

js 數據類型

河內之塔（漢諾塔）

最新活動

資訊專欄INFORMATION COLUMN

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

ejs koa

hello world

hello world

hello world

hello world

hello world

正常的中間件

hello world

不加異步的中間件

<%= title %>

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

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