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

简介: 笔记

20.jpg

1. Node基本概念


1.1 node.js是什么?

平常的js代码只能在浏览器运行,浏览器一关,就完犊子

Node.js 就是运行在服务端的 JavaScript

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

node是运行在服务端的,所以必须了解这玩意

21.png


客户端向服务端发送请求

服务端去数据库查询数据

服务端返回给前端使用

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


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


咱们的响应速度可以加快,比如去银行办业务,平时办业务要半个小时,现在咱们如果3分钟就能办完,是不是更快了

服务器处理逻辑优化,咱们可以做个档案啥的,比如说银行的系统查询速度,与人员是相互配合的

数据库优化,换更好的数据库,更好的硬件支持

2. 什么是I/O阻塞?


传统的服务器是多线程的,什么叫多线程?举个生动的例子,比如咱们去大保健,非正规的,正规的咱们不去。那么是不是来一位客人,就要配一个技师,咱们一百个人去就要配一百个技师,这样体验是最好的对不,1对1服务


放在服务器上,也是这样的,进来一个请求就给你一个线程,专门处理这个请求,这样成本是很大的,如果人来的多一点,那技师就忙不过来。那你就得等,这个就是I/O阻塞(对请求处理的不够及时)


22.png


1.3 node的牛逼之处在哪?


node就是单线程的,但是他是个超级单线程,这个技师可能有很多手,

反正就是很牛逼,不管你来多少个人,我都可以服务,这下好了,客人不用等了,所以不会造成阻塞

传统服务器对硬件要求很高,比如说大保健的地方需要配很多技师,如果没客人来,技师是不是浪费了

node.js单线程,就一个服务员,对服务器要求不高,成本更低

1.4 node也有缺点


node毕竟是单线程,所以也会有个上限,举个例子,大家小时候应该知道那种声音很大的拖拉机它就是单缸的,马力很大,能上山能下地,能拉砖能栽树,开上他就是全村最靓的仔。


23.png


node也是如此,只适合做一些用户量不多的服务端(人数多,做分布式也可以)


目前最广泛的应用:中间层(在服务器与客户端加一层),比如淘宝,网易云音乐,都有node中间层


Java多线程是优势,嗖嗖嗖的,贼拉快,服务端处理这块很优秀,但是对页面渲染就不行了,那咱们js不就是用来操作页面的,node又是用JS写的,所以加了一层,搭建一个node服务器成本也低,专门用于渲染页面,以及一些高并发请求


24.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端口即可



目录
相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
28 2
2024年5月node.js安装(winmac系统)保姆级教程
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
20 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
87 10
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
47 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
35 1