24_Node.js

一、前后端认知

  • 前端
    • 把后端给的数据展示在页面上 (显示列表页面)
    • 把前端的数据传递给后端,让后端存储起来(注册)
  • 后端
    • 当前端需要数据的时候,后端从数据库里面拿到数据给前端
    • 把前端传递赖的数据存储在数据库里面
  • 数据库
    • 专门让“后端”进行数据的增删改查的

例子:注册

  • 前端
    • 通过在页面上绑定事件的方式获取用户填写的用户名和密码
    • 当用户点击注册按钮的时候,把用户名和密码传递到后端
  • 后端
    • 接收到前端传递来的用户名和密码
    • 把用户名和密码存储在数据库里面
    • 把存储成功或者失败的信息发生给前端
  • 前端
    • 接收后端给回来的反馈信息
    • 根据反馈信息告诉用户注册成功或者失败
  • 整个流程里面
    • 前端 => 后端 => 数据库 => 后端 => 前端

注意:

  • 前端是不能操作数据库的
  • 前端想对数据库进行操作,都要把信息告诉后端
  • 由后端进行数据库操作
  • 把操作的信息反馈给前端

二、服务器

了解服务器

  • 什么是服务器?

      + 就是一台在网络“那一头”的一台电脑
      + 只不过运行了一些特殊的环境
      + 运行了一些特殊的“软件”
    
  • 服务器作用

    • 当一台电脑运行了一个服务器环境以后
    • 在这台电脑上,就会🈶️一个文件夹被对外开放了,叫做“服务器空间”
    • 只要你在这个服务器空间(文件夹)里面放上对应的html文件
    • 其他网络上的小伙伴就能根据网线找到你这台电脑,找到对应的文件夹
    • 就可以看到里面的页面了(只读的权限)
  • 服务器的作用

    • 运行服务端(后端)代码
    • 如果我们写一个后端代码,那么需要在服务器环境下运行
    • 因为浏览器不支持后端代码的运行

例子:http://www.baidu.com:80/

  • 上面是一个地址,能看到百度的首页

  • http => 传输协议

    • 前后端交互的规则
    • 规范前端怎么传递数据给后端
    • 规范后端怎么传递数据给前端
  • www.baidu.com => 域名(是ip地址的高辨识度的名字)

    • 在网络环境中,每一个电脑有一个自己的ip地址(123.23.45.78)
    • 数字不好记忆,网络上就会有一个高辨识度的名字来代表这个ip地址
    • 通过域名,能找到百度家服务器的那个电脑
  • 80 => 端口号(理解为一个软件的门牌号码)

  • 就是找到对应的这台电脑上的那个服务器软件

  • 能找到这个软件,就能找到这个软件开放的那个文件夹(服务器空间)

  • 如果百度提前在这个文件夹里面放好了一个html页面

  • 我们就能看到这个页面了

过一过

  • 域名找到对应的电脑

  • 端口号找到这台电脑上的某一个软件(也就是找到了服务器空间)

  • 如果这个服务器空间里面有页面,那么我们就能看到了

  • 如果这个服务器空间里面有一个叫做index.html的文件

    • 不要你确定是否访问,会自动打开
  • 了解

    • http 传输协议,浏览器会自动帮你添加80端口
    • https 传输协议,浏览器会自动帮你添加443端口

三、安装Node环境

  • 安装node

    • js的运行
      - 当js运行在浏览器里的时候
      • 操作DOM,操作BOM,不能操作文件
    -   当js运行在node环境下的时候
        -   不能操作BOM,不能操作DOM,能操作文件,数据库之类的内容
    
    • 因为我们的电脑没有运行js代码的能力
      • 所以我们需要安装一个“能力”给我们的电脑
      • 安装完毕以后,就可以运行js代码了
      • 能力:node.js环境
  • 安装步骤

    1. 去官网下载就可以了:https://nodejs.org/zh-cn/
      • 下载最好下载一个LTS版本的
      • 长期稳定版本
      • current 当前的最新版本
      • 下载的时候 下载安装包,不要下载二进制文件
        • 安装包可以一键安装
        • 二进制文件是一个免安装版本的,需要手动配置系统环境变量
    2. 直接双击安装包就可以了
      • 一直下一步(next),傻瓜式安装
      • 安装完毕以后(finish),没有任何图标显示
      • 装在你电脑系统里面的一个“软件”
    3. 检测是否安装好了
      • 打开命令行(终端)
        • window操作系统
          • win+r 出现运行窗口
          • 在运行窗口输入cmd回车
        • mac系统
          • 点击顶部的搜索按钮,输入终端回车
      • 输入指令
        • node --version
        • 或者
        • node -v
        • 出现版本号就安装成功了
    4. 卸载
      • 直接打开控制面板卸载就可以了
  • 安装好以后

    • 你的电脑就有了直接运行js代码的能力
    • 就可以在命令行(终端)直接运行js代码,不在需要浏览器了

四、在Node环境下运行js代码

  • 实际上就是在命令行(终端)运行js代码

  • 有两指令方式

  • 方式一:

    1. 直接在命令行(终端)运行
      • 打开命令行
    2. 输入指令node ,然后按回车
      • 会进入代码编辑模式
      • 直接写js代码就可以运行了(就相当于我们浏览器里面的控制台输入代码)
    3. 如果要退出js代码书写环境
      • 按下ctrl+c两次
    • 缺点:写完的代码没法保存下来
  • 方式二:

    1. 把你要在node环境中运行的js代码写在一个.js后缀的文件里面
      • 文件名和目录尽量不要写中文(中文没事)
      • 不要命名成node.js
    2. 打开命令行,把目录切换到你写的js文件的目录下
      • 快捷方法1:
        • 找到你要运行的文件所在的文件夹
        • 在文件夹的地址栏输入cmd回车
        • 打开的命令行里面的地址就是当前文件夹地址
      • 快捷方法2:
        • 在编辑器vscode里面选中文件夹右键
        • 点击在继承终端中打开
        • 在打开的面板选择cmd
    3. 书写:node 你要运行的js文件的文件名,按回车
      • 就是在命令行运行你写的这个js文件
      • 输入文件名的快捷方式
        • 输入文件名里面包含的字符,按tab键,会自动补全文件名

五、Node基础

  • node官网

  • node中文网

  • 什么是 node

  • 这个是 node 官网的解释

    • 其实 node 就是用 javascript 语言写 后端
    • 也就是说,我们的 javascript 有了 node 以后,不光是一个前端语言,也是一个后端语言
  • 前端 javascript

    • 三大核心
      • ECMAScript
      • DOM
      • BOM
    • 操作内容
      • 浏览器
      • 解决兼容问题
  • 后端 javascript (node)

    • 核心
      • ECMAScript
    • 操作内容
      • 后端代码
      • 数据库
  • 也就是说,node 我们不需要解决兼容问题,不需要 DOM 和 BOM,只关注业务逻辑就可以了

1.require()导入

  • 在 node 里面,我们使用 require 来导入一个文件

    // 我是 index.js 文件
    require('./a.js')
    
    console.log('我是 index.js 文件')
    
  • 当我在命令行运行 index.js 文件的时候

    • 首先会把 a.js 文件运行一遍
    • 然后再继续执行我自己文件内部的代码
  • 也可以再导入的时候接受另一个文件导出的内容

    // a 接受到的内容就是 a.js 这个文件导出的内容
    // 如果 a.js 文件中什么都没有导出,那么接受到的就是一个 空对象
    const a = require('./a.js')
    

2.exports.导出

  • 我们在写一个 js 文件的时候,可以向外导出一些内容

  • 将来在这个文件被导入的时候,就可以接受到一些内容

    // 我是 a.js
    
    // 每一个 js 文件都会有一个对象叫做 module
    // 在 module 里面有一个成员,叫做 exports
    // 每一个 js 文件会默认把 module.exports 导出
    // 也就是说,我们向 module.exports 中添加什么内容
    // 那么就会导出什么内容
    
    module.exports.name = 'Jack'
    module.exports.age = 18
    
  • 将来这个文件被导入的时候,接受到的内容就是一个对象,里面有两个成员

    // 我是 index.js
    
    const a = require('./a.js')
    
    console.log(a) // { name: 'Jack', age: 18 }
    

3.模块化

  • 在 node 的开发过程中
  • 我们是把每一个功能独立做成一个模块
  • 然后在使用 导入导出 的方式把他们关联在一起
    • 利于维护
    • 准确定位
  • 我们一般把模块分为三种
    1. 内置模块 (node 天生就带有的模块)
    2. 自定义模块 (我们自己写的文件)
    3. 第三方模块 (从网上下载的别人写好的模块)

六、Node常用的内置模块

1.path解析本地文件路径

1.1join()链接路径片段

  • 将所有给定的本地文件路径片段链接在一起

  • 规范化生产的路径

  • 语法:path.join(‘/目录1’,‘目录2’,‘目录3/目录4’,‘目录5’,‘…’)

  • 返回值:‘/目录1/目录2/目录3/目录4’

  • path.join()拼接的时候是相对路径,拼接好也是相对路径

  • path.join()拼接的时候是绝对路径,拼接好也是绝对路径

    // 1 path.join()
    console.log(path.join('./','..','其他资料/复习.md')); // 我们用path的join方法生产的规范路径
    // console.log('../其他资料/复习.md');// 我们自己用字符串写的符合window操作系统规范的路径
    

1.2resolve()拼接绝对路径

  • 使用同 path.join()

  • 区别:path.resolve()拼接好以后都是绝对路径

    // 2 path.resolve()
    console.log(path.resolve('./','..','其他资料/复习.md'));
    

2.url解析url网络路径

2.1parse()解析成对象

  • 作用:把字符串形式的url网络路径解析成对象
  • 语法:url.parse(urlString,[parseQueryString,slashesDenoteHost])
    • urlString:表示url网络地址,是一个字符串
    • parseQueryString:是否解析查询字符串,默认是false
    • slashesDenoteHost:如果为true,表示//后面,/前面是主机名(完整地址true和false没有区别)

2.2format()合并成字符串

  • 作用:把url对象合并成url地址字符串
  • 语法:url.format(url对象)
  • 返回值:url地址字符串

2.3resolve()合并两段url

  • 作用:把两段url片段,组合成一个完整的url
  • 返回值:url地址字符串

3.FS操作文件

  • fs 是 node 的一个内置模块

  • 专门用来操作文件的

  • 使用的时候直接导入就可以使用了

    const fs = require('fs')
    
    // 接下来就可以使用 fs 这个变量去操作文件了
    

3.1readFile()异步读取

  • 异步的读取某一个文件内的内容

    const fs = require('fs')
    
    // 因为是异步读取,所以要在回调函数里面获取结果
    fs.readFile('./text.txt', 'utf8', function (err, data) {
        // err 表示读取的时候出现的错误
        // data 表示读取到的内容,如果出现错误,那么是 data 是没有内容的
    })
    

3.2readFileSync()同步读取

  • 同步读取某一个文件的内容

    const fs = require('fs')
    
    // 因为是同步读取,所以直接以返回值的形式接收读取的内容就可以
    const res = fs.readFileSync('./text.txt', 'utf8')
    // 同步读取的时候,如果出错会直接在控制台报错,并中断程序继续执行
    // 如果没有错误,res 就会得到文件中的内容
    

3.3writeFile()异步写入

  • 异步的向某一个文件中写入内容

    const fs = require('fs')
    
    // 写入内容的时候,一般不会出现错误
    // 因为如果没有这个文件的话,会创建一个这个文件在向里面写入内容
    // 所以回调函数一般没什么用处,只不过是在写入文件结束后做些事情而已
    // 虽然没有用处,但是必须要写
    fs.writeFile('./text.txt', '我是要写入的内容', function () {
        console.log('写入完成')
    })
    

3.4writeFileSync()同步写

  • 同步的向某一个文件内写入内容

    const fs = require('fs')
    
    // 因为是写入文件
    // 没有返回值,因为一般都会写入成功
    fs.writeFileSync('./text.txt', '我是要写入的内容')
    

4.http开启服务、发送请求

  • node的内置模块有一个http模块

    • 这个模块专门用来开启服务器的
    • 就是可以把一个电脑上的命令行窗口,当成一个服务器来使用
    • 只能支持http协议
    • 一个内置模块,直接导入就可以使用了
    const http = require('http')
    // 接下来就可以使用 http 这个模块去开启服务了
    
  • http模块里面创建服务的方法

    1. http.createServer(function(){})
      • 返回值:就是一个服务
      • 当这个服务监听一个端口号的时候,就变成了一个服务器
    2. 使用这个服务区监听一个端口号
      • 你创建的服务.listen(你要监听的端口号,监听成功的回调函数(选填))
  • 上面的代码写好以后,当你在终端运行这个文件的时候

    • 你的那个终端就是一个服务器了
    • 就可以打开浏览器去访问 http//localhost:你自己定义的端口号
    • 给服务器发http请求了
// 0 导入http模块
const http = require('http');
const url = require('url')
// 1 创建一个服务
const server = http.createServer(function(req,res){
    // 这个函数是前端的每一个发送到后端的http请求都会触发的函数
    // console.log('有一个请求发送到8080端口了')

    // 这个函数接收两个形参
    // 第一个形参: req(request) => 这个对象是请求信息
        // req.url  表示本次请求的地址
        console.log("本次请求的url是:"+req.url)
        let urlObj = url.parse(req.url,true);// 解析url字符串为一个对象
        console.log("本次请求的查询字符串是:")
        console.log(urlObj.query)
        console.log("本次请求的路由是:")
        console.log(urlObj.pathname)
    // 第二个形参: res(response) => 这个对象是响应信息
        // res.end() 表示本次响应的内容,()里面写buffer或者字符串
        // res.setHeader() 表示本次响应的响应头
        // 发送请求之前设置响应头
        res.setHeader('content-type','text/html;charset=utf-8');
        res.end("我是后端返回的响应主体,内容:hello world",'utf-8')
})

// 2 监听一个端口
// 端口号 0-65535
// 0-1023 不推荐使用
server.listen(8080,function(){
    console.log('监听8080端口成功')
})

4.1createServer()创建服务

  • 要开启先要创建一个服务

    const http = require('http')
    
    // 创建一个服务
    // 这个服务默认监听 http 协议
    // 这个服务默认监听 localhost 域名
    // 返回值就是这个服务
    const server = http.createServer(function (request, response) {
        // 前端发来的每一个请求都会触发这个函数
        // request 包含着所有的请求信息
        // response 是所有的响应信息
    })
    

### 4.2`listen()`监听一个端口

- 确定这个服务监听哪一个端口

  ```javascript
  const http = require('http')
  
  // 创建一个服务
  const server = http.createServer(function (request, response) {
      // 前端发来的每一个请求都会触发这个函数
  })
  
  server.listen(8080, function () {
      // 这个函数会在服务开启成功以后执行
      console.log('listening on port 8080')
  })

4.3end()给出一个响应

  • 简单给出一个响应

    const http = require('http')
    
    // 创建一个服务
    const server = http.createServer(function (request, response) {
        // 前端发来的每一个请求都会触发这个函数
        // 接受到请求以后给出一个响应
        response.end('hello world')
    })
    
    server.listen(8080, function () {
        // 这个函数会在服务开启成功以后执行
        console.log('lintening on port 8080')
    })
    
  • 此时,打开浏览器

  • 地址栏输入 localhost:8080

  • 浏览器就会响应文字 hello world

七、自定义模块

// 在这个文件里面定义一个模块,里面都是操作数字的方法
function add(){
    console.log("我是a模块里面的add方法")
}

function cut(){
    console.log("我是a模块里面的cut方法")
}

// 要把模块里面的方法导出别人才能通过导入来使用
// 每个js文件都是一个独立的模块
// 每个js文件天生自带一个变量叫做module,是一个对象
// 每个module里面有一个成员叫做exports,是一个对象
// 这个module.exports就是这个文件向外到处的内容,默认是一个空对象
// 我们把想要向外暴露的内容添加到这个对象里面就可以了

module.exports.a = 100
module.exports.add = add;

八、npm包管理器

  • 在我们安装 node 的环境的时候,会自动帮我们一起安装一个 npm 环境

  • 就好像我们安装一些软件的时候,会自动在帮我们安装一些什么 xxx软件管家/xxx游戏 之类的东西

  • 但是 npm 不是垃圾软件,而是一个我们超级实用的工具

1.检测是否安装

  • 和检测 node 一样

  • 在命令行输入指令

    $ npm -v
    
  • 能够得到一个版本号就可以了

2.了解npm

  • 什么是 npm 呢
  • 我们可以把他想象成一个大超市,一个装着所有我们需要用到的 插件//框架 的超市
  • 我们要下载一个 jQuery-validation 插件
    • 我们可以选择去官网进行下载
    • 可以选择去 GitHub 上查找并下载
    • 也可以选择直接在命令行用 npm 下载
  • 我们要下载一个 bootstrap
    • 我们可以选择去官网进行下载
    • 可以选择去 GitHub 上查找并下载
    • 也可以选择直接在命令行用 npm 下载
  • 也就是说,npm 包含着我们所有的第三方的东西
  • 我们需要的时候,只要打开终端,就可以使用指令来帮我们下载
    • 再也不需要去官网找了
  • 而且,npm 不光可以在后端使用,也可以在前端使用
  • npm 只不过是一个依赖于 node 环境的大型的包管理器

3.使用npm

  • 我们想使用 npm 只要打开命令行就可以了
  • 作为一个 包管理器
  • 可以帮我们下载一些 插件 库 框架 之类的东西供我们使用

3.1 下载包

  • 打开命令行

  • 输入下载的指令

    # 表示使用 npm 这个工具下载一个 jquery
    $ npm install jquery
    
  • 下载完毕以后,就会在当前目录下多出一个文件夹

    • 叫做 node_modules
    • 在这个目录下就会有一个文件夹叫做 jquery
    • 就是我们需要的东西了
  • npm 的下载默认是下载最新版本的包

  • 我们也可以在下载的时候指定一下我要下载哪一个版本

    # 表示使用 npm 这个工具下载一个 3.3.7 版本的 jquery
    $ npm install bootstrap@3.3.7
    

3.2 删除包

  • 在删除包的时候,我们可以直接去 node_modules 文件夹中找到对应的包的文件夹删除掉

  • 但是这样做并不好,我们还是应该使用命令行的指令来删除包

    # 表示我要删除 jquery 这个包
    $ npm uninstall jquery
    
  • 这样,这个包就会被卸载了

3.3 管理项目

  • 我们的每一个项目都有可能需要依赖很多的包(有插件/库/框架)

  • npm 会帮助我们记录,我们当前这个项目所使用的包

  • 但是前提是,你要告诉 npm 说: “你来帮我管理整个文件夹”

  • 我们依旧是使用指令在命令行来告诉 npm

    # 表示告诉 npm 你来帮我们管理整个文件夹(也就是我的整个项目)
    $ npm init
    

3.4 npm 清除缓存

  • 有的时候,有些包下载到一半,因为各种原因失败了(比如突然没有网了)

  • 那么这个下载了一半的包 有可能 会被缓存下来

  • 那么以后你再次下载的时候,就都是失败的状态

  • 那么我们就要清除掉缓存以后,在重新下载

    # 表示清除 npm 的缓存
    $ npm cache clear -f
    

九、nrm切换镜像源工具

  • 我们的 npm 虽然好用
  • 但是有一个缺点
    • 就是,他虽然在帮我们下载东西
    • 但是他的下载地址是在国外
    • 也就是说,每次使用 npm 下载的时候,都是去国外的服务器上进行下载
    • 那么就会有很多不稳定的因素
    • 而且相对时间比较长
  • nrm 就是一个用来切换 npm 下载地址的工具(切换镜像源工具)

1.安装nrm

  • nrm 如果想使用,那么需要我们自己安装一下

  • 因为是我们的工具,所以使用 npm 就可以安装

  • 依旧是使用指令的方式来进行安装

  • 只不过这里要把这个 nrm 安装成一个全局的依赖,而不再是项目内部的依赖了

    • 全局依赖,一个电脑安装一次,就一直可以使用
  • 我们使用指令安装一个全局 nrm

    # 表示安装一个全局 nrm
    $ npm install --global nrm
    $ npm i -g nrm
    

2.检测安装

  • 安装完毕之后,我们检测一下是否安装成功

  • 和检测 node npm 的时候一样

  • 在命令行使用指令查看一下版本号

    $ nrm --version
    
  • 能出现版本号,表示安装成功

3.使用nrm

  • nrm 里面存着好几个镜像源地址

  • 我们要挑一个比较快的使用

    $ nrm test
    

3.1 检测镜像源地址

  • 我们直接在命令行使用指令来查看所有镜像源地址的网速

    # 表示查看 nrm 镜像源地址网速
    $ nrm test
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ths3iZ0F-1672412216737)(C:\Users\JReal\AppData\Roaming\Typora\typora-user-images\image-20220919191622833.png)]

3.2 切换镜像源

  • 我们检测完毕以后,就直到哪个比较快了

  • 我们就使用指令切换一下镜像源地址就好了

  • nrm use 镜像源名称

    # 表示切换到 taobao 镜像源地址
    $ nrm use taobao
    

注意:

  • nrm切换完镜像以后就没有用了,你可以卸载nrm

    $ npm uninstall nrm -g
    
  • nrm切换完镜像以后,还是使用npm下载包

    npm install 包名
    
    • 只不过不再从国外服务器下载,而是从你指定的一个国内服务器下载,速度更快,更稳定

十、全局依赖&本地依赖

  • npm安装的包可以是全局的, 可以是本地的

1.全局依赖

  • 你的全局依赖是属于整个电脑的
  • 你在下载的时候,可以在电脑的任意位置打开命令行下载
  • npm install --global 包名
  • 简写: npm i -g 包名
  • 比如: npm i -g nrm
  • 就会把下载的包放到电脑的指定位置,在任意位置都可以使用这个包
  • 通过在命令行输入指令来使用
  • 使用这个全局依赖包,比如: nrm test

2.本地依赖

  • 你的本地依赖肯定是属于某个项目的
  • 你在下载的时候,就要在指定项目的根目录打开命令行下载
  • npm install 包名
  • 在项目根目录就多个一个node_modules文件夹
  • 在项目里面的js文件就可以通过require来导入这个包
  • const vue = require(‘vue’)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值