从零开始使用nodejs+ejs模板轻松搭建web网站

什么是ejs

从零开始使用nodejs+ejs模板轻松搭建web网站_第1张图片

类比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 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()
})

从零开始使用nodejs+ejs模板轻松搭建web网站_第2张图片

ctx.render('index')将index.ejs渲染成html文件,如图:
从零开始使用nodejs+ejs模板轻松搭建web网站_第3张图片

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

将koa+ejs运用在实际项目中

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

从零开始使用nodejs+ejs模板轻松搭建web网站_第4张图片
demo示例

以上只是介绍如何简单快速的搭建静态web网站,我们实际项目中的页面会更多更复杂,不只有静态页面,也会存在表单、列表等大批的页面需要与接口对接联调,因此也会有一些ejs模板需要做动态化处理,当然ejs模板语法也是支持的。针对如何获取动态数据,渲染动态页面,这里提供两种方案:

  1. 后端node服务直接连接数据库,查询数据后返回到ejs页面,根据ejs语法,我们从路由处拿到变量后渲染在ejs模板内;这时,整个node项目前后端是不分离的,node既做后端服务,又做前端渲染,如果是复杂的项目,开发人员的开发量可能比较大,当然对于全栈开发工程师或者创业型公司,这些都不在话下。
  2. 也可以在路由内使用request库(如ajax、axios、http、fetch)第三方接口请求,拿到数据直接渲染在ejs模板内,这样的好处都是可以做到前后端开发分离,可以将这个node项目交给前端开发者,后端技术栈没有限制,前端只需要像开发vue项目一样调取接口就可以了。但是这样的弊端就是如果接口加载过慢,会导致整个ejs页面白屏,所以采用此方案需要格外注意渲染和加载调优。

你可能感兴趣的