node前后端交互（响应原理及HTTP 协议）

1.Node.js模块化开发

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

• Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
• 模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块

//01.module-a.js
const add =(n1,n2)=>n1+n2;
//向模块外部导出数据 
exports.add =add;//第一个add为exports的属性(名称),第二个add为上面的变量

//01.module-b.js
// const a =require('./03.module-a.js');
// 在b.js模块中导入模块a
const a =require('./03.module-a');//导入模块时后缀.js可以省略
//调用b模块中的add函数,并传入参数
console.log(a.add(10,20));

控制台输入“node 01.module-b.js”结果输出30

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

exports是module.exports的别名(地址引用关系)， 当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准

//02.module.exports.js
const greeting = name => `hello ${
     name}`;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;
module.exports = {
   
	name: 'zhangsan'
}
exports = {
   
	age: 20
}

//02.require.js
const a = require('./04.module.exports.js');
// console.log(a.greeting('zhangsan'));
console.log(a);

控制台输入“02.require.js”结果输出{name: ‘zhangsan’}

2. 系统模块

2.1 什么是系统模块

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

2.2 系统模块fs文件操作

读取文件内容

//05.readFile.js
//1.引入文件操作系统模块fs
const fs = require('fs');
//2.通过模块内部的readFile读取文件内容
fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
   
	//如果文件读取出错err是一个对象包含错误信息
	//如果文件读取正确err是null
	//doc是文件读取的结果
	console.log(err);//null
	console.log(doc);
});

写入文件内容

//06.writeFile.js
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
   
	//demo.txt原本没有,它自己自动生成的
	if (err != null) {
   
		console.log(err);
		return;
	}
	console.log('文件内容写入成功');
})

2.3 路径拼接

• 为什么要进行路径拼接 ?

  • 不同操作系统的路径分隔符不统一,Windows 上是 \ /,Linux 上是 /

• 路径拼接语法

  • path.join(‘路径’, ‘路径’, …)

//07.path.js
// 引入路径拼接path模块
const path = require('path');
// 路径拼接
const finalPath = path.join('itcast', 'a', 'b', 'c.css');
// 输出结果 itcast\a\b\c.css
console.log(finalPath);

2.4 相对路径VS绝对路径

• 绝对路径:从根目录为起点到你所在的目录；
• 相对路径:从一个目录为起点到你所在的目录
• 大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
• 使用__dirname获取当前文件所在的绝对路径 (前面是双下划线)

//08.relativeOrAbsolute.js
const fs = require('fs');
const path = require('path');
console.log(__dirname);//获取当前文件所在的绝对路径
console.log(path.join(__dirname, '01.helloworld.js')); //路径拼接
fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
   
	console.log(err);
	console.log(doc);
})

3. 第三方模块

3.1 什么是第三方模块

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

3.2 用npm获取第三方模块

从别的地方如github下载的项目，要先下载项目所需要用到的比如vue或者react等依赖才能运行

• . npm init -y：引导创建一个package.json文件，package.json里记录了依赖，如果已经有了跳过这一步
• . npm install (npm i)安装依赖，默认装在当前目录
  • 即npm install module_name --save,被写入到package.json的dependencies（运行依赖）里面,即开发和打包都要用到的依赖，如jquery和vue等等；
  • 即npm install module_name --save-dev ，被写入到package.json的devDependencies（开发依赖）里面，即打包上线后不再需要的依赖，如less/sass
  • npm install module_name -g 全局安装(命令行使用)
  • 指定版本安装模块 npm i module_name @1.0 通过 "@"符号指定；
• npm remove module_name或者 npm uninstall module_name：删除依赖
• npm update(npm -up) module_name：更新依赖

3.3 第三方模块Gulp

3.3.1 Gulp使用

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

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

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

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

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

3.3.2 Gulp中提供的方法

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

• gulp.dest()：输出文件

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

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

//gulpfile.js
// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 参数1.任务的名称
// 参数2.任务的回调函数
gulp.task('first', () => {
   
	console.log('我们人生中的第一个gulp任务执行了');
	// 1.使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));//dist下面会自动创建css文件
});

• 安装gulp插件执行代码 npm i gulp-cli -g
• gulp+任务的名称执行任务,gulp first
• 打印 “我们人生中的第一个gulp任务执行了”

3.3.3 Gulp中提供的插件，需要查文档即可

• gulp-htmlmin ：html文件压缩
• gulp-csso ：压缩css
• gulp-babel ：JavaScript语法转化
• gulp-less: less语法转化
• gulp-uglify ：压缩混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync 浏览器实时同步

Gulp中插件的使用 第一步:下载插件 第二步:引入插件 第三步:调用插件

html任务

1.编写gulp.js任务

// gulpFile.js
// 引用gulp模块
const gulp =require('gulp');
// 1.html文件中代码的压缩操作 gulp-htmlmin
const htmlmin =require('gulp-htmlmin');
// 2.抽取html文件中的公共代码 gulp-file-include
const fileinclude =require('gulp-file-include');
gulp.task('htmlmin', () => {
   
	gulp.src('./src/*.html')//所有的html文件
		.pipe(fileinclude())//抽取html文件中的公共代码
		// 压缩html文件中的代码
		.pipe(htmlmin({
    collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});

2.准备一个公共头部代码：header.html

<!-- 头部框架开始 -->