Node.js-swig前端模板引擎
终逸仙
①安装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;
}
类似资料：