0

У меня не получается правильно настроить роуты

Конкретнее: Сейчас работает так, что по пути есть localhost:8000/api/ передается api в json формате, а по пути localhost:3000/ - фронтенд на реакте, так всё работает правильно

НО

Я хочу сделать так, чтоб api работал по пути localhost:8000/api/todos/, а фронт на localhost:3000/todos/, но у меня не получается сделать никак вообще, я не понимаю

Возможно это делается всё очень просто, подскажите, пожалуйста!

Вот мой код:

config - папка с настройками, главная папка django

todos - приложение

frontend - папка с реактом

config/urls.py:

from django.contrib import admin
from django.urls import include, path # new

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('todos.urls')), # new
]

todos/urls.py:

from django.urls import path
from .views import ListTodo, DetailTodo

urlpatterns = [
    path('<int:pk>/', DetailTodo.as_view()),
    path('', ListTodo.as_view()),
]

todos/models.py:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField()
    
    def __str__(self):
        return self.title

todos/views.py

from rest_framework import generics
from .models import Todo
from .serializers import TodoSerializer

class ListTodo(generics.ListAPIView):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

class DetailTodo(generics.RetrieveAPIView):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

todos/serializers.py:

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = ('id', 'title', 'body',)

fronteds/src/App.js:

import React, { Component } from 'react';
import axios from 'axios'; 

class App extends Component {
    state = {
      todos: []
    };

    componentDidMount() {
      this.getTodos();
    }

    getTodos() {
      axios
        .get('http://127.0.0.1:8000/api/')
        .then(res => {
          this.setState({todos: res.data });
        })
        .catch(err => {
            console.log(err);
        });
    }

    render() {
        return ( 
            <div> 
              {this.state.todos.map(item => ( 
                  <div key = {item.id}>
                      <h1>{item.title}</h1> 
                      <span>{item.body}</span>
                  </div>
              ))} 
            </div>
        );
    }
}

export default App;
3
  • через nginx делай
    – alex
    9 фев 2022 в 12:34
  • @alex, хорошо, я посмотрю. Если без этого, то не вариант вообще? Может можно как-то? 9 фев 2022 в 14:27
  • У меня получилось сделать так: Путь для api на localhost:8000/api/todos/. Следовательно в App.js меняем на .get('127.0.0.1:8000/api/todos'). С этим всё хорошо, реакт его видит. Теперь нужно сделать так, чтоб реакт работал не по localhost:3000/, а по localhost:3000/todos/. Было бы логично сменить в todos/urls.py путь на path('todos/', ListTodo.as_view()) В таком случае реакт просто не работает, ни по тому пути, ни по другому. Наверное это не работает потому что я меняю роуты для django всё-таки. Как изменить путь для реакта по другому я не понимаю, подскажите пожалуйста 9 фев 2022 в 16:23

1 ответ 1

0

Получилось исправить, решил так: Путь до api сменил на localhost:8000/api/todos/

В App.js изменил путь до api так: .get('http://127.0.0.1:8000/api/todos/')

В index.js добавил роуты:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const Routing = () => {
  return(
    <Router>
      <Routes>
        <Route exact path="todos/"  element={<App />} />
      </Routes>
    </Router>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <Routing />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.