精华内容
下载资源
问答
  • 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 模板引擎

    展开全文
  • 主要介绍了详解nuxt路由鉴权(express模板),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • node.js中Express模板

    2020-07-19 22:56:44
    什么是Express Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。...安装Express 模板和其他的模板一样 cnpm install express --save 和Ex

    什么是Express
    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。

    使用 Express 可以快速地搭建一个完整功能的网站。

    Express 框架核心特性:

    1. 可以设置中间件来响应 HTTP 请求。
    2. 定义了路由表用于执行不同的 HTTP 请求动作。
    3. 可以通过向模板传递参数来动态渲染 HTML 页面。

    安装Express 模板和其他的模板一样

    cnpm install express --save
    

    和Express一起要用的模板
    body-parser —获取post请求传过来的参数
    Express使用

    //调用Express模板
    const express = require("express");
    const app = express();
    

    静态私服只需要一条代码搞定

    app.use(express.static("要静态私服的目录", { index: 初始页面地址 }));
    

    设置端口号

    //端口号
    app.listen(3000, () => {
        console.log("服务开启!");
    });
    

    调用接口

    app.get('/', function (req, res) {
       res.send('Hello World');
    })
    

    例子:

    var express = require('express');
    var app = express();
     
    app.use(express.static("./"));
    app.get('/', function (req, res) {
       res.send('Hello World');
    })
    app.listen(3000,()=>{
        console.log("服务启动成功");
    });
    

    在这里插入图片描述
    get请求参数

    //前台请求
    <script>
           $("button").on("click",()=>{
            $.ajax({
                type: "GET",
                url: "/loading",
                data:{
                  pag:"HelloWorld",
                },
                success(data) {
                    console.log(data);
                }
            })
           })
        </script>
    //后台
    app.get("/loading", (req, res) => {
         res.send(req.query.pag);
    
    })
    

    在这里插入图片描述
    psot参数

    //格式
    app.use(bodyParser.urlencoded({ extended: false }));
    
    //前台
    <script>
           $("button").on("click",()=>{
            $.ajax({
                type: "POST",
                url: "/loading",
                data:{
                  pag:"HelloWorld2",
                },
                success(data) {
                    console.log(data);
                }
            })
           })
        </script>
        //后台
    //加载
    app.post("/loading", (req, res) => {
         res.send(req.body.pag);
    
    })
    

    在这里插入图片描述

    展开全文
  • 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 标签
    
    展开全文
  • nodejs-heroku-ready 准备在 Heroku 中使用的 Nodejs + Express 模板
  • 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模板引擎中如何加载socket.io,今天琢磨了半个下午,好不容易搞出来了,这里分享给大家。首先我们要知道的是,socket.io是基于http的。 也就是说http之上,有一个app,也有一个io。如果我希望在...
  • express模板引擎ejs介绍

    2019-09-02 00:29:50
    1 :网站的工作原理 客户端传参数→ 服务器收参数 → 做业务处理→把处理结果显示在页面上。 如何显示结果到界面? 1,混合开发: ...前段的我们把数据丢给模板引擎,模板自己完成渲染。在输出到...
  • 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('view engine','html'); 2、输出的是html了,那你的模板文件放哪里了?  ...
  • 项目的基本模板, 使用Passport js登录注册和注销的基本功能 技术使用:NodeJS Expressjs MongoDB EJS
  • 前言一般我们在做node web项目的时候,想使用我们平时常用的...ejs模板配置使用var app = express();app.set('views', path.join(__dirname, 'views'));//设置视图引擎app.set('view engine', 'ejs');html模板配置安...
  • 需要在应用中进行如下设置才能让 Express 渲染模板文件:views, 放模板文件的目录,比如: app.set('views', './views')view engine, 模板引擎,比如: app.set('view engine', 'jade')然后安装相应的模板引擎 npm ...
  • express 模板 express 的安装 在需要使用 express 的目录下执行安装命令: npm i -S express 简单使用 express // 引入 express 模块 var express = require('express'); // 创建服务对象 var app = ...
  • nuxt路由鉴权(express模板

    千次阅读 2018-08-22 10:37:43
    express依赖express-session中间件实现session功能 若我们不加载express-session组件 router.get('/user/login', function (req, res) { console.log(req,req.session) }) 会发现不存在session对象 引入...
  • express 项目生成器Hello! After working with NODE.JS/EXPRESS several times, it's always stressful starting up a new project...since you need to rebuild the structure of your express application. 你好...
  • locals是Express应用中 Application(app)对象和Response(res)对象中的属性,该属性是一个对象。该对象的主要作用是,将值传递到所渲染的模板中。locals对象locals对象用于将数据传递至所渲染的模板中。对于如下一个...
  • app.locals和res.locals是expess中用于渲染模板的两个对象.locals可能存在于app对象中,即app.locals,也可能存在于res对象中,即res.locals。app.locals上通常挂载常量信息(如博客名,描述,作者信息),res....

空空如也

空空如也

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

express模板