换了新公司，没什么时候写博客了。近来看到抖音那末火，心想着是否是要做个“抖图”，就这样，拖拖拉拉就最先干了。一个多月了，终究有效果了。

准备事情

1. 从某图片网 爬了8w张图片，爬的只是链接（由于是链接，所以背面涌现一些问题）
2. 将链接存到当地的mysql数据库
3. 用express 写了一些接口
4. 前端用react 做了这个滑动的交互和首页的革新

手艺点

1. 爬图片网站，我用的要领比较笨。中心经由当地文件中转了一下，实行效力不是很好，为了防备对方反爬虫，我设置了一个定时器，2秒钟一次。爬到第二天早上还没完毕。二期会对这个爬虫做出修正，优化Promise，愿望可以一次性完成一切的爬取事情。
2. 后端我用的是node，运用mysqlyi的包，拼集一个插进去语句，把一切的数据存进去。
3. 要最先写接口了。写了两个接口，一个是依据前端传值页数和每页若干条，到数据库举行分页查询①，记得上面提到过我爬取的都是图片链接，你接见他人cdn上的图片，人家一定不乐意，所以就有了防盗链手艺，固然也就有了反防盗链手艺，我是用的node转发图片要求②。
4. 前端用的是react + dva，首页用了swiper③的插件。

手艺方面难度不到，就不上github地点了。贴几段看看就好。

① nodejs、mysql 分页查询

/**
 * @description 分页查询
 * @param {number} pageNo 一页若干条
 * @param {number} pageSize 若干页
 */
function funcSelectImgs(pageNo, pageSize) {

  let promise1 = new Promise((resolve) => {
    let SQLSelect = `select * from girl_img_tbl limit ${(pageNo - 1) * (pageSize)}, ${pageSize};`
    connection.query(`${SQLSelect}`, function (error, results, fields) {
      if (error) throw error;
      let arr1 = []
      results.map((item, index, arr) => {
        arr1.push(item.girl_img_url)
      })
      resolve(arr1)
    })
  });

  let promise2 = new Promise((resolve) => {
    let SQLSelect = `select  count(*) from girl_img_tbl;`
    connection.query(`${SQLSelect}`, function (error, results, fields) {
      if (error) throw error;
      resolve(results);
    });
  })

  return Promise.all([promise1, promise2]);
}

② 为了反防盗链，运用nodejs转发图片要求，运用request库

var options = {
    url: str,
    headers: {
      'Referer': 'targetUrl'
    }
  };
  request(options)
    .on('error', function (err) {
      console.log(err)
    })
    .pipe(res);

③ 在react中运用swiper

  if (this.swiper) {
      this.swiper.slideTo(0, 0)
      this.swiper.destroy();
      this.swiper = null;
    }
    this.swiper = new Swiper(this.refs.lun, {
      direction: 'vertical',
      lazy: {
        loadPrevNext: true,
        loadPrevNextAmount: 2
      },
    });
  }

...
// render要领中运用

<div className="swiper-container" ref='lun'>
  <div className="swiper-wrapper">
  {arrImgUrls.map((urlItem, index, arr) => {
    return (
      <div
        className="swiper-slide swiper-lazy imgBox"
        key={urlItem + index}
        data-id={index}
        data-background={`${urlItem}`}
        onClick={()=>{this.handleImgClick(urlItem)}}>
        <div className="swiper-lazy-preloader"></div>
      </div>
    )
  })}
  </div>
</div>

适才有提到为了反防盗链，我用我的nodejs服务器转发图片要求。我的是1M的腾讯云服务器，转发图片速率太慢了。昨天晋级到了10M，两天时候就要36块钱，太贵了。

贴上链接吧，http://115.159.47.17:8081/ 我没买域名，直接用的ip地点。预计来日诰日就限速了，我就晋级了两天时候8月8号和8月9号。不过如今也能翻开，不过会很慢。看人人需求吧，如果有喜好的话，私信我，我看是继承晋级带宽，照样换家服务器厂商。