学堂 学堂 学堂公众号手机端

服务端如何统一开放某一个目录(读取文件里面的外链link,img资源发起新的请求等)

lewis 1年前 (2024-04-07) 阅读数 9 #技术


服务端渲染和客户端渲染的区别客户端渲染不利于SEO搜索引擎优化服务端渲染是可以被爬虫抓取到的。客户端异步渲染是很难被爬虫取到的服务端如何统一开放某一个目录

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

特别注意:在服务端中,文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过​​url​​ 标识来获取的我的服务器开放了​​/public/​​ 目录所以这里的请求路径都写成:​​/public/xxx​​​​/​​​ 在这里就是​​url​​ 根路径的意思。

浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上
所以不要再想文件路径了,把所有的路径都想象成 url 地址


如何统一开放某一个目录


即,在访问的index里面又有外链请求,需要http请求响应,那么就该这样描述

核心代码:

http//简写
.createServer(function (req,) {
var url = req.url;
if (url.indexOf('/public/') === 0) {
console.log(url);
//统一返回public下的文件
fs.readFile(path.join(__dirname, '.' + url), function (err,) {
if (err) {
return res.end('404 Not Found');
}
res.end(data);
})
}
})

控制台会返回:

/public/lib/bootstrap/bootstrap.css

/public/img/11.jpg


​url.indexOf('/public/') === 0​​​表示文件里面里面有链接的http请求路径前面有​​/public/​​成立,注意O是大写。

例如:

异步读取html文件时,文件里面有层叠样式表。他是外部引入


在html文件中这是错误的写法;单纯打开HTML文件那css无法从外部链接引入。

但文件是从服务端读取的。作为http的加载的url路径来说,这样写是正确的。

当服务端加载这个文件时,需要根据相对路径读取文件就在加个​​.​​。



但还是注意这个路径的写法:

有时候你明明写的路径没错,但就是读不出数据,推荐使用第二种写法,别问我怎么知道的,说多了都是泪,

我以后碰见相对路径就采取第二种写法;
//第一种
fs.readFile(path.join('.' + url,funvtion)
//第二种
fs.readFile(path.join(__dirname, '.' + url),function)
服务端整体代码描述
var http = require('http');
var fs = require('fs');
var path = require('path')
http
.createServer(function (req,) {
var url = req.url;
if (url === '/') {
fs.readFile(path.join(__dirname, './view/index.html'), function (err,) {
if (err) {
return res.end('404 Not Found')
}
res.end(data)
})
} else if (url.indexOf('/public/') === 0) {
console.log(url);
fs.readFile(path.join(__dirname, '.' + url), function (err,) {
if (err) {
return res.end('404 Not Found');
}
res.end(data);
})
}
})
.listen(3000, function () {
console.log('running……');
})


版权声明

本文仅代表作者观点,不代表博信信息网立场。

热门