网络基础知识（黑马教程笔记）-6-静态资源访问的功能实现

一，静态资源

二，动态资源

三，如何实现静态资源的访问

在服务器端，我们创建一个专门的文件夹，用来放置静态资源。当客户端请求这个静态资源的时候，服务器就直接将这个静态资源响应给客户端。
第一步：将准备好的静态资源放入文件夹中：

//1,引入系统模块http
//2，创建网站服务器
//3，为网站服务器对象添加请求事件
//4，实现路由功能:获取客户端的请求方式和请求地址
const http=require('http')
const app=http.createServer()
const url=require('url')
//导入path模块
const path=require('path')
//导入fs文件处理模块
const fs=require('fs')
//实际上on是app这个服务器对象的一个方法，需要两个参数
app.on('request',(req,res)=>{//获取客户端输入的请求路径let {query,pathname}=url.parse(req.url,true)//处理路径，让地址为空时也显示首页pathname=pathname=='/' ? '/default.html' : pathname//路径拼接:将客户的请求路径转换为服务器中实际的硬盘路径let realPath=path.join(__dirname,'public'+ pathname)//读取文件fs.readFile(realPath,(error,result)=>{if(error==null){res.end(result)}else{res.writeHead(404,{'content-type':'text/html;charset=utf8'})//注意解析格式写在这里，如果写前面，会导致以html格式解析读取到的result//也即是只会显示html，而不会有样式了。res.end('读取文件失败')return}})
})
app.listen(3000)
console.log("服务器启动成功")

然后注意到，我们获得客户端请求的地址后，是直接读取然后在浏览器上响应出来的。
但是实际上，需要客户端判断需要读取的文件类型是什么样的，然后去以什么格式去解析文件：

node的第三方模块：mime就可以完成这个任务。
先npm install mime安装这个第三方模块

const mime=require('mime')

let {query,pathname}=url.parse(req.url,true)//处理路径，让地址为空时也显示首页pathname=pathname=='/' ? '/default.html' : pathname//路径拼接:将客户的请求路径转换为服务器中实际的硬盘路径let realPath=path.join(__dirname,'public'+ pathname)// 查看目标路径下的文件的类型console.log(mime.getType(realPath))

结果：

也就是说，我们的首页其实包含了这么多的文件，且文件类型不一样，如果光设置html格式去解析，将只会得到html文件。
所以，当处理文件时，一定要指明以什么格式去解析。之前的例子之所以可以正常显示页面，不过是因为浏览器比较高级而已，对于低级的浏览器可不行：
所以需要将路由的代码修改为：

//1,引入系统模块http
//2，创建网站服务器
//3，为网站服务器对象添加请求事件
//4，实现路由功能:获取客户端的请求方式和请求地址
const http=require('http')
const app=http.createServer()
const url=require('url')
//导入path模块
const path=require('path')
//导入fs文件处理模块
const fs=require('fs')
//导入mime方法，来判断处理的文件的类型，对应的代码解析格式
const mime=require('mime')
//实际上on是app这个服务器对象的一个方法，需要两个参数
app.on('request',(req,res)=>{//获取客户端输入的请求路径let {query,pathname}=url.parse(req.url,true)//处理路径，让地址为空时也显示首页pathname=pathname=='/' ? '/default.html' : pathname//路径拼接:将客户的请求路径转换为服务器中实际的硬盘路径let realPath=path.join(__dirname,'public'+ pathname)// 查看目标路径下的文件的类型let type=mime.getType(realPath)//读取文件fs.readFile(realPath,(error,result)=>{if(error==null){res.writeHead(200,{'content-type':type})//指明文件类型，配之以对应的解析格式res.end(result)}else{res.writeHead(404,{'content-type':'text/html;charset=utf8'})//注意解析格式写在这里，如果写前面，会导致以html格式解析读取到的result//也即是只会显示html，而不会有样式了。res.end('读取文件失败')return}})
})
app.listen(3000)
console.log("服务器启动成功")

网络基础知识（黑马教程笔记）-6-静态资源访问的功能实现相关推荐

网络基础知识学习笔记
网络基础知识学习笔记参考菜鸟教程.个人学习整理,仅供参考.三年前学过,三年没用忘了,重新学习整理一下. 文章目录网络基础知识学习笔记 OSI七层网络模型 IP地址子网掩码及网络划分网络协议 A ...
100 个网络基础知识普及，看完成半个网络高手！（文末附PDF版本）
点击上方"涛哥聊Python",选择"星标"公众号重磅干货,第一时间送达来源:CU技术社区阅读文本大概需要 5 分钟为了方便大家更好着按需查找对应知识点 ...
收藏100个网络基础知识
100 个网络基础知识普及,看完成半个网络高手! 1)什么是链接? 链接是指两个设备之间的连接.它包括用于一个设备能够与另一个设备通信的电缆类型和协议. 2)OSI 参考模型的层次是什么? 有 7 个 ...
第二十六期:100 个网络基础知识普及，看完成半个网络高手
本篇文章是关于100个网络基础知识普及,看完成半个网络高手!下面,我们一起来看. 作者:佚名来源本篇文章是关于100个网络基础知识普及,看完成半个网络高手!下面,我们一起来看. 1)什么是链接? 链 ...
网络基础知识——交换机路由器
网络基础知识--交换机&路由器一:交换机简介交换机是互联同一局域网的设备,进行简单的存储.转发,不对数据进行任何更改,属于数据链路层设备. 二:交换机的功能 1:数据帧的交换 2:终端用户 ...
【Linux网络编程】网络基础知识
00. 目录文章目录 00. 目录 01. 网络基础知识 02. 附录 01. 网络基础知识 1)什么是链接? 链接是指两个设备之间的连接.它包括用于一个设备能够与另一个设备通信的电缆类型和协议. ...
教室计算机文件共享方法,教程方法;34、共享文件--电脑基础知识电脑技巧-琪琪词资源网...
琪琪词资源网-教程方法;34.共享文件--电脑基础知识电脑技巧,以下是给大家带来的教程方法;34.共享文件--电脑基础知识,大家可以了解一下哦! 在一个几台机子连成的网络里,相互之间可以通过网上邻居共 ...
这100 个网络基础知识看完成半个网络高手
这100 个网络基础知识看完成半个网络高手 1)什么是链接? 链接是指两个设备之间的连接.它包括用于一个设备能够与另一个设备通信的电缆类型和协议. 2)OSI 参考模型的层次是什么? 有 7 个 O ...
40、100 个网络基础知识普及
100 个网络基础知识普及,看完成半个网络高手! 1)什么是链接? 链接是指两个设备之间的连接.它包括用于一个设备能够与另一个设备通信的电缆类型和协议. 2)OSI 参考模型的层次是什么? 有 7 个 ...
史上最详细网络基础知识
网络技术的基本原理: 1. 网络层次划分 2. OSI七层网络模型 3. IP地址 4. 子网掩码及网络划分 5. ARP/RARP协议 6. 路由选择协议 7. TCP/IP协议 8. UDP协议 ...

网络基础知识（黑马教程笔记）-6-静态资源访问的功能实现

一，静态资源

二，动态资源

三，如何实现静态资源的访问

网络基础知识（黑马教程笔记）-6-静态资源访问的功能实现相关推荐

最新文章

热门文章