【学习前端第四十九课】 nodejs第三方模块

nodejs第三方模块

之前我们学习过内置模块，其实node有大量的第三方模块提供给我们使用，例如，数据请求的axios，抓包分析的cheerio，例如操作数据的mysql，还有实现MVC开发的express或KOA等

这些第三方模块有一个专门的管理工具叫npm，在安装node.js的时候已经自带安装了这个工具

network package manager

npm工具

nodejs是以文件夹为单位来管理项目的，所以我们在学习过程中不要再编译器里面打开太多的项目

npm的初始化

nodejs是为文件夹为单位来管理项目的，如果当前的文件夹是一个node项目则应该先进行初始化操作，初始化操作命令

npm init   

在node开发中使用npm init之后会生成一个package.json的文件，这个文件主要是用来记录当前项目的详细信息，它还会将我们在项目中所要使用到的包，都会详细记录在这个文件当中，方便以后的版本迭代和项目移植的时候会更加方便，防止在后期的项目维护当中误删除了一个包导致项目不能正常运行，初始化还有一个好处，就是在进行项目传递的时候步需要将项目的依赖包一起发给对方，对象只需要在接收你的项目之后执行npm init 旧可以将项目依赖全部下载到项目内

在项目初始化的时候会让你填写一些东西

1、package name : 项目名称

2、version ： 版本号，按照你自己的项目规划来填写，不写默认就是1.0.0

3、description：项目简介

4、entry point：项目的入口文件

5、test command：项目的启动时要执行的命令，默认是node xxx.js

6、git repositiory ：如果你要将项目上传到git中的话，那么就需要你的git仓库地址

7、keywords：项目关键字

8、author：项目作者

9、license：发行所需要的证书

当以上执行完毕之后，我们就可以在当前的文件夹内看到一个叫做 package.json的文件，这个文件记录你初始化的信息

远端仓库npmjs

有一个网站上面保留了我们所有的第三方模块，这个网站是www.npmjs.com

我们可以根据自己的需求来查找相关的包信息

npm info 查看包的信息

我们可以通过网站来查看包信息，也可以通过自带的控制台命令来查看包

npm info 包名称

npm install 安装包

npm install 包名称

当你把包下载完之后，所有的包都会在一个node_modules文件夹里面，这个文件夹里面会存放所有的第三方模块信息

–save 记录安装信息

当我们使用npm install安装第三方包的时候，我们会直接下载下来的模块放在node_modules文件夹里面，但是会有个问题，如果后期项目大了，使用很多的第三方包，这个时候，我们自己都不知道自己装了多少包

所以每次远程安装开发包的下载安装信息我们要记录下来

npm install 包名称 --save

这个代表本次的安装信息记录在当前的项目的配置文件package.json里面，这个生产依赖

npm install 包名称 --save-dev

根据package.json记录信息重构包

当别人拿到这个nodejs项目的时候是不能直接运行的，因为里面使用了第三方包，在package.json当中记录了每一次的安装信息，那么，在后期在构建这个项目的时候只需要执行以下命令

npm install

安装指定版本

我们在安装远程包的时候，默认安装的都是最新的版本，如果要执行安装版本

npm install bootstrap@3 --save

上面的命令就相当于是把bootstrap以3开头的版本安装

npm uninstall卸载包

npm uninstall 包名称

卸载完之后，配置文件package.json当中的记录信息也会同步删除

npm的国内镜像设置

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/

当执行完上面的命令之后，我们就把地址换成了国内的镜像地址【上面的指令依次执行就可以了，它会一直生效】

当执行完毕之后，我们可以通过 npm config list --json 来查看是否成功

使用axios + cheerio完成数据抓取

完成当前功能需要使用到这两个包

1、axios这是一个夸平台的包，可以在node平台使用，也可以在浏览器环境下使用，这是当下比较主流一个包，专门做http/https数据请求的

2、cherrio包，这个包就相当于一个jQuery一样的东西，可以把一个html文档加载进入，然后使用之前学习过的jQuery的语法来获取所需要的信息

//第一步：导包（载入模块）
const axios = require("axios");

//第二步：准备要请求的地址
let ul = `https://v.qq.com/channel/tv?listpage=1&channel=tv&feature=9`;

const getData = async () => {
	//第三步：模拟请求，打开地址
	let resp = await axios.get(ul);
	//第四步：服务器响应的数据在resp的data当中
	console.log(resp.data);
}

getData();

经过上面的代码，我们可以道德服务器返回的数据，这个数据是一个浏览器请求一个网站以后返回的结果，我们可以看做事一个html字符串

1、axios事用于模拟模拟请求

2、axios事基于Promise技术，所以我们可以受用await来实现异步

3、请求结果在resp，返回的数据部分在其中的data属性中

//第一步：导包（载入模块）
const axios = require("axios");
const path = require("path");
const fs = require("fs");
const cheerio = require("cheerio");



const getData = async () => {
	try{
		let result = [];
		//第二步：准备要请求的地址
		let ul = `https://v.qq.com/channel/tv?listpage=1&channel=tv&feature=9`;
		//第三步：模拟请求
		let resp = await axios.get(ul);
		//第四步：使用cheerio加载结果
		let $ = cheerio.load(resp.data);
		//第五步：分析数据
		$(".card-list-wrap>.card").each((index,item) => {
			let obj = {};
			obj.href = $(item).attr("href");
			obj.title = $(item).find(".title").text();
			obj.desc = $(item).find(".sub-title").text();
			obj.tag = $(item).find(".right-bottom-text").text();
			obj.imgSrc = $(item).find(".subscript").attr("src");
			result.push(obj);
		})
		fs.writeFileSync(path.join(__dirname,"/result.txt"),JSON.stringify(result),{encoding:"utf8"});
		console.log("数据写入成功")
	}catch(error){
		console.log("数据请求失败",error)
	}
}

getData();

在上面的代码里面，我们在之前的代码上面分析了得到请求结果的字符串，然后使用cheerio来转换成了DOM结构分析，最后将我们所需的信息保存到cheerio这个包的对象中，将对象存放在数组中，最后换成成JSON字符串保存到文件内部

抓取图片

//第一步：导包（载入模块）
const axios = require("axios");
const path = require("path");
const fs = require("fs");
const cheerio = require("cheerio");



const getData = async () => {
	try{
		let result = [];
		//第二步：准备要请求的地址
		let ul = `https://v.qq.com/channel/tv?listpage=1&channel=tv&feature=9`;
		//第三步：模拟请求
		let resp = await axios.get(ul);
		//第四步：使用cheerio加载结果
		let $ = cheerio.load(resp.data);
		//第五步：分析数据
		$(".mod_figure>.list_item").each((index,item) => {
			let obj = {};
			obj.href = $(item).children("a").attr("href");
			obj.title = $(item).children("a").attr("title");
			obj.desc = $(item).find(".figure_desc").text();
			obj.tag = $(item).find(".figure_caption").text();
			obj.imgSrc = $(item).find(".figure_pic").attr("src");
			result.push(obj);
		})
		fs.writeFileSync(path.join(__dirname,"/result.txt"),JSON.stringify(result),{encoding:"utf8"});
		console.log("数据写入成功");
		//数据抓取完毕，我们要去下载图片了，任然使用axios
		for(let item of result){
			//遍历所有的图片地址同时拼接
			let u2 = `https:${item.imgSrc}`;
			//这里要注意：之前请求网页的时候返回的是文字，但是现在我们需要请求返回的是图片
			//图片是无法用文字表示的
			let p = await axios.get(u2,{responseType:"stream"});
			let currentImgPath = path.join(__dirname,`/movieImgs/${item.title}.png`);
			//将图片变成一个写入流，可以通过这个流向文件里面写入数据
			let currentImgStream = fs.createWriteStream(currentImgPath);
			//两个流对接
			p.data.pipe(currentImgStream);
			console.log("图片下载成功");
		}
	}catch(error){
		console.log("数据请求失败",error)
	}
}

getData();

在这个代码里面，主要两个技术

1、在axios的请求过程中，我们把响应的数据类型变成了stream

2、我们使用文件流 fs.createWriteStream 方法来写入文件数据