博客开发（1）渲染html文件

最新推荐文章于 2024-06-28 14:19:53 发布

xlh006

最新推荐文章于 2024-06-28 14:19:53 发布

阅读量379

点赞数

分类专栏： blog

本文链接：https://blog.csdn.net/xlh006/article/details/85049698

版权

blog 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用nodejs express渲染html文件！

第一步：app.js文件：

//应用程序的启动入口文件

var express =require('express');
//app = nodejs中的http.createserver();
var app = express();




//加载模版处理模块
var swig = require('swig');
//定义当前应用所使用的模版引擎
//第一个参数表示模版引擎的名称，同时也是模版文件的后缀，第二个参数表示用于处理模版内容的方法
app.engine('html',swig.renderFile);
//设置模版文件存放的目录，第一个参数必须是views，第二个参数是目录
app.set('views','./views');
//注册所使用的模版引擎，第一个参数必须是view engin，第二个参数和app.engine这个方法中定义模版引擎的名称（第一个参数）是一致的
app.set('view engine','html');
//在开发过程中取消模版缓冲
swig.setDefaults({cache:false});


app.get('/',function(req,res,next){
    //res.send('欢迎来到');

    // 读取views目录下的指定文件，解析并返回给客户端
    // 第一个参数：表示模版的文件，相对于views目录  views/index.html
    //第二个参数表示传递给模版使用的数据

    //首页渲染index.html
    res.render('index');

});

app.listen(8081);

第二步：在views文件夹下创建文件index.html

index.html文件：


<!DOCTYPE html><html lang='en' class=''>
<head><script src='//static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script><script src='//static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alvaromontoro/pen/PXNLgP" />

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
    <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
    .frame {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        margin-top: -200px;
        margin-left: -200px;
        border-radius: 2px;
        box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;
        font-family: 'Open Sans', Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: flex;
    }

    .frame > div {
        flex: 1;
        font-size: 0;
        font-weight: bold;
        line-height: 400px;
        background: #f72;
        text-transform: uppercase;
        text-align: center;
        color: rgba(255, 255, 255, 0);
        transition: all 0.5s;
    }
    .frame > div:hover {
        flex: 6;
        font-size: 2rem;
        color: white;
    }
    .frame > div:nth-child(2n) {
        background: #444;
    }
    </style></head>
<body>

<div class="frame">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
</div>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://100dayscss.com/codepen/js/jquery.min.js'></script>
<script >// jQuery v3.3.1 is supported
//# sourceURL=pen.js
</script>
</body></html>