express框架通过ejs模板渲染输出页面实例分析

1、前言

  上一节的get请求中，处理函数通过res.send返回了一段html代码，这让我们很兴奋。我们终于可以给用户返回html页面了。
  当时例子是这么写的，只要在send中传入一些html格式的字符串即可。

// get router
router.get('/', function(req, res, next) {
    res.send('<p>这是get请求/system返回的资源</p>')
});

  那我问个问题，如果我想返回给用户的是一张学生的成绩信息怎么办？其实可以这样写：

router.get('/', function(req, res, next) {
    res.send('<div>2004年高考成绩查询（张三）</div><table><tr><td>1</td><td>语文</td><td>135</td></tr><tr><td>2</td><td>数学</td><td>131</td></tr><tr><td>3</td><td>英语</td><td>96</td></tr><tr><td>4</td><td>理科综合</td><td>243</td></tr></table>')
});

  这样也是没啥毛病吧！但最大的问题来了，一般情况数据都是动态的从数据库获取或计算得来的，在输出到页面时字符串的拼接需要通过字符串（如html标签）和变量组成的。但这样的拼接工作相当的费劲而且容易出错，出错后有时候也不容易排查。
  绕了这么久，终于可以引出本文的主题了——ejs模板。目前，我先只能这么给大家解释ejs模板是个什么东东吧：

  1. 它的内容是以html标签为基础的，只不过加入了一些占位符（如${name}）、简单ejs逻辑（如<% if(…) { %> 等）
  2. 它的后缀名可以定义为.html，但初期请各位记住它的文件后缀名就是.ejs吧
  3. 简单的json数据 和 ejs模板文件，在res.render方法执行后，就能将数据套入到模板中，完成动态网页的输出。

  文字描述内容就到这里，后边的小节基本上是以代码+代码注释进行说明，应该是更加容易理解了。

2、创建ejs模板文件

  在views目录下创建文件，命名为score.ejs，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>成绩单</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div><%= year %>年高考成绩查询（张三）</div>
    <table>
        <% scores.forEach(function(item,index){ %>
            <tr><td><%= index %></td><td><%=item.course %></td><td><%=item.score %></td></tr>
        <% }); %>
    </table>
  </body>
</html>

3、修改router文件，通过模板输出响应内容

  注意，我说的router文件，就是上篇文章中说的system.js哈。找到router.get部分，修改之前是这样的：

router.get('/', function(req, res, next) {
    res.send('<p>这是get请求/system返回的资源</p>')
});

修改之后是：

router.get('/', function(req, res, next) {
    //准备好的数据，真实的情形是从数据库中得来的
    var data = {
        year:2004,
        scores:[
            {
                course:"语文",
                score: 135
            },
            {
                course:"数学",
                score:131
            },
            {
                course:"英语",
                score:96
            },
            {
                course:"理科综合",
                score:243
            }
        ]
    };
    //通过模板和数据渲染页面
    res.render('score', data);
});

4、就这么简单，启动服务，验证

  预期的结果如下，你搞成功了吗？

5、补充说明

  是不是觉得成功来得很容易？
  其实不然，你的成功来自于最初你使用了express-generator脚手架，还记得我在快速搭建Express开发系统 提到的命令：

npx express-generator --view ejs

吗？它为我们做了多工作，具体表现在以下方面（看图）：

  这两句分别为我们指定了模板文件存放的路径，和指定ejs为模板引擎。

6、写在最后

  其实ejs模板文件中的语法是非常复杂的，例如条件、循环、html富文本输出……等，建议需要深入研究的同学可以通过这个链接去了解一下。
  在下一篇文章中，我会将本节的表格美化一下，加上一些bootstrap样式。因为我在最初前后端同时开发时，也遇到过一些小问题，所以我想是值得一讲的。ok，就到这里，期待下次见。

补充：express.render渲染ejs显示源码的问题解决方法

笔者在测试express框架的时候遇到的ejs显示源码的问题，检查之后才发现在设置response的head的时候，在app.all('*', function(req, res, next)中加了一句res.header("Content-Type", "application/json;charset=utf-8");，将其注释掉，重启nodejs服务器，输入路由后在浏览器按快捷键Ctrl+F5即可。

赞 (0)

相关推荐

  • nodejs中的express-jwt的使用解读

    目录 nodejs中express-jwt的使用 nodejs express-jwt is not a function问题 总结 nodejs中express-jwt的使用 express-jwt更新到7.x版本后更改了用法,无法像7.x版本之前那样使用express—jwt,导入.在中间件配置个密钥就行了,更新之后,需要在express-jwt中将其解构出来再使用. 也无法在排除的路径中使用req.user去获取用户token解密出来的数据.而是使用req.auth. 具体代码如下: co

  • node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文: 1.下载Mysql数据库,安装并配置.创建用户表供登录使用: 2.node.js平台下Express的session与cookie模块包的配置:http://www.jb51.net/article/112190.htm 3.node.js平台下的mysql数据库配置及连接:http://www.jb51.net/article/110079.htm 完成前两步后需下载配置Ejs模

  • NodeJs Express框架操作MongoDB数据库执行方法讲解

    目录 1.Mongoose模块 2.Mongoose模块的使用 3.关于模型名称和数据库中集合名称的对应关系 4.mongoose的基本操作 1.Mongoose模块 (1)是一个对象模型工具,是对Node.js环境下操作MongoDB数据库进行了封装,可以将MongoDB数据库中的数据转换成JavaScript对象供用户使用. (2)名词: Schema:它是一种以文件形式存储的数据库模型骨架,不具备对数据库操作的能力,仅仅只是数据库在程序片段中的一种表现,可以理解为表结构. Model:由S

  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Express, Jade, Mongodb服务器>,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更确切说应该是更符合PHP.ASP程序员的使用习惯.好了,废话不多说,直接开始教程. 第1部分 – 15分钟安装 如果你真的是从零开始学,那就花点时间先把环境搭建起来吧.这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的. 第

  • Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法 原创

    在 Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的步骤如下: 1. 安装 silly-datetime 库 可以通过 npm 命令安装 silly-datetime 库,命令为: npm install silly-datetime --save 2. 在 app.js 中配置模板引擎和使用库方法 在 app.js 文件中,需要配置使用 EJS 模板引擎,并使用 res.locals 将库方法传递给模板.下面是一个例子: const expr

  • NodeJS Express使用ORM模型访问关系型数据库流程详解

    目录 一.ORM模型 二.在Node中ORM的实现 一.ORM模型 设计思想,主要目的是简化计算机程序访问数据库 1.ORM:对象关系模型(对象关系映射) Object Releastion Model,将程序中的对象和数据库中关系(表格)进行映射.可以使开发者在程序中方便的对数据库进行操作(用户在程序操作对对象实际就是操作数据库的表格) 2.ORM的映射关系: (1)程序中的模型(即为类) <——>表名 (2)模型的类型(类中定义的属性)<——> 表的列 (3)由模型创建的对象(

  • node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的.但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定这个是参考了很多网上其他少年博客,以后这个登录注册demo会依据项目的需要而有所改进, 效果如下 效

  • NodeJs Express中间件使用流程解析

    目录 1.调用流程 2.格式 3.next函数的作用 4.定义中间件函数 5.全局生效的中间件 6.中间件的作用 7.定义多个全局中间件 8.局部生效的中间件 9.定义多个局部中间件 10.了解中间件的注意事项 11.中间件的分类 1.应用级别的中间件 2.路由级别的中间件 3.错误级别的中间件 4.Express内置的中间件 5.第三方中间件 6.自定义中间件 中间件(Middleware),特指业务流程的中间处理环节 1.调用流程 当一个请求到达Express的服务器之后,可以连续调用多个中

  • 微信小程序模板和模块化用法实例分析

    本文实例讲述了微信小程序模板和模块化用法.分享给大家供大家参考,具体如下: template 模板,在定义的时候使用name属性,如以下声明方式 <template name="mytemp"> <view> name:{{names}} address:{{add}} </view> </template> 模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种

  • vue基础之模板和过滤器用法实例分析

    vue基础之模板和过滤器用法实例分析

    本文实例讲述了vue基础之模板和过滤器用法.分享给大家供大家参考,具体如下: 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue模板</title> <s

  • Yii2框架配置文件(Application属性)与调试技巧实例分析

    本文实例讲述了Yii2框架配置文件(Application属性)与调试技巧.分享给大家供大家参考,具体如下: 配置文件 Yii2的主要配置文件config\web.php: <?php $params = require(__DIR__ . '/params.php'); $config = [ 'id' => 'basic', 'basePath' => dirname(__DIR__), 'bootstrap' => ['log'], 'components' => [

  • Smarty模板类内部原理实例分析

    Smarty模板类内部原理实例分析

    本文实例讲述了Smarty模板类内部原理.分享给大家供大家参考,具体如下: 之前在学习ThinkPHP的时候,有接触到Smarty模板类,但是一直不知道其内部实现的原理,博主今天终于知道了其内部原理,其实也挺简单的,然后写了一个迷你版的Smarty模板类,对理解其内部原理有了很大的帮助. 1.迷你版Smarty类 首先上代码,最后再进行讲解. 项目结构图 MiniSmarty类代码(MiniSmarty.class.php) <?php /** * 迷你模板类 */ class MiniSmar

  • smarty模板的使用方法实例分析

    smarty模板的使用方法实例分析

    本文实例讲述了smarty模板的使用方法.分享给大家供大家参考,具体如下: 这里以smarty3为例 首先, 在官网下载smarty3模板文件,然后解压. 在解压之后的文件夹中,libs是smarty模板的核心文件,demo里面有示例程序. 我们把libs文件夹复制到我们的工作目录,然后重命名为smarty. 假设我们在controller目录下的index.php中使用smarty模板. index.php <?php require '../smarty/Smarty.class.php';

  • Laravel框架中的路由和控制器操作实例分析

    本文实例讲述了Laravel框架中的路由和控制器操作.分享给大家供大家参考,具体如下: 路由 简介: 将用户的请求转发给相应的程序进行处理 作用:建立url和程序之间的映射 请求类型:get.post.put.patch.delete 目录:app/http/routes.php 基本路由:接收单种请求类型 //get请求 Route::get('hello1',function(){ return 'hello world'; }) //post请求 Route::post('hello2',

  • django框架单表操作之增删改实例分析

    django框架单表操作之增删改实例分析

    本文实例讲述了django框架单表操作之增删改.分享给大家供大家参考,具体如下: 首先找到操作的首页面 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"

  • node.js express捕获全局异常的三种方法实例分析

    本文实例讲述了node.js express捕获全局异常的三种方法.分享给大家供大家参考,具体如下: 场景 express的路由里抛出异常后,全局中间件没办法捕获,需要在所有的路由函数里写try catch,这坑爹的逻辑让人每次都要多写n行代码 官方错误捕获中件间代码如下 app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 测

  • 微信小程序学习总结（三）条件、模板、文件引用实例分析

    本文实例讲述了微信小程序条件.模板.文件引用.分享给大家供大家参考,具体如下: 上一节的在遍历的时候控制台中会报错 <view wx:for="{{content}}" wx:for-item='item' wx:for-index='index'> {{item.name}} </view> 控制台中会显示这个东西 Now you can provide attr "wx:key" for a "wx:for" to i

  • PHP MVC框架中类的自动加载机制实例分析

    PHP MVC框架中类的自动加载机制实例分析

    本文实例讲述了PHP MVC框架中类的自动加载机制.分享给大家供大家参考,具体如下: 原文 实现类的自动加载主要使用到了set_include_path和spl_autoload_register函数. set_include_path用于提前设置好可能会加载的类的路径. spl_autoload_register用于调用相关自动加载所需类的函数,实现自动载入的功能. 有一点要注意的是:自动加载在实例化类的时候执行,也就是说使用extends继承类的时候,是不会自动加载父类的. 设置目录如下:

随机推荐