处理网站中的静态资源

漂流の少年

于 2021-09-23 21:30:22 发布

阅读量567

点赞数 1

分类专栏： node.js+Express 文章标签： html html5 bootstrap node.js 静态资源

本文链接：https://blog.csdn.net/YINZHE__/article/details/120439344

版权

node.js+Express 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

为了让目录结构保持统一清晰，我们约定，将所有的html文件都放在views文件夹中

浏览器在收到HTML响应内容之后，就要开始从上到下一次解析
当在解析的过程中，如果发现link、script、img、iframe、video、audio等带有src或href(link)属性标签的时候(具有外链资源)，浏览器就会自动对这些资源发起新的请求。

为了方便统一处理这些静态资源，我们把所有静态资源都放在public文件夹中

下面用个小例子

文件目录

在案例中用到了bootstrap框架，所以要提前安装一下

bootstrap中js插件依赖于jquery，所以在这之前必须安装jquery。

npm install jquery --save-dev
npm install bootstrap --save-dev

安装完之后将 node_modules/bootstrap文件夹放到public/lib中

(public/lib专门用来放一些第三方安装包的资源)

app.js

var http = require('http')
var fs = require('fs')

http
	.createServer(function(req,res) {
		var url = req.url
		if(url === '/') {
			fs.readFile('./views/index.html',function(err,data) {
				if(err) {
					return res.end('404 Not Found.')
				}
				res.end(data)
			})
		} else if(url.indexOf('/public/') === 0) {
			//如果请求路径是以/public/开头的，则我认为你要获取public中的某个资源
			//所以可以把请求路径当作文件路径来进行读取
			fs.readFile('.' + url, function(err, data) {
				if(err){
					return res.end('404 Not Found.')
				}
				res.end(data)
			})
		}
	})
	.listen(3000,function () {
		console.log('running...')
	})

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>留言本</title>
	<!--
		在服务器端，文件中的路径别写相对路径了，因为这个时候的资源都是通过url标识来获取
		我的服务器开放了/public/目录，所以这里的请求路径都写成：/public/xxx/，/就是url根目录的意思
		浏览器在真正发请求的时候会自动把http://127.0.0.1:3000拼上
	-->
	<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
	<div class="header container">
		<div class="page-header">
			<h1>Example page header <small>Subtext for header</small></h1>
			<a class="btn btn-success" href="post.html">发表留言</a>
		</div>
	</div>
	<div class="comments container">
		<ul class="list-group">
			<li class="list-group-item">Cras justo odio</li>
			<li class="list-group-item">vcdsvdsvds</li>
			<li class="list-group-item">vsdvsdvsvd</li>
			<li class="list-group-item">bfbrnrnrn</li>
			<li class="list-group-item">deberbetnbn</li>
			<li class="list-group-item">yefruyuiymmy</li>
			<li class="list-group-item">fgngrngnnyungtn</li>
			<li class="list-group-item">ndfnrnetynyn</li>
		</ul>
	</div>
</body>
</html>

现在powershell切到当前目录后，输入node app.js，将服务端跑起来

在浏览器输入127.0.0.1:3000就能看到效果

注意，在图的右边，在Network下面，我们实际上请求到了三个文件

其中, 127.0.0.1和bootstrap.css这两个资源的请求路径不是一样的

所以，我在上面的代码中分别对/和/public/这两个请求做了处理

这也印证了我上面所说的，解析html文件时，浏览器就会自动对静态资源发起新的请求

漂流の少年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
处理网站中的静态资源

目录为了让目录结构保持统一清晰，我们约定，将所有的html文件都放在views文件夹中浏览器在收到HTML响应内容之后，就要开始从上到下一次解析当在解析的过程中，如果发现link、script、img、iframe、video、audio等带有src或href(link)属性标签的时候(具有外链资源)，浏览器就会自动对这些资源发起新的请求。为了方便统一处理这些静态资源，我们把所有静态资源都放在public文件夹中下面用个小例子文件目录在案例中用到了bo...
复制链接

扫一扫