如何将React变量发送到Django视图

Question

我正在使用Django和React作为一个使用Trello的API的项目。我在djangoviews.py中创建了一些函数，可以获取用户的面板、列表和卡片。问题是，要获得一个列表，我需要用户选择一个板，因为列表的端点需要一个板id(等等(。我可以在我的react页面上显示用户的板，并将板的id存储在Index.js(在pages文件夹上(中的一个变量上，但我不知道如何将所选的板id发送到views.py，以根据用户所选板使用Trello的api。这是我的密码。

Django视图.py:

from rest_framework.decorators import api_view
from rest_framework.response import Response
from dotenv import load_dotenv
from treegia.settings import TRELLO_URL
import os
import requests
load_dotenv()
TRELLO_KEY = os.getenv('TRELLO_KEY')
TRELLO_TOKEN = os.getenv('TRELLO_TOKEN')

@api_view(['GET'])
def get_boards(request):
if request.method == 'GET':
board_endpoint = TRELLO_URL+'members/me/boards'
jsonObj = {'fields':'name,id', 'key':TRELLO_KEY, 'token':TRELLO_TOKEN}        
boards = requests.get(board_endpoint, json=jsonObj).json()
return Response(boards)

@api_view(['GET'])
def get_lists(request):
if request.method == 'GET':
list_endpoint = TRELLO_URL+ 'boards/' + id_board + '/lists'
jsonObj = {'fields':'name,id', 'id':id_board, 'key':TRELLO_KEY, 'token':TRELLO_TOKEN}
lists = requests.get(list_endpoint, json=jsonObj).json()
return Response(lists)

@api_view(['GET'])
def get_cards(request):
if request.method == 'GET':
card_endpoint = TRELLO_URL+ 'lists/' + id_list + '/cards'
jsonObj = {'fields':'name,id', 'id':id_list, 'key':TRELLO_KEY, 'token':TRELLO_TOKEN}        
cards = requests.get(card_endpoint, json=jsonObj).json()
return Response(cards)

React Index.js:

import React from 'react';
import Navbar from '../components/Navbar';
import '../styles/index.css'
const Index = () => {
const [boards, setBoards] = React.useState([]);
const [boardId, setBoardId] = React.useState([]);
const [lists, setLists] = React.useState([]);
const [listId, setListId] = React.useState([]);

React.useEffect(() => {
getBoards();
}, []);
React.useEffect(() => {
getLists();
}, []);

async function getBoards() {
await fetch('http://localhost:8000/boards/')
.then(resp => resp.json())
.then(data => {
console.log(data);
if(data) setBoards(data);
})
}
async function getLists() {
await fetch('http://127.0.0.1:8000/lists/')
.then(resp => resp.json())
.then(data => {
console.log(data);
if(data) setLists(data);
})
}

return (
<div id='index-page'>
<Navbar />
<div className='boards'>
<h1>Your boards</h1>
<div className='boards-container'>
{boards.map(board => (
<button key={board.id} onClick={() => {
setBoardId(board.id)
}}>{board.name}</button>
))}
</div>
</div>
<div className='lists'>
<h1>Your lists</h1>
<div className='lists-container'>
{lists.map(list => (
<button key={list.id} onClick={() => {
setListId(list.id)
}}>{list.name}</button>
))}
</div>
</div>
{boardId ? <p>{boardId}</p> : ''}
{listId ? <p>{listId}</p> : ''}
</div>
);
}

export default Index;

基本上，当用户选择一个板时，我会将id发送给get_lists函数。这样做可能吗？

Answer 1

在视图中

def get_lists(request):
print(request.query_params['id_list']) # 'id_list being the variable you want to pass from the front end

这设置了我们期望来自前端get请求的参数。记住在其周围添加一个try-catch。因为如果query_param不存在，它将抛出并出错。

FE中没有。。发出请求时，设置请求参数"id_list='

var url = new URL('http://127.0.0.1:8000/lists')
var params = {id_list:'3'} // or whatever the params
url.search = new URLSearchParams(params).toString();
fetch(url);

本质上，您可以像一样将查询参数添加到请求url中

http://127.0.0.1:8000/lists/?id_list=3&another_param=2..

在集成之前使用poster或smthn测试后端。。以确保正确的url和内容。