express的模版引擎

最新推荐文章于 2024-07-22 20:58:11 发布

不知名前端

最新推荐文章于 2024-07-22 20:58:11 发布

阅读量1.1k

点赞数 1

分类专栏： NodeJS Express 文章标签： javascript node.js 前端

本文链接：https://blog.csdn.net/yun_master/article/details/124754082

版权

NodeJS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Express

1 篇文章 0 订阅

订阅专栏

背景

这几天公司需求不多，抽了一两个小时的时间学习了一下express这个库，因为我半路出家入行较晚，以前只听说过ejs之类的模版引擎，但是不太明白他的工作原理，正好express文档中有简单的介绍，所以研究了一下，觉得还是挺好玩的。分享一下，大家一起学习，有大佬有更深入的文档，也欢迎在评论区分享。才接触node的后端代码，不太懂，如果有问题，欢迎随时指正

在express中使用模版引擎

为了方便和我一样的小白，一步一步跟着做，下面我将我demo步骤一点点的拆开

一、创建项目

1、创建根目录（准备工作）

// 创建server_app目录
$ mkdir server_app
// 进入目录
$ cd mkdir
// 创建server.js文件
$ touch server.js
$ cd ../
// 创建views目录 （放置模版的目录）
$ mkdir views

2、安装express

npm i express -S

二、创建服务器

回到server.js文件

const express = require('express');
const app = express();

// 定义端口号
const POST = 3333;

app.get('/', function (req, res) {
   var responseText = 'Hello World!';
   responseText += 'Requested at: ' + Date.now() + '';
   res.send(responseText);
});

app.listen(POST);
console.log(`http://localhost:${POST}`);

我们测试一下,回到根目录执行

$ node ./server.js

访问http://localhost:3333/

看到如下图这样的页面，就说明我们的服务器已经正常工作了

三、解析/注册模版引擎

我们继续在刚才的代码上进行修改

const express = require('express');
const fs = require('fs');
const app = express();

// 定义端口号
const POST = 3333;

/**
 * 注册模版引擎
 */
app.engine('html', function (filePath, options, callback) {
  // 读取模版引擎目录中的文件
  fs.readFile(filePath, function (err, content) {
    if (err) return callback(err);
    
    // options参数会将res.render中的参数带过来，params就是所有自定义参数的集合
    const { settings, _locals, cache, ...params } = options;
    
    // content是模版中的内容，以下代码为模版解析的代码，这里只写一个简单的demo，看效果
    let rendered = content.toString()
    for (let p in params) {
      rendered = rendered.toString().replace(`#${p}#`, '' + params[p] + '')
    }
    
    return callback(null, rendered)
  })
})

// 指定模版目录
app.set('views', './views');
// 设置模版引擎，'view engine' 为固定属性，'html'为模版文件的扩展名（自定义）
app.set('view engine', 'html');

// 改造请求，以便在页面发起请求时，展示模版。当访问http://localhost:3333/时将会执行如下代码
app.get('/', function (req, res) {
    /**
     * 'index'为需要展示的模版路径
     * 第二个参数为自定义参数，将会带入到app.engine中的options
     */
    res.render('index', {
    title: 'hello',
    msg: 'word',
    content: '发现一些有意思的事情'
  })
});

app.listen(POST);
console.log(`http://localhost:${POST}`);

这样服务器代码基本完成了

关于后缀为html的模版引擎

例子中的html为自定义模版的扩展名，你可以使用aaa，也可以bbb，但是在创建模版文件的时候，一定要对应起来。例子中之所以使用html，是因为编辑器带有html的解析格式化插件，为了方便写模版代码，和测试所以使用了html后缀的文件来作为模版文件。

关于模版解析

目前成熟的模版引擎都有一套自己的解析规则，比如可以在模版中使用if else， for等语句。这是一套非常复杂的东西。例子中，只是写了一个简单的变量替换，方便我们测试看效果

关于渲染模版

使用res.render去渲染模版，第一个参数为模板路径，是基于app.set(‘views’, ‘./views’)设置的模版目录的相对路径，第二个参数为需要带入到模版内的参数。

四、创建模版文件

我们再回到views目录，创建index.html文件，后缀名就是注册模版引擎时，自定义的后缀名，比如index.aaa

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>#title#</title>
</head>

<body>
  <style>
    .test {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: #eee;
      color: red;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      vertical-align: middle;
    }
  </style>
  <div style="width:100px;height:100px; background-color:rgba(255,0,0,0.3); color:#333">
    #msg#
  </div>

  <div class="test">
    #content#
  </div>
</body>

</html>

现在我们可以重启服务器，来看下效果

关于例子中变量替换

这部分逻辑是在注册模版引擎的地方处理的，也就是解析模版需要处理的代码，跟人理解这也是一个模版引擎最核心的所在。

总结

这样下来，我们就大概了解一个模版引擎的工作原理了，以后再使用这些成熟引擎的时候，会不会更加得心应手呢。我们本着不重复造轮子的原则来造个demo式的轮子，目的不是要和已有的轮子比谁的圆，这是一个学习的过程。成长之路必不可少的一步。也是为了可以用各种姿势来使用大佬们早就创造好的轮子

不知名前端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
express的模版引擎

背景这几天公司需求不多，抽了一两个小时的时间学习了一下express这个库，因为我半路出家入行较晚，以前只听说过ejs之类的模版引擎，但是不太明白他的工作原理，正好express文档中有简单的介绍，所以研究了一下，觉得还是挺好玩的。分享一下，大家一起学习，有大佬有更深入的文档，也欢迎在评论区分享。才接触node的后端代码，不太懂，如果有问题，欢迎随时指正在express中使用模版引擎为了方便和我一样的小白，一步一步跟着做，下面我将我demo步骤一点点的拆开一、创建项目1、创建根目录（准备工作）/
复制链接

扫一扫

专栏目录