一步一步搭建–搞笑表情包网站(一)

前言:

        做一个完整的网站,从产品=>UI=>后端开发=>前端开发=>最后验收测试上线,这是一个产品的流程,虽然工作中一直有按照这个流程在走,但是自己却没有完整的过程经历,做这个产品,一方面是想体验一下这样的一个流程,再就是可以巩固自己的专业知识,学习新的知识,发现问题,提高自己解决问题的能力.

一: 产品

为什么要写搞笑表情包这个方向的产品,不侵权,不容易造成产权纠纷,网上的资源较多,可以获取资源的路径也比较多,这是主要原因.获取来源,可以网络上搜索一下便有很多网站了,通过爬虫方式,爬取页面数据,将数据存储到自己的服务器,将图片资源存储到对象存储里.然后在小程序,网站等渠道展示.

二:开始开发

1.确定基础框架

项目最终要以 搜索来源为主要来源设计基础框架,所以使用前端渲染的方式就不适合此项目,由于自己是前端开发人员,对于php,java不是很熟悉,所以就得找其它方式,目前比较好的方式是next.js与nuxt.js两者差不多,由于自己对于react比较熟悉,便采用了next.js.  后面在使用这个框架的时候,发现知乎也是用这个框架的,知乎的百度收录非常良好,这个对于后面网站被百度大量收录也有一定的保障..

2.确定前端主色调,前端UI参考

由于自己也非专业出身,这一块并没有那么专业,,所以只能随便找一个网站模仿一下即可,我自己看的网站是https://www.quanjing.com/   这个有做适配,由于前端只有展示,没有过多的复杂逻辑,所以适配h5也是需要的,色调便参考这个网站.搜索功能也是参考这个网站,而下面的内容则是

3.爬取更多gif数据

在爬取一个网站上的数据的时间,发现上面的gif图片大小太大了,2m左右的大小实在不能接受,于是就在爬取该网站的时候做了压缩图片,没想到这里遇上了一个难题,一般的图片像jpg,png,jpeg都是不会动的图片,但是git是由很多帧组成的图片,要实现压缩得麻烦很多,最开始的时候使用降色以减少图片的大小,但是这种效果并不好..

4.给网站添加token检验

为了防止自己的网站被攻击,得加一个token检验才行..token检验用户某个时间段内的访问量,如果是超过一定数据,就把这个用户给禁了,防止其它用户无法正常访问.

三:碰到的问题

关于压缩图片

使用的是目前比较专业的图片处理库—graphicsMagick,ImageMagick,ghostscript 这些安装后方可在代码中实现压缩gif,之前也试了很多的其它库 像images,compress-image 都不能实现压缩gif.  安装了上面说的三个库后,还需要另外写一些逻辑来实现压缩gif,也是参考了其它大佬的说明,明白了要压缩gif图片,要从图片颜色质量,gif图片帧数,裁剪图片大小等方面去实现

ENOENT

翻译了一下并没有这个单词,那肯定就是缩写了,于是就百度了一下,Error No Entry 的缩写, 意思是:没有这样的目录条目

 

成果:目前已经完成后端的数据爬取,小程序.

小程序码:

 

总结:

目前阿里云对象存储里存储了20万+的图片,这些图片差不多也够用了…接下来要做的是优化内容,如果把这些内容更好的呈现给用户,让我的小程序获得更多的展示,这里就涉及到了小程序的搜索优化以及推广渠道,这些事在刚毕业的时候自己也做过,又将回到了产品的工作中了

 

 

Author: kaykie

发表评论

邮箱地址不会被公开。