Вопросы Теги

Создайте сайт с помощью React - Django (DRF?) - PostgreSQL [дубликат]

W3C объясняет разбор в форме псевдорежима: W3C Link

Следуйте за ссылками на QName, S и Attribute, чтобы получить более четкое картина. Исходя из этого, вы можете создать довольно хорошее регулярное выражение для обработки таких вещей, как снятие тегов.

79
задан sockpuppet 26 January 2017 в 05:47
поделиться

5 ответов

У меня нет опыта работы с Django, но концепции от front-end до back-end и front-end framework до рамки одинаковы.

  1. React будет потреблять ваш API Django REST . Передние и задние концы никак не связаны. React выполнит HTTP-запросы к вашему REST API для извлечения и установки данных.
  2. Реагировать с помощью Webpack (модуль-расслоение) & amp; Babel (transpiler), свяжет и преобразует ваш Javascript в один или несколько файлов, которые будут размещены на странице входа HTML. Изучите Webpack, Babel, Javascript и React и Redux (контейнер состояния). I полагаю, что вы не будете использовать шаблоны Django, но вместо этого разрешите React отображать интерфейс.
  3. Когда эта страница отображается, React будет использовать API для извлечения данных, чтобы React может сделать это. Ваше понимание HTTP-запросов, Javascript (ES6), Promises, Middleware и React имеет важное значение здесь.

Вот несколько вещей, которые я нашел в Интернете, что должен (на основе быстрого поиска Google):

Надеюсь, что это направит вас в правильном направлении! Удачи! Надеюсь, что другие специалисты, специализирующиеся в Django, могут добавить к моему ответу.

87
ответ дан Ninjakannon 15 August 2018 в 21:46
поделиться
  • 1
    Я просмотрю учебник YouTube. Я уже прошел оба этих учебника. Статья 1 не работает, хотя я внимательно следил за ней. (Скопировано и вставлено большую часть кода). Это на существующий проект, но я попробую новый. Статья 2 использовала устаревшие пакеты и не обновлялась в последнее время. В любом случае, читайте больше об AngularJS и Django, это похоже на API Django REST. Наверное, я искал решение без добавления этого измерения, но похоже, что это неизбежно. – sockpuppet 26 January 2017 в 06:37
  • 2
    Хорошо, я немного обновил свой ответ, вытащив устаревшую статью. Ему уже более 2 лет, поэтому его нужно было удалить. Помогают ли пронумерованные пуль? У вас возникли проблемы с пониманием? – Keith Alpichi 26 January 2017 в 06:46
  • 3
    Пробыв второе звено несколько раз по существующим проектам и новым проектам, я заставил их хотя бы говорить. Строка {% render_bundle 'main' %} неверна и должна быть {% render_bundle "main" %}. – sockpuppet 27 January 2017 в 17:52
  • 4
    спасибо за последний комментарий, что он забросил ошибку, не может отобразить главный из основного – shubhendu 17 December 2017 в 20:52

Первый подход - создание отдельных приложений Django и React. Django будет отвечать за обслуживание API, построенного с использованием инфраструктуры Django REST, и React будет использовать эти API, используя клиент Axios или API-интерфейс API браузера. Вам нужно иметь два сервера, как в разработке, так и в производстве, один для Django (REST API), а другой для React (для обслуживания статических файлов).

Второй подход отличается интерфейсом и бэкэнд приложения будут связаны. В основном вы будете использовать Django для того, чтобы обслуживать интерфейс React и выставлять REST API. Таким образом, вам нужно интегрировать React и Webpack с Django, это шаги, которые вы можете выполнить, чтобы сделать это

Сначала создайте проект Django, а затем внутри этого каталога проекта создайте приложение React с помощью React CLI

Для проекта Django установите django-webpack-loader с помощью pip: 

pip install django-webpack-loader

Затем добавьте приложение в установленные приложения и настройте его в settings.py, добавив следующий объект 

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

Затем добавьте шаблон Django, который будет использоваться для монтирования приложения React и будет обслуживаться Django 

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

Затем добавьте URL-адрес в urls.py для обслуживания этого шаблона 

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

Если вы запустите оба сервера Django и React, вы получите ошибку Django, говорящую, что webpack-stats.json не существует. Так что вам нужно сделать приложение React возможным для создания файла статистики.

Идите вперед и перемещайтесь внутри своего приложения React, затем установите webpack-bundle-tracker 

npm install webpack-bundle-tracker --save

Затем выгрузите свой Webpack конфигурации и перейдите к config/webpack.config.dev.js, затем добавьте 

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

. Добавьте плагин BundleTracker к Webpack и дайте ему команду генерировать webpack-stats.json в родительской папке.

Удостоверьтесь также в том, что вы делаете то же самое в config/webpack.config.prod.js для производства.

Теперь, если вы повторно запустите сервер React, будет создан файл webpack-stats.json, и Django сможет использовать его для поиска информации о пакетах Webpack, сгенерированных сервером React dev.

Есть и другие вещи. Более подробную информацию вы найдете в этом учебнике .

6
ответ дан Ahmed Bouchefra 15 August 2018 в 21:46
поделиться
  • 1
    Вам нужен webpack-dev-сервер, работающий в сочетании? Потому что в учебнике он запускает его. По моему мнению, его нужно запустить, потому что он используется django для обновления пакетов. Это правильно? Если это так, как это будет работать на производстве, то я бы все еще нуждался в двух серверах? – pavlee 5 March 2018 в 13:17
  • 2
    В разработке вам понадобятся сервер Django dev и сервер React / Webpack dev. В процессе производства вам просто нужен один сервер (Django), потому что Django позаботится об обслуживании встроенных файлов, сгенерированных с помощью npm run build – Ahmed Bouchefra 5 March 2018 в 15:10
  • 3
    Спасибо за разъяснение. – pavlee 5 March 2018 в 15:20
  • 4
    Можете ли вы рассказать о первом подходе? Насколько я понимаю, он будет содержать сервер express, который будет обслуживать файлы React static JS, и что JS-файлы будут выполнять запрос ajax для извлечения данных с сервера Django. Браузер сначала попадает на сервер express, он не имеет никакого представления о Django. Я прав? Что-то вроде рендеринга на стороне сервера можно сделать с помощью этого подхода? – yadav_vi 20 April 2018 в 12:34
  • 5
    Вы можете просто использовать статический хост и CDN для ваших статических файлов. Например, вы можете использовать страницы GitHub для размещения приложения React & amp; CloudFlare как CDN. Для рендеринга на стороне сервера вам нужна другая настройка, например, с использованием сервера Express, но есть также службы статического хостинга, которые предлагают серверную визуализацию, такую ​​как Netlify. – Ahmed Bouchefra 21 April 2018 в 01:37

Заметка для всех, кто приходит из бэкэнда или роли на основе Django и пытается работать с ReactJS: никому не удается успешно настроить среду ReactJS с первой попытки:)

Существует блог из Owais Lone, доступный из http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; однако синтаксис конфигурации Webpack устарел.

Предлагаю вам выполнить описанные в блоге шаги и заменить файл конфигурации webpack на содержимое ниже. Однако, если вы новичок в Django и React, жуйте по одному из-за кривой обучения, вы, вероятно, будете разочарованы. 

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};
16
ответ дан Ehsan 15 August 2018 в 21:46
поделиться

Я чувствую вашу боль, поскольку я тоже начинаю работать Django и React.js. Было ли несколько проектов Django, и я думаю, React.js отлично подходит для Django. Однако, это может быть пугающе начать. Мы стоим на плечах гигантов здесь;)

Вот как я думаю, все работает вместе (большая картина, пожалуйста, кто-то поправьте меня, если я ошибаюсь).

  • Django и его база данных (я предпочитаю Postgres) с одной стороны (backend)
  • Django Rest-framework, обеспечивающий интерфейс для внешнего мира (например, Mobile Apps и React и т. д.)
  • Reactjs, Nodejs, Webpack, Redux (или, возможно, MobX?) С другой стороны (frontend)

Связь между Django и «frontend» выполняется через платформу Rest. Убедитесь, что вы получили авторизацию и разрешения для платформы Rest.

Я нашел хороший шаблон котла именно для этого сценария, и он работает из коробки. Просто следуйте readme https://github.com/scottwoodall/django-react-template , и как только вы закончите, у вас будет довольно хороший проект Django Reactjs. Ни в коем случае это не предназначено для производства, а скорее как способ для вас разобраться и посмотреть, как все связано и работает!

Одно небольшое изменение, которое я хотел бы предложить, следующее: Следуйте настройке инструкции, но прежде чем перейти ко второму шагу для настройки бэкэнда (Django здесь https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md ), измените файл требований для установки.

Вы найдете файл в своем проекте в /backend/requirements/common.pip. Замените его содержимое на этот 

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

, который получает вы - последняя стабильная версия для Django и ее системы Rest.

Надеюсь, что это поможет.

27
ответ дан imolitor 15 August 2018 в 21:46
поделиться
  • 1
    Через год я переключился на VUE.js ( vuejs.org ). Я работал с шаблонами Django, и он будет связываться с базой данных через Django Rest Framework. Он быстрый и легкий (~ 20kb) – imolitor 9 January 2018 в 18:32
16
ответ дан Ehsan 5 September 2018 в 21:24
поделиться
Другие вопросы по тегам:

Похожие вопросы: