乐趣区

关于node.js:从零开始使用nodejsejs模板轻松搭建web网站

jiezi

什么是 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 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 文件，如图：

从新运行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 页面白屏，所以采纳此计划须要分外留神渲染和加载调优。
退出移动版