Node.js-swig前端模板引擎

最新推荐文章于 2021-03-21 18:52:43 发布

小白搬运

最新推荐文章于 2021-03-21 18:52:43 发布

阅读量280

点赞数

分类专栏： node 文章标签： node.js 前端

本文链接：https://blog.csdn.net/weixin_41723305/article/details/109839288

版权

node 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

①安装swig

npm install swig

②app.js

//引入express框架
var express = require("express")
var app = express()
var port = 8081
//引入前端模板引擎
var swig = require("swig")
//设置页面不缓存
swig.setDefaults({cache: false})
//设置静态文件托管
//设置静态文件托管
//当用户访问的url以/public开始，那么直接返回对应__dirname+'/public'
app.use('/public',express.static(__dirname+'/public'))

app.set('view cache',false)

//定义当前应用所使用的的模板引擎
//第一个参数表示模板引擎的名称，同时也是模板文件的后缀
//第二个参数表示用于解析处理模板内容的方法
app.engine('html',swig.renderFile)
//设置模板文件存放的目录，第一个参数必须是views，第二个参数是目录
app.set('views','./views')
//注册所使用的模板引擎，第一个参数必须是view engine
//第二个参数和app.engine这个方法中定义的第一个参数是一致的
app.set('view engine', 'html')
app.get('/',(req,res,next)=>{
	//读取views目录下的指定文件，解析并返回给客户端
	//第一个参数，表示模块的文件，相对于views目录， views/index.html
	//第二个参数传递给模板的数据
    res.render('index',{
        title:'首页',
        content: 'hello swig'
    })
})
app.get('/main.css')
app.listen(port,()=>{
    console.log('http://localhost:'+port)
})

③index.html
因为html文件里引入css js等文件也是相当于发起请求，所以app.js那里需要写相关请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/public/main.css" />
    <title>{{ title }}</title>
</head>
<body>
    <div>ddd</div>
    <div></div>
    {{ content }}
</body>
</html>

④main.css

body{
    background-color: rebeccapurple;
}

小白搬运

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js-swig前端模板引擎

①安装swignpm install swig//引入express框架var express = require("express")var app = express()var port = 8081//引入前端模板引擎var swig = require("swig")//设置页面不缓存swig.setDefaults({cache: false})app.set('view cache',false)//定义当前应用所使用的的模板引擎//第一个参数表示模板引擎的名称，同时也
复制链接

扫一扫