什么是ejs

类比handlebars.js、artTemplate、jade这些模板引擎等,ejs也是一个javascript模板引擎,这里就不比拟它与其余模板引擎的性能做比照了,ejs语法过于浮夸,如果你会写html和简略的JavaScript,或者你用jsx写过react,那么ejs对你来讲将轻而易举。只需简略的两步:

  1. 将%标签包裹的js语法写在html里
  2. 将html后缀的文件后缀名替换成ejs
    它与nodejs联合开发web网站几乎天作之合,因为它是基于node生态的模板,只需简略的配置,即可运行在node我的项目中。ejs将模板与数据无效联合在一起,疾速高效的构建html页面。能够将每一个ejs当做一个html或者组件来应用,具体ejs的语法应用能够查看 ejs文档

    实战

    第一步:应用koa来搭建一个server

    首先初始化我的项目,在终端顺次执行

    npm initnpm 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文件,如图:

从新运行npm app.js,启动服务,从新刷新index页面,会看到ejs模板曾经被编译成一个html页面,如下图:

将koa+ejs使用在理论我的项目中

如果须要疾速建站,这个是一个不错的计划,能够应用koa,那当然也能够应用node或者express框架,因为ejs就是node生态的一部分,所以应用任意node框架都能够。在理论我的项目中,咱们可能会用到koa-router来治理多个路由,在每个路由内render对应的ejs文件,如图所示:


demo示例

以上只是介绍如何简略疾速的搭建动态web网站,咱们理论我的项目中的页面会更多更简单,不只有动态页面,也会存在表单、列表等少量的页面须要与接口对接联调,因而也会有一些ejs模板须要做动态化解决,当然ejs模板语法也是反对的。针对如何获取动态数据,渲染动静页面,这里提供两种计划:

  1. 后端node服务间接连贯数据库,查问数据后返回到ejs页面,依据ejs语法,咱们从路由处拿到变量后渲染在ejs模板内;这时,整个node我的项目前后端是不拆散的,node既做后端服务,又做前端渲染,如果是简单的我的项目,开发人员的开发量可能比拟大,当然对于全栈开发工程师或者守业型公司,这些都不在话下。
  2. 也能够在路由内应用request库(如ajax、axios、http、fetch)第三方接口申请,拿到数据间接渲染在ejs模板内,这样的益处都是能够做到前后端开发拆散,能够将这个node我的项目交给前端开发者,后端技术栈没有限度,前端只须要像开发vue我的项目一样调取接口就能够了。然而这样的弊病就是如果接口加载过慢,会导致整个ejs页面白屏,所以采纳此计划须要分外留神渲染和加载调优。