前端涨薪必读，node.js入门保姆级教程

Myth丶恋晨 2022-09-10 11:18 152阅读 0赞

### Node.js保姆级教程 ###

*   *  1. Node基本概念
     *  2. 第一个node.js程序
     *  3. node创建get请求
     *  4. node创建post请求

![在这里插入图片描述][30c1d00bc7b846aea2b648e3560a07fa.jpg]

## 1. Node基本概念 ##

> **1.1 node.js是什么?**

平常的js代码只能在浏览器运行，浏览器一关，就完犊子  
**Node.js 就是运行在服务端的 JavaScript**。

> **1.2 客户端与服务端交互流程**

node是运行在服务端的，所以必须了解这玩意  
![在这里插入图片描述][f4b9e8cd841a457c9b656421878c657d.png]

*  客户端向服务端发送请求
 *  服务端去数据库查询数据
 *  服务端返回给前端使用

**I/O**: input(输入), 往磁盘存数据，Output(输出)从磁盘中取数据

**1. 如何优化整个交互过程？**

*  咱们的**响应速度可以加快**，比如去银行办业务，平时办业务要半个小时，现在咱们如果3分钟就能办完，是不是更快了
 *  **服务器处理逻辑优化**，咱们可以做个档案啥的，比如说银行的系统查询速度，与人员是相互配合的
 *  **数据库优化**，换更好的数据库，更好的硬件支持

**2. 什么是I/O阻塞？**

*  传统的服务器是多线程的，什么叫多线程？举个生动的例子，比如咱们去大保健，非正规的，正规的咱们不去。那么是不是来一位客人，就要配一个技师，咱们一百个人去就要配一百个技师，这样体验是最好的对不，1对1服务
 *  放在服务器上，也是这样的，**进来一个请求就给你一个线程，专门处理这个请求，这样成本是很大的**，如果人来的多一点，那技师就忙不过来。那你就得等，这个就是I/O阻塞（对请求处理的不够及时）  
    ![在这里插入图片描述][ca935a0dfaf8467dbb2179bc92eb93ef.png]

> **1.3 node的牛逼之处在哪？**

*  node就是单线程的，但是他是个超级单线程，这个技师可能有很多手，  
    反正就是很牛逼，不管你来多少个人，我都可以服务，这下好了，客人不用等了，所以不会造成阻塞
 *  传统服务器对硬件要求很高，比如说大保健的地方需要配很多技师，如果没客人来，技师是不是浪费了  
    node.js单线程，就一个服务员，对服务器要求不高，成本更低

> **1.4 node也有缺点**

*  node毕竟是单线程，所以也会有个上限，举个例子，大家小时候应该知道那种声音很大的拖拉机它就是单缸的，马力很大，能上山能下地，能拉砖能栽树，开上他就是全村最靓的仔。  
    ![在这里插入图片描述][ecbfd88037504709a51dbcff9fb0f16e.png]
 *  node也是如此，只适合做一些用户量不多的服务端（人数多，做分布式也可以）
 *  目前最广泛的应用：中间层（在服务器与客户端加一层），比如淘宝，网易云音乐，都有node中间层
 *  Java多线程是优势，嗖嗖嗖的，贼拉快，服务端处理这块很优秀，但是对页面渲染就不行了，那咱们js不就是用来操作页面的，node又是用JS写的，所以加了一层，搭建一个node服务器成本也低，**专门用于渲染页面，以及一些高并发请求**  
    ![在这里插入图片描述][f9411e4cb31c4062a4b78f13e1d93bf1.png]

## 2. 第一个node.js程序 ##

console.log('hello node.js')
    console.log(this)   // this指向 {} node里面是没有window的
    
    for(let i = 0; i < 2; i++){ 
        console.log(i)
    }

使用node命令运行该文件即可，如(node hello.js)

## 3. node创建get请求 ##

// 做一个服务器，创建一个get请求
    const http = require('http');
    const querystring = require('querystring')
    // 创建服务
    const server = http.createServer((req, res) => { 
        // 请求参数
        const method = req.method;  
        console.log('method', method) // Get
        const url = req.url;
        console.log('url', url) 
    
        // 获取url里的参数
        // 自定义添加一个属性去接收
        req.query =  querystring.parse(url.split('?')[1])
        console.log('query', req.query)  // 这里是个对象，返回要转一下
        res.end(
            JSON.stringify(req.query)
        )
    })
    
    // 监听端口
    server.listen(8000, () => { 
        console.log('8000服务开启')
    })

*  大家运行文件之后，可以尝试浏览器直接访问本地的8000端口，后面加上 “/api/blog/list?author=ouyang&keyword=a”，就可以看到返回值

## 4. node创建post请求 ##

// 做一个服务器，创建一个请求
    const http = require('http');
    // 创建服务
    const server = http.createServer((req, res) => { 
        if(req.method === 'POST') { 
            let postData = '';  // 接受数据
            // 采用流的方式(stream) => 防止数据量过大，慢慢来流动
    
            req.on('data', chunk => { 
                // 一点一点拼接，数据是二进制的，转换成字符串
                postData += chunk.toString();
            })
    
            // 数据接受完毕，打印 
            req.on('end', () => { 
                console.log('postData', postData)
                res.end('数据接受完成！')
            })
    
            // 查询数据格式(默认的)
            console.log('post data type', req.headers['content-type'])
        }
    })
    
    server.listen(8000, () => { 
        console.log('8000')
    })

*  这里是post请求，不能在浏览器里输入得到结果
 *  大家可以借助Postman发起请求（如果不太懂，请科学上网）
 *  访问本地的8000端口即可

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我(主页有Q)**

![在这里插入图片描述][20210710213359459.png]

[30c1d00bc7b846aea2b648e3560a07fa.jpg]: /images/20220829/ae8f4bb5172f48be8210a22be9c73c93.png
[f4b9e8cd841a457c9b656421878c657d.png]: /images/20220829/92ae0b8836114b22b79b5f9b00beb708.png
[ca935a0dfaf8467dbb2179bc92eb93ef.png]: /images/20220829/1e3b4bf946fb419294d2a84a20076aeb.png
[ecbfd88037504709a51dbcff9fb0f16e.png]: /images/20220829/c0971acccc3745db9e2c0e708fc4b944.png
[f9411e4cb31c4062a4b78f13e1d93bf1.png]: /images/20220829/f14d607cad1d442f8a1e9e6ef19195b1.png
[20210710213359459.png]: /images/20220829/0e0302ab5ab84bdbbc2819c236060892.png