前端涨薪必读,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端口即可



目录
相关文章
|
9天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
235 91
|
9天前
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
45 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
9天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
43 28
|
8天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
8天前
|
前端开发
|
8天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
8天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`&lt;li&gt;`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
|
8天前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分,包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距,并解释了尺寸计算方法和版心居中的技巧。内容丰富,示例清晰,有助于理解盒子模型在网页布局中的应用。
|
8天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
8天前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。