作为一名面向百度编程的博客主,云落是这样写代码的

» WordPress » 作为一名面向百度编程的博客主,云落是这样写代码的

前段时间文章海报这个功能好像挺火的,今天云落也想写一下这个功能的代码,顺便让大家展示一下云落平时是如何写代码的?

作为一名面向百度编程的博客主,云落是这样写代码的-极客公园

前言

有很多博客主像云落一样,之前没有正经学过编程知识,在写代码的时候能百度百度再百度,今天云落向大家展示一下,云落如何使用百度写好自己的代码,就以文章海报功能为例

代码未动,百度先行

既然要做文章海报这个功能,我们首先就要百度一下【文章海报】这个关键词,然后看一下一个成品的文章海报是像什么样子,有哪些因素有哪些特点等等。

分析功能特点

娱乐找到了一个有文章海报功能的网站,然后我体验了一下这个功能,然后我们可以得出以下几个特点:

1:他是由点击启动的,所以应该有一个点击事件;
2:点击之后会有一个弹窗,那么应该会有一个弹窗功能;
3:点击之后,弹窗里面有一个转圈的动画,所以有可能有一个ajax操作;
4:弹窗有两个列表,一个列表显示海报的内容,一个列表显示操作按钮;
5:文章海报内容有文章标题,文章摘要,文章图片,文章链接的二维码组成;
6:点击下载按钮,可以将文章海报的内容变成一个图片并且下载下来

以上基本上就是一个文章海报所拥有的特点,其他网站的很多文章海报功能也基本上和这个一样,那么我们就为了这几个特点来做吧。

确定技术方向

建已经分析好了功能特点,他们开始确定一下技术方向,一个好的方向可以让我们减少很多工作。首先点击弹窗这些我们都知道是js的功能,所以我们首先肯定要用js来写,然后中间出现了一个类似于ajax操作的可能会需要后端PHP的帮助,提取文章标题,文章内容这些操作可以用后端PHP以及前端js来解决,下面就开始分割目标,然后一个目标一个目标的俩解决。

解决问题

1,针对于上面提出的特点,我们一个一个来解决,首先点击事件这里我使用Jquery的$.click()事件来解决。

2,弹窗功能因为这个是很多网站都自带有的功能,所以直接调用了我的网站的fancybox弹窗功能,这个功能主要用来弹窗图片的,但是其他东西也可以用来弹弹弹。

3,ajax是Jquery自带的方法很简单,但是我更喜欢使用简化版的$.post()或者$.get(),这个到底有没有用的还不知道,所以先放到后面吧。

4,弹窗演示的话,我们可以使用grid布局方式,云落这里是直接引用一个轻量级CSS框架来解决。

5,获取文章标题文章摘要文章图片,一个可以使用ajax从后台获取,一个就是从前台页面直接获取,当然能前端解决的问题,尽量不要用后端,这个使用Jquery的$('#id').text()就可以获取到内容了,图片也是一样处理,然后摘要这里其实也很简单,就是获取文章内容,然后基于字数进行截断,一般海报上面的摘要也就几个字,另外图片这里也,需要针对网页进行修改,获取的第一个图片可能不是文章图片有可能是网站的logo,所以有可能是第二个图片,当然这个看具体情况。然后二维码的话,我们可以直接使用qrcode.js来生成,这个应用很广泛,所以搜索起来内容很多,使用也很简单。

6,最后一点,其实是这个功能才是真正的核心,点击下载这个操作其实很简单,重点就在于将网页变成图片这个过程,百度了一下,发现类似的解决方案基本上都是使用Canvas来解决,或者准确的说是用一个前端库html2canvas.js来解决,具体如何使用我们后面再说吧。

对代码过程进行验证

有一本文并不是主要讲代码这里主要讲的是如何写出这样的代码,所以具体结果这里并不讲,这里主要是讲一下过程。

如果你对一段代码能不能执行,能不能执行成功不确定的话,你可以试验一下,如果是一个简短的js代码的话,你可以在浏览器下面F12里面console里面就可以运行,看看是否有结果。

在验证的过程中尽量减少变量的使用,云落这里推荐使用控制变量法,简单说就是试验代码里面尽量不要使用变量,打个比方,如果你在实验做弹窗代码的时候,标题就不要用代码去获取,你直接自己手动写出来就可以了,代码经过调试试验确定没问题的时候,然后对其进行冻结,简单说就是不要再改了。┗(^0^)┓

另外在写代码的时候尽量多用回车将当前调试的代码单独凸现出来,其他无关紧要或者已经被冻结的代码可以甩得远远的,就比如下面这样ヽ(*゚ー゚*)ノ
代码团A

正在调试修改的代码

代码团C

发现核心问题

在我理解中,如果有一段代码是最让你蛋疼的最难搞的,那么我就认为这个代码是这个功能里面的核心,当然如果你说所有的代码都是非常蛋疼的,那么就就当我没说。

以上总结的几个点里面第六点,我认为是这里面的核心。经过百度来回搜索,我发现html2Canvas的坑还不小,这里面有几个问题,一个是有图片跨域问题,一个是图片模糊问题,一个是图片错位问题,由于本文只是做出功能来,并不是做一个成品,所以主要是解决图片跨域的问题。

解决问题

经过百度发现,图片跨域的问题可以用base64图片格式解决,这个因为我不知道到底是不是,所以肯定要用代码验证试验一下了。

我把包含外链图片的海报进行截图,然后发现图片没了,文字还在,说明外链图片拍图失败,然后又把外联图片换成了base64图片,再一次进行解读,我发现图片有效,那么说明使用base64图片确实可以解决图片跨域问题,然后就开始各种百度各种搜索

20分钟后。。。。。

各种失败,算了,,我还是换个方向考虑问题吧。

之前我说过,我们前端能解决的问题尽量用前端,那么如果前端解决不了的那么就可以加入后端来支持,跨域这个问题其实都是相对于前端来说,而后端PHP是没有跨越这个问题的,那么我们就来使用PHP来解决。直接使用file_get_contents()函数获取远程图片,然后转为base64,这里面的操作就是前台获取图片链接,然后进行ajax发送到后端,后端获取到前台发送的图片URL,然后将其转化为base64格式,然后作为ajax结果再返回前端,这样就可以解决了图片跨域的问题。

在使用PHP解决图片跨越这个问题之后,我突然发现,我的网站的图片都是来源于阿里云oss里面的,然后oss貌似可以支持设置跨域的问题,oss后台看了下,确实如此,可以在跨域设置那里,直接使用通配符解决,然后我再看了一下七牛云有拍云腾讯云好像都支持这个跨域问题。。。。

好吧,再来总结一下跨越这个问题,如果有权限能够在图片的服务器端设置跨域问题的话,那么尽量就在服务器端解决,如果不能解决的话,那么就可以用PHP来转成base64格式图片来解决跨域问题。

后语

本篇文章使用语音输入法输入,所以如果有错误的话,请不要在意这些细节,由于没有开电脑,所以演示代码就不贴了

-- 完 --

发表评论

电子邮件地址不会被公开。 必填项已用*标注

4 Replies to “作为一名面向百度编程的博客主,云落是这样写代码的”