NodeJS博客实战03_静态文件托管

布满荆棘的人生 2022-05-29 10:35 159阅读 0赞

与模板文件的配置一样，样式或脚本等可以通过路由的方式或者托管的方式进行引入

#### 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

![Image 1][]

很明显这种引入方式不实际，因为脚本代码过多写的不合适。

#### 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路径该为:

在public目录下新建main.css:

body {
    	background: gray;
    }

重启app.js的node服务，刷新页面：

![Image 1][]

[Image 1]: