利用开放接口，如何一步步打造自己的独特图片网站

❝

在进行文章撰写时，寻找适当的配图是一项重要的任务。然而，尽管我尝试在各大网站上寻找合适的图片资源，但往往面临两个主要问题：其一，这些网站大多需要付费使用，这无疑增加了我的经济负担；其二，即使有些网站提供免费图片，但其质量却令人堪忧。

”

为了解决这个令人头疼的问题，我自己动手一个搜索图片的网站，解决了日常文章配图的问题。整体的界面如下：

图片的加载采用瀑布流的模式。

这个网站是站在巨人的肩膀上完成的，为什么这么说呢？图片的来源是调用头条号的图片库，前端是使用github开源的瀑布流插件。

分析头条图片库的API

打开头条号发布文章，点击添加图片，会出现如下图

通过分析这个接口，发现它并没有做认证，携带几个路径参数。

在无痕浏览器重放这个接口，这能正常获取数据，如下图：

现在图片的数据源找到了，可以把它做成接口，给前端用户调用了。这里我选择熟悉的FastAPI做接口。

接口代码实现

从上述分析接口发现，路径参数只有三个参数是动态变化的。所以，我们把它做成变量的形式

from pydantic import BaseModel

class TuotiaoParams(BaseModel):
    page: int=0    #图片页数
    size: int = 30 #展示图片的数量
    term: str=None #搜索的关键字

然后，把请求头条号API接口封装成一个函数，方便后续调用

import requests
from fake_useragent import UserAgent
from schemas import TuotiaoParams
from loguru import logger
def search_pic(params:TuotiaoParams):
    try:

        url = "https://dficimage.toutiao.com/api/proxy/get"
        params = {
            "from": params.page,
            "size": params.size,
            "term": params.term,
            "search_id": 7274062948258316581,
            "user_id": 68783357974,
            "media_id": 1609422238702596,
            "search_from": "search",
            "position": "article_icstock",
            "platform": "toutiaohao",
            "path": "/micro/search"
        }
        res = requests.get(
            url,
            params=params,
            headers={"User-Agent":UserAgent().random},
            timeout=10
            )
        if res.json().get("code") == 1:
            logger.info("获取头条的图片的数据:{}".format(res.json()))
            return res.json().get("data").get("data").get("hits")
    except Exception as e:
        logger.error('抓取头条的图片错误：{}'.format(e))

利用FastAPI把头条号API做成接口模式

from  fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from toutiao import search_pic
from schemas import SearchKeyWork,TuotiaoParams
import uvicorn

app = FastAPI()

# 添加跨域中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允许所有来源访问
    allow_methods=["*"],  # 允许所有HTTP方法
    allow_headers=["*"],  # 允许所有HTTP头
)


@app.post("/image_toutaio")
def iamge_toutiao(params:TuotiaoParams):
    return {"code":1,"data":search_pic(params)}




if __name__ == "__main__":
    uvicorn.run(app)

执行如下代码启动程序，就可以正常访问接口

python main.py

这样后台的接口，就完成了。

前端搭建

前端采用的github上开源的瀑布流图片展示模板，然后，自己添加搜索功能的。

❝

https://github.com/heikaimu/vue3-waterfall-plugin

”

下载vue3-waterfall-plugin项目到本地，执行如下代码安装依赖

pnpm install

安装完依赖，执行如下代码，启动前端

pnpm run dev

启动成功之后，输入想要的图片进行搜索，如图

❝

• 项目的地址: https://github.com/didiplus/vue3-waterfall-plugin
• 演示地址: http://img.kwpmp.cn/
• 演示备用地址: https://cerulean-florentine-527213.netlify.app/

”