Создайте свой веб-сайт с помощью React и Django REST Framework

Django React.js Redux
Создайте свой веб-сайт с помощью React и Django REST Framework

В этой колонке я буду время от времени делиться некоторыми передовыми статьями о Django. Содержание сосредоточено на сводке навыков и опыта. Источники временно:

  1. Medium
  2. Twitterизвестный блогер

Если вам интересно, обратите внимание и дайте мне немного мотивации.Ведь на перевод и организацию нужно время.Спасибо.

--

Оригинальный адрес:Creating websites using React and DRF(с изменениями)
Оригинальный автор:Mark Winter
Переводчик:Про книга
Вычитка:Про книга
Уровень рекомендации: ✨✨✨✨

В нашей недавней работе архитектура, используемая для создания веб-сайта, представляет собой интерфейс React с серверной частью Django REST Framework (DRF). Они взаимодействуют, вызывая внутренний API, используя axios (библиотеку внешнего интерфейса) на внешнем интерфейсе. Мы также используем Redux (интерфейсную библиотеку) для хранения глобального состояния приложения (которое существует на стороне браузера). Это наш предпочтительный выбор, поскольку он позволяет полностью разделить переднюю и заднюю части. Пока мы заранее определяем запрашиваемый список ресурсов (далее — конечная точка) и формат возвращаемых данных, фронтенд и бэкенд могут разрабатываться параллельно. Это также позволяет нам легко создавать мобильные приложения для любых будущих проектов, поскольку они все еще могут повторно использовать серверную часть. API.

В оставшейся части этой статьи я опишу, как настроить внешний интерфейс React и внутренний интерфейс DRF. Обратите внимание, что я предполагаю, что вы уже знакомы с React, Redux, Django, DRF, NPM и т. д. Это не базовое руководство.

Бэкэнд

На бэкэнде особо нечего делать, кроме как просто установить Django и DRF и настроить базу данных.

$ pip3 install django djangorestframework django-filter
$ pip3 freeze > requirements.txt

Да, мы используем Python3

Найдите каталог и создайте проект Django и приложение Django:

$ django-admin startproject backend
$ cd backend
$ django-admin startapp api

Затем вы должны настроить свою базу данных и отредактировать файл настроек проекта, чтобы использовать ее. в ДжангоОфициальный сайтДокументацию о том, как это сделать для вашей конкретной БД, можно найти на .

Либо можно ничего не делать, поможет создать файловую базу в проекте и каталоге: sqlite3.db

Наконец, вы также должны следоватьздесьИнструкции по настройке DRF.

Некоторые студенты немного запутались в методе аутентификации при разделении внешнего и внутреннего интерфейса.Давайте посмотрим, как настроить внутреннюю часть аутентификации в архитектуре разделения внешнего и внутреннего интерфейса:

# file: api/urls.py
from django.conf.urls import url
from rest_framework.authtoken import views as drf_views

urlpatterns = [
    url(r'^auth$', drf_views.obtain_auth_token, name='auth'),
]

Просто чтобы убедиться, что вашbackend/urls.pyТеперь файл должен выглядеть так:

# file: backend/urls.py
from django.conf.urls import url, include

urlpatterns = [
    url(r'^', include('api.urls', namespace='api', app_name='api')),
]

Делая это, мы можем позволить каждому приложению управлять своим собственным URL-адресом. Потому что, возможно, в будущем вы добавите больше приложений на серверную часть и добавите их вbackend/urls.py.

Теперь у вас есть серверный API DRF: вызов/authконечной точке, получите к ней доступ, чтобы получить токен аутентификации. Давайте сначала настроим пользователя и запустим внутренний сервер для тестирования.

$ python3 manage.py migrate
$ python3 manage.py createsuperuser
$ python3 manage.py runserver 0.0.0.0:8000

Не забудьте запустить команду миграции в первый раз (migrate) для создания базы данных. Затем создаем пользователя. При работающем сервере вы можете использовать curl для быстрой проверки вашего/authконечная точка:

$ curl -X POST -d "username=username&password=password"
http://localhost:8000/auth

В процессе проверки переводчик обнаружил, что автор проигнорировал некоторые детали, и добавил следующее:

1. Добавитьrest_frameworkа такжеrest_framework.authtokenприбытьINSTALLED_APPSКонфигурация:

# file: backend/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'rest_framework.authtoken',
]

2. Запустите команду, чтобы создать базу данных, необходимую для приложения аутентификации:

$ python manage.py migrate
Интерфейс ввода/вывода

Вот, бэкэнд сделан

Фронтенд

Для внешнего интерфейса в качестве основы мы используем скаффолдинг Facebook create-react-app. Первое, что нужно сделать, это установить его, а затем использовать для создания нового проекта в корне папки проекта.

$ npm install -g create-react-app
$ create-react-app frontend
$ cd frontend
$ yarn eject

Подсказка: бегиyarn ejectВы должны отправить все изменения git раньше, потому что он изменит ваши файлы и добавит каталоги, опасаясь, что вы потеряете свои предыдущие изменения.

Далее мы устанавливаем некоторые зависимости:

$ npm install --save-dev babel-preset-es2015 babel-preset-stage-3
$ npm install --save redux redux-logger redux-persist react-redux
$ npm install --save axios react-router-dom lodash

А пока давайте просто покажем основную часть, которая соединяет переднюю часть с задней частью. Сначала создайте хранилище избыточности, используйте его, чтобы сохранить токен пользователя для выполнения дополнительных вызовов API в будущем.

// file: src/store.js
import { compose, createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      createLogger(),
    ),
    autoRehydrate()
  )
);
persistStore(store);
export default store;

Затем настройте редуктор токенов:

// file: src/reducers/index.js
import { combineReducers } from 'redux';
import * as actionType from '../actions/types';

const tokenInitialState = null;
const token = (state = tokenInitialState, action) => {
  switch(action.type) {
    case actionType.SET_TOKEN:
      return action.data;
    default:
      return state;
  }
}

const appReducer = combineReducers({
  token,
})

const rootReducer = (state, action) => {
  return appReducer(state, action);
}

export default rootReducer;

Наконец, настройте действие (обратите внимание, что блок кода состоит из двух разных файлов).

// file: src/actions/index.js
import * as actionType from './types';

export const setToken = (data) => {
  return {
    type: actionType.SET_TOKEN,
    data
  }
}
// file: src/actions/types.js
export const SET_TOKEN = "SET_TOKEN";

С помощью действия мы теперь можем отправить токен пользователя в хранилище после входа в систему. Давайте посмотрим, как войти в систему:

// file: src/util/Auth.js
import axios from 'axios';
import _ from 'lodash';
import store from '../store';
import { setToken } from '../actions'
import { URL, LOGIN } from '../config/Api';

export function InvalidCredentialsException(message) {
    this.message = message;
    this.name = 'InvalidCredentialsException';
}

export function login(username, password) {
  return axios
    .post(URL + LOGIN, {
      username,
      password
    })
    .then(function (response) {
      store.dispatch(setToken(response.data.token));
    })
    .catch(function (error) {
      // raise different exception if due to invalid credentials
      if (_.get(error, 'response.status') === 400) {
        throw new InvalidCredentialsException(error);
      }
      throw error;
    });
}

export function loggedIn() {
  return store.getState().token == null;
}

Этот код использует axios для отправки информации для входа в наш/authконечная точка, затем возвращаемый токен

отправка в наш магазин редуксов. Как только это будет сделано, мы можем использовать наш сохраненный токен для создания клиента API на основе axios), что упрощает выполнение других вызовов API из других мест в нашем компоненте React.

// file: src/util/ApiClient.js
import axios from 'axios';
import store from '../store';
import { URL } from '../config/Api';

export const apiClient = function() {
    const token = store.getState().token;
    const params = {
        baseURL: URL,
        headers: {'Authorization': 'Token ' + token}
    };
    return axios.create(params);
}

В предыдущих и последних двух блоках кода мы ссылались на следующие../config/Apiдокумент. Это просто файл, который сопоставляет константы с конечными точками, что делает код более читабельным и легким для модификации. (Если вы немного запутались, то можете обратиться к коду, восстановленному переводчиком по задумкам автора, в конце статьи)

export const URL = process.env.API_URL;
export const LOGIN = "/auth";

Это набор кода, который соединяет наш интерфейс и серверную часть. Теперь вы можете попробовать функцию входа в систему Auth.js, чтобы получить токен аутентификации пользователя, который мы создали ранее. Это позволяет вам увидеть результат действия setToken redux, проверив вывод redux-logger из инструментов разработчика браузера.

Обзор каталога

Если вам непонятны некоторые детали, вы можете посмотреть непосредственно исходный код:tmpbook/django-auth-with-react

--

Когда полный текст будет готов, просьба указать источник для перепечатки:zhuanlan.zhihu.com/p/33546988

Если вы считаете, что такая статья очень полезна для вас, обязательно обратите внимание, спасибо

Категории