Node.js express框架静态路由托管使用ejs模板引擎

最新推荐文章于 2024-04-17 12:30:48 发布

houyanhua1

最新推荐文章于 2024-04-17 12:30:48 发布

阅读量985

点赞数

分类专栏： Node.js 文章标签： node.js node express ejs

本文链接：https://blog.csdn.net/houyanhua1/article/details/79467954

版权

Node.js 专栏收录该内容

48 篇文章 4 订阅

订阅专栏

学习笔记文档：https://pan.baidu.com/s/1uuOKLS0LHPDmfEoB8KaOrw 密码：rhcc

demo.js（路由文件）：

/*
1.安装ejs   cnpm install ejs --save
2.配置express的模板引擎
  app.set("view engine","ejs"); //express 里面使用ejs 安装以后就可以用，不需要引入。
3.在express中使用ejs
     res.render("news",{
        "data" : "分配给视图模板的数据"
     });  //第一个参数是视图模板，第二个参数是分配的数据(可以省略)，第三个参数是回调函数(可以省略)
**/

var express=require('express');
var app=express();  //实例化 express

app.set('view engine','ejs');  //配置ejs模板引擎。ejs只需要配置，不需要引入(express中已经引入)
app.set('views', __dirname + '/views');  //设置视图模板的位置，默认是views

/*  将ejs视图模板的后缀名改为.html 不建议修改  (默认是.ejs)
var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html');  //修改ejs视图模板的后缀名
*/

//中间件app.use
//给public目录下面的文件提供静态web服务  http://localhost:3001/images/baidu.png
app.use(express.static('public'));

//配置虚拟目录的静态web服务  http://localhost:3001/static/images/baidu.png
//   images/baidu.png去public目录找这个文件，如果有就返回
//app.use('/static',express.static('public'));

app.get('/',function(req,res){
    //ejs模板渲染。 会默认去views文件夹下找index.ejs视图模板，后缀名可以省略
    res.render('index');  /*ejs渲染模板*/
});

app.get('/news',function(req,res){
    //res.send('ejs的演示');
    var arr=['1111','222','3333'];
    //ejs渲染模板
    res.render('news',{  /*数据*/
        list:arr
    });  //第一个参数是视图模板，第二个参数是分配给模板的数据(可以省略)，第三个参数是回调函数(可以省略)
});

app.listen('3001','127.0.0.1');

views/news.ejs（前端视图模板）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>

    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <%- include public/header.ejs%>   <!-- 引入(公共的)外部文件。 -->
    <br/>
    <img src="images/baidu.png" alt="百度"/>
    <ul>
        <%for(var i=0;i<list.length;i++){%>
            <li><%=list[i]%></li>
        <%}%>
    </ul>
</body>
</html>

views/public/header.ejs（前端视图模板中引入的外部文件）：

<h2 class="header">这是外部的一个ejs文件，这是头部文件</h2>

houyanhua1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node.js express框架静态路由托管使用ejs模板引擎

学习笔记文档：https://pan.baidu.com/s/1uuOKLS0LHPDmfEoB8KaOrw 密码：rhccdemo.js（路由文件）：/*1.安装ejs cnpm install ejs --save2.配置express的模板引擎 app.set("view engine","ejs"); //express 里面使用ejs 安装以后就可以用，不需要引入。3....
复制链接

扫一扫