ejs koa

最新推荐文章于 2022-11-05 20:30:08 发布
最新推荐文章于 2022-11-05 20:30:08 发布
阅读量136 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：https://juejin.im/post/5b82082051882542e32aa048
版权

ejs

简介

中文官网 ejs.bootcss.com/ npm www.npmjs.com/package/ejs github github.com/mde/ejs 官网 ejs.co/

安装

 npm install --save ejs
复制代码

下面接着创建package.json

npm init
复制代码

继续安装koa

网址 koa.bootcss.com/ github github.com/koajs/koa 官网 koajs.com/ npm www.npmjs.com/package/koa

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 www.npmjs.com/package/koa… 接着下载安装

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 www.npmjs.com/package/koa… 下载安装 比较简单，看文档就行。

错误处理

同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 github.com/dlau/koa-bo… npm www.npmjs.com/package/koa… 安装

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模板中间件

官网 www.npmjs.com/package/koa…

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 上传文件还是不太会，无奈

转载于:https://juejin.im/post/5b82082051882542e32aa048

weixin_33695082
关注
koa-ejs 使用
天天的博客
08-21 294
1 ， 安装 2， a.ejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body
Node.js中Koa使用ejs模板引擎和art-template模板引擎
SongD1114的博客
04-29 828
Node.js中使用模板引擎
模板引擎-koa-ejs
11-12 966
如果想要返回HTML文件，则需要安装模板引擎。 EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。Koa2框架中ejs可以把数据库查询的数据渲染到模板上面，实现一个动态网站。 Koa2 中使用ejs模板引擎的用法：1、安装 koa-views 和ejs 安装koa-ejs： cnpm i koa-ejs -S 安装koa-views cnpm i ko...
koa2模版初识——ejs
weixin_30872789的博客
07-09 266
在koa2中是用ejs模版需要依赖中间件，koa-views。 npm install --save koa-views 安装模版引擎： npm install --save ejs 编写ejs模版文件：<%= %> =:的意思是对中间的代码转义 ，还有一种是<%- %>:-号，是不转义。推荐使用<%= %>。更多关于ejs的使用，...
Koa的ejs模块
qq_47103654的博客
04-18 227
Ejs可以将node.js的后台数据渲染到静态页面上。 安装ejs模块>npm install ejs –save 安装npm install koa-views --save引入koa-views模块配置中间件 成功 实验 const views=require(‘koa-views’); const Koa=require(‘koa’);//引入模块 const Router=requ...
koa ejs 引擎
小小程序猿洋的博客
06-18 209
1安装koa-views npminstall --savekoa-views 2安装ejsnpm install ejs --save 3引入koa-views配置中间件 const views = require("koa-views"); app.use(views('views',{map:{html:'ejs'}})); 这种配置则后缀名必须是html ...
ejs:koa视图渲染中间件，支持ejs的所有功能
05-22
koa-ejs Koa ejs视图渲染中间件。 支持所有功能。 用法 例子 const Koa = require ( 'koa' ) ; const render = require ( 'koa-ejs' ) ; const path = require ( 'path' ) ; const app = new Koa ( ) ; render ( ...
koa-ejs2x:ejs 为 koa 渲染 2.x
06-02
koa-ejs2x 用法 例子 var koa = require ( 'koa' ) ; var render = require ( 'koa-ejs2x' ) ; var app = koa ( ) ; render ( app , { root : path . join ( __dirname , 'view' ) , layout : 'template' , ...
koa2使用ejs和nunjucks作为模板引擎的使用
01-01
koa2 如果使用 ejs、jade 这种作为模板引擎的话，直接使用 koa-views 进行模板加载即可。 比如使用 ejs ： 安装： yarn add koa-views ejs 使用： 在使用 render 的时候，需要进行异步文件模板读取，因此 ctx....
eko-koa：基于EJS，Knex，Objection和Koa的koa入门包= eko-koa
02-03
基于EJS，Knex anf Objection的Koa入门包。 对于Sails和Adonis这样的框架，这是理智的选择。 欢迎公关和分叉！ 要求和安装： 要求：节点8+ 安装： git clone ...
Node.js-koa2项目的示例koa2mongooseejs单纯示例
08-10
koa2项目的示例，koa2 mongoose ejs单纯示例
Koa2-Mysql-Layui-ejs:基于Koa2 和mysql数据库 ejs模板 前端layui模板的一套管理系统框架
05-11
Koa2-Mysql-Layui-ejs 基于Koa2 和mysql数据库 ejs模板 前端layui模板的一套管理系统框架
【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB
前端小白在前进的博客
11-05 6645
本篇文章更着重于代码层面上的补充，ejs模板的学习，文件上传中间件multer的学习在之前的文章中都做有普及，数据库的学习会在后续的文章中跟大家见面！
koa使用ejs模板引擎
小菜鸟的博客
07-08 276
koa使用ejs模板引擎 安装koa-views ejs npm i koa-views -S , npm i ejs -S 引入koa-views配置中间件 const views =require('koa-views') //配置模板引擎 views是文件地址，意思就是把views下面的文件编译成html文件 app.use(views('views',{ extension:'ejs' })) 文件名就应该是以ejs结尾在views下面 //另外的一种配置方式但是注意文件名 con
koa框架使用ejs模板引擎
weixin_47863547的博客
08-16 523
koa框架中使用ejs 1.安装koa和koa-views npm install --save-dev koa koa-views / cnpm install --save-dev koa koa-views 2.安装ejs npm install ejs --save / cnpm install ejs --save 3.引入koa-views配置中间件 const views = require('koa-views'); app.use(views('views', { map:
koa ejs模板引擎
weixin_43294560的博客
05-21 224
1、安装 cnpm install koa-views --save cnpm install ejs --save 2、配置模板引擎 需要在路由启动之前设置 方式一: 文件后缀必须为.ejs app.use(views('html文件所在文件夹路径',{extension:"ejs" })); 方式二: 文件后缀为.html app.use(views('views',{map:{html:'ejs'}})); 3、渲染 await ctx.render
koa ejs 模板引擎
weixin_44714325的博客
02-21 272
1、安装 koa-views 和 ejs // 安装 koa-views npm install --save koa-views / cnpm install --save koa-views // 安装 ejs npm install ejs --save / cnpm install ejs --save 2、引入 koa-views 配置中间件 const views = require('koa-views'); app.use(views('views', { map: {html:
05koa ejs 模板引擎
weixin_43336545的博客
11-13 417
一、Koa 中使用 ejs 模板的使用 首先，在使用ejs模块时，我们要了解ejs模块到底有什么用。 ejs模块引擎可以将我们node.js后台的数据渲染到我们对应的一个静态页面上。 如何去使用ejs模块引擎？ 1、安装 koa-views 和 ejs： 1）安装koa-views npm install --save koa-views/cnpm install --save koa-view...
node+koa2 使用ejs模版
ann123_2016的博客
03-20 252
1.进入项目下，npm install -save ejs 2.app.js加入： const ejs = require('ejs'); app.use(views(__dirname + '/views', { map : {html:'ejs'}})); 如果使用koa-generator自动生成项目，直接koa -e prjectName 即可 转载于:...
koa 动态渲染ejs里的数据
最新发布
06-03
要在 Koa 中动态渲染 EJS 模板文件，可以使用以下步骤： 1. 安装 EJS 模板引擎和 koa-views 中间件： ``` npm install ejs koa-views ``` 2. 在 Koa 应用中引入 koa-views 中间件并配置： ``` const Koa = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值