zoukankan      html  css  js  c++  java
  • 【js】ejs

    什么是ejs

    "E" 代表 "effective",即【高效】。EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。

    特点

    • 快速编译与绘制输出
    • 简洁的模板标签:<% %>
    • 自定义分割符(例如:用 <? ?> 替换 <% %>)
    • 引入模板片段
    • 同时支持服务器端和浏览器 JS 环境
    • JavaScript 中间结果静态缓存
    • 模板静态缓存
    • 兼容 Express 视图系统

    ejs的使用

    1、使用npm安装ejs

    $ npm install ejs

    2、新建index.ejs

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title><%= title %></title>
    </head>
    <body>
        <%= index %>
    </body>
    </html>

     3、引入ejs模块

    const ejs = require('ejs');
    

    4、渲染ejs

    const http = require('http');
    
    http.createServer((req, res) => {
        if (req.url === '/') {
            res.writeHead(200, {
                'Content-Type': 'text/html' 
            });
            // 渲染文件 index.ejs
            ejs.renderFile('./views/index.ejs', {
                title: 'ejs-index',  // 渲染的数据key: 对应到了ejs中的title
                index: '首页'},  // 渲染的数据key: 对应到了ejs中的index
                (err, data) => {
                if (err ) {
                    console.log(err);
                } else {
                    console.log(data);
                    res.end(data);
                }
            })
        }
    }).listen(3002);

     5、koa使用ejs

    配置koa-views

    const koaViews = require('koa-views');
    
    // 配置渲染文件路径 及文件后缀
    app.use(koaViews('./views', {
        extension: 'ejs'
    }));
    // 响应路由渲染文件
    
    router.get('/', async ctx => {
        await ctx.render('index', {
            title: 'ejs-index', // 渲染的数据key: 对应到了ejs中的title
            index: '首页'}, // 渲染的数据key: 对应到了ejs中的index
        });
    });

     6、语法

    • <% :'脚本' 标签,用于流程控制,无输出
    • %> :一般结束标签
    • <%= :输出数据到模板(输出是转义 HTML 标签)
    • <%- :输出非转义的数据到模板

    相关资料:

  • 相关阅读:
    可重入函数
    进程间通信的方法和实现
    Qt之Qprocess
    mysql学习(十二)内置函数
    mysql学习(十一)嵌套查询 排序 分组
    mysql学习(十)多表查询
    ubuntu 12.04 安装谷歌浏览器
    mysql学习(九)sql语句
    mysql学习(八)数据表类型-字符集
    mysql远程连接问题-http://www.cnblogs.com/jerome-rong/archive/2013/03/05/2944264.html
  • 原文地址:https://www.cnblogs.com/websmile/p/12993668.html
Copyright © 2011-2022 走看看