Node.js基础

1.Node开发概述

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

• 能够和后端程序员更加紧密的配合
• 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)
• 扩宽知识视野,能够站在更高的角度审视整个项目

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

• 实现网站的业务逻辑
• 数据的增删改查

1.3为什么选择Node

• 使用JavaScript语法开发后端应用
• 一些公司要求前端工程师学握Node开发
• 生态系统活跃，有大量开源库可以使用
• 前端开发工具大多基于Node开发

1.4 Node是什么

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

运行环境

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

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

2.1 Node.js运行环境安装

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

• LTS = Long Term Support 长期支持版 稳定版 (推荐安装)
• Current 拥有最新特性 实验版

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

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

1.错误代号2502、2503

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

解决办法:

1. 以管理员身份运行powershell命令行工具
2. 输入运行安装包命令msiexec /package node安装包位置

2.执行命令报错

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

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

2.3 PATH环境变量

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

3.Node.js快速入门

3.1 Node.js 的组成

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

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

3.2 Node.js基础语法

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

在Node环境下执行代码，使用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在使用时存在两大问题，文件依赖和命名冲突。

4.2生活中的模块化开发

4.3软件中的模块化开发

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

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

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

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

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模块导出两种方式的联系与区别

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

5.系统模块

5.1什么是系统模块

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

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);
})

注意：

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);
})

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 下载地址名称

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')) ;
}) ;
​

可能会出现如下错误：

此时需在回调函数里添加结束回调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方法下载
2. 在gulpfile.js中引入这个插件 如： const htmlmin = require('gulp-htmlmin');
3. 复制使用的代码 .pipe(htmlmin({ collapseWhitespace: true }))
4. 把处理后的文件输出到dist目录 .pipe(gulp.dest('dist'));
5. 在src下创建common文件，新建一个html文档
6. 抽取html文件里面的所有公共代码 .pipe(fileinclude())

// 引用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();
});
// 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();
})