1.服务器端基础概念

1.1 网站的组成

  • 网站应用程序主要分为两大部分:客户端和服务器
  • 客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用html,css,JavaScript构建
  • 服务器端:在服务器中运行的部分,负责存储数据和处理应用程序

1.2 Node网站服务器

能够提供网站访问服务的机器就是网站服务器,它能够接收客户端的 请求、能够对请求做出 响应

1.3 IP

  • 互联网中设备的唯一标识
  • IP是Internet Protocol Address的简写,代表互联网协议地址

1.4 域名

  • 由于IP地址难于记忆,所以产生了域名的概念,所谓域名就是平时上网使用的地址
  • 虽然在地址栏中输入的是网址,但是最终还是会将域名转化为IP才能访问到指定的网站服务器

1.5 端口

  • 端口是计算机与外界通讯交流的出口,用来区分服务器电脑中提供的不同的服务。

1.6 URL

  • 统一资源定位符,又名URL(Uniform Resource Locator),是专为表示Internet网上资源位置而设的一种编址方式。

1.7 开发阶段客户端和服务器端的说明

  • 在开发阶段,客户端和服务器端使用同一台电脑,即开发人员电脑

2.创建web服务器(Node)

//引用系统模块
const http = require('http');
//创建web服务器
const app = http.createServer();
//当客户端发送请求的时候
app.on('request',(req,res) => {
    //响应
    res.end('<h1>hi,user</h1>')
});
//监听3000端口
app.listen(3000);
console.log("服务器已经启动,监听3000端口,请访问localhost:3000")

然后我们在当前目录输入命令行

nodemon app.js

之后在浏览器地址中输入 localhost:3000,就会出现如下图
1.PNG

3.HTTP协议

3.1 HTTP协议概念

超文本协议规定了如何从网站服务器传输超文本到本地浏览器,它基于客户端服务器架构工作,是客户端和服务器端请求和应答的标准

2.PNG

3.2 报文

在HTTP请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,并且要遵守规定好的格式

3.3 请求报文

  • 请求方式

    • Get
    • Post
  • 请求地址
app.on('request',(req,res) => {
    req.headers;//获取请求报文
    req.url;//获取请求地址
    req.method;//获取请求方式
});

3.4 响应报文

  • http状态码

    • 200 请求成功
    • 404 请求的资源没有被找到
    • 500 服务器错误
    • 400 客户端请求有语法错误
  • 内容类型

    • text/html
    • text/css
    • application/javascript
    • image/jpeg
    • application/json

4.HTTP请求与响应处理

4.1 请求参数

客户端向服务器端发送请求时,有时需要携带一些客户信息、客户信息需要通过请求参数的形式传递到服务器端,比如登录操作

4.2 GET请求参数

  • 参数被放置在浏览器地址中,例如:http://localhost:3000/ **?name=zhangsan&age=20
//引用系统模块http
const http = require('http');
//app就是网站服务器对象
const app = http.createServer();
//url模块
const url = require('url');
//当客户端有请求来的时候
app.on('request',(req,res) => {
    res.writeHead(200,{
        "content-type":"text/html;charset=utf8"
    });
    res.end("<h1>hi user</h1>");
    console.log(url.parse(req.url,true));
});
app.listen(3000);
console.log('服务器启动成功,访问localhost:3000')

4.3 POST请求参数

  • 参数被放置在请求体中进行传输
  • 获取POST参数需要使用data事件和end事件
  • 使用querystring系统模块中querystring.parse()将参数转换成对象格式
const app = http.createServer();
//处理请求参数模块
const queryString = require('querystring');
//url模块
const url = require('url');
//当客户端有请求来的时候
app.on('request',(req,res) => {
    //post参数是通过事件的方式接受的
    //data 当请求参数传递的时候触发data事件
    //end当参数传递完成的时候触发end事件
    let postPra = "";
    req.on('data',para => {
        postPra += para;
    });
    req.on('end',() => {
        console.log(queryString.parse(postPra));
    });
    res.end("ok");
});
app.listen(3000);
console.log('服务器启动成功,访问localhost:3000')

3.PNG

4.4 路由

  • 路由是指客户端请求地址与服务器端程序代码的队形关系、简单的说,就是请求什么响应什么
//当客户端发来请求的时候
//1.引入系统模块http
//2.创建网站服务器
//3.为网站服务器对象添加请求事件
//4.实现路由功能

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('服务器启动成功');

4.5静态资源

  • 服务器不需要处理,可以直接响应给客户端的资源就是静态资源,例如javascript、css、image文件

4.6动态资源

  • 相同的请求地址不同的响应资源,这种资源就是动态资源
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) => {
    //获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    pathname = pathname == '/' ? '/index.html' : pathname;

    //将用户的请求路径转换为实际的服务器硬盘路径
    let realPath = path.join(__dirname,'public' + pathname);

    let type = mime.getType(realPath);
    //读取文件
    fs.readFile(realPath, (error, result) => {
        if(error != null) {
            es.writeHead(200,{
            'content-type': 'text/html;charset=utf8'
        });
            res.end('文件访问失败');
            return;
        }
        res.writeHead(200,{
            'content-type': type
        });
        res.end(result);
    });


});
app.listen(3000);
console.log('服务器启动成功');

5.Node.js异步编程

5.1 同步API、异步API

  • 同步API:只有当前API执行完成后,才能执行下一个API
  • 异步API:当前API的执行,不会阻塞后续代码的执行

5.2 同步API和异步API的区别

同步API可以从返回值中拿到API执行结果,但是异步API是不可以的

function getMsg() {
    setTimeout(function() {
        return {
            msg: 'hello node.js'
        }
    })
}

const msg = getMsg();
console.log(msg);//undefined

5.3 回调函数

自己定义函数让别人去调用

//getDate函数定义
function getDate (callback){}
//getDate函数调用
getDate(() => {});
function getMsg(callback) {
    setTimeout(function() {
        callback({
            msg: 'hello node.js'
        })
    })
}

getMsg((date) => {
    console.log(date);
});

5.4 同步API与异步API的区别(执行代码顺序)

  • 同步API从上到下一次执行,前面代码会阻塞后面代码的执行
  • 异步API不会等待API执行完成后再向下执行代码

5.5 Node.js中的异步API

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文件

回调地狱:回调一层嵌套一层

const fs = require('fs');

fs.readFile('./1.txt','utf8',(err,result) => {
    console.log(result);
    fs.readFile('./2.txt','utf8',(err,result1) => {
        console.log(result1);
        fs.readFile('./3.txt','utf8',(err,result2) => {
            console.log(result2);
        })
    });
});

5.6 Promise

Promise出现的目的是解决Node.js异步编程中回调地狱的问题

const fs = require('fs');

let promise = new Promise((resolve,reject) => {

    fs.readFile('./4.txt','utf8',(err,result) => {
        if(err != null) {
            reject(err)
        } else {
            resolve(result);
        }
    });
});
promise.then((result) => {
    console.log(result);
})
.catch((err) => {
    console.log(err)
});`

5.7 Promise解决回调地狱的问题

const fs = require('fs');
function p1(){
    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(result1 => {
    console.log(result1);
    return p2();
}).then(result2 => {
    console.log(result2);
    return p3();
}).then(result3 => {
    console.log(result3);
})

5.8 异步函数

异步函数是异步编程语法的中级解决方案,它可以让我们将异步代码写成同步的形状,让代码不再有回调函数嵌套,使代码变得清晰明了

const fn = async () => {};
async function fn() {}
  • async关键字
    1.在普通函数定义的前面加上async关键字,普通函数就变成了异步函数

2.异步函数默认的返回值是promise对象
3.在异步函数中使用return关键字进行结果返回,结果会被包裹的promise对象中,return关键字代替了resolve方法
4.在异步函数中使用throw关键字进行错误的抛出
5.调用异步函数再链式调用then方法获取异步函数执行结果
6.调用异步函数再链式调用catch方法获取异步函数执行的错误信息

  • await关键字
    1.await关键字只能出现在异步函数中

2.await promise await后面只能写promise对象,写其他类型的API是不可行的
3.await关键字是暂停异步函数向下执行,直到promise返回结果

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();
Last modification:April 2nd, 2020 at 01:08 am
如果觉得我的文章对你有用,请随意赞赏