nodejs+koa2.x+MongoDB入门实战教程（三）模板引擎ejs

栏目: Node.js · 发布时间: 6年前

内容简介：大家好，我是奶挺老师，江湖人称莒巭萎（lvbuwei），嘿嘿嘿，我又来叨扰大家了。通过前面两节课程的学习，相信大家通过实际操作和翻阅其他文档，已经可以自主操作koa和koa-router了，那么我们服务和路由都能控制了，但是我们发现我们的页面很丑，也没有怎么设计，这个时候我们不能做了好东西自己独吞啊，是吧，有句话说的好啊，独乐了不如众乐乐，当年冠希哥还不忘给咱们喝汤呢，我们岂有独据之理啊。那么如何更好的来操作页面呢，今天给大家带来的小娘们是ejs模板引擎，这个模板允许我们在html文件中输出变量、判断语句、

大家好，我是奶挺老师，江湖人称莒巭萎（lvbuwei），嘿嘿嘿，我又来叨扰大家了。

通过前面两节课程的学习，相信大家通过实际操作和翻阅其他文档，已经可以自主操作koa和koa-router了，那么我们服务和路由都能控制了，但是我们发现我们的页面很丑，也没有怎么设计，这个时候我们不能做了好东西自己独吞啊，是吧，有句话说的好啊，独乐了不如众乐乐，当年冠希哥还不忘给咱们喝汤呢，我们岂有独据之理啊。

那么如何更好的来操作页面呢，今天给大家带来的小娘们是ejs模板引擎，这个模板允许我们在html文件中输出变量、判断语句、原样输出、循环数据等，对于后端开发来说这个模板非常方便。下面，我们进入她的身体，看看到底藏了哪些技能包，一起来吧，宝贝们。。。

安装ejs模板

cd Desktop/code/koa_demo
npm install ejs koa-views --save
复制代码

安装成功以后，我们来控制她，我们手中可是有遥控器的哦。。。

配置ejs模板

新建ejs课程文件

cd Desktop/code/koa_demo
mkdir ejs
cd ejs
mkdir views
touch index.js
cd views
touch index.html
复制代码

引入koa-views渲染ejs中间件

const Koa = require('koa')
const Router = require('koa-router')
const views = require('koa-views') //引入koa-views渲染器

const app = new Koa()
const router = new Router()
/**
 * koa-views 使用任何路由器之前，必须先使用,下面两种配置方式任选其一
 */

/**
 * [extension description] koa-views 配置ejs模板第一种方案，前端页面文件后缀必须是.ejs
 * @type {String}
 */

app.use(views(__dirname + '/views',{extension: 'ejs'}))

/**
 * [extension description] koa-views 配置ejs模板第二种方案，前端页面文件后缀必须是.html
 * @type {String}
 */

// app.use(views(__dirname + '/views', {
//   map: {
//     html: 'ejs'
//   }
// }));

router.get('/index', async (ctx,next) => {
	await ctx.render('index') //渲染文件时，await不能丢哈
})

app
  .use(router.routes())
  .use(router.allowedMethods())

app.listen(3000)
console.log('service is running 3000 port')

复制代码

保存代码，启动服务

node index.js
复制代码

访问http://localhost:3000/index可以看到

到了这一刻，我们已经扒开了ejs配置的外衣，接下来我们来探究她的内在。。。

ejs基本语法

变量赋值

语法：<%=变量 %> 首先我们要到index.js中给index.ejs/index.html页面传递一个变量

...
router.get('/index', async (ctx,next) => {
	let params = {
		title: '张三'
	}
	await ctx.render('index',{params}) //渲染文件时，await不能丢哈，第二个参数就是我们传递到页面中的参数
})
...
复制代码

index.ejs/index.html页面修改（只是文件后缀名不同，里面的代码完全一致）

...
<body>
	<h2>this is ejs page</h2>
	<h3>welcome to ejs模板引擎</h3>
	<h3>变量渲染</h3>
	<span><%=params.title %></span>
</body>
...
复制代码

那我们如果后台给前端传了一个html标签怎么办？浏览器又会如何渲染呢，你看

index.js修改

...
router.get('/index', async (ctx,next) => {
	let params = {
		title: '张三',
		htmlTag: '<h3>原样输出</h3>'
	}
	await ctx.render('index',{params}) //渲染文件时，await不能丢哈
})
...
复制代码

index.ejs修改

...
<body>
	<h2>this is ejs page</h2>
	<h3>welcome to ejs模板引擎</h3>
	<h3>变量渲染</h3>
	<span><%=params.title %></span>
	<p>原样输出</p>
	<%=params.htmlTag %>
	<%-params.htmlTag %>
</body>
...
复制代码

可以看出：

如果想要html标签不渲染直接输出就用“<%= 变量%>”语法

如果想要浏览器解析标签后再渲染就用“<%-变量%>”

逻辑/循环语句

语法：<% if(条件) { %>渲染内容<% } %>

index.js修改

...
router.get('/index', async (ctx,next) => {
	let params = {
		title: '张三',
		htmlTag: '<h3>原样输出</h3>',
		is:false,
		lists: [69,69,69]
	}
	await ctx.render('index',{params}) //渲染文件时，await不能丢哈
})
...
复制代码

index.ejs修改

...
<body>
	<h2>this is ejs page</h2>
	<h3>welcome to ejs模板引擎</h3>
	<h3>变量渲染</h3>
	<span><%=params.title %></span>
	<p>原样输出</p>
	<%=params.htmlTag %>
	<%-params.htmlTag %>
	<h3>逻辑语句</h3>
	<% if (params.is) { %>
  		<h2><%= params.title %></h2>
	<% }else { %>
		<h2>false</h2>
	<% }%>
	<h3>循环语句</h3>
	<ul>
		<% for(let i = 0; i < params.lists.length; i++) {%>
		<li><%= params.lists[i] %></li>
		<% }%>
	</ul>
</body>
...
复制代码

注意啊：改完代码要重新启动服务

引入其他组件

语句：<%- ./index.html, {key: value}%> index.ejs修改

...
<body>
	<h2>this is ejs page</h2>
	<h3>welcome to ejs模板引擎</h3>
	<h3>变量渲染</h3>
	<span><%=params.title %></span>
	<p>原样输出</p>
	<%=params.htmlTag %>
	<%-params.htmlTag %>
	<h3>逻辑语句</h3>
	<% if (params.is) { %>
  		<h2><%= params.title %></h2>
	<% }else { %>
		<h2>false</h2>
	<% }%>
	<h3>循环语句</h3>
	<ul>
		<% for(let i = 0; i < params.lists.length; i++) {%>
		<li><%= params.lists[i] %></li>
		<% }%>
	</ul>
	<h3>引入组件</h3>
	<%- include('./components/header',{user: params.title}) %>
</body>
...
复制代码

新增components文件夹并且新增header.ejs组件

cd cd Desktop/code/koa_demo/ejs/views
mkdir components
cd components
touch header.ejs
复制代码

header.ejs修改

<h1>This Is Header Component page</h1>
<%= user %>
复制代码

重启服务

ok,到这里ejs在koa框架中的基本使用我们就已经掌握了，恭喜恭喜，各位爱卿又向全栈进阶了一步。

这下我们把ejs从里到外都给剥开了揉碎了，舒服了舒服了。希望大家自己也动手敲一下代码哈，奶挺老师每节课都是自己手动敲的，基本没有复制过代码，所以也希望各位不要偷懒哦。。。

觉得奶挺老师写的不错的，还请给点个赞，再次声明我的课完全免费，不收您一分钱，货美价廉呦，也希望您转载时声明一下

创建了一个qq群695712519，有兴趣的可以添加一下

个人格言: 花堪折时直须折莫待无花空折枝。生死看淡，不服就干...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

零成本实现Web性能测试

温素剑 / 电子工业出版社 / 2012-2 / 59.00元

《零成本实现Web性能测试:基于Apache JMeter》是一本关于Web性能测试的实战书籍，读者朋友们在认真阅读完《零成本实现Web性能测试:基于Apache JMeter》后，相信能够将所学知识应用到生产实践中。《零成本实现Web性能测试:基于Apache JMeter》首先介绍基础的性能测试理论，接着详细介绍如何使用JMeter完成各种类型的性能测试。实战章节中作者以测试某大型保险公司电话......一起来看看《零成本实现Web性能测试》这本书的介绍吧!

码农工具