js线上安排小品种

欢迎光临小编的博客拓跋的前端酒馆,这个是原稿地址,这个是类型地址,这个是线上布置地方。尽管你发现自身文章中留存不当,请尽情向自身吐槽,大家齐声学学共同前行φ(>ω<*)

1、引子


缘何想做那个职能吗?起因很不难————作者看腻了上下一心博客的书面(特地要提一下,封面是缘于huno)。

background-cover.jpg

纵然自己的书皮很为难的说,可是何人还平昔不个审美疲劳不是?

总归再为难的图纸都有看腻的一天,为了打败审美疲劳,最好能经常换换封面,每日都不一致等就更好了!

想开了就去做,下手~

2、选图源


说起天天一张美图,那大家第一个想到的肯定是必应啊,必应的搜索引擎就算半数以上人用的不多——翻墙的用谷歌(谷歌)的多,不翻墙的用百度的多。然则必应搜索的首页真的很亮眼~就是因为每一天都有例外的美图做背景,而且据悉地理地方还有不相同的图样:

bingcn.png

bingen.png

既美又高清,很符合做壁纸。就是她了!

既然要做接,首先要抓取bing的api,emmm,打开bing主页,F12,点击Network-XHCR-V,挨个找一下,很不难就能窥见在哪个地方,看图~

xhr.png

很容易找到是哪条请求。其实那么些bing的壁纸接口在网上一搜也能搜到了,看这里

接口格式是那样的:

XML:
http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US
JSON:
http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US
RSS:
http://www.bing.com/HPImageArchive.aspx?format=rss&idx=0&n=1&mkt=en-US

  • format代表回去格式,可选字段有xml、js(json)、rss
  • idx=x代表收获从第x天前早先的图片,最大值为7,n>7时归来的都以n=7的值
  • n=y表示收获从idx起始三番五次y天的图纸,最大值为9,同时限定最多能获取15天以内的图形
  • mkt表示地区新闻,已知的只有zh-CN和en-US,是或不是还有其他的本身也不精通

再次来到值如下:

    {
        "images": [
            {
                "startdate": "20171226", 
                "fullstartdate": "201712261600", 
                "enddate": "20171227", 
                "url": "/az/hprichbg/rb/CPNYSnow_ZH-CN13335620157_1920x1080.jpg", 
                "urlbase": "/az/hprichbg/rb/CPNYSnow_ZH-CN13335620157", 
                "copyright": "中央公园,美国纽约市 (© Nisian Hughes/Getty Images)", 
                "copyrightlink": "http://www.bing.com/search?q=%E4%B8%AD%E5%A4%AE%E5%85%AC%E5%9B%AD&form=hpcapt&mkt=zh-cn", 
                "quiz": "/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20171226_CPNYSnow%22&FORM=HPQUIZ",
                "wp": true, 
                "hsh": "381850a3d2d57acd0ded240e42ffec8e", 
                "drk": 1, 
                "top": 1, 
                "bot": 1, 
                "hs": [ ]
            }
        ], 
        "tooltips": {
            "loading": "正在加载...", 
            "previous": "上一个图像", 
            "next": "下一个图像", 
            "walle": "此图片不能下载用作壁纸。", 
            "walls": "下载今日美图。仅限用作桌面壁纸。"
        }
    }

大家尽管在
www.bing.com
前面拼上images[0].url就是我们想要的图样的链接了,依旧一九一七x1080的高清图片呢,拿来做壁纸正适合~

有了这几个已知音信,我们好不不难可以称心快意的撸代码了φ(>ω<*)

3、撸代码


自家采用采用Node.js+express来搭建大家的后台代码。并做三个规划,我们的接口要能重返当日的图样,能根据入参再次回到几天前的哪位地方的图片,哦对了,能随随便便回到图片,保险小编每一趟寓目的都不等同。

很不难,说干就干。

关于怎么搭建2个Node.js+express服务自己就不赘述了,那多少个接口都要动用请求uri,简单写个国有函数用来取得uri:

    function getUri(start, number, mkt) {
        return 'https://www.bing.com/HPImageArchive.aspx?format=js&idx=' + start + '&n=' + number + '&mkt=' + mkt
    }

其余是因为得到随机图片和得到按参数指定的图形肯定是三个例外的接口,不过她们还要要用到二个请求并拍卖再次来到值的长河,为了代码赏心悦目,大家把他抽离出来:

    function getWallpaper(res, days_ago, mkt) {
        let uri;
        if (days_ago <= 7){
            uri = getUri(days_ago, 1, mkt)
        }else {
            uri = getUri(7, days_ago-6, mkt)
        }
        request(uri, function (error, response, body) {
            if (!error && response.statusCode === 200) {
                let data = JSON.parse(body);
                let images = data.images;
                res.redirect('https://www.bing.com'+images[images.length-1].url)
            }else{
                res.send('request error!')
            }
        })
    }

函数很粗略,看一眼就知晓了,至于为何返回的时候使用res.redirect(),那跟自家的目的有关联。

作者一开端就关系了,小编要落到实处和谐博客天天更换封面的功用,博客的封皮使用的是CSS的background样式,那几个样式即便可以用地方图片也足以用线上图片,然则必须是图形!由于大家的劳动友好不做存储,由此一贯把要收获到的图片的根地址重回过去才是最优解,那就是大家挑选采纳res.redirect()的来头。

再有随机接口,大家借使写个自定义范围的随意函数打乱就足以了:

    function getRandomInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

函数getRandomInteger(min,
max)重回min和max之间的即兴整数。使用这些函数不仅可以随意得到0-15天内的有些天数,也可以拔取ta获取随机的地带:

    let mkt = getRandomInteger(0,1) ? 'zh-CN' : 'en-US';

其余都没什么难度了,就是传参。可以本身去看源码~

四,BAE线上配备


既然大家协调写的接口希望能用在大团结的私有网站上,接口肯定不恐怕只幸亏当地调用吧?大家接下去要做的就是把博客线上布署啦,那样大家就能把接口暴露在互连网上,造福自身,造福我们~

因为我们的类型十分之轻量,不占存储,不占内存,基本上就是做贰个转折的功力,因而不须求怎么着很高的服务器品质。为了那个体系还要自身租用三个云服务器那就失惊倒怪了~在您协调本身没有服务器的前提下,我引进您利用百度的BAE进行线上安排(Baidu
Application
Engine),一天若是两毛钱,用到遥远(作者都有点替百度心疼财富o(TωT)o
)。

安顿步骤

  1. 率先登陆百度云的首页,没有登记的注册一下,注册之后实名验证一下。那里不细说了~

  2. 点击左侧菜单栏的采取引擎BAE,界面如图所示,点击“添加布署”。

    step2.png

  3. 界面如图所示,按您的内需选拔安顿,小编采纳的是那般的(请无视左侧的重叠框,滚动截图工具不协助position:
    fixed定位格局的锅)。其中,由于自家要跑的是Node.js代码,因而类型选取Node能协助的万丈版本。代码版本工具依靠个人喜好,作者喜爱git。内存选最低,单元个数选最少,OK,一天只要求两毛钱~点击下一步。

    step3.png

  4. 点击“去开发”即可,后付费格局,账号里没有余额也能开发成功。

    step4.png

  5. OK,开通成功了,去控制台看看吧~

step5.png
  1. 在配置列表里,直接点名称进到里面,采用公布设置。那里可以看到git地址,大家那就足以通过git
    clone的法子把代码库同步到当地,然后把当地的代码放到里面,push上来,就水到渠成啦~对了,最好把机动发表设置打开,那样每回换代代码都能自行在线上配备新型的版本咯。

    step6-1.png

step6-2.png

  1. 末段,调用一下自身的接口试试吧:tuobaye.duapp.com

BAE布置进度中的多少个坑

  1. BAE代码只好监听18080,要把原先的端口设置改为18080;
  2. BAE默许不支持ES6语法,所以本来你代码里的let/const什么的赤诚改成var吧,
  3. 自我在上传的历程中,把node_modules省略了,然后在package.json里面写上了dependencies,不过报错了。作者的化解办法是直接把node_modules上传,把package.json的dependencies删掉,只让他活动执行运行脚本,不管其余,就开动成功了。
  4. BAE文档,有其余题材得以看看那个,有早晚参考价值。

OK,搞定啦

5、修改背景,目标达到!

自家的博客是用hexo生成的,博客的背景图片在核心文件的样式里面。各个人都有和好的不比意况,可是一旦找到这一行样式就行了。

    .panel-cover {
      display: block;
      position: fixed;
      z-index: 900;
      width: 100%;
      max-width: none;
      height: 100%;
      background: url(..kground-cover.jpg) top left no-repeat #666666;
      background-size: cover;
    }

把background改成大家协调的接口,这几个接口可以收获当天的壁纸图片:

    .panel-cover {
      display: block;
      position: fixed;
      z-index: 900;
      width: 100%;
      max-width: none;
      height: 100%;
      background: url(http://tuobaye.duapp.com/wallpaper) top left no-repeat #666666;
      background-size: cover;
    }

比较一下,是否很有成就感~?

before.png

after.png

如果把url换成
http://tuobaye.duapp.com/wallpaper/random
,就足以每刷新三回都以新的书面了~帅气!

6、小结


看完那篇文章,你将会从零起首学会写一个实用的小项目,然后在线上配置,在非常低本钱的意况下将协调的接口暴光出来,造福自个儿,造福外人~

从想到换封面的点子,到选图源,抓接口,撸代码,BAE安插到终极本身用上本人最特异的接口,实际的工作量一共也不当先一天时间,其中还有超过一半日子都以在踩BAE的坑。

众多时候,限制我们的并不是大家的技巧,而是创意和脚踏实地的心。

虽说项目简单,可是能对读到此地的读者一些启迪意义,那我觉着就很满足了~

想到就去做,Just do it!

相关文章