什么是ejs
类比handlebars
、artTemplate
、jade
这些模板引擎等,ejs
也是一个javascript
模板引擎,这里就不比较它与其他模板引擎的性能做对比了,ejs
语法过于朴实,如果你会写html
和简单的javascript
,或者你用jsx
写过react
,那么ejs
对你来讲将轻而易举。只需简单的两步:
- 将
%
标签包裹的js
语法写在html
里 - 将
html
后缀的文件后缀名替换成ejs
它与node
结合开发web网站简直天作之合,因为它是基于node
生态的模板,只需简单的配置,即可运行在node
项目中。ejs
将模板与数据有效结合在一起,快速高效的构建html
页面。可以将每一个ejs
看做一个html
或者组件来使用,具体ejs
的语法使用可以查看 ejs文档
实战
第一步:使用koa来搭建一个server
首先初始化项目,在终端依次执行
npm init
npm install koa
复制代码
新建app.js
入口文件,代码如下:
const koa = require('koa')
const app = new koa()
app.use(async(ctx, next) => {
console.log(ctx.request.path)
if (ctx.request.path === '/index') { // 首页
ctx.response.status = 200
ctx.response.body = 'index'
} else if (ctx.request.path === '/hello') { // hello页
ctx.response.status = 200
ctx.response.body = 'hello world'
} else {
ctx.throw(404, 'Not found') // 404
}
await next()
})
app.listen(3000, function() {
console.log('koa应用启动!')
})
复制代码
以上代码所示,根据参数ctx
的获取所访问的path
路径,然后分别对不同的路径进行处理
终端运行
npm app.js
复制代码
启动koa
服务看到如下效果:
这是一个简单的koa
项目,监听3000端开启node
服务,index
页面和hello
页面分别展示不同的内容。第一步已经完成,接下来只需将ejs
模板引擎集成到koa
项目里就可以了。
第二步:集成ejs模板引擎
新建一个views
目录,在此目录下放置所有的ejs模板文件,作为演示,我们先新建一个index.ejs
,这时koa还不能识别ejs
后缀的文件,我们需要借助app.use
将ejs
后缀的文件注册进入,将koa
与views
目录下的所有ejs
后缀文件关联起来。
首先install
一下koa-views
npm install koa-views
复制代码
在app.js
内增加以下代码:
const path = require('path')
const views = require('koa-views');
app.use(views(path.join(__dirname, './views'), { extension: 'ejs' }))
复制代码
并修改以下代码
app.use(async(ctx, next) => {
console.log(ctx.request.path)
if (ctx.request.path === '/index') { // 首页
// ctx.response.status = 200
// ctx.response.body = 'index'
await ctx.render('index')
} else if (ctx.request.path === '/hello') { // hello页
ctx.response.status = 200
ctx.response.body = 'hello world'
} else {
ctx.throw(404, 'Not found') // 404
}
await next()
})
复制代码
ctx.render('index')
将index.ejs
渲染成html
文件,index.ejs
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
</head>
<body style="overflow-y: scroll;">
<div>我是使用ejs渲染的html页面</div>
</body>
</html>
复制代码
重新运行npm app.js
,启动服务,重新刷新index页面,会看到ejs模板已经被编译成一个html
页面,如下图:
运用在实际项目中
场景一:快速搭建web静态网站
如果需要快速建站,这个是一个不错的方案,可以使用koa
,那当然也可以使用node
或者express
框架,因为ejs
就是node
生态的一部分,所以使用任意node
框架都可以。在实际项目中,我们可能会用到koa-router
来管理多个路由,在每个路由内render
对应的ejs
文件,如图所示:
场景二:搭建一个复杂的业务型网站
以上只是介绍如何简单快速的搭建静态web
网站,我们实际项目中的页面会更多更复杂,不只有静态页面,也会存在表单、列表等大批的页面需要与接口对接联调,因此也会有一些ejs模
板需要做动态化处理,当然ejs
模板语法也是支持的。针对如何获取动态数据,渲染动态页面,这里提供两种方案:
1、kao+ejs+MySQL(前后端不分离)
后端node
服务直接连接数据库,查询数据后返回到ejs
页面,根据ejs
语法,我们从路由处拿到变量后渲染在ejs
模板内;这时,整个node
项目前后端是不分离的,node
既做后端服务,又做前端渲染,如果是复杂的项目,开发人员的开发量可能比较大,当然对于全栈开发工程师或者创业型公司,这些都不在话下。
连接数据库,获取数据,后端渲染,直出页面
在node
示例项目中的routers/demo.js
里设置demo
页面的前端路由,该页面渲染了一组从数据库中直接获取的数据
router.get('/demo', async ctx => {
console.log('连接数据库')
let result = await UserModule.find(ctx.query)
let imgs = []
result && result.filter(item => {
imgs.push(item.telephone)
})
await ctx.render('demo', { title: 'demo页面', tableData: imgs })
})
复制代码
在node
示例项目中的views/demo.ejs
内的前端代码如下:
<a href="/signUp">申请体验</a>
<ul style="clear: both;">
<% tableData.forEach(function(item,index){%>
<li data-id="<%= index %>" style="float: left; margin:0 10px;">
<%= index %>
<img style="width:100px" src="<%= item %>" />
<%= item %>
</li>
<% })%>
</ul>
复制代码
页面效果如下图:
数据库中的数据如图所示:
表单提交调用接口
在node
示例项目中的routers/demo.js
里设置toSingUp
接口路由
//接收post提交的数据
router.post('/toSingUp', async ctx => {
console.log('提交数据', ctx.request.body);
const {
telephone,
password,
companyName
} = ctx.request.body
let result = await UserModule.findUserByTelephone({
telephone
})
let isNewRecord = result && result.isNewRecord
if (isNewRecord === null) {
await UserModule.add({
telephone,
password,
companyName
})
await ctx.render('signUp', { title: '申请体验页面', message: '恭喜您,申请体验成功!' })
} else if (isNewRecord === false) {
await ctx.render('signUp', { title: '申请体验页面', message: '您已申请过,无需再申请了' })
}
})
复制代码
点击demo
页面内的“申请体验”进入到表单页面,当填写完表单后,点击确定,请求toSingUp
接口,将表单数据存入数据库中,页面效果如下图:
提交的表单数据已经插入到数据库中了,如图所示:
2、kao+ejs+request/ajax(前后端分离)
也可以在路由内使用request
库(如ajax
、axios
、http
、fetch
)第三方接口请求。拿到数据直接渲染在ejs
模板内,这样的好处都是可以做到前后端开发彻底分离,可以将整个node
项目交由前端,后端技术栈没有限制,前端只需调取后端接口就可以了。。这里可以分为两种方式:
- 在后端请求第三方接口,数据直出到ejs模板
这样做的弊端很明显,就是如果接口加载过慢,会导致整个ejs页面白屏,所以采用此方案对后端接口访问速度要求较高。
- 在
ejs
模板里直接使用ajax请求接口获取数据,然后渲染在页面
这种开发方式类似前几年的web
网站开发方式(类似后端使用java
开发,前端在java
环境中的jsp
内开发页面和联调接口),前端除了不提供后端接口服务外,其他的内容都已经涉及或者总揽,但开发方式仍然可以做到前后端分离的方式,不需要依赖后端开发环境。
我们对app.js
做如下改造:
app.use(async(ctx, next) => {
console.log(ctx.request.path)
if (ctx.request.path === '/index') { // 首页
let data = ''
await requestDemo().then((body) => {
data = JSON.parse(body)
})
// ctx.response.status = 200
// ctx.response.body = 'index'
await ctx.render('index', { data })
} else if (ctx.request.path === '/hello') { // hello页
ctx.response.status = 200
ctx.response.body = 'hello world'
} else {
ctx.throw(404, 'Not found') // 404
}
await next()
})
async function requestDemo() {
let url = 'https://api.douban.com/v2/user/1000001?apikey=0df993c66c0c636e29ecbb5344252a4a'
return new Promise(function(resolve, reject) {
request(url, function(error, response, body) {
if (!error && response.statusCode == 200) {
resolve(body);
} else {
reject('接口请求失败')
}
})
});
}
复制代码
我们使用request
库请求第三方接口,拿到json
对象data
,现在可以将data
中的avatar
、name
、loc_name
属性试着塞入index.ejs
:
<div>
这里是是第三方接口<a target="_blank" href="http://www.doubanapi.com/">(豆瓣)</a>请求到的数据:
<br>
<div>
头像:
<img src="<%= data.avatar %>" />
</div>
<div>
姓名:
<%= data.name %>
</div>
<div>
地址:
<%= data.loc_name %>
</div>
</div>
复制代码
近期评论