NodeJS学习三（静态文件托管）
- 2019 年 12 月 2 日
- 笔记
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);
Shift+!+tab 快捷键 在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>
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; }
