Как мне объединить мой реагирующий сервер с сервером django, используя рендеринг на стороне сервера?

Question

Когда я развертываю свой проект django с

python manage.py runserver, а мое приложение реагирования с npm start,

, я не знаю, какой из них является моим "настоящим проектом".Я думаю, что вопрос сводится к рендерингу на стороне клиента по сравнению с рендерингом на стороне сервера, и сейчас я хочу перейти на рендеринг на стороне сервера, так как я больше знаком с django, чем с реакцией.Это означало бы, что я должен настроить URL и представления с правильными django / drf?Если это так, мои вопросы следующие:

1. Как я "вызываю" реагирую всякий раз, когда перехожу на URL (например, website.com/items).Я хочу вернуть список всех своих предметов в красиво отформатированный HTML-файл.Я подозреваю, что это связано с параметром шаблона в функции path ().

2. Как запретить пользователям доступ к представлениям API (website.com/api/items), который является URL-адресом, который я использую для обработки вызовов API с помощью django-rest-framework, но яне хочу, чтобы люди видели это, но также хотят реагировать, чтобы «увидеть» это.

3. Поскольку я выполняю рендеринг на стороне сервера, есть ли что-то еще, что нужно моему приложению реагирования, кроме правильных http-вызовов моих URL-адресов API и придания моему HTML-шаблону привлекательного вида?

Большое спасибо.Любые ответы / онлайн-ресурсы очень ценятся.

URL проекта:

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

URL приложения:

urlpatterns = [
    path('', views.index, name='index'), #nothing much here yet
]

URL API:

urlpatterns = [
    path('item',views.ListItem.as_view())
]

Мой базовый React App.js, который простохватает все предметы и показывает их

class App extends Component {
    state = {
    items: []
    };
   async componentDidMount(){
    try{
    const res = await fetch('http://127.0.0.1:8000/api/item');
    const items = await res.json();
    this.setState({
        items});
    }
    catch (e){
        console.log(e);}
   }
    render(){
        return(
            <div>
                {this.state.items.map(item =>(
                    <div key={item.id}>
                        <h1>{item.item}</h1>
                        <h1>{item.price}</h1>
                         <span>{item.description}</span>
                    </div>
                ))}
             </div>
         );
        }

}
export default App;

Answer 1

Если вы хотите, чтобы серверное приложение отображало ваше реагирующее приложение, вам нужно настроить свой javascript в представлении шаблона в приложении django.Прямо сейчас вы запускаете приложение реагирования и приложение django на разных серверах, поэтому вы не получаете рендеринг на стороне сервера для приложения реагирования.это будет связано с созданием реакции с веб-пакетом или кардиостимулятором.

То, что я хотел бы сделать, это связать приложение реагирования в представлении django, таким образом выполняется рендеринг на стороне сервера.

Надеюсь, это имеет смысл.