妙用vercel搭建一个随机背景图片API
其次编写一个/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" } ] }
很明显上述步骤初步实现,目录结构如下:
参考项目地址:
https://github.com/wulintang/wulintangimg
项目在线演示: