精华内容
下载资源
问答
  • express 模板引擎

    2020-09-02 12:57:33
    安装第三方插件: cnpm i art-template express-art-template...node.js模板引擎原始用法: <!-- 04.html文件 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

    安装第三方插件:
    cnpm i art-template express-art-template --save-dev
    或者使用:
    npm i art-template express-art-template --save-dev
    node.js模板引擎原始用法:

    <!-- 04.html文件 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script src="./node_modules/art-template/lib/template-web.js"></script>
        <script type="text/html" id="temp">
            <p>{{ name }}</p>
            <p>{{ age }}</p>
            <p>{{ sex }}</p>
            {{each hobbies}}
            <p>{{$value}}</p>
            {{/each}}
        </script>
    </body>
    </html>
    
    //04.js文件
    const fs = require('fs');
    const artTemplate = require('art-template');
    fs.readFile('./04.html',(err,data)=>{
        if(err) throw err;
        //  模板第一个必须是字符串格式,而data读出来的是一个buffer对象,是二进制
        //  render(A,B)把B的数据添加到A中
        let ret = artTemplate.render(data.toString(),{
            name:'zy',
            age:18,
            sex:'女',
            hobbies:['sing','dance','rap']
        })
        console.log(ret);
    })
    

    express框架用法:

    const express = require('express');
    const path = require('path');
    let app = express();
    
    // 告诉express框架,使用什么模板引擎渲染HTML模板
    app.engine('html',require('express-art-template'));
    // 设置render渲染模板的后缀为html
    app.set('view engine','html');
    // render渲染模板,模板默认路径
    app.set('views',path.join(__dirname,'/views'))//views 目录需要自己创建
    app.get('/',(req,res)=>{
    	//文件路径	views/index.html
    	//想index.html发送了一个对象{name:'zy'}
        res.render('index',{//省略了后缀名,原来应为index.html
            name:'zy'
        })
    })
    
    app.listen(3000,()=>{
        console.log('3000开始监听... ')
    })
    

    调用后端模板的对象,传到前端:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        {{name}}
    </body>
    </html>
    
    展开全文
  • express 模板引擎If you’ve worked with the Express.js framework in the past, you’ll know that Express can handle server-side template engines. You can populate your ...

    express 模板引擎

    If you’ve worked with the Express.js framework in the past, you’ll know that Express can handle server-side template engines. You can populate your HTML pages with various information and data directly onto your view. This allows us to generate HTML dynamically.

    如果您过去使用过Express.js框架,那么您将知道Express可以处理服务器端模板引擎。 您可以将各种信息和数据直接填充到HTML页面上。 这使我们能够动态生成HTML。

    In this article, we’ll introduce 3 popular template engines for Express: Pug, EJS and Mustache.

    在本文中,我们将介绍3种用于Express的流行模板引擎:Pug,EJS和Mustache。

    If you’d like to learn more about Express, follow this link.

    如果您想了解有关Express的更多信息,请点击此链接

    我应该使用哪些模板引擎? (What Template Engines Should I Use?)

    There’s a wide variety of template engines that work with Express. The default template engine found in Express is Jade, which is now known as Pug. However, the default Jade installed in Express is still using the old version.

    与Express一起使用的模板引擎种类繁多。 在Express中找到的默认模板引擎是Jade,现在称为Pug。 但是,Express中安装的默认Jade仍在使用旧版本。

    In this breakdown, we’ll introduce the basic syntax and uses of Pug, EJS, and Mustache.

    在此细分中,我们将介绍Pug,EJS和Mustache的基本语法和用法。

    如何使用哈巴狗 (How To Use Pug)

    To install Pug and use it in our Express app, we have to use npm to install it first:

    要安装Pug并在我们的Express应用中使用它,我们必须首先使用npm进行安装:

    $ npm install pug

    Then you can set the view engine to pug when you initialize your app, then make a get call and render your view:

    然后,您可以在初始化应用程序时将视图引擎设置为pug ,然后进行get调用并呈现视图:

    const express = require('express');
    const app = express();
    app.set('view engine', 'pug');
    
    app.get('/home', (req, res) => {
      res.render('home');
    });

    Now that you’ve done that in your Express app, you can add a template into your views directory as views/home.pug and fill it in:

    现在,您已经在Express应用程序中完成了此操作,您可以将模板作为views/home.pug添加到您的views目录中,并填写:

    h2 This is the home page
    p It's a test view

    That view will end up creating a HTML template with a h2 tag that wraps the text ‘This is the home page’, and a p tag that wraps the text “It’s a test view”.

    该视图最终将创建一个带有h2标签HTML模板,该标签包装了文本“ This is the home page”,这是一个p标签,包装了文本“ It's a test view”。

    If you wanted to pass data from your Express application to your home view, you can render a variable like so:

    如果要将数据从Express应用程序传递到home视图,则可以渲染变量,如下所示:

    app.get('/home', (req, res) => {
      res.render('home', { animal: 'Alligator' });
    });

    Then your view will look like this:

    然后您的view将如下所示:

    h2 This is the #{animal} home page
    p It's a test view

    Then your h2 tag will surround the text “This is the Alligator home page”. Beyond that, you can experiment and build your own Pug files as you see fit!

    然后,您的h2标签将围绕文本“这是鳄鱼的主页”。 除此之外,您还可以尝试并尝试构建自己的Pug文件!

    如何使用EJS (How To Use EJS)

    Now that we’ve finished with the introduction to Pug, let’s try out EJS:

    现在我们已经完成了对Pug的介绍,让我们尝试一下EJS

    $ npm install ejs

    Once you’ve installed EJS, you can call it into your Express app:

    安装EJS之后,您可以将其调用到Express应用中:

    const express = require('express');
    const app = express();
    app.set('view engine', 'ejs');
    
    app.get('/home', (req, res) => {
      res.render('home');
    });

    Now that you’ve changed your view engine to ejs, you can create a template in the views directory under views/home.ejs. EJS uses regular HTML for its templates:

    现在,您已将视图引擎更改为ejs ,可以在views/home.ejs下的views目录中创建模板。 EJS的模板使用常规HTML:

    <h2>This is the home page</h2>
    <p>It's a test view</p>

    Now, let’s say that we want to add a list of animals to our HTML page. We can pass an array of animals through our Express application to our EJS template.

    现在,假设我们要向我们HTML页面添加动物列表。 我们可以通过Express应用程序将一系列动物传递给EJS模板。

    app.get('/home', (req, res) => {
      let animals = [
        { name: 'Alligator' },
        { name: 'Crocodile' }
      ];
      res.render('home', { animals: animals });
    });

    In your views/home.ejs file, you can loop through the data using .forEach:

    views/home.ejs文件中,您可以使用.forEach遍历数据:

    <h2>This is the home page</h2>
    <p>It's a test view</p>
    <ul>
      <% animals.forEach((animal) => { %>
      <li><%= animal.name %></li>
      <% }); %>
    </ul>

    With this code, you will do a .forEach loop over the animals array, and output each animal’s name inside a li tag. And that’s all there is to it! You can call JavaScript directly in your EJS template and use it however you’d like.

    使用此代码,您将在animals数组上执行一个.forEach循环,并在li标记内输出每个动物的名称。 这就是全部! 您可以直接在EJS模板中调用JavaScript,并根据需要使用它。

    如何使用胡子 (How To Use Mustache)

    For our last template engine, we’ll be going over how to install Mustache and use it in an Express application.

    对于最后一个模板引擎,我们将介绍如何安装Mustache并在Express应用程序中使用它。

    $ npm i mustache-express

    Then you can set your view engine in your Express application.

    然后,您可以在Express应用程序中设置视图引擎。

    const express = require('express');
    const mustacheExpress = require('mustache-express');
    const app = express();
    app.engine('mustache', mustacheExpress());
    app.set('view engine', 'mustache');
    
    app.get('/home', (req, res) => {
      res.render('home');
    });

    The file extension for mustache will look like this: views/home.mustache:

    胡须的文件扩展名将如下所示: views/home.mustache

    <h2>This is the home page</h2>
    <p>It's a test view</p>

    And to display data from your Express application in your template, pass the data through your route:

    要在模板中显示Express应用程序中的数据,请通过路由传递数据:

    app.get('/home', (req, res) => {
      res.render('home', { animal: 'Alligator' });
    });

    Then within the mustache template, you can call the variable directly:

    然后在mustache模板中,您可以直接调用变量:

    <h2>This is the {{ animal }} home page</h2>
    <p>It's a test view</p>

    Then animal in the .mustache file will show 'Alligator’. If you want more information on how to use Mustache, feel free to check out their page here.

    然后, .mustache文件中的animal将显示“鳄鱼”。 如果您想了解更多有关如何使用Mustache的信息,请随时在此处查看其页面。

    简单高效 (Simple And Efficient)

    Express’s template engine is a great way of serving up static template files in your applications. It gives you the flexibility of displaying data through the template easily. Next time you want to build an Express project, make sure you take a look into these template engines and try them out!

    Express的模板引擎是在应用程序中提供静态模板文件的好方法。 它使您可以轻松灵活地通过模板显示数据。 下次您要构建Express项目时,请确保查看这些模板引擎并进行尝试!

    翻译自: https://www.digitalocean.com/community/tutorials/nodejs-express-template-engines

    express 模板引擎

    展开全文
  • express模板引擎有很多种,常用的是jade和ejs。 区别: jade-破坏式、侵入式、强依赖 ejs-温和、非侵入式、弱依赖 一、jade渲染数据到页面 1.根据缩进划分层级 2.属性用()表示,用逗号分隔 *style={} *class=[] ...

    express模板引擎有很多种,常用的是jade和ejs。

    区别:

    • jade-破坏式、侵入式、强依赖
    • ejs-温和、非侵入式、弱依赖

    一、jade渲染数据到页面

    1.根据缩进划分层级

    2.属性用()表示,用逗号分隔

      *style={}
      *class=[]
    

    3.内容

      div xxx
        span xxx
          a(href="xxx") 链接
    

    4.渲染函数

    jade.render('字符串');
    jade.renderFile('模板文件名', 参数)
    

    二、ejs渲染数据到页面

    不用根据缩进划分层级,和普通写法一样;

    1.注意点:

    <%= name %>
    <%= json.arr[0].name %>
    <%= 12+5 %>
    <%= 'asdfasdf' %>
    
     <% %>   表达式处理
     <%= %>=号输出,就会被escapge转义编码
     <%- %>  用“-”输出原始内容, 不会被escape
    

    2.使用场景:

     1= 字符串输出
     2- 输出一个 json 对象供客户端 javascirpt 使用, 或者想输出一些动态生成的 HTML 标签
    
    展开全文
  • 很少有提到在express模板引擎中如何加载socket.io,今天琢磨了半个下午,好不容易搞出来了,这里分享给大家。首先我们要知道的是,socket.io是基于http的。 也就是说http之上,有一个app,也有一个io。如果我希望在...

    看了很多socket.io结合express的例子,只是一些单一的demo。很少有提到在express模板引擎中如何加载socket.io,今天琢磨了半个下午,好不容易搞出来了,这里分享给大家。

    首先我们要知道的是,socket.io是基于http的。 也就是说http之上,有一个app,也有一个io。

    如果我希望在某个路由中用socket.io,那么就需要把io挂载到router上export出来,然后再赋给app,再export出来,然后又最终的http server调用,思路就是这样。

    先看下router.js的代码, 这里用的是pug(jade)来渲染的。

    var express = require('express');
    var router = express.Router();
    router.get('/', function (req, res, next) {
      res.render('test');
    });
    router.io = function (io) {
      io.on('connection', function (socket) {
        console.log('connected');
      });
      return io;
    }
    module.exports = router

    我们将io作为router的一个属性输出。

    app.js的部分代码

    var router = require('./routes/router');
    app.io = router.io;
    ...
    module.exports = app;

    再把router属性传递给app.

    这是 ./bin/www 的部分代码

    /**
     * Create HTTP server.
     */
    
    var server = http.createServer(app);
    var io = require('socket.io')(server);
    app.io(io);

    我们把在http上建立的io对象当成一个参数赋给 app.io。

    这样就能完美执行了。

    你的代码都可以写在 router.js 的router.io 的function中

    router.io = function (io) {
     /**
     * 这里写代码 
     */
      return io;
    }
    module.exports = router
    展开全文
  • express默认使用jade模板,可以配置让其支持使用ejs或html模板。第一条:若出现返回的html模板不渲染却直接装进pre标签里显示在页面上,可尝试...3.设置html引擎app.engine('html', ejs.__express);app.set('view en...
  • 需要在应用中进行如下设置才能让 Express 渲染模板文件:views, 放模板文件的目录,比如: app.set('views', './views')view engine, 模板引擎,比如: app.set('view engine', 'jade')然后安装相应的模板引擎 npm ...
  • [success] # Express -- 模板引擎~~~1.和大多数后台语言一样,可以指定网页渲染的模板引擎。2.这里使用的是art - template~~~>[danger] ##### 下载 -- art-template~~~npm install --save art-templatenpm ...
  • express模板引擎ejs介绍

    2019-09-02 00:29:50
    1 :网站的工作原理 客户端传参数→ 服务器收参数 → 做业务处理→把处理结果显示在页面上。 如何显示结果到界面? 1,混合开发: ...前段的我们把数据丢给模板引擎,模板自己完成渲染。在输出到...
  • 在日常项目中,我喜欢用Django做后端, 因为大而全如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,下面我们就用最少的步骤...
  • node--express模板引擎

    2019-12-29 12:21:00
    const express =require('express') const path=require('path') const template=require('art-template') ...//设置模板引 ,view文件 art后缀 app.set('view engine','art') //使用express兼容art-te...
  • 中间件consolidate,consolidate的主要功能就是帮助express适配各种引擎。  1、 我可以给你做适配,那你要输出什么啊? ... ... server.set('views'.'./views');...3、 适配哪种模板引擎,jade,ejs...
  • 默认支持的模板引擎: 1 jade (模板比较简洁 html代码区别非常大和使用习惯区别比较大。) 2 ejs (html代码一样) (1)模板文件后缀.ejs (2) 开始<% 结束 %> 改标签 包裹进来的代码 都会被js模板内部处理,...
  • 1.配置模板引擎Express默认的模板引擎是pug(jade),想要渲染html页面必须要导入对应的模板引擎ejsnpm install ejs安装完成在app.js文件中完成模板引擎的引入var ejs = require("ejs");// 配置Express 视图引擎app....
  • 前言一般我们在做node web项目的时候,想使用我们平时常用的...ejs模板配置使用var app = express();app.set('views', path.join(__dirname, 'views'));//设置视图引擎app.set('view engine', 'ejs');html模板配置安...
  • 如果不使用模板引擎,我们会采取拼接的方式返回页面: router.get('/login', function(req, res, next) { res.set('Content-Type','text/html'); const data = new Date(); const html = ` <html> <...
  • express默认使用jade模板,可以配置让其支持使用ejs或html模板。1. 安装ejs在项目根目录安装ejs.npm install ejs2、引入ejsvar ejs = require('ejs'); //我是新引入的ejs插件3、设置html引擎app.engine('html', ...
  • express默认使用jade模板,可以配置让其支持使用ejs或html模板。1.安装ejs在项目根目录安装ejs.npminstallejs2、引入ejsvarejs=require('ejs');//我是新引入的ejs插件3、设置html引擎app.engine('html',ejs.__...
  • express - ejs模板引擎

    2017-07-20 10:08:21
    express ejs模板引擎
  • Express修改模板引擎

    千次阅读 2017-02-17 14:13:45
    在《Mac下express的安装和新建项目》我们新建项目使用的是:express --view=ejs 项目名其中的view=ejs表明我们模板引擎是ejs。默认是jade。 但是我们要修改成html就不可以:express --view=html 项目名这是不可以的...
  • Express 使用模板引擎

    2015-03-25 14:44:44
    在使用Express模板文件之前,必须进行如下设置.  * 'views',存储模板文件的文件夹.例如: app.set('views','./views');  * 'view engine',使用的模板引擎. 例如: app.set('view engine','jade'); 然后安装响应的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,348
精华内容 4,939
关键字:

express模板引擎