1、http模块
var app=http.createServer((req,res)=>{}) 创建一个服务器 app.listen(81) //端口的意义:ip是访问计算机的标志 端口就可以进入计算机的具体哪一个程序
res.setHeader( ' Content-Type ' , 'text/plain; charset=utf8 ')//设置编码和数据包格式
res.write("<a>xxx</a>")//可以多次调用 代表给前端传输数据 res.end()//可以传输数据也可以不传输,它是当前这一次网络请求结束的标志,一旦执行了就断开连接 req.url 前端给后端发送网络请求的网址"http://ip:port"后面的部分字符串
//如何写一个简单的http服务器
//我们使用 require 指令来载入 http 模块,并将实例化的 HTTP 赋值给变量 http
var http=require("http")
//创建一个服务器对象 回调函数不会直接运行 会在用户每次访问当前计算机的ip下的8081端口
var app=http.createServer((req,res)=>{
//使用 http.createServer() 方法创建服务器,并使用listen方法绑定8081端口。 函数通过 request, response 参数来接收和响应数据。
console.log(req.url)
if(req.url=="/name"){
//配置返回给用户的数据包 的数据格式 和编码的类型utf8
res.setHeader("content-Type","text/html;charset=utf8")
//给前端最后一次发送数据包
res.end("<h1>你好 帆帆66666</h1>")//string buffer
}
else if(req.url=="/listen"){
res.setHeader("content-Type","text/html;charset=utf8")
//给前端最后一次发送数据包
res.end("<h1>你好 卡卡66666</h1>")//接受string或buffer
}
else {
res.setHeader("content-Type","text/html;charset=utf8")
//给前端最后一次发送数据包
res.end("<h1>你好 你网址乱输的 404 </h1>")//输入错误地址
}
})
//监听计算机的端口: min-max
app.listen(8081)//使用listen方法绑定8081端口
访问服务器要先运行文件,在文件所在文件夹运行代码为node 文件名.js ,然后在浏览器输入http://服务器电脑的ip:8081/name
用户浏览器地址栏输入:http://服务器电脑的ip:8081/name 每当用户访问一次,后端的那个回调函数就会执行一次
2、fs模块
读取文件
fs.readFile(path,(err,data)=>{})
path 填路径 可以绝对可以相对 err代表读取失败data代表读取成功 它是一个buffer类型的数据(二进制数据流) 可以通过toString()转化为字符串注意:res.end()方法接受 字符串或者buffer
//fs模块对文件进行操作的模块
var fs=require("fs")
fs.readFile("./src/18234.jpg",(err,data)=>{
console.log(err,data)
})
写入文件(创建文件)
fs.writeFile(path ,data,callback(err))
如果文件存在,该方法写入的内容会覆盖旧的文件内容,不存在就创建一个新的path - 文件路径data - 要写入文件的数据,可以是 String(字符串) callback - 回调函数,回调函数只包含错误信息参数(err),在写入失败时返回
删除文件
fs.unlink(path,callback(err))
path - 文件路径。callback(err) - 删除回调函数,err错误信息
以追加方式写文件
fs.appendFile(__dirname + '/test.txt', '我会追加到文件内容的末尾', function (er) {
console.log('追加内容完成');
})
创建目录
fs.mkdir(__dirname + '/test', function (err) {
if(err)
throw err
console.log('创建目录成功')})
移动/重命名文件或目录:
整个功能相当于重命名一个文件/文件夹路径
fs.rename(oldPath, newPath, callback);
oldPath, 原目录/文件的完整路径及名;
newPath, 新目录/文件的完整路径及名;如果新路径与原路径相同,而只文件名不同,则是重命名
callback(err), 操作完成回调函数;err操作失败对象
移动文件有一个bug:新路径和旧路径必须是同一个根盘
拷贝文件
fs.copy(oldPath, newPath, callback);
oldPath, 原文件的完整路径;
newPath, 新文件的完整路径;
callback(err), 操作完成回调函数;err操作失败对象
拷贝文件以后两个文件都会存在磁盘中
3、发送图片给前端
var http=require("http")
var fs=require("fs")
var app=http.createServer((req,res)=>{
if(req.url=="/图片1.jpg"){
//读取一个图片发给前端
fs.readFile("./src/图片1.jpg",(err,data)=>{
if(!err){
res.end(data)
}
})
}else{
res.end("not 404")
}
})
app.listen(8081)
4、访问静态网站
//node.js文件的文件名最好不要是中文
//加载http模块和fs模块
var http = require("http")
var fs = require("fs")
//创建一个服务器对象
var app = http.createServer((req, res) => {
console.log(req.url)
fs.readFile(__dirname + req.url, (err, data) => {
res.end(data)
})//这个相当于后面一系列操作
// if(req.url=="/index.html"){
// fs.readFile(__dirname+"/index.html",(err,data)=>{
// res.end(data.toString())
// })//读取加载index.html文件
// }else if(req.url=="/img/18.jpg"){
// fs.readFile(__dirname+"/img/18.jpg",(err,data)=>{
// res.end(data)
// })//读取加载放在本地的图片
// }else if(req.url=="/css/index.css"){
// fs.readFile(__dirname+"/css/index.css",(err,data)=>{
// res.end(data)
// })//读取加载index.css文件
// }
// else if(req.url=="/font/daimeng.ttf"){
// fs.readFile(__dirname+"/font/daimeng.ttf",(err,data)=>{
// res.end(data)
// })//读取加载daimeng.ttf字体文件
// }
// else if(req.url=="/favicon.ico"){
// fs.readFile(__dirname+"/favicon.ico",(err,data)=>{
// res.end(data)
// })//读取加载favicon.ico网页图标
// }
// else if(req.url=="/car/index.html"){
// fs.readFile(__dirname+"/car/index.html",(err,data)=>{
// res.end(data)
// })//读取加载另一个index.html文件
// }
// else if(req.url=="/car/img/25.jpg"){
// fs.readFile(__dirname+"/car/img/25.jpg",(err,data)=>{
// res.end(data)
// })//读取加载另一个index.html文件的图片
// }
})
app.listen(8081)
5、url模块
网址的组成
协议://ip:port/pathname?querystring#hash ---协议 主机 端口 路径 查询参数 锚点
比如:http://192.168.5.10:8081/home/index.html?count=20&user=karen#top
url模块
主要摘自Node.js URL 模块 | 参考手册 (cankaoshouce.com)
URL 模块将 web 地址拆分为可读部分。
要引用 URL 模块, 需要使用 require()
方法:
var url = require('url');
使用 url.parse()
方法解析地址,它将返回一个 URL 对象,其中地址的每个部分都是它的属性:
var url = require('url');
var adr = 'http://localhost:8080/default.htm?year=2017&month=february';
var q = url.parse(adr, true);
console.log(q.host); //returns 'localhost:8080'
console.log(q.pathname); //returns '/default.htm'
console.log(q.search); //returns '?year=2017&month=february'
var qdata = q.query; //returns an object: { year: 2017, month: 'february' }
console.log(qdata.month); //returns 'february'
创建一个打开请求的文件并将内容返回给客户端的 Node.js 文件。如果出现问题,都抛出 404 错误:
var http = require("http")
var fs = require("fs")
var url = require("url")
var app = http.createServer((req, res) => {
console.log(req.url)
var path = url.parse(req.url).pathname //"/b.txt"
if(path=="/"){path="/b/index.html"}
fs.readFile(__dirname + "/src" + path, (err, data) => {
if (err) {
res.end("404 not found")
} else {
res.end(data)
}
})
})
app.listen(8081)
// 在node.js环境中 有两个全局变量 __dirname __filename
//1.他们保存的是字符串
//2.
//__dirname 当前js文件所在的目录:绝对路径
//__filename 当前js文件的目录:绝对路径
6、querystring模块
node:querystring
模块提供了用于解析和格式化网址查询字符串的实用工具
var querystring=require("querystring")
var obj=querystring.parse("username=jack&count=20&maxid=123456")
//obj[xxxx]
console.log(obj)
var str2=querystring.stringify({name:"jack",age:20})
var str3=JSON.stringify({name:"jack",age:20})
console.log(str2,str3)
7、mime模块
下载mime模块
npm i mime
使用
var re=mime.getExtension("text/css")
console.log(re)//打印类型后缀css
var re2=mime.getType("htpp://2342354345:8080/css/sadfsdgfdfg.ttf")
console.log(re2)//打印mime类型
8、各种路径(相对、绝对)
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,比如,你的Perl 程序是存放在 c:/apache/cgi-bin 下的,那么 c:/apache/cgi-bin就是cgi-bin目录的绝对路径
绝对网络路径
"协议://ip:port /src/news/src/18.jpg"
相对网络路径
当前页面的网址: "协议://ip:port /src/news/index.html querystring hash"
页面内部的路径:
"./src/18.jpg" ==> "协议://ip:port /src/news/src/18.jpg"
"src/18.jpg" ==> "协议://ip:port /src/news/src/18.jpg"
本地相对路径
在这个页面中写路径: file://x1/x2/x2/index.html
"./src/18.jpg" 写这个路径的文件的页面是在本地打开的==> file://x1/x2/x2/src/18.jpg
"src/18.jpg" 写这个路径的文件的页面是在本地打开的 ==> file://x1/x2/x2/src/18.jpg
本地绝对路径
从根盘符开始写路径
"C:/Users/Administrator/Desktop/%E4%BB%A3%E7%A0%81/14-%E5%90%84%E7%A7%8D%E8%B7%AF%E5%BE%84(%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9)/index.html"
9、网页的加载流程
浏览器是怎么加载网页的?
1、浏览器的地址栏,输入的网址,敲回车 ,会请求一次服务器;服务器会返回一个数据包,就是网页代码(html格式的文本文档)
2、浏览器开始去运行解析html文本(此时还没有外部 图片,js,css,字体库资源)
- 解析时 遇到了 img标签的src属性 会异步的 开始再次网络请求服务器 ,服务器返回数据包(图片编码) 然后渲染出来
- 解析时 遇到了link-href 会异步的 开始再次网络请求服务器 ,服务器返回数据包(css编码) 然后加载
- 解析时 xxxx-url会异步的 开始再次网络请求服务器 ,服务器返回数据包(对应编码) 然后加载
- 解析时script-src会异步的 开始再次网络请求服务器 ,服务器返回数据包(js编码) 然后用js引擎去执行编码
3、所有资源加载完毕了 才会触发window.onload