02.简单了解ejs模板

来源：互联网发布：爱国者u盘怎么样知乎编辑：程序博客网时间：2024/05/21 10:57

1.创建ejs文件夹，shift+右键打开cmd命令窗口

npm init -y

cnpm install ejs --save-dev简写：cmp i ejs --save-dev

2.ejs文件夹下创建index.js

var http = require("http");var ejs = require("ejs");var server  = http.createServer(function(req,res){    if (req.url=="/favicon.ico") return;    res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});    var str = "第一次使用ejs模板<%=a%>";    var strRender = ejs.render(str,{a:",我是拼接上的字符串"});    res.write(strRender);    res.end();});server.listen(80);

例2

1.ejs文件夹下创建tp.js
2.使用ejs模板，把index.html模板信息、tp.js中的对象数据拼接

tp.js

var http = require("http");var ejs = require("ejs");var fs = require("fs");var server  = http.createServer(function(req,res){    if(req.url == "/favicon.ico") return ;    res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"});    fs.readFile("./01view/index.html",function(err,data){        var obj = {            name:"马克思",            list:["中国","美国","加拿大","日本"],            list1:[                {                    href:"http://www.baidu.com",                    name:"百度"                },{                    href:"http://www.zzg.com",                    name:"zzg的个人空间"                },{                    href:"http://99.com",                    name:"九块九包邮"                }            ]        }        res.write(ejs.render(data.toString(),obj));        res.end("bbbbb");    });});server.listen(80);

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    我叫<%=name%>,我去过    <%for(var i=0;i<list.length;i++){%>         <%=list[i]%>    <%}%>    <%for(var j=0;j<list1.length;j++){%>        <p><a href="<%=list1[j].href%>" target="_blank"><%=list1[j].name%></a></p>    <%}%></body></html>

最后为了更直观的展示(当看到的时候，就直接想到这是一个模板) ，可以把index.html 改为index.ejs，fs.readFile(）里面的index.html 改为index.ejs

阅读全文

0 0