抖图 一期

换了新公司，没什么时间写博客了。最近看到抖音那么火，心想着是否是要作个“抖图”，就这样，拖拖拉拉就开始干了。一个多月了，终于有成果了。

准备工做

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号。不过如今也能打开，不过会很慢。看你们需求吧，若是有喜欢的话，私信我，我看是继续升级带宽，仍是换家服务器厂商。