在express中使用ejs模板

1.安装ejs

npm install ejs --save

注：express内置了ejs，所以不用引入ejs

2.配置ejs模板引擎

app.set('view engine','ejs')

3.渲染页面
render(filename,json)接收两个参数。
第一个参数是模板名称，ejs会默认渲染项目根目录下的views文件夹的相应文件，这里指index.ejs文件

image.png

第二个参数是后台数据 json格式

app.get('/learnejs',function(req,res){
   let arr=['吃饭','睡觉','打豆豆']
    res.render('index',{
        list:arr
    })
})

index.ejs

    <ul>
        <%for(var i=0;i<list.length;i++){%>
        <li><%=list[i]%></li>
        <%}%>
    </ul>

4.设置ejs模板的存放目录

app.set('views',__dirname+'/static')

配置后，ejs会默认在项目根目录下的static文件夹下找模板

image.png

5.引用公共模板(<%- include + 文件路径%>)

image.png

header.ejs

<h2>这是公共模板，头部</h2>

index.ejs

    <%- include ('public/header.ejs') %>

6.托管静态web服务

app.use(express.static('public'))

配置后，可也在后台模板中引入css样式、图片等

image.png

注意引入路径是css/header.css,也就是说当访问css/header.css时会到public目录去找

image.png
7.配置虚拟目录的静态web服务

app.use('/my',express.static('public'))

配置后，当访问http://localhost:3000/my/css/header.css 时，会在public目录下找css/header.css这个文件

补充 在ejs中设置全局变量 app.locals[name]

app.locals['aa'] = 123