一緒に創造し、成長するために一緒に働きましょう!「ナゲッツデイリー新プラン・8月アップデートチャレンジ」参加7日目ですイベント詳細はこちら
導入
ポケモンは、多くの 90 年代以降の世代の子供時代の思い出だと思います. プログラマーとして、ポケモンのゲームを何度も作りたいと思っていますが、その前に、ポケモンの数、数、名前、情報が整理された後、この問題は Node.js を使用して、Pokémon Web ページからデータをクロールし、データを Excel ファイルに生成し、インターフェイスを介して Excel を読み取ってデータにアクセスします。
文章
データのクロール
データのクロールなので、まずは以下のようにポケモンのイラストデータのあるページを探してみましょう。
この Web サイトは PHP で記述されており、表と裏が分離されていないため、インターフェイスを読み取ってデータをキャプチャするのではなくcrawler
、ライブラリして Web ページ内の要素をキャプチャし、データを取得します。事前の注意としてcrawler
、ライブラリを使用jQuery
すると、Node 環境の要素を同じようにキャプチャできるという利点があります。
インストール:
yarn add crawler
复制代码
達成:
const Crawler = require("crawler");
const fs = require("fs")
const { resolve } = require("path")
let crawler = new Crawler({
timeout: 10000,
jQuery: true,
});
let crawler = new Crawler({
timeout: 10000,
jQuery: true,
});
function getPokemon() {
let uri = "" // 宝可梦图鉴地址
let data = []
return new Promise((resolve, reject) => {
crawler.queue({
uri,
callback: (err, res, done) => {
if (err) reject(err);
let $ = res.$;
try {
let $tr = $(".roundy.eplist tr");
$tr.each((i, el) => {
let $td = $(el).find("td");
let _code = $td.eq(1).text().split("\n")[0]
let _name = $td.eq(3).text().split("\n")[0]
let _attr = $td.eq(4).text().split("\n")[0]
let _other = $td.eq(5).text().split("\n")[0]
_attr = _other.indexOf("属性") != -1 ? _attr : `${_attr}+${_other}`
if (_code) {
data.push([_code, _name, _attr])
}
})
done();
resolve(data)
} catch (err) {
done()
reject(err)
}
}
})
})
}
复制代码
インスタンスを生成するときは、jQuery
モード$
、シンボルを使用できます。上記のコードの中間部分の役割は、要素が Web ページをクロールするために必要なデータを取得することです. これはjQuery API
と同じようここでは繰り返しません.
getPokemon().then(async data => {
console.log(data)
})
复制代码
最後に、渡されたdata
データして、フォーマットが実際にクロールされ、エラーがないことを確認できます。
Excel に書き込む
データのクロールが完了したので、次にnode-xlsx
ライブラリを使用してデータの書き込みを完了し、Excel ファイルを生成します。
node-xlsx
まず、簡単な Excel ファイル パーサーおよびジェネレーターを紹介しましょう。TS によって構築されたものは、 SheetJS xlsxモジュールに依存してExcel ワークシートを解析/構築するため、一部のパラメーター構成では、2 つを共通に使用できます。
インストール:
yarn add node-xlsx
复制代码
達成:
const xlsx = require("node-xlsx")
getPokemon().then(async data => {
let title = ["编号", "宝可梦", "属性"]
let list = [{
name: "关都",
data: [
title,
...data
]
}];
const sheetOptions = { '!cols': [{ wch: 15 }, { wch: 20 }, { wch: 20 }] };
const buffer = await xlsx.build(list, { sheetOptions })
try {
await fs.writeFileSync(resolve(__dirname, "data/pokemon.xlsx"), buffer, "utf8")
} catch (error) { }
})
复制代码
其 name
则是Excel文件中的栏目名,而其中的 data
类型是数组其也要传入一个数组,构成二维数组,其表示从 ABCDE.... 列中开始排序传入文本。同时,可以通过!cols
来设置列宽。第一个对象wch:10
则表示 第一列宽度为10 个字符,还有很多参数可以设置,可以参照 xlsx 库 来学习这些配置项。
最后,我们通过 xlsx.build
方法来生成 buffer
数据,最后用 fs.writeFileSync
写入或创建一个 Excel 文件中,为了方便查看,我这里存入了 名叫 data 的文件夹里,此时,我们在 data 文件夹 就会发现多出一个叫 pokemon.xlsx 的文件,打开它,数据还是那些,这样把数据写入到Excel的这步操作就完成了。
读取Excel
读取Excel其实非常容易甚至不用写 fs
的读取, 用xlsx.parse
方法传入文件地址就能直接读取到。
xlsx.parse(resolve(__dirname, "data/pokemon.xlsx"));
复制代码
当然,我们为了验证准确无误,直接写一个接口,看看能不能访问到数据。为了方便我直接用 express
框架来完成这件事。
先来安装一下:
yarn add express
复制代码
然后,再创建 express
服务,我这里端口号就用3000了,就写一个 GET
请求把读取Excel文件的数据发送出去就好。
const express = require("express")
const app = express();
const listenPort = 3000;
app.get("/pokemon",(req,res)=>{
let data = xlsx.parse(resolve(__dirname, "data/pokemon.xlsx"));
res.send(data)
})
app.listen(listenPort, () => {
console.log(`Server running at http://localhost:${listenPort}/`)
})
复制代码
最后,我这里用 postman
访问接口,就可以清楚的看到,我们从爬取到存入表格所有的宝可梦数据都接收到了。
结语
如你所见,本文以宝可梦为例,来去学习怎么用Node.js爬取网页的数据,怎么把数据写入Excel文件,以及怎么读取到Excel文件的数据这三个问题,其实实现难度并不大,但有些时候蛮实用的,如果担心忘记可以收藏起来哟~