实例教程：制作一个图片源

以 https://www.2meinv.com/ 网站为例，制作一个图片源。

推荐相册API

打开主页后，点击‘下一页’，网址变为了https://www.2meinv.com/index-2.html,可知地址为

var url = `https://www.2meinv.com/index-${pageNum}.html`;

发送请求获取网页内容

var response = await fetch(url);
var text = await response.text();

获取当前页数和总页数的元素

function getPages(body, query) {
  query ??=
    "body > div.list.hh.mt15 > div.list-left.fl > div.page.mt20 > div > a";
  const root = NodeHtmlParser.parse(body);
  var pageElements = root.querySelectorAll(query);
  var currPage = 1;
  var totalPage = 1;
  pageElements.forEach((element) => {
    var curr = parseInt(element.text);
    if (!isNaN(curr)) {
      if (element.classNames.includes("active")) {
        currPage = curr;
      }
      totalPage = curr;
    }
  });
  return [currPage, totalPage];
}

获取相册元素列表，并进行解析

var albums = [];
var root = NodeHtmlParser.parse(text);
var elements = root.querySelectorAll(
  "body > div.list.hh.mt15 > div.list-left.fl > div.list-inner > div.con-3-2.mt15 > ul > li > a"
);
elements.forEach((element) => {
  var href = element.attributes.href;
  var imageElement = element.querySelector("img");
  var src = imageElement.attributes.src;
  var title = imageElement.attributes.alt;
  albums.push({
    id: title,
    name: title,
    title,
    coverUrl: src,
    detailPageUrl: href,
  });
});

完整代码如下

function getPages(body, query) {
  query ??=
    "body > div.list.hh.mt15 > div.list-left.fl > div.page.mt20 > div > a";
  const root = NodeHtmlParser.parse(body);
  var pageElements = root.querySelectorAll(query);
  var currPage = 1;
  var totalPage = 1;
  pageElements.forEach((element) => {
    var curr = parseInt(element.text);
    if (!isNaN(curr)) {
      if (element.classNames.includes("active")) {
        currPage = curr;
      }
      totalPage = curr;
    }
  });
  return [currPage, totalPage];
}

async function recommendAlbums(pageNum) {
  var url = `https://www.2meinv.com/index-${pageNum}.html`;
  var response = await fetch(url);
  var text = await response.text();

  var [currPage, totalPage] = getPages(text);
  var albums = [];
  var root = NodeHtmlParser.parse(text);
  var elements = root.querySelectorAll(
    "body > div.list.hh.mt15 > div.list-left.fl > div.list-inner > div.con-3-2.mt15 > ul > li > a"
  );
  elements.forEach((element) => {
    var href = element.attributes.href;
    var imageElement = element.querySelector("img");
    var src = imageElement.attributes.src;
    var title = imageElement.attributes.alt;
    albums.push({
      id: title,
      name: title,
      title,
      coverUrl: src,
      detailPageUrl: href,
    });
  });
  return JSON.stringify({
    albums,
    currPage,
    totalPage,
  });
}

搜索相册API

此API同推荐相册API类似，同样先确定地址为

var url = `https://www.2meinv.com/search-${keyword}-${pageNum}.html`;

发送请求

var response = await fetch(url);
var text = await response.text();

获取分页和解析相册元素列表同上，不赘述

完整代码如下

function getPages(body, query) {
  query ??=
    "body > div.list.hh.mt15 > div.list-left.fl > div.page.mt20 > div > a";
  const root = NodeHtmlParser.parse(body);
  var pageElements = root.querySelectorAll(query);
  var currPage = 1;
  var totalPage = 1;
  pageElements.forEach((element) => {
    var curr = parseInt(element.text);
    if (!isNaN(curr)) {
      if (element.classNames.includes("active")) {
        currPage = curr;
      }
      totalPage = curr;
    }
  });
  return [currPage, totalPage];
}

async function searchAlbums(pageNum, keyword) {
  var url = `https://www.2meinv.com/search-${keyword}-${pageNum}.html`;
  var response = await fetch(url);
  var text = await response.text();
  var [currPage, totalPage] = getPages(text);

  var albums = [];
  var root = NodeHtmlParser.parse(text);
  var elements = root.querySelectorAll(
    "body > div.list.hh.mt15 > div.list-left.fl > div.list-inner > div.con-3-2.mt15 > ul > li > a"
  );
  elements.forEach((element) => {
    var href = element.attributes.href;
    var imageElement = element.querySelector("img");
    var src = imageElement.attributes.src;
    var title = imageElement.attributes.alt;
    albums.push({
      id: title,
      name: title,
      title,
      coverUrl: src,
      detailPageUrl: href,
    });
  });
  return JSON.stringify({
    albums,
    currPage,
    totalPage,
  });
}

获取相册图片API

此API会将上面获取到的album传入，将其转换为对象

album = JSON.parse(album);

根据album中的detailPageUrl来构造地址

var url = album.detailPageUrl;
if (url == "" || url == null) {
  return JSON.stringify({ pictures: [], currPage: 1, totalPage: 1 });
}
url = `${url.substring(0, url.length - 5)}-${pageNum}.html`;

发送请求、获取分页的逻辑同上，不赘述

获取图片元素列表，并进行解析

var pictures = [];
var root = NodeHtmlParser.parse(text);
var elements = root.querySelectorAll("body > div.pp.hh > a > img");
elements.forEach((element) => {
  var url = element.attributes.src;
  pictures.push({ url });
});

完整代码如下

function getPages(body, query) {
  query ??=
    "body > div.list.hh.mt15 > div.list-left.fl > div.page.mt20 > div > a";
  const root = NodeHtmlParser.parse(body);
  var pageElements = root.querySelectorAll(query);
  var currPage = 1;
  var totalPage = 1;
  pageElements.forEach((element) => {
    var curr = parseInt(element.text);
    if (!isNaN(curr)) {
      if (element.classNames.includes("active")) {
        currPage = curr;
      }
      totalPage = curr;
    }
  });
  return [currPage, totalPage];
}

async function pictures(pageNum, album) {
  album = JSON.parse(album);

  var url = album.detailPageUrl;
  if (url == "" || url == null) {
    return JSON.stringify({ pictures: [], currPage: 1, totalPage: 1 });
  }
  url = `${url.substring(0, url.length - 5)}-${pageNum}.html`;
  var response = await fetch(url);
  var text = await response.text();
  var [currPage, totalPage] = getPages(text, "body > div.page.mt20 > div > a");

  var pictures = [];
  var root = NodeHtmlParser.parse(text);
  var elements = root.querySelectorAll("body > div.pp.hh > a > img");
  elements.forEach((element) => {
    var url = element.attributes.src;
    pictures.push({ url });
  });
  return JSON.stringify({
    pictures,
    currPage,
    totalPage,
  });
}