ejs koa

80447704 2019-06-28

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 = '<data>hello world</data>';
    } 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 = '<p>hello world</p>'
    } 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 = '<h2>hello world</h2>'
}

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 = '<h2>hello world</h2>';
}

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 = '<h2>hello world</h2>';
}
const redirect = ctx => {
    ctx.response.redirect('/');
    ctx.response.body = '<a href="/">Index Page</a>'
};

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 = '<h2>hello world</h2>';
}
const redirect = ctx => {
    ctx.response.redirect('/');
    ctx.response.body = '<a href="/">Index Page</a>'
};
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:\Users\mingm\Desktop\ejs> 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 = '<h2>hello world</h2>';
}
const redirect = ctx => {
    ctx.response.redirect('/');
    ctx.response.body = '<a href="/">Index Page</a>'
};
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 = '<h1>hello world</h1>'
    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内容
ejs koa

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文件

<!doctype html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>hello world</p>
</body>
</html>

访问http://127.0.0.1:3000/
内容完成动态的更新

ps 上传文件还是不太会，无奈
80447704

80447704

相关推荐

koa ejs 模板引擎

router.get(‘/add‘,async (ctx)=>{ let title = ‘hello koa2‘ await ctx.render(index‘,{. app.use //模板的后缀名是ejs. //app.use; //这

LorenLiu / 0评论 2020-01-31

Nodejs WEB服务器 静态文件托管、 GET POST路由 EJS模板引擎(8)

涉及到应用如何响应客户端对某个网站节点的访问。　　非官方解释：路由指的就是针对不同请求的 URL， 处理不同的业务逻辑。==‘/favicon.ico‘){ /*过滤请求 favicon.ico*/. fs.readFile(‘static‘+pathna

sapliang / 0评论 2019-10-26

node express使用HTML模板

一般我们在做node web项目的时候，想使用我们平时常用的html模板，express默认使用jade模板，本身是没有HTML的，那么如何实现呢？因为加载的模板引擎后调用的是同一个方法.__express，所以如果使用的是ejs模板，不用配置该项。在.s

LiteHeaven / 0评论 2019-09-05

canjs基础教程之EJS

EJS是Canjs的默认的模版语言,当和Observes一起使用时可以提供Live bind.如下一个EJS模版示例:. 从给出的示例中我们可以看到,在模版中可以使用this来访替代参数todos,EJS也可以不用添加前缀this.就可以直接访问参数的属性

Danielmumu / 0评论 2015-06-10

后台模板引擎ejs与前台模板引擎artTemplate的简单介绍

动态网页是指前端页面当中的数据内容来源于后台数据库，前端的html代码会随着后台数据的变化而变化，是动态生成的。制作动态网页有两种方式，一种方式是在后台拿到前端的html模板，利用后台模板引擎在后台完成数据与html模板的拼接，最后把拼接完成的完整html

liwusen / 0评论 2019-06-25

HTML的复用

gulp-file-include存在的问题：非JS语法；循环、条件语句无法嵌套；搭建环境新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data：。//gulp.dest定义导出文件的路径；//gulp.watc

UndefineOrNull / 0评论 2019-06-21

详解在express站点中使用ejs模板引擎

使用 vs创建的express站点，默认使用的是jade模板引擎，但是我不太喜欢这种方式，因为我觉得html本身的语义特性是我喜欢的，另外html本身也足够简洁，使用html自身做为模板语言更符合我的喜好，所以我选择ejs。程序包会安装到node_modu

草丛中枪 / 0评论 2017-09-21

Express使用html模板的详细代码

express默认使用jade模板，可以配置让其支持使用ejs或html模板。在项目根目录安装ejs.app.set;保存后重启服务，即可访问html文件。为什么修改了视图引擎还要增加设置html引擎？我们先看一下.engine()这个方法。如果你尝试加载

html的书写 / 0评论 2017-09-18

node.js 使用ejs模板引擎时后缀换成.html

app.set;4.修改模板文件的后缀为.html。好了，任务完成，可以运行观看效果了！以上所述就是本文的全部内容了，希望大家能够喜欢。

renpinghao / 0评论 2019-04-03

零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

本文改自非鱼的《前端开发人员入门指南，从零开始搭建Node.js, Express, Jade, Mongodb服务器》，之所以把Jade换成Ejs，是因为我觉得ejs更符合WEB编程人员的习惯，更确切说应该是更符合PHP、ASP程序员的使用习惯。好了，废

fangxiaoji / 0评论 2019-04-03

koa2使用ejs和nunjucks作为模板引擎的使用

koa2 如果使用 ejs、jade 这种作为模板引擎的话，直接使用 koa-views 进行模板加载即可。在使用 render 的时候，需要进行异步文件模板读取，因此 ctx.render 需要使用 await. 我实在是讨厌 ejs 的模板引擎语法，觉

sqliang / 0评论 2018-11-27

EJS模板引擎

前面的话nodejs的模板引擎有很多， EJS是比较简单和容易上手的。本文将详细介绍EJS. 概述EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户

网络游戏 / 0评论 2017-06-15