Node

南玖
114 阅读7分钟

什么是node.js

  • 什么是node.js
    • 一个基于 Chrome V8 引擎的JS 运行时(运行环境)
    • 就是给了我们除了浏览器之外的一个地方去运行JS,就在我们的电脑系统上
    • 曾经有一个伟大的靓仔,把chrome 内的v8引擎,拿出来并且和其他的东西做了一些结合,然后叫做Node.js
  • node.js 和我们在浏览器运行(前端JS)有什么区别
    • 前端JS: 把JS引入到一个HTML文件中,然后运行在浏览器中
      • 此时JS的内容包括:BOM + DOM + ES
    • Node.js:把JS直接运行到电脑系统中,所以BOM和DOM就不能使用了,只剩下ES规范了,但也因为直接运行到电脑系统中,所以还有一些别的功能
      • => 直接操作电脑的文件/文件夹
      • => 直接操作数据库
  • node.js和前端JS的区别2
    • 前端JS: 运行的时候可以采用模块化语法,也可以采用非模块化语法
    • 不采用非模块化语法也能运行的一个原因: 我们是把很多个js引入到某一个html文件中
    • node.js: 因为没有这个html文件去承载多个JS文件,所以node内,必须使用模块化语法
  • 模块语法基于CommonJS
    • ES6的推出时间15年 node.js的推出时间09年
    • JS代码是没有错误的
    • 一个JS的代码,如果将来我们需要运行在浏览器中,那么此时可以书写BOM/DOM
    • 如果是运行在node.js中,我们就不能书写BOM/DOM的一些方法

如何运行node.js

  • win1: (不推荐使用)
      1. window + r,输入cmd 敲回车
      1. 在这小黑窗内 输入一个node 敲回车
      1. 此时就进入了node的运行环境(类似于浏览器的控制台)
      1. 退出的时候,按下两次ctrl + c
    • 弊端:书写的代码,无法保存
  • mac1:
      1. 打开终端
      1. 输入node 敲回车
    • 弊端:书写的代码,无法保存
  • win2:
      1. 将要运行的JS代码,书写在一个.js文件内
      1. 打开文件所在目录,在地址内输入cmd敲回车
    • image.png
      1. 输入命令:node 文件名(文件名可以只写头部,用Tab补全)
    • image.png
  • mac2:
      1. 将要运行的JS代码,书写在一个.js文件内
      1. 拖拽文件所在目录到终端这个图标上
      1. 输入指令:node 文件名(文件名可以只写头部,用Tab补全)
  • win3:
      1. 将要运行的JS代码,书写在一个.js文件内
      1. 在vscode编辑器内,左侧的目录树,右键你的.js文件,点击"集成终端打开"
    • image.png
      1. 输入指令:node 文件名(文件名可以只写头部,用Tab补全)
    • image.png
  • 终端内容太多,想要清屏
      1. 重开终端
      1. win: cls mac: clear

node模块化语法

  • node 模块化语法(CommonJS)
    • 如果一个JS文件将来需要运行在node中,那么这个文件,内部 天生带一个变量module,这个变量中有一个属性 exports 默认值是一个空对象，我们可以向这个对象中添加一些属性,来达到导出的目的
    • 这个文件中除了天生自带一个module 还有一个变量叫做exports
    • 这个变量内部存储的是指向module.exports这个对象的地址
    • 也就是说，如果你想导出的话，还有一个语法exports.age = 18

创建一个文件夹,将out.js和in.js放在里面

创建一个导出文件 out.js

  • 导出方式
    • 导出方式1: module.exports.name = '张三'
    • 导出方式2: exports.age = 18
    • 导出方式3: module.exports = [1, 2, 3]

创建一个导入文件 in.js

  • 导入方式:
    • const outObj = require('./out') //如果导入的文件后缀是.js那么可以省略后缀不写
    • console.log(outObj)
  • 导出方式1输出结果: image.png
  • 导出方式2输出结果: image.png
  • 导出方式3输出结果: image.png
  • 面试题: module.exports = [1, 2, 3]; exports = [4, 5, 6]; 这样导出,会输出什么?为什么
  • 答: [1, 2, 3]
    • 分析:
      • module.exports 这个变量 默认的值是一个空对象, 在 40 行 我将这个 空对象更为了一个数组 [1, 2, 3]
      • 将来导出的时候, 还会导出这个变量的值, 但是现在被我修改为了 [1, 2, 3]
      • exports 这个变量 原本内部存储的是 指向 module.exports 的那个空对象
      • 然后现在 我将这个变量内部的值 重新修改为了 一个数组 [4, 5, 6], 相当于切断了和原本对象的联系
      • 所以这个 数组 [4, 5, 6] 跟导出就没有任何关联了, 只不过是修改了一个天生自带的变量的值 而已
      • 所以 当前文件导出的内容为 [1, 2, 3]

node的模块

  • node 的模块:每一个JS文件,我们都称之为模块

  • 模块的分类

      1. 自定义模块:自己写的Js文件
      1. 内置模块:node给我们提供的,比如:操作文件,开启一个小的服务器
      1. 第三方模块:由其他开发写完的代码(js模块),然后上传到一个仓库中(npm),我们去这个仓库中,将这个模块下载到本地,供我们使用

  • 内置模块http

    • 使用流程
        1. 导入到当前模块内
          const http = require("http")
    console.log(http)
        1. 按照说明文档去使用
          const http = require("http")
    // 2.1 利用http模块搭建一个简易的服务器
    const server = http.createServer((req, res) => {
        console.log('前端每访问一次,我就执行一次')
        /**
        * 第一个形参: 请求的内容(请求报文)在这个参数内
        * 第二个形参: 响应的内容(响应报文)在这个参数内,我们想要返回给请求者的内容,可以添加到这个形参内部
        */
        // console.log('前端每访问我一次,我就输出一次')
        // console.log(req.url)
        if(req.url === '/a') {
            res.end('pageA')
        }
        if(req.url === '/b') {
            res.end('pageB')
        }
    })
    // 2.2 给服务监听一个端口号
    server.listen(8080, () => {
      console.log('服务器开启成功,端口号:8080')
    })

    image.png

    image.png

    image.png

补充_请求

  • 什么算作一个请求
    • => 浏览器地址栏内输入一个地址,敲下回车
      • => 以浏览器为主体
      • => 服务器的内容会返回给浏览器
    • => html 中的link src href img
      • => 以标签为主体
      • => 服务端的内容会返回给标签
    • => js代码中的ajax
      • => 以ajax为主体
      • => 服务端的内容会返回给ajax(xhr)
    • 总结: 谁请求数据返回给谁
  • 完整的请求地址

认识npm

  • 认识 npm:基于 node.js的'包管理器',换句话说: 基于node.js的'软件管家'
    • 但是这个'软件管家'不能下载软件,只能下载和JS相关的内容(比如 node的第三方模块),并且 这个'软件管家'没有UI界面,不能通过鼠标点击去操作,只能通过命令行输入命令(win和mac命令相同)
  • 如何安装npm
    • 在安装node.js的时候自带
  • 如何检测npm是否安装
    • 打开终端 输入命令 npm -v || npm --version
  • npm的作用
    • 下载一切和JS相关的第三方 (node 的第三方,框架的相关内容,组件库的相关内容)
  • npm的使用
      1. 需要初始化,切换到项目的根目录
      • 输入一个命令npm init (需要手动输入一些配置信息) || npm init - y
      • image.png
      1. 输入命令,npm install 包名 || npm i 包名 (例如:npm i lodash)
      • 下载完成后,根目录内会多一个文件package-lock.json 和 一个目录node_modules
        • package-lock.json: 下载的文件的小版本
        • node_modules:下载的包在这个目录内

npm i lodash

image.png

npm i express

image.png

  • 使用第三方模块流程
      1. 通过npm安装
      1. 引入到当前文件内
      1. 按照文档去使用
    const _ = require('lodash');
    var objects = [
      { a: 1 },
      { b: 2 },
    ];
    var deep = _.cloneDeep(objects);
    console.log(deep);
    console.log(deep[0] === objects[0]);
  • 运行结果:

image.png

avatar
文章
阅读
粉丝