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

50次阅读

共计 2343 个字符,预计需要花费 6 分钟才能阅读完成。

什么是 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 页面白屏,所以采纳此计划须要分外留神渲染和加载调优。

正文完
 0