抖圖 一期

換了新公司，沒什麼時間寫博客了。最近看到抖音那麼火，心想着是否是要作個「抖圖」，就這樣，拖拖拉拉就開始幹了。一個多月了，終於有成果了。

準備工做

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號。不過如今也能打開，不過會很慢。看你們需求吧，若是有喜歡的話，私信我，我看是繼續升級帶寬，仍是換家服務器廠商。