路由和模板引擎的使用

最新推荐文章于 2022-05-13 16:08:52 发布

维克多噗噗

最新推荐文章于 2022-05-13 16:08:52 发布

阅读量368

点赞数 1

分类专栏： node

node 专栏收录该内容

14 篇文章

订阅专栏

配置文件package.json

添加了ejs模块
{
    "name":"node02",
    "version":"0.0.1",
    "dependencies":{
        "express":"latest",
        "ejs":"latest"
    }
}

创建服务app.js

// 同一单引号
const http = require('http'),
    express = require('express'),
    app = express();


// 设置模板引擎的目录
app.set('views',__dirname+'/views');
// 设置使用的模板引擎是什么
app.set('view engine','ejs');

// 设置静态资源目录 js img  css
// 可以直接访问 /1.gif
app.use(express.static(__dirname+'/public'));
//可以限制访问地址
// app.use('/abc',express.static(__dirname+'/public'));
// 分出去给它处理,为了不全在服务器这写
app.use('/',require('./router/index'));
// 路径可以正则匹配
// app.use('/a+b+/',require('./router/index'));
app.use('/admin',require('./router/admin'));

http.createServer(app).listen(233);

这里写图片描述

模板引擎的使用 ejs

后缀名ejs

    <!-- 模板之间引用 -->
    <% include header.ejs %>

    <!--数据接收方式 <%= 传递数据名 %>  转义的 -->
    <%= name %>
    <!-- 没有转义 -->
    <%- name %>
    <!-- 书写 js -->
    <% for(var i=0;i<5;i++){ %>
        <%- name %>
    <% } %>

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
</head>
<body>
<img src="images/1.gif">
<% for(var i in data){%>
    <%= data[i] %>
<% }　%>
</body>
</html>

如何将数据传递给模板

render(模板)

router/index.js

const express = require("express"),
    router = express.Router();


// router.get("/",(req,res)=>{
//     res.send("这里是index.js");
// })
router.get("/",(req,res)=>{
    // res.render 用来响应模板引擎文件的
    //  'index' 是代表响应的是 index.ejs模板引擎
    //  参数2 传递过去的data (json)
    let obj = {
        "name": "goudan",
        "month": "5/16"
    };
    res.render("index.ejs",{ data:obj });
})


module.exports = router;