NodeJS学习三(静态文件托管)

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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏me的随笔

Python中的passed by assignment与.NET中的passing by reference、passing by value

Remember that arguments are passed by assignment in Python. Since assignment jus...

7620
来自专栏镁客网

全球开发者福利,GitHub终于出App了

今天,在全球开发者大会上,按照惯常,为了让开发者更轻松地写代码,GitHub发布了诸多重大更新,其中包括GitHub Actions正式应用、新功能GitHub...

11310
来自专栏前端资源

常用软件的静默安装参数,双击自动安装

1. 软件如果已经安装,到注册表中查询其安装/卸载参数,看 InstallSource(如果有)和 UninstallString 的参数内容信息。

10720
来自专栏晓晨的专栏

.NET Core 使用HMAC算法

通过哈希算法,我们可以验证一段数据是否有效,方法就是对比该数据的哈希值,例如,判断用户口令是否正确,我们用保存在数据库中的password_md5对比计算md5...

4620
来自专栏无道编程

VSCode使用记录分享【PHP为例】

并且会在此提醒你安装一些插件,能出现在这里的插件,说明肯定是微软官方比较认可的插件,质量自然不必多说。

7100
来自专栏magicodes

Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装

Magicodes.Pay,是心莱科技团队提供的统一支付库,相关库均使用.NET标准库编写,支持.NET Framework以及.NET Core。目前已提供A...

7940
来自专栏小詹同学

听说你的爬虫又被封了 ?

上一篇文章《爬虫利器初体验》中,我们举了个简单的栗子,但是在真实的开发中这样的爬虫代码很容易就会被封掉。那么怎么样才能避免这些事发生呢?这一这篇文章我们一起来学...

6830
来自专栏Bypass

Window权限维持(五):屏幕保护程序

屏幕保护是Windows功能的一部分,使用户可以在一段时间不活动后放置屏幕消息或图形动画。众所周知,Windows的此功能被威胁参与者滥用为持久性方法。这是因为...

7310
来自专栏汪宇杰博客

.NET Core 如何生成真正的ICO图标

前一阵我终于完成了博客系统动态生成favicon的功能。众所周知,favicon肯定有一个ico格式的图标,其余可以用 png + manifest 的方式输出...

8830
来自专栏CRM日记本

Salesforce发布了CMS产品,逻辑是什么?

最近Salesforce宣布发布了自己的CMS产品,这似乎又超出了我们的想象范围,CMS传统上来说用于网站建设的,为什么一个CRM厂商需要CMS产品,这里面的逻...

9920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励