妙用vercel搭建一个随机背景图片API

南蛮子懋和2024年09月02日技术2542
文章摘要
DaoGPT
此内容根据文章AI生成,并经过人工审核,仅用于文章内容的解释与总结
投诉

使用github搭建一个项目,名称自定义

其次编写一个/API/image.js文件,我是获取的哪里的图片,就不多余介绍

import fetch from 'node-fetch';

export default async function handler(req, res) {
  const action = req.query.action || 'list';
  const cacheDir = '/tmp/img';

  if (action === 'list') {
    // 获取分类列
    const url = "http://cdn.apc.360.cn/index.php?c=WallPaper&a=GETAllCategoriesV2&from=360chrome";
    try {
      const response = await fetch(url);
      const categories = await response.json();
      res.status(200).json(categories);
    } catch (error) {
      res.status(500).json({ error: 'FAIled to fetch category list' });
    }
  } else if (action === 'GET_images') {
    // 获取某个分类下的图片
    const cid = req.query.cid || '';
    if (!cid) {
      return res.status(400).json({ error: 'No category ID provided' });
    }

    const start = req.query.start || 0;
    const count = req.query.count || 10;
    const url = `http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid=${cid}&start=${start}&count=${count}&from=360chrome`;

    try {
      const response = awAIt fetch(url);
      const data = await response.json();

      if (!data.data || data.data.length === 0) {
        return res.status(404).json({ error: 'No images found in the API response' });
      }

      // 随机选择一张图片
      const item = data.data[Math.floor(Math.random() * data.data.length)];
      if (item.url) {
        const imageResponse = await fetch(item.url);
        const imageData = await imageResponse.buffer();
        res.setHeader('Content-Type', 'image/jpeg');
        return res.status(200).send(imageData);
      } else {
        return res.status(404).json({ error: 'No valid image URLs found' });
      }
    } catch (error) {
      return res.status(500).json({ error: 'Failed to fetch images' });
    }
  } else {
    res.status(400).json({ error: 'Invalid action' });
  }
}

然后编写个/package.json文件

{
  "name": "名",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "node-fetch": "2.6.7"
  }
}

然后再写一个/vercel.json文件

{
  "version": 2,
  "builds": [
    {
      "src": "api/image.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/image",
      "dest": "/api/image.js"
    }
  ]
}

很明显上述步骤初步实现,目录结构如下:

image.png

参考项目地址:

https://github.com/wulintang/wulintangimg

项目在线演示:

https://www.taoisms.org.cn/

扫描二维码推送至手机访问。

版权声明:本文由 南蛮子懋和 发布,如需转载请遵循《声明》注明出处。

本文链接:https://www.dao.js.cn/new/2024090211408.shtml

“妙用vercel搭建一个随机背景图片API” 的相关文章

网站标题及关键词地址随IP变化而变

网站标题及关键词地址随IP变化而变

有人问伍林堂官网的标题为什么在不同的地区显示不同的地址加名称,如下图:怎么变的?根据https://www.liuzhixi.cn/的提供方法如下:第一步:引入js<script sr...

简单添加个“本站已经安全运行XX年XX天XX秒”教程

简单添加个“本站已经安全运行XX年XX天XX秒”教程

第一种第一步:在需要展示“本网站运行了XX年XX天XX秒”的地方,插进去:<span id="sitetime"></span>第二步:在插进去的...

通过审计,排查是否有垃圾蜘蛛YisouSpider

通过审计,排查是否有垃圾蜘蛛YisouSpider

grep "YisouSpider" | awk '{print $2}' | sort&nb...

uptimerobot 的 ipv4 与 ipv6 列表

uptimerobot 的 ipv4 与 ipv6 列表

216.144.250.150 69.162.124.226 69.162.124.227 69.162.124.228 69.162.124.229 69.162.124.230 69....

MySQL中替换、更新字段及其它

MySQL中替换、更新字段及其它

有时候需要在表中更换一些字符串为NULL,可以使用下面的句子:update tablename set fieldname = "texts...

评论列表

一壶温酒
一壶温酒   Google Chrome 92.0.4515.159  Samsung G900P
2024年09月02日

妙用Vercel,轻松搭建随机背景图片API!实现简单高效的网络请求服务体验。

南蛮子懋和  QQBrowser 13.1.6089.400 Windows 10 x64 回复:
vercel是个很不错的托管平台,比起一些付费的、要求颇高的,还是较有可用信的。
2024年09月02日

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。

请如实填写常用的真实邮箱,方便后续的回复邮件通知。