如何将Bing网络搜索API数据从Django传递到React显示

Question

我已经在一个叫做api.py的Django文件里，用Python成功打印出了搜索结果的数据。但现在，我该怎么把这些数据转移到React中去显示呢？有没有人能详细指导我一下？非常感谢！

我还把Bing的API密钥存放在一个.env文件里，这个文件和api.py在同一个文件夹里。

Bing网页搜索API：https://learn.microsoft.com/en-us/bing/search-apis/bing-web-search/reference/endpoints

代码： 在api.py文件中

`from pprint import pprint
import requests
from decouple import config

subscription_key = config('subscription_key', default='')

search_url = "https://api.bing.microsoft.com/v7.0/search"
search_term = 'iphone 13'

headers = {"Ocp-Apim-Subscription-Key": subscription_key}
params = {"q": search_term, "textDecorations": True, "textFormat": "HTML"}
response = requests.get(search_url, headers=headers, params=params)
response.raise_for_status()
search_results = response.json()

pages = search_results\['webPages'\]
results = pages\['value'\]
pprint(results\[0\])`

这是我在终端看到的数据：

我试着在StackOverflow和整个互联网找过，没找到有人真正使用这个API的例子……

更新：错误 **

Answer 1

简短回答

为什么不在Django应用中创建一个GET API，而是把整个逻辑放在DRF视图里呢？比如把这个接口映射到你的视图上。

/my-view

最后，从你的React应用中调用这个API。

详细回答：

步骤 1：

在你的views.py文件中创建一个视图：

从django.shortcuts导入render， 从django.http导入HttpResponse，
从pprint导入pprint，
导入requests，
从decouple导入config。

def my_view(request):
    subscription_key = config('subscription_key', default='')

    search_url = "https://api.bing.microsoft.com/v7.0/search"
    search_term = 'iphone 13'

    headers = {"Ocp-Apim-Subscription-Key": subscription_key}
    params = {"q": search_term, "textDecorations": True, 
    "textFormat": "HTML"}
    response = requests.get(search_url,headers=headers,params=params)
    response.raise_for_status()
    search_results = response.json()

    pages = search_results\['webPages'\]
    results = pages\['value'\]
    pprint(results\[0\])`
    return results 

步骤 2：

你需要把你的视图函数映射到一个URL。打开你应用的urls.py文件，为你的视图添加一个URL模式。例如：

from django.urls import path
from . import views

urlpatterns = [
    path('my-view/', views.my_view, name='my-view'),
]

步骤 3：

在React中创建一个组件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://your-django-api-url/my-view/');
                setData(response.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>My Component</h1>
            {data ? (
                <ul>
                    {data.map((item) => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default MyComponent;

步骤 4：

渲染这个组件：

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
    return (
        <div>
            <h1>My React App</h1>
            <MyComponent />
        </div>
    );
};

export default App;