2021.3.1
网站应用程序主要分为两大部分:客户端和服务器端。
客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。
服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。
能够提供网站访问服务的机器就是网站服务器,它能够接受客户的请求,也能够对请求做出响应。
互联网中设备的唯一标识。
IP是Internet Protocol Address的简写,代表互联网协议地址。
由于IP地址难于记忆,所以产生了域名的概念,所谓域名就是平时上网所使用的网址,其与IP是一一对应的关系。
www.baidu.com------>202.108.22.5
虽然在地址栏输入的是网址,但是最终还是会将域名转换为ip才能访问到指定的网站服务器。
端口是计算机与外界通讯交流的出口,用来区分服务器电脑中提供的不同的服务。
在一台服务器中,可以提供很多种服务,比如网站服务、比如邮件服务、比如文件上传下载服务,当客户端通过IP,找到服务器端电脑以后,服务器端怎样知道你想找他提供哪种服务呢?此时端口就出现了。
//引用系统模块
const http=require('http');
//创建web服务器,createServer()有个返回值,就是服务器对象
const app=http.createServer();
//Node.js也是基于事件驱动的语言
//当客户端发送请求的时候
app.on('request',(req,res)=>{
//响应请求,res是response对象
res.end('hi,user
');
});
//监听3000端口
app.listen(3000);
console.log('服务器已启动,监听3000端口,请访问localhost:3000')
在命令行中切换到当前文件夹下,使用nodemon .\app.js
执行当前文件,如果出现防火墙提示信息则允许访问,之后打开浏览器输入http://localhost:3000/
,这是一个特殊的域名,localhost代表自己的电脑。
HTTP协议:超文本传输协议(HyperText Transfer Protocol)规定了如何从网站服务器传输超文本到本地浏览器,它基于客户端服务器架构工作,是客户端(用户)和服务器端(网站)请求和应答的标准。
在HTTP请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,并且要遵守规定好的格式。
在浏览器中按f12
点击network
可以看见报文。
请求方式(Request Method)
在服务器端可以通过req.method
获取客户端的请求方式。然后可以根据请求方式的不同去做不同的事情。
请求地址(Request URL)
app.on('request',(reg,res)=>{
req.headers;//获取请求报文
req.url;//获取请求地址
req.method;//获取请求方式
});
HTTP状态码
在浏览器f12–>network–>status可以看到这个状态码
内容类型
app.on('request', (req, res) => {
//获取请求方式req.method
//console.log(req.method);
//获取请求地址 req.url
//console.log(req.url);
//获取请求报文信息 req.headers
//console.log(req.headers);
//写状态码
res.writeHead(200, {
//'content-type': 'text/plain' //plain代表纯文本
'content-type': 'text/html;charset=utf8'
});
console.log(req.headers['accept']);
if (req.url == '/index' || req.url == '/') {
//res.end('welcome to homepage
');
res.end('welcome to 首页
');
} else if (req.url == '/list') {
res.end('welcome to listpage');
} else {
res.end('not found');
}
});
客户端向服务器端发送请求的时候,有时需要携带一些客户信息,客户信息需要通过请求参数的形式传递到服务器端,比如登录操作。
const http = require('http');
//用于处理url地址
const url = require('url')
const app = http.createServer();
app.on('request', (req, res) => {
console.log(req.url);
//第一个参数:要解析的url地址
//第二个参数:将查询参数解析成对象形式,布尔值,默认false
//console.log(url.parse(req.url, true).query);
//let params = url.parse(req.url, true).query;
//采用对象解构
let { query, pathname } = url.parse(req.url, true);
console.log(query.name);
console.log(query.age);
if (pathname == '/index' || pathname == '/') {
//res.end('welcome to homepage
');
res.end('welcome to 首页
');
} else if (pathname == '/list') {
res.end('welcome to listpage');
} else {
res.end('not found');
}
});
//监听端口
app.listen(3000);
console.log('网站服务器启动成功');
//导入系统模块querystring用于将HTTP参数转换为对象格式
const querystring = require('querystring');
//为网站服务器添加一个请求事件
app.on('request', (req, res) => {
//post参数是通过事件的方式接受的
//事件名称分别是data事件和end事件
//data 当请求参数传递的时候触发data事件
//end 当请求参数传递完成的时候触发end事件
let postParams = '';
req.on('data', params => {
postParams += params
});
req.on('end', () => {
console.log(querystring.parse(postParams));
});
res.end('ok');
});
路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说,就是请求什么响应什么。
实际上路由就是一堆判断代码,判断客户端请求的地址是什么,然后调用服务器端处理程序对应代码。
//当客户端发来请求的时候
app.on('request',(req,res)=>{
//获取客户端的请求路径
let{pathname}=url.parse(req.url);
if(pathname=='/'||pathname=='/index'){
res.end('欢迎来到首页');
}else if(pathname=='/list'){
res.end('欢迎来到列表页面');
}else{
res.end('抱歉,您访问的页面出游了');
}
})
route>app.js
//1.引入系统模块http
//2.创建网站服务器
//3.为网站服务器对象添加请求事件
//4.实现路由功能
//4.1)获取客户端的请求方式
//4.2)获取客户端的请求地址
const http = require('http');
const url = require('url');
const app = http.createServer();
app.on('request', (req, res) => {
//获取请求方式
const method = req.method.toLowerCase(); //转换成小写
//获取请求地址
const pathname = url.parse(req.url).pathname;
//响应报文的处理,不让中文乱码
res.writeHead(200, {
'content-type': 'text/html;charset=utf8'
})
if (method == 'get') {
if (pathname == '/' || pathname == '/index') {
res.end('欢迎来到首页')
} else if (pathname == '/list') {
res.end('欢迎来到列表页')
} else {
res.end('您访问的页面不存在')
}
} else if (method == 'post') {
}
})
app.listen(3000);
console.log('服务器启动成功');
服务器端不需要处理,可以直接响应给客户端的就是静态资源,如CSS、JavaScript、image文件。
const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');
const app = http.createServer();
app.on('request', (req, res) => {
//res.end(url.parse(req.url).pathname);
//获取用户的请求路径
let pathname = url.parse(req.url).pathname;
pathname = pathname == '/' ? '/default.html' : pathname;
//将用户的请求路径转换为实际的服务器硬盘路径
let realPath = path.join(__dirname, 'public', pathname)
let type = mime.getType();
//读取文件
fs.readFile(realPath, (error, result) => {
//如果文件读取失败
if (error != null) {
res.writeHead(404, {
'content-type': 'text/html;charset=utf8'
})
res.end('文件读取失败');
return;
}
res.writeHead(200, {
'content-type': type
})
res.end(result);
})
});
app.listen(3000);
console.log('服务器启动成功');
//路径拼接
const public=path.join(__dirname,'public');
//请求地址解析
const urlObj=url.parse(req.url);
//读取文件
fs.readFile('./demo.txt','utf8',(err,result)=>{
console.log(result);
})
同步API:只有当前API执行完成之后,才能继续执行下一个API(sync同步)。
console.log('before');
console.log('after');
异步API:当前API的执行不会阻塞后续代码的执行(async异步)。
console.log('before');
setTimeout(()=>{
console.log('last');
},2000)
console.log('after');
同步API可以从返回值中拿到API执行的结果,但是异步API是不可以的。
//同步
function sum(n1,n2){
return n1+n2;
}
const result=sum(10,20);
//异步
function getMsg(){
setTimeout(function(){
return {msg:'Hello Node.js'}
},2000);
}
const msg=getMsg();
自己定义函数让别人去调用。
//callback是形参,实参实际上是一个函数,将一个函数作为零一个函数的参数
//callback所对应的函数就是回调函数
//getData函数定义
function getData(callback){}
//getData函数调用
getData(()=>{});
实例:
function getData(callback) {
callback(123);
}
getData(function(n) {
console.log('callback函数被调用了');
console.log(n);
})
异步API中我们不能通过返回值去拿结果,只能通过回调函数callback去取得结果。
function getMsg(callback) {
setTimeout(function() {
callback({
msg: 'hello node.js'
})
}, 2000)
}
getMsg(function(data) {
console.log(data);
})
同步API从上到下依次执行,前面代码会阻塞后面代码的执行。
for(var i=0;i<10000000;i++){
console.log(i);
}
console.log('for循环后面的代码');
异步API不会等待API执行完成后再向下执行代码
console.log('代码开始执行');
setTimeout(()=>{console.log('2秒后执行的代码')},2000);
setTimeout(()=>{console.log('0秒后执行的代码')},0);
console.log('代码执行结束');
/* 码开始执行
代码执行结束
0秒后执行的代码
2秒后执行的代码 */
fs.readFile('./demo.txt',(err,result)=>{});
var server=http.createServer();
server.on('request',(req,res)=>{});
一个问题:如果异步API后面的代码执行依赖当前异步API的执行结果,但实际上后续代码在执行的时候异步API还没有返回结果,这个问题如何解决?比如:
fs.readFile('./demo.txt',(err,result)=>{});
console.log('文件读取结果');
需求:依次读取A文件、B文件、C文件
//回调地狱 callbackhell.js
const fs = require('fs');
fs.readFile('./1.txt', 'utf8', (err, result1) => {
console.log(result1);
fs.readFile('./2.txt', 'utf8', (err, result2) => {
console.log(result2);
fs.readFile('./3.txt', 'utf8', (err, result3) => {
console.log(result3);
})
})
})
Promise出现的目的是解决Node.js异步编程中的回调地狱的问题。
帮助我们做到异步API的执行和结果处理的一个分离。
基础语法
let promise=new Promise((resolve,reject)=>{
setTimeout(()=>{
if(true){
resolve({name:'张三'})
}else{
reject('失败了')
}
},2000);
});
promise.then(result=>console.log(result);)//{name:'张三'}
.catch(error=>console.log(error);)//失败了
那么在promise的外面,我们怎样才能拿到这个异步API的执行结果呢?
注意,我们在new Promise()以后,我们得到了一个promise的实例对象,在promise这个实例对象下面我们有一个then方法,then有然后的意思,在then方法里面我们要传递一个函数,当异步API执行完成的时候,我们调用resolve这个参数,那么调用resolve实际是执行then里面的回调函数,这是获取成功里的结果。如果失败了,我们调用了reject,promise下我们除了then方法以外,还给我们提供了一个catch方法,catch方法里面也需要传递一个函数,我们调用reject实际上调用的就是catch这个方法内部的这个函数。我们在这个函数里面就能拿到失败的信息了。promise允许链式编程,在.then
后面再有一个.catch
。
我们把异步API的执行和结果实现了一个分离:
const fs = require('fs');
const { resourceLimits } = require('worker_threads');
let promise = new Promise((resolve, reject) => {
fs.readFile('./1.txt', 'utf8', (err, result) => {
if (err != null) {
reject(err)
} else {
resolve(result);
}
});
});
promise.then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
})
那么如何用promise来解决回调地狱的问题呢?
如果我们想用promise去解决回调地狱的问题,首先我们要看,这个回调地狱中有多少个异步API,有三个异步API,我们就需要三个promise对象。我们在第一个promise对象里去读取第一个文件,以此类推。
//promise解决回调地狱 promise.js
const fs = require('fs');
/* fs.readFile('./1.txt', 'utf8', (err, result1) => {
console.log(result1);
fs.readFile('./2.txt', 'utf8', (err, result2) => {
console.log(result2);
fs.readFile('./3.txt', 'utf8', (err, result3) => {
console.log(result3);
})
})
}) */
function p1() {
//let p1 = new Promise((resolve, reject) => {
return new Promise((resolve, reject) => {
fs.readFile('./1.txt', 'utf8', (err, result) => {
resolve(result);
})
})
}
function p2() {
return new Promise((resolve, reject) => {
fs.readFile('./2.txt', 'utf8', (err, result) => {
resolve(result);
})
})
}
function p3() {
return new Promise((resolve, reject) => {
fs.readFile('./3.txt', 'utf8', (err, result) => {
resolve(result);
})
})
}
p1().then((r1) => {
console.log(r1);
return p2();
}).then((r2) => {
console.log(r2);
return p3();
}).then((r3) => {
console.log(r3);
return p3();
})
异步函数是异步编程语法的终极解决方案,它可以让我们将异步代码写成同步的形式,让代码不再有回调函数嵌套,使代码变得清晰明了。
异步函数基础语法:
const fn=async()=>{};
async function fn(){};
所谓异步函数,就是在普通函数定义的前面加上关键字,async这个关键字实际上就是异步的意思,加上async这个关键字之后,普通函数就变成了异步函数。
实例:
//asyncFunction.js
async function fn() {
//return new Promise();
throw '发生了一些错误';
return 123;
//我们现在使用了return这个关键字替代了原有的resolve方法
}
//console.log(fn());
fn().then(function(data) {
console.log(data);
}).catch(function(err) {
console.log(err);
})
async关键字
async关键字
,普通函数就变成了异步函数promise对象
return关键字
进行结果返回,结果会包裹在promise对象中,我们使用return关键字代替了resolve方法throw关键字
抛出程序异常链式调用then方法
可以获取异步函数执行结果链式调用catch方法
可以获取异步函数执行的错误信息await关键字
await promise
:await后面只能写promise对象,写其他类型的API不可以async function p1() {
return 'p1';
}
async function p2() {
return 'p2';
}
async function p3() {
return 'p3';
}
//异步操作写成了同步代码的格式
async function run() {
let r1 = await p1();
let r2 = await p2();
let r3 = await p3();
console.log(r1);
console.log(r2);
console.log(r3);
}
run();
使用异步函数解决依次读取A、B、C三个文件
const fs = require('fs');
//改变现有异步函数api,让其返回promise对象,从而支持异步函数语法
const promisify = require('util').promisify;
//调用promisify方法改造现有异步api,让其返回promise对象
const readFile = promisify(fs.readFile);
async function run() {
let r1 = await readFile('./1.txt', 'utf8');
let r2 = await readFile('./2.txt', 'utf8');
let r3 = await readFile('./3.txt', 'utf8');
console.log(r1);
console.log(r2);
console.log(r3);
}
run();