Node 路由配置+ejs模板+传递及渲染值

最新推荐文章于 2024-03-13 15:00:00 发布

易安sparkle

最新推荐文章于 2024-03-13 15:00:00 发布

阅读量1k

点赞数 1

分类专栏： node 文章标签： node

本文链接：https://blog.csdn.net/weixin_43675447/article/details/99701002

版权

node 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、基本路由配置

App.js：

var http=require("http");
var url=require("url");
http.createServer(function(req,res){
    //根据路由加载页面
    var path=url.parse(req.url).pathname;
    if(path=="/"){
        res.end("index.html");
    }
    else if(path=="/login"){
        res.end("login.html");
    }
    else{
        res.end("regest.html");
    }
}).listen(8100);

二、ejs模板

EJS 是一套简单的模板语言，可以利用普通的 JavaScript 代码生成 HTML 页面。

安装：cnpm install ejs --save
使用：

var ejs = require('ejs'),
    people = ['Sam', 'Alice', 'Mary'],
    html = ejs.render('<%= people.join(", "); %>', {people: people});

实例

<% if (res) { %>
  <h2><%= res.name %></h2>
<% } %>

var template = ejs.compile(str, options);
template(data);  // 输出绘制后的 HTML 字符串

ejs.render(str, data, options);  // 输出绘制后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出绘制后的 HTML 字符串
});

参数

在这里插入图片描述

标签

在这里插入图片描述

包含（include）

include 指令可以将相对于模板路径中的模板片段包含进来（需要提供 ‘filename’ 参数）
例：如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 两个模板文件，通过 <%- include(‘user/show’); %> 代码包含后者。

需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

三、传递渲染值

基本路由配置完成之后，根据路由导出页面渲染，安装ejs模板，自动生成package.json文件以及依赖包，使用的时候需要去导入
常用标签：

<%= %> 绑定标签数据   
<% 脚本 %>   
<%- include("./index.ejs")%>  
<%_ %> 绑定数据去除前面多余的空格

示例

App.js：

var http=require("http");
var url=require("url");
var ejs=require("ejs");
http.createServer(function(req,res){
    //根据路由加载页面
    var path=url.parse(req.url).pathname;
    if(path=="/"){
        //ejs模板  渲染单个变量
        var name="yian"
        ejs.renderFile("assets/index.ejs",{
            name:name
        },function(err,str){
            res.end(str);
        });
    }
    else if(path=="/login"){
        //ejs模板  渲染多个变量
        var arr=[1,2,3,4,5,6];
        ejs.renderFile("assets/login.ejs",{
            array:arr
        },function(err,str){
            res.end(str);
        });
    }
    else{
        //ejs模板  绑定json数据
        var stu=[
            {name:"kun",age:20},
            {name:"ikun",age:21}
        ]
        ejs.renderFile("assets/regest.ejs",{
            student:stu
        },function(err,str){
            res.end(str);
        });
    }
}).listen(8100);

index.ejs：

<body>
    <p>我是首页</p>
    <p>ejs模板绑定数据</p>
    <p><%=name%></p>
    <%- include('./moban.ejs')%>
</body>

<body>
    <p>我是注册界面</p>
    <p>ejs模板绑定数据</p>
    <ul>
        <%for(var i=0;i<array.length;i++){%>
            <li><%=array[i]%></li>
        <%}%>
        <%array.forEach(function(val,index){%>
            <li><%=val%></li>
        <%})%>
    </ul>  
</body>

regest.ejs：

<body>
    <p>我是登录界面</p>
    <p>ejs模板绑定数据</p>
    <div>
        <%for(var i=0;i<student.length;i++){%>
            <div><%=student[i].name%>------<%=student[i].age%></div>
        <%}%>
    </div>
</body>

moban.ejs：

<div>
    <p>我是模板页面</p>
    <p><%=name%></p>
</div>

目录：
在这里插入图片描述

易安sparkle

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node 路由配置+ejs模板+传递及渲染值

一、基本路由配置App.js：var http=require("http");var url=require("url");http.createServer(function(req,res){ //根据路由加载页面 var path=url.parse(req.url).pathname; if(path=="/"){ res.end("ind...
复制链接

扫一扫