抖图一期

最新推荐文章于 2022-04-25 14:34:47 发布

鬼谷中妖

最新推荐文章于 2022-04-25 14:34:47 发布

阅读量252

点赞数

分类专栏：前端文章标签： react nodejs

本文链接：https://blog.csdn.net/a562550212/article/details/81519199

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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

这里写图片描述

准备工作

从某图片网爬了8w张图片，爬的只是链接（因为是链接，所以后面出现一些问题）
将链接存到本地的mysql数据库
用express 写了一些接口
前端用react 做了这个滑动的交互和首页的刷新

技术点

爬图片网站，我用的方法比较笨。中间经过本地文件中转了一下，执行效率不是很好，为了防止对方反爬虫，我设置了一个定时器，2秒钟一次。爬到第二天早上还没结束。二期会对这个爬虫做出修改，优化Promise，希望能够一次性完成所有的爬取工作。
后端我用的是node，使用mysqly的包，拼凑一个插入语句，把所有的数据存进去。
要开始写接口了。写了两个接口，一个是根据前端传值页数和每页多少条，到数据库进行分页查询①，记得上面提到过我爬取的都是图片链接，你访问别人cdn上的图片，人家肯定不乐意，所以就有了防盗链技术，当然也就有了反防盗链技术，我是用的node转发图片请求②。
前端用的是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>