必应每日一图接口搭建教程，支持上传到又拍云
必应每日一图接口搭建教程，支持上传到又拍云
1.前言
推荐两个前辈的GitHub ，感兴趣的小伙伴可以去看看
https://github.com/androidmumo/Bing-upyun
众所周知，必应搜索官网每天会更新一张高质量的背景图。许多同学想在接口中调用它们，但必应的服务器在国内不算特别稳定（>500ms）。Bing-upyun 可以把每天的必应图片上传至又拍云，提供支持图片处理、回溯的接口（又拍云直链，实测从请求到图片接收完成耗时300ms左右，视网络情况而不同），并可选部署优雅的前端页面。
目前有很多优秀的必应每日一图接口，可以将图片在服务器本地化存储并提供调用接口，但大都需要常驻后台运行。另外，目前几乎没有采用又拍云储存图片的同类接口。因此便有了下面的项目。
2.前端
2.1 前端 DEMO
2.2 前端效果（首页）
2.3 前端特性
用到的库或者框架有：Bootstrap4、jQuery1.11.0、Valine、progressive-image。
- 响应式
- 图片懒加载
- 图片渐进加载（模糊到清晰）
- 无后台评论系统
3.后端
3.1 接口文档
参数名 | 是否必须 | 参数 | 返回结果 | 备注 |
|---|---|---|---|---|
type | 否 | json或其他 | json数据 | 参数除json外，其余都无效（输出图片） |
blur | 否 | 5/15/25 | 返回高斯模糊程度不同的图片 | 只支持5/15/25三个等级 |
gray | 否 | true/false | 灰阶图片/正常色彩图片 | - |
day | 否 | 数字n（大于等于0的正整数） | n天前的图片 | n的范围取决于程序运行天数 |
thumbnail | 否 | 1/25 | 16×9像素或以25%比例缩放的缩略图 | 只支持1/25两个等级，16×9像素的缩略图用来实现前端图片的渐进加载 |
random | （暂未开发） | - | - | 随机返回前n天内任意一天的图片 |
注意：day 和其余参数可以组合使用，除此之外的其他参数之间暂不支持组合使用。例如，不能返回灰阶的高斯模糊图片，可以返回n天前的高斯模糊图片。
json数据格式：
{
"bing_id": "21",
"bing_title": "日落时分中央海岸入口海滩上的救生员小屋，澳大利亚新南威尔士州 (© Yury Prokopenko/Getty Images)",
"bing_imgurl": "https://upyuns.mcloc.cn/bing/15-Sep-2020/15-Sep-2020.jpg",
"bing_imgurlcom_25": "https://upyuns.mcloc.cn/bing/15-Sep-2020/15-Sep-2020-compress_25.jpg",
"bing_imgurluhd": "https://cn.bing.com/th?id=OHR.LifeguardEntrance_ZH-CN7394984988_UHD.jpg",
"bing_imgname": "LifeguardEntrance_ZH-CN7394984988",
"bing_hsh": "a8712ff7ed3690123f96c2f95830b9f6",
"submission_date": "15-Sep-2020",
"submission_fulldate": "15-Sep-2020 00:01:01",
"bing_imgbase64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsK\r\nCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQU\r\nFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAJABADAREA\r\nAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAgMHCP/EACUQAAEEAQMCBwAAAAAAAAAAAAECAwQF\r\nEQAGEgcxNDdhc3Sxs//EABcBAAMBAAAAAAAAAAAAAAAAAAMFBgT/xAAnEQABAwIEBQUAAAAAAAAA\r\nAAABAAIDESEEEnGREzI0grExYXKBof/aAAwDAQACEQMRAD8ALpfa2VFBdK26liOlAdczeMFsN8iA\r\noBSVcRkEA5HbQ8bNhwQDMAdKn8KosCcrXF0VR8qDYhJuJx3Nf2KLawiSYrLCVsR2JraXIzKSAQt5\r\nZwvuMEJHoDjS5mJcM2V7aXob1P0AKblbomwSPdx2kelqiw9yTfZZz2L5Ebz+cz9alJ+rj0Q4eil1\r\nCpEjwF57VZ+Wlw5m93lNhySdvhf/2Q==\r\n",
"other": "0",
"bing_did": "20200915"
}字段 | 值 | 备注 |
|---|---|---|
bing_id | ID | |
bing_title | 图片标题 | |
bing_imgurl | 1920×1080 图片地址 | |
bing_imgurlcom_25 | 480×270 图片地址 | |
bing_imgurluhd | UHD超高清 图片地址 | 注意：分辨率不固定、无又拍云加速 |
bing_imgname | 图片文件原始名字 | 注意：与又拍云中的文件名不一致 |
bing_hsh | 哈希值 | |
submission_date | 提交保存时间 | |
submission_fulldate | 详细提交保存时间 | |
bing_imgbase64 | 16px×9px 缩略图base64编码 | 一般用于图片渐进加载 |
other | 保留字段 | |
bing_did | 唯一图片ID | 格式为保存日期 |
3.2 接口DEMO
https://bing.mcloc.cn/apihttps://bing.ioliu.cn/v1/rand这两个api接口为上面提及的GitHub大佬免费提供，请合理使用。
4.部署
4.1 后端部署
4.1.1 准备工作
在开始之前，请确保您具备以下必要条件：
- 又拍云存储库
- MySQL数据库
- PHP运行环境
4.1.2 目录结构
若要在服务器上同时部署前后端，您的目录结构看起来应该是下面这样：
（若只需要后端接口，则只部署 api 下的文件即可）
├── api
│ ├── php
│ │ ├── bing // 图片缓存文件夹
│ │ ├── config.php // 配置文件
│ │ └── index.php // 后台图片处理程序
│ └── index.php // 图片调用接口
├── css
│ ├── detail.css // 详情页样式表
│ ├── index.css // 首页样式表
│ └── main.css // 主样式表
├── html
│ └── detail.html // 详情页
├── js
│ ├── detail.js // 详情页js
│ ├── index.js // 首页js
│ └── main.js // 主js
├── lib //第三方库
│ ├── layer
│ ├── Valine.min.js
│ ├── bootstrap.min.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.js.map
│ ├── bootstrap.min.js
│ ├── jquery-1.11.0.js
│ ├── progressive-image.css
│ └── progressive-image.js
├── static //静态资源
│ └── upyun_logo5.png
└── index.html // 首页4.1.3 配置信息
在 api/php/config.php 中修改：
//又拍云连接信息
$config['bucketName'] = '********'; //你的又拍云存储库
$config['operatorName'] = '********'; //你的存储库操作员
$config['operatorPwd'] = '********'; //你的存储库操作员密码
$config['domainName'] = '********'; //又拍云加速域名。注：结尾的 / 不能省略。如：'https://upyun.yourdom.com/'
//数据库信息
$config['mysqlHost'] = '********'; //MySQL数据库主机名
$config['mysqlUsername'] = '********'; //MySQL数据库用户名
$config['mysqlPassword'] = '********'; //MySQL数据库密码
$config['mysqlDbname'] = '********'; //MySQL数据库名4.1.4 部署文件到服务器
部署至可访问目录即可。
注意：/api/php/bing文件夹需要有写入权限。
4.1.5 设置定时任务（重要）
本程序不会常驻后台，需要定时访问后台图片处理程序所在URL以触发程序执行（每天访问一次）。
定时任务访问URL： 网站根目录/api/php/index.php 或 网站根目录/api/php
接口调用URL： 网站根目录/api/index.php 或 网站根目录/api
为避免时间误差引起的问题，建议不要将定时任务设置在每天的 00:00:00 ，推荐将定时任务设置在每日 00:01:00 ，若如此做，则在完成以上步骤后，不需要额外设置。否则请参照以下规则：
api/php/config.php 中的config['delay']为延时时间，如 config['delay'] = 90; 即调用80s前的图片。这也就意味着，您在每天零点的90s后，才能收到当天最新的图片。在每天的 00:00:00 至 00:01:30 之间，您调用此接口返回的仍然是前一天的图片。
注意：此延时时间需比定时任务中访问URL的时间大30s左右（和网络情况有关），否则会长时间返回前一天的图片（太大）或出现404错误（太小）。
4.2 前端部署
4.2.1准备工作
Bing-upyun 的前端可以纯静态部署。
为了提升您的访问速度，建议为前端页面部署CDN加速。
CDN建议的缓存设置如下：
缓存7天：
/*.(htm,html,js,css,png,svg,ico,ttf,otf,woff,woff2,eot,sfnt)不缓存：
/*.(php,json)4.2.2 目录结构
目录结构在 4.1.2 中已说明。
4.2.3 配置
4.2.3.1 评论系统
请在 detail.js 中修改评论系统 Valine 的信息：
参考 Valine 官方文档
appId: '********'
appKey: '********'4.2.3.2 域名
为了最快的响应速度，Bing-upyun 的前端页面为纯静态，请查找并替换以下文件中的域名：
index.html
html/detail.html
js/detail.js
js/index.js
js/main.js替换方法：
- 全局搜索替换，将
https://bing.mcloc.cn/替换为您部署的域名。 - 将
js/main.js中的https://upyuns.mcloc.cn/替换为您的又拍云存储加速域名。