与模板文件的配置一样,样式或脚本等可以通过路由的方式或者托管的方式进行引入
1.路由方式引入
//应用程序的启动入口文件
var express = require('express'); //加载express模块
var swig = require('swig'); //加载模板处理模块
var app = express(); //创建app应用,相当于nodeJS的http.createService()
//配置模板引擎
app.engine('html',swig.renderFile); //定义当前模板引擎,第一个参数:模板引擎名称,也是模板文件后缀;第二个参数:处理模板的方法
app.set('views','./views'); //设置模板文件存放的目录,第一个参数必须是views,第二个参数是目录
app.set('view engine','html'); //注册模板
swig.setDefaults({cache:false});//取消模板缓存
/**
* [description] 给app绑定首页路由,把一个url路径通过一个或多个方法绑定
* @param {[type]} req request对象,保存客户端请求相关的一些数据
* @param {[type]} res response对象
* @param {[type]} next 函数,用于执行下一个和当前路径匹配的函数
* @return {[type]} [description]
*/
app.get('/',function(req,res,next){
//读取views目录下的指定文件,解析并返回给客户端,第一个参数:模板名称,第二个参数:传递给模板的数据
res.render('index');
})
// 静态文件托管,这种写法不使用
app.get('/main.css',function(req,res,next){
res.setHeader('content-type','text/css'); //设置内容类型,默认以字符串方式访问
res.send("body {color:red}"); //字符串形式的css内容
})
//监听http请求
app.listen(8081);
在index.html里面引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/main.css">
</head>
<body>
<h1>欢迎光临我的博客</h1>
</body>
</html>
启动node运行app.js,访问localhost:8081
很明显这种引入方式不实际,因为脚本代码过多写的不合适。
2.静态托管方式引入
在入口文件使用app.use()方法设置静态文件托管,代码和注释如下:
//应用程序的启动入口文件
//加载模块
var express = require('express'); //加载express模块
var swig = require('swig'); //加载模板处理模块
var app = express(); //创建app应用,相当于nodeJS的http.createService()
//配置模板引擎
app.engine('html',swig.renderFile); //定义当前模板引擎,第一个参数:模板引擎名称,也是模板文件后缀;第二个参数:处理模板的方法
app.set('views','./views'); //设置模板文件存放的目录,第一个参数必须是views,第二个参数是目录
app.set('view engine','html'); //取消模板缓存
//设置静态文件托管
//托管规则:用户发送http请求到后端,后端解析url,找到匹配规则,执行绑定的函数,返回对应的内容,静态文件直接读取制定目录下文件返回给用户,动态文件:处理业务逻辑,加载模板,解析模板返回上数据
app.use('/public',express.static(__dirname + '/public'));//当用户请求的路径ulr以/public开头时,以第二个参数的方式进行处理(直接返回__dirname + '/public'目录下文件)
/**
* [description] 给app绑定首页路由,把一个url路径通过一个或多个方法绑定
* @param {[type]} req request对象,保存客户端请求相关的一些数据
* @param {[type]} res response对象
* @param {[type]} next 函数,用于执行下一个和当前路径匹配的函数
* @return {[type]} [description]
*/
app.get('/',function(req,res,next){
//读取views目录下的指定文件,解析并返回给客户端,第一个参数:模板名称,第二个参数:传递给模板的数据
res.render('index');
})
// 静态文件托管,这种写法不使用
// app.get('/main.css',function(req,res,next){
// res.setHeader('content-type','text/css'); //设置内容类型,默认以字符串方式访问,否则将无法识别css
// res.send("body {color:red}"); //字符串形式的css内容
// })
//监听http请求
app.listen(8081);
并在index.html中将引入的main.css路径该为:
<link rel="stylesheet" type="text/css" href="/public/main.css">
在public目录下新建main.css:
body {
background: gray;
}
重启app.js的node服务,刷新页面: