什么?js前后端通吃? —— node.js教程

今天一起来学习一下node.js吧!

node.js教程

    • js运行环境
      • 前端js
      • 后端js
    • js学习路径
    • node.js三种执行方法
    • 4个快捷键
    • fs文件操作
      • readFile示例
      • writeFile示例
      • fs使用步骤
    • path路径操作
      • __dirname
      • path.join()
      • path.basename()
      • path.extname()
    • http服务器操作
      • http使用步骤
    • 模块化
      • 模块分类
      • 模块作用域
      • module.exports对象
      • exports对象
      • CommonJs规范
    • 包与npm
    • express模块
      • nodemon
      • 路由
      • 中间件
      • cors
    • mysql模块
      • 插入数据
      • 更新数据
      • 删除数据
      • 开发模式
    • 身份认证
      • Cookie
      • Session
      • JWT

js运行环境

前端js

我们都知道javascript是前端三剑客之一,那么请思考一下,为什么js能在浏览器执行呢?那是因为浏览器中有js的解析引擎!接下来我们以谷歌浏览器为例,一起看一下浏览器中是如何执行js代码的吧。
什么?js前后端通吃? —— node.js教程_第1张图片
根据上图,我们可以看到,待执行的js代码,会交给对应的浏览器js引擎进行解析,另外我们还可以看到,待执行的代码中会调用一些内置的API,诸如DOM、BOM等,那这又是为什么呢?
什么?js前后端通吃? —— node.js教程_第2张图片
这是因为每一个浏览器都内置了DOM、BOM这样的API函数,所以js在浏览器环境中可以调用这些内置函数,并且将待执行的js代码交给js解析引擎,这样就可以在浏览器中运行js了。

后端js

我们已经知道js可以做前端开发,那么js是否可以做后端开发呢?答案是当然可以!

前端js环境是浏览器,后端js环境就是node环境。

Node.js是一个基于Chorme V8引擎的js运行环境。

什么?js前后端通吃? —— node.js教程_第3张图片
所以,如果我们将js放在浏览器执行,就是做前端开发,如果我们将js放在node执行,就是做后端开发。

它们都使用的是V8引擎,这是因为V8引擎解析js效果相对最好。
什么?js前后端通吃? —— node.js教程_第4张图片

js学习路径

Js学习路径:Js基础语法——内置API(DOM、BOM)——第三方库(JQuery)。

Node.js学习路径:Js基础语法——内置API(fs、path、http)——第三方模块(express、mysql)。

node.js三种执行方法

  • cmd:切到js所在文件夹,使用node js文件名来执行。
  • powershell:js所在文件夹位置右键,使用node js文件名来执行。
  • vscode:在vscode中打开对应js文件,新建终端来执行。

上述三种方法,①和②均适合初学者使用,但是①需要切换到对应的js目录,而②可以直接打开定位到对应的目录,但是熟悉vscode的推荐大家使用③奥。

4个快捷键

  1. 上箭头
    上箭头可以快速定位到上一次执行的命令(如果更改文件后,想重新执行上一次的命令)。
  2. tab
    tab可以快速补全路径(如果文件名较长,则可以敲一个文件名的起始字母)。
  3. esc
    esc可以快速清空当前输入的命令(只清空当前命令)。
  4. cls
    cls可以快速清空终端(清空整个终端)。
    什么?js前后端通吃? —— node.js教程_第5张图片

fs文件操作

fs文件操作,主要是文件的读写操作。

由于fs是node.js的内置模块,所以需要使用fs时,可以直接导入,而不需要额外去下载。

fs模块导入命令如下:

const fs=require('fs')

什么?js前后端通吃? —— node.js教程_第6张图片

readFile示例

什么?js前后端通吃? —— node.js教程_第7张图片

什么?js前后端通吃? —— node.js教程_第8张图片
由于err对象在成功和失败时内容不同,故可以通过err判断文件是否读取成功。

什么?js前后端通吃? —— node.js教程_第9张图片

writeFile示例

什么?js前后端通吃? —— node.js教程_第10张图片
什么?js前后端通吃? —— node.js教程_第11张图片

同样,可以通过err的内容来判断文件是否写入成功。

什么?js前后端通吃? —— node.js教程_第12张图片

fs使用步骤

综上所述,我们可知,fs读写操作一般都是,先导入fs模块,然后再使用readFile方法读取文件,并且根据err进行判断是否读取成功,再对数据进行处理操作后,再使用writeFile方法写入文件,同样使用err进行判断是否写入成功,即可。

什么?js前后端通吃? —— node.js教程_第13张图片
什么?js前后端通吃? —— node.js教程_第14张图片

path路径操作

文件路径一般包括相对路径(从当前文件开始)和绝对路径(从根目录开始),但是如果直接写这两种路径,有时候会出现问题,所以我们引入了path路径操作模块。

由于path也是内置模块,所以需要使用时,直接使用下述命令导入即可。

const path = require('path')

__dirname

一般使用__dirname表示当前目录,而不使用相对路径./或者…/。
什么?js前后端通吃? —— node.js教程_第15张图片
什么?js前后端通吃? —— node.js教程_第16张图片

path.join()

什么?js前后端通吃? —— node.js教程_第17张图片

path.basename()

什么?js前后端通吃? —— node.js教程_第18张图片
path.basename()用于解析路径的最后一部分,但是如果在后面再加上文件名后缀,那么就会解析除了后缀的文件名。
什么?js前后端通吃? —— node.js教程_第19张图片

path.extname()

什么?js前后端通吃? —— node.js教程_第20张图片

http服务器操作

我们学习计算机网络的时候,应该知道一个概念,叫做客户端和服务器,那么客户端和服务器有什么区别呢?
在这里插入图片描述

http模块,主要是用来创建web服务器的模块。
什么?js前后端通吃? —— node.js教程_第21张图片
怎么使用http快速创建一个服务器实例呢?
什么?js前后端通吃? —— node.js教程_第22张图片
我们都知道,浏览器会给服务器发送请求,这个怎么实现呢?
什么?js前后端通吃? —— node.js教程_第23张图片
我们可以看到这个回调函数的参数中有一个req和res,我们可以利用该参数访问客户端或者服务器的相关属性。
什么?js前后端通吃? —— node.js教程_第24张图片
什么?js前后端通吃? —— node.js教程_第25张图片
什么?js前后端通吃? —— node.js教程_第26张图片

监听到请求后,怎么启动服务器呢?
什么?js前后端通吃? —— node.js教程_第27张图片

http使用步骤

为此,我们也可以来总结一下http模块的使用步骤。

首先导入http模块,创建一个web服务器实例,然后使用on方法绑定request请求,最终再使用listen方法启动服务器,即可。
什么?js前后端通吃? —— node.js教程_第28张图片
http模块可以用于实现,对于用户请求的不同url地址,响应对应的页面或者内容。
什么?js前后端通吃? —— node.js教程_第29张图片
什么?js前后端通吃? —— node.js教程_第30张图片

模块化

我们在es6中也了解过模块化的概念,现在在node中再温故一下。
什么?js前后端通吃? —— node.js教程_第31张图片

模块分类

node.js中有三类模块:内置模块、自定义模块、第三方模块。其均是使用require进行导入,但是会存在细微差别。
什么?js前后端通吃? —— node.js教程_第32张图片

模块作用域

之前我们学过全局作用域、局部作用域、块作用域,今天我们来看看模块作用域。
什么?js前后端通吃? —— node.js教程_第33张图片

module.exports对象

什么?js前后端通吃? —— node.js教程_第34张图片

exports对象

什么?js前后端通吃? —— node.js教程_第35张图片
exports对象是简写方式,默认是和module.exports对象一样,但是注意使用内存分配的方式来理解,最终到底共享的是对象module.exports对象是什么内容。

CommonJs规范

什么?js前后端通吃? —— node.js教程_第36张图片

包与npm

在做前端项目时,如果我们使用npm安装了相关包,项目文件夹下会出现node_modules文件夹和package-lock.json文件,那么这些都是用来干什么的呢?
什么?js前后端通吃? —— node.js教程_第37张图片
每次安装对应包的时候,还会涉及到包的版本,版本信息是由什么构成的呢?
什么?js前后端通吃? —— node.js教程_第38张图片
除了package-lock.json文件还有package.json文件,这两个有什么区别呢?
什么?js前后端通吃? —— node.js教程_第39张图片
什么?js前后端通吃? —— node.js教程_第40张图片
一般node_modules文件夹较大,故我们将项目发给别人时,都不发node_modules文件夹,而是对方接收package.json文件后,再根据对应的包信息去全部下载。
什么?js前后端通吃? —— node.js教程_第41张图片
什么?js前后端通吃? —— node.js教程_第42张图片
有些包只会在开发阶段使用,而有些包是开发和上线阶段都会使用,那么怎么进行区分呢?
什么?js前后端通吃? —— node.js教程_第43张图片
都说镜像下载更快,那么镜像是什么呢?
什么?js前后端通吃? —— node.js教程_第44张图片

什么?js前后端通吃? —— node.js教程_第45张图片
什么?js前后端通吃? —— node.js教程_第46张图片
什么?js前后端通吃? —— node.js教程_第47张图片
什么?js前后端通吃? —— node.js教程_第48张图片
什么?js前后端通吃? —— node.js教程_第49张图片
什么?js前后端通吃? —— node.js教程_第50张图片
包的加载机制是什么呢?
什么?js前后端通吃? —— node.js教程_第51张图片
什么?js前后端通吃? —— node.js教程_第52张图片

什么?js前后端通吃? —— node.js教程_第53张图片
什么?js前后端通吃? —— node.js教程_第54张图片
什么?js前后端通吃? —— node.js教程_第55张图片

express模块

什么是express呢?
什么?js前后端通吃? —— node.js教程_第56张图片
常见的服务器分为哪两种呢?

什么?js前后端通吃? —— node.js教程_第57张图片
前面我们学习过使用http模块如何创建服务器实例,现在我们来看看express如何更快的创建服务器实例呢?
什么?js前后端通吃? —— node.js教程_第58张图片
express如何监听get和post请求呢?
什么?js前后端通吃? —— node.js教程_第59张图片
什么?js前后端通吃? —— node.js教程_第60张图片
express如何将服务器内容发送给客户端呢?
什么?js前后端通吃? —— node.js教程_第61张图片
express中如何将客户端查询参数发给服务器呢?
什么?js前后端通吃? —— node.js教程_第62张图片
什么?js前后端通吃? —— node.js教程_第63张图片
express中如何使外界访问指定目录下的静态资源呢?
什么?js前后端通吃? —— node.js教程_第64张图片

如果有多个静态资源文件夹咋整呢?

什么?js前后端通吃? —— node.js教程_第65张图片
在这里插入图片描述

nodemon

nodemon工具主要用来帮助我们重启项目,这样就可以在项目文件变动时,不用关掉重启。
在这里插入图片描述
什么?js前后端通吃? —— node.js教程_第66张图片
什么?js前后端通吃? —— node.js教程_第67张图片

路由

路由是什么?路由是映射关系!怎么理解?
什么?js前后端通吃? —— node.js教程_第68张图片
express中的路由是什么呢?
什么?js前后端通吃? —— node.js教程_第69张图片
那么路由是如何匹配的呢?
什么?js前后端通吃? —— node.js教程_第70张图片

最简单的路由挂载方式:
什么?js前后端通吃? —— node.js教程_第71张图片

为了方便路由的管理,路由的改进方式:
什么?js前后端通吃? —— node.js教程_第72张图片
使用单独的路由对象,在路由对象上挂载路由,然后再导出共享使用。
什么?js前后端通吃? —— node.js教程_第73张图片
app.use()的作用就是注册全局中间件。

在这里插入图片描述
那么如何导入路由模块使用呢?
在这里插入图片描述

中间件

中间件是什么呢?
什么?js前后端通吃? —— node.js教程_第74张图片
可以理解为中间件是对请求进行预处理。
什么?js前后端通吃? —— node.js教程_第75张图片
中间件本身是一个函数。
什么?js前后端通吃? —— node.js教程_第76张图片
next是中间件连续调用的关键。
什么?js前后端通吃? —— node.js教程_第77张图片
全局中间件。
在这里插入图片描述
中间件共享req和res。
什么?js前后端通吃? —— node.js教程_第78张图片

局部中间件。
什么?js前后端通吃? —— node.js教程_第79张图片
什么?js前后端通吃? —— node.js教程_第80张图片
中间件注意事项。
什么?js前后端通吃? —— node.js教程_第81张图片
五大中间件。
什么?js前后端通吃? —— node.js教程_第82张图片
什么?js前后端通吃? —— node.js教程_第83张图片什么?js前后端通吃? —— node.js教程_第84张图片
什么?js前后端通吃? —— node.js教程_第85张图片
什么?js前后端通吃? —— node.js教程_第86张图片
什么?js前后端通吃? —— node.js教程_第87张图片
什么?js前后端通吃? —— node.js教程_第88张图片
什么?js前后端通吃? —— node.js教程_第89张图片

cors

什么?js前后端通吃? —— node.js教程_第90张图片
什么?js前后端通吃? —— node.js教程_第91张图片
什么?js前后端通吃? —— node.js教程_第92张图片
什么?js前后端通吃? —— node.js教程_第93张图片
在这里插入图片描述
什么?js前后端通吃? —— node.js教程_第94张图片
什么?js前后端通吃? —— node.js教程_第95张图片
什么?js前后端通吃? —— node.js教程_第96张图片
什么?js前后端通吃? —— node.js教程_第97张图片
什么?js前后端通吃? —— node.js教程_第98张图片

mysql模块

在项目中使用mysql的步骤:
什么?js前后端通吃? —— node.js教程_第99张图片
什么?js前后端通吃? —— node.js教程_第100张图片
什么?js前后端通吃? —— node.js教程_第101张图片
什么?js前后端通吃? —— node.js教程_第102张图片

插入数据

什么?js前后端通吃? —— node.js教程_第103张图片
什么?js前后端通吃? —— node.js教程_第104张图片

更新数据

什么?js前后端通吃? —— node.js教程_第105张图片
什么?js前后端通吃? —— node.js教程_第106张图片

删除数据

什么?js前后端通吃? —— node.js教程_第107张图片
什么?js前后端通吃? —— node.js教程_第108张图片

开发模式

什么?js前后端通吃? —— node.js教程_第109张图片
什么?js前后端通吃? —— node.js教程_第110张图片
什么?js前后端通吃? —— node.js教程_第111张图片
什么?js前后端通吃? —— node.js教程_第112张图片
什么?js前后端通吃? —— node.js教程_第113张图片

身份认证

什么?js前后端通吃? —— node.js教程_第114张图片
什么?js前后端通吃? —— node.js教程_第115张图片
什么?js前后端通吃? —— node.js教程_第116张图片

Cookie

什么?js前后端通吃? —— node.js教程_第117张图片
什么?js前后端通吃? —— node.js教程_第118张图片
什么?js前后端通吃? —— node.js教程_第119张图片
什么?js前后端通吃? —— node.js教程_第120张图片

Session

什么?js前后端通吃? —— node.js教程_第121张图片
什么?js前后端通吃? —— node.js教程_第122张图片
在这里插入图片描述
什么?js前后端通吃? —— node.js教程_第123张图片
什么?js前后端通吃? —— node.js教程_第124张图片

什么?js前后端通吃? —— node.js教程_第125张图片

什么?js前后端通吃? —— node.js教程_第126张图片

JWT

什么?js前后端通吃? —— node.js教程_第127张图片

什么?js前后端通吃? —— node.js教程_第128张图片
什么?js前后端通吃? —— node.js教程_第129张图片
什么?js前后端通吃? —— node.js教程_第130张图片
什么?js前后端通吃? —— node.js教程_第131张图片
什么?js前后端通吃? —— node.js教程_第132张图片

什么?js前后端通吃? —— node.js教程_第133张图片

什么?js前后端通吃? —— node.js教程_第134张图片
什么?js前后端通吃? —— node.js教程_第135张图片

什么?js前后端通吃? —— node.js教程_第136张图片
什么?js前后端通吃? —— node.js教程_第137张图片

什么?js前后端通吃? —— node.js教程_第138张图片
什么?js前后端通吃? —— node.js教程_第139张图片
知识点较为琐碎,望认真整理理解。

你可能感兴趣的:(WEB前端,javascript,node.js,前端)