Node.js基础

2022-07-15 16:26:54

1.Node开发概述

1.1为什么要学习服务器端开发基础

  • 能够和后端程序员更加紧密的配合

  • 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)

  • 扩宽知识视野,能够站在更高的角度审视整个项目

1.2服务器端开发要做的事情

  • 实现网站的业务逻辑

  • 数据的增删改查

1.3为什么选择Node

  • 使用JavaScript语法开发后端应用

  • 一些公司要求前端工程师学握Node开发

  • 生态系统活跃，有大量开源库可以使用

  • 前端开发工具大多基于Node开发

1.4 Node是什么

Node是一个基于Chrome V8引擎的JavaScript代码运行环境

Node.js基础

 

 

运行环境

浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境

Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境

2.1 Node.js运行环境安装

官网: https://nodejs.org/en/

Node.js基础

 

 

  • LTS = Long Term Support 长期支持版 稳定版 (推荐安装)

  • Current 拥有最新特性 实验版

安装后不会再桌面创建图标，需要Windows PowerShell 命令行工具查看是否安装成功。输入 node -v 回车查看

 

2.2Node环境安装失败解决办法

1.错误代号2502、2503

失败原因:系统帐户权限不足。

Node.js基础

 

 

解决办法:

  1. 以管理员身份运行powershell命令行工具

  2. 输入运行安装包命令msiexec /package node安装包位置

Node.js基础

 

 

2.执行命令报错

失败原因: Node安装目录写入环境变量失败

Node.js基础

 

 

解决办法：将Node安装目录添加到环境变量中

Node.js基础

 

 Node.js基础

 

 

2.3 PATH环境变量

存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。

Node.js基础

 

 

3.Node.js快速入门

3.1 Node.js 的组成

JavaScript 由三部分组成，ECMAScript, DOM，BOM。

Node.js是由ECMAScript及Node 环境提供的一些附加API组成的，包括文件、网络、路径等等一 些更加强大的API。

Node.js基础

 

 

3.2 Node.js基础语法

所有ECMAScript语法在Node环境中都可以使用。

在Node环境下执行代码，使用Node命令执行后缀为js的文件即可(在需要执行的文件目录下执行)

Node.js基础

 

 

3.3 Node.js全局对象global

在浏览器中全局对象是window,在Node中全局对象是global.

Node中全局对象下有以下方法，可以在任何地方使用，global可以省略。

  • console.log()在控制台中输出

  • setTimeout()设置超时定时器

  • clearTimeout() 清除超时时定时器

  • setInterval()设置间歇定时器

  • clearInterval() 清除间歇定时器

4.Node.js模块化开发

4.1 JavaScript开发弊端

JavaScript在使用时存在两大问题，文件依赖和命名冲突。

Node.js基础

 

 

4.2生活中的模块化开发

Node.js基础

 

 

4.3软件中的模块化开发

一个功能就是一个模块， 多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。

Node.js基础

 

 

4.4 Node.js中模块化开发规范

Node.js规定一 个JavaScript文件就是一 个模块， 模块内部定义的变量和函数默认情况下在外部无法得到.

模块内部可以使用exports对象进行成员导出， 使用require方法导入其他模块。

Node.js基础

 

 

4.5模块成员导出

// a.js
//在模块内部定义变量
let version = 1.0;
//在模块内部定义方法
const sayHi = name =>`您好， ${name}`;
//向模块外部导出数据
exports. version = version ;
exports. sayHi = sayHi ;

4.6模块成员的导入

// b.js
//在b.js模块中导入模块a
let a = require(‘./b.js‘) ;
//输出b模块中的version变量
console.1og(a.version) ;
//调用b模块中的sayHi方法并输出其返回值
console.1og(a.savHi(‘黑马讲师‘)) ;
导入模块时后缀可以省略

4.7模块成员导出的另一种方式

module . exports. version = version; module . exports .sayHi = sayHi ;

exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准

4.8模块导出两种方式的联系与区别

Node.js基础

 

 

const sayHi = (name) => `hello ${name}`;
const x = 2;
exports.sayHi = sayHi;
module.exports.x = x;
//当exports对象和module.exports对象指向的不是同一个对象时，以module.exports对象指向为准
module.exports = {
    name: ‘张三‘
}
?
?

Node.js基础

 

 

5.系统模块

5.1什么是系统模块

Node运行环境提供的API.因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块

Node.js基础

 

 

5.2系统模块fs文件操作

f: file文件，s: system系统，文件操作系统。 const fs = require (‘fs‘) ;

读取文件内容

fs. reaFile(‘文件路径/文件名称‘[, ‘文件编码‘]，callback) ;

 

// 1.通过模块名字对模块进行引用
const fs = require(‘fs‘);
// 2.通过模块内部的readFile读取模块内容
// fs. reaFile(‘文件路径/文件名称‘[, ‘文件编码‘]，callback) ;
fs.readFile(‘./01-hello.js‘, ‘utf-8‘, (err, doc) => {
    // err是一个对象，包含错误信息 如果文件读取出错，返回err
    // 如果文件读取正确，err 是 null
    // doc是文件读取的结果
    console.log(err);
    console.log(doc);
})

Node.js基础

 

 

注意：

  1. 读取文件是硬盘的操作，需要耗时，我们需要回调函数的方式获取文件读取的结果

  2. 这个回调函数包含两个参数 err，doc

  3. err是一个对象，包含错误信息 如果文件读取出错，返回err，错误信息

  4. 如果文件读取正确，err 是 null，返回doc

  5. doc是文件读取的结果

 

写入文件内容

fs.writeFile(‘文件路径文件名称"，‘数据‘，callback);

const content =‘<h3>正在使用fs.writeFile写入文件内容</h3>‘;
fs.writeFile(‘../index.html‘, content, err => (
    if (err != mul1) {
        console.log (err);
        retun;
    }       
}
console.log(‘文件写入成功‘);
}) ;

如果写入路径文件不存在，系统会自动在该路径开辟一个文件

5.3系统模块path路径操作

为什么要进行路径拼接

  • 不同操作系统的路径分隔符不统一

  • /public/uploads/avatar

  • Windows上是\ /

  • Linux上是/

5.4路径拼接语法

path.join(‘路径‘，‘路径‘，...)

//导入path模块
const path = require(‘path‘) ;
//路径拼接
let finialPath = path.join(‘itcast‘, ‘a‘, ‘b‘，‘c.css‘) ;
//输出结果itcast\a\b\c.css
console.log (finialPath) ;

5.5相对路径VS绝对路径

  • 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录

  • 在读取文件或者设置文件路径时都会选择绝对路径

  • 使用__dirname获取当前文件所在的绝对路径

  • requrie方法中的路径可以使用相对路径

const fs = require(‘fs‘);
const path = require(‘path‘);
console.log(path.join(__dirname));
console.log(path.join(__dirname, ‘01-hello.js‘));
// __dirname获取当前文件所在的绝对路径
fs.readFile(path.join(__dirname, ‘01-hello.js‘), ‘utf-8‘,(err, doc) => {
    console.log(err);
    console.log(doc);
})

Node.js基础

 

 

6.第三方模块

6.1什么是第三方模块

写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。

第三方模块有两种存在形式:

  • 以js文件的形式存在，提供实现项目具体功能的API接口。

  • 以命令行工具形式存在，辅助项目开发

6.2获取第三方模块

www.npmjs.com:第三方模块的存储和分发仓库

npm (node package manager): node的第三方模块管理 工具

  • 下载: npm install 模块名称

  • 卸载: npm unintall package模块名称

全局安装与本地安装

  • 命令行工具:全局安装

  • 库文件:本地安装

6.3第三方模块nodemon

nodemon是一个命令行工具， 用以辅助项目开发。 在Node.js中，每次修改文件都要在命令行具中重新执行该文件,非常繁琐。

使用步骤

  1. 使用npm install nodemon -g下载它 -g代表全局安装

  2. 在命令行工具中用nodemon命令替代node命令执行文件

6.4第三方模块nrm

nrm( npm registry manager): npm下载地址切换工具 npm默认的下载地址在国外，国内下载速度慢

使用步骤

  1. 使用npm install nrm -g下载它

  2. 查询可用下载地址列表nrm ls

  3. 切换npm下载地址 nrm use 下载地址名称

Node.js基础

 

 

 

6.5第三方模块gulp

基于node平台开发的前端构建工具

将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。

6.6 Gulp能做什么

  • 项目上线，HTML、CSS、 JS文件压缩合并

  • 语法转换(es6、 less .

  • 公共文件抽离

  • 修改文件浏览器自动刷新

6.7 Gulp使用

  1. 使用npm install gulp下载gulp库文件

  2. 在项目根目录下建立gulpfile.js文件

  3. 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件

  4. 在gulpfil.js文件中编写任务.

  5. 在命令行工具中执行gulp任务

6.8 Gulp中提供的方法

  • gulp.src(): 获取任务要处理的文件

  • gulp.dest(): 输出文件

  • gulp.task(): 建立gulp任务

  • gulp.watch(): 监控文件的变化

const gulp = require(‘gulp‘);
//使用gulp.task()方法建立任务
gulp.task(‘ first‘, () => {
    //获取要处理的文件
    gulp.src( ./src/css/base.css‘)
    //将处理后的文件输出到dist目录
    .pipe(gulp.dest(‘./dist/css‘)) ;
}) ;
?

可能会出现如下错误：

Node.js基础

 

此时需在回调函数里添加结束回调done

const gulp = require(‘gulp‘);
//使用gulp.task()方法建立任务
gulp.task(‘first‘, (done) => {
    // 获取要处理的文件
    console.log(‘第一个gulp任务‘);
    gulp.src(‘./src/css/base.css‘)
    // 把处理后的文件输出到dist目录
        .pipe(gulp.dest(‘./dist/css‘));
    done();
})

6.9 Gulp插件

  • gulp-htmlmin: html文件压缩

  • gulp-csso: 压缩css

  • gulp-babel : JavaScript语法转化

  • gulp-less: less语法转化

  • gulp-uglify :压缩混淆lavaScript

  • gulp-file- include公共文件包含

  • browsersync 浏览器实时同步

插件使用：

  1. 去npm官网搜索，查看下载命令，在命令行窗口用npm方法下载 npm官网：www.npmjs.com

  2. 在gulpfile.js中引入这个插件 如： const htmlmin = require(‘gulp-htmlmin‘);

  3. 复制使用的代码到task任务中调用他 ，如： .pipe(htmlmin({ collapseWhitespace: true }))

// 引用gulp模块
const gulp = require(‘gulp‘);
const htmlmin = require(‘gulp-htmlmin‘);
const fileinclude = require(‘gulp-file-include‘);
//使用gulp.task()方法建立任务
// 1.任务名称
// 2.任务回调函数
gulp.task(‘first‘, done => {
    // 获取要处理的文件到src
    console.log(‘第一个gulp任务‘);
    gulp.src(‘./src/css/base.css‘)
        // 把处理后的文件输出到dist目录
        .pipe(gulp.dest(‘dist/css‘));
    done();
});
// html任务
// 1.压缩html文件里面的所有代码
// 2.抽取html文件里面的所有公共代码
gulp.task(‘htmlmin‘, done=> {
    // 获取当前目录下src下所有的html文件
    gulp.src(‘./src/*html‘)
// 抽取html文件里面的所有公共代码
        .pipe(fileinclude())
        // 压缩html文件中的代码
        // collapseWhitespace 折叠空白（压缩空格）
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest(‘dist‘));
    done();
});
// css任务
//1.less语法转换
// 2.css代码压缩
gulp.task(‘cssmin‘, done => {
    // 获取路径下的文件
    // gulp.src(‘./src/css/*.less‘)
    // 选择多个文件可以使用数组形式
    gulp.src([‘./src/css/*.less‘, ‘./src/css/*.css‘])
        // 执行插件less语法转换，将less语法转换成css语法
        .pipe(less())
        // 将css代码压缩
        .pipe(csso())
        // 处理后的文件输出到dist/css目录下
        .pipe(gulp.dest(‘dist/css‘))
    done();
});
// js任务
// 1.js语法转换
// 2.js代码压缩
gulp.task(‘jsmin‘, done => {
    gulp.src(‘./src/js/*.js‘)
        // 转换js语法
        .pipe(babel({
            // presets: [‘@babel/env‘]判断当前代码的运行环境，将代码转换成当前环境支持的代码
            presets: [‘@babel/env‘]
        }))
        // 代码压缩
        .pipe(uglify())
        .pipe(gulp.dest(‘./dist/js‘))
    done()
});
// 复制其他文件
gulp.task(‘copy‘, done => {
    gulp.src(‘./src/images/*‘)
        .pipe(gulp.dest(‘./dist/images‘))
    gulp.src(‘./src/upload/*‘)
        .pipe(gulp.dest(‘./dist/upload‘))
    gulp.src(‘./src/favicon.ico‘)
        .pipe(gulp.dest(‘dist‘))
    gulp.src(‘./src/fonts/*‘)
        .pipe(gulp.dest(‘./dist/fonts‘))
    done();
});
// 构建任务
//gulp.task(‘default‘, [‘first‘, ‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘]);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作
 gulp.task(‘default‘, gulp.series([‘first‘, ‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘]));

 

Node.js基础

 

 

 

7.Node.js中模块加载机制

7.1模块查找规则-当模块拥有路径但没有后缀时

require(‘ ./find.js‘) ; require(‘ ./find‘) ;

  1. require方法根据模块路径查找模块,如果是完整路径。直接引入模块。

  2. 如果模块后缀省略，先找同名JS文件再找同名JS文件夹

  3. 如果找到了同名文件夹,找文件夹中的index.js

  4. 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件

  5. 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到

7.2模块查找规则-当模块没有路径且没有后缀时

require(‘ find‘) ;

  1. Node.js会假设它是 系统模块

  2. Node.js会去node_ modules文件夹中

  3. 首先看是否有该名字的JS文件

  4. 再看是否有该名字的文件夹

  5. 如果是文件夹看里面是否有indexjs

  6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件

  7. 否则找不到报错

8.package.json文件

8.1 node_modules文件夹的问题

  1. 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢.

  2. 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致， 否则会导致当前项目运行报错

8.2 package.json文件的作用

项目描述文件，记录了当前项目信息,例如项目名称、版本、作者、github地址、 当前项目依赖了哪些第三方模块等。 package.json文件在项目根目录下使用npm init -y命令生成。

Node.js基础

 

 

在传项目给用户时可以把node_modules文件删除，让用户在此项目根目录下输入命令：npm install，系统会查看dependencies（项目依赖的第三方模块）里面的内容，自动把包下载完，生成node_modules文件

Node.js基础

 

 Node.js基础

 

 

8.3项目依赖

  • 在项目的开发阶段和线上运营阶段,都需要依赖的第三方包，称为项目依赖

  • 使用npm install 包名 命令下载的文件会默认被添加到package.json文件的dependencies字段中

 "dependencies": {
    "formidable": "^1.2.2",
    "mime": "^2.4.6"
  }

npm install --production 只安装项目依赖

8.4开发依赖

  • 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包,称为开发依赖

  • 使用npm install 包名 --save-dev 命令将包添加到package.json文件的devDependencies字段中

"devDependencies": {
    "gulp": "^4.0.2"
  }

8.5 package-lock.json文件的作用

  • 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

  • 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只 需下载即可,不需要做额外的工作

 

"scripts"中可以给命令添加别名

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //build 就是添加的别名   通过npm run build执行
    "build":"nodemon app.js"
  },

Node.js基础

 

 

 

Node.js基础

上一篇：Js中this的绑定规则


下一篇：解决阿里云使用SLB监控tcp 443 端口，后端机器telnet不通其他机器的问题