[1]Django Rest API + React.js + Redux + webpack 前後端整合

# [1]Django Rest API + React.js + Redux + webpack 前後端整合 ###### tags: `python` `Django` `Django Rest framework` `React.js` `redux` `webpack` > [time= 2019 11 26 ] > 原文 & 參考： > https://www.youtube.com/watch?v=Uyei2iDA4Hs&list=PLillGF-RfqbbRA-CIUxlxkUpbq0IFkX60&index=1 ## Basic REST API 使用 Mac 建置全端環境：找一個你想建立此專案的位置此範例位置 `~/Documents/Code/Python/django_rest_api_react/` *終端機目前位置 `~/Documents/Code/Python/django_rest_api_react/`* 開啟命令終端機查看 python 版本，輸入 ```= $ python --version ``` >*Python 3.7.3* 安裝 pipenv 套件，用來建置虛擬環境 ```= $ sudo pip install pipenv ``` 建置 python 虛擬環境 ```= $ pipenv shell ``` 資料結構 ``` django_rest_api_react └──Pipfile ``` 用 VS Code 開啟資料夾 ```= $ code . ``` 安裝 Django, Django REST framework, Django-Rest-Knox ```= $ pipenv install django djangorestframework django-rest-knox ``` > *django version 2.2.7* > *django-rest-knox verson 4.1.0* > *djangorestframework verson 3.10.3* 資料結構 ``` django_rest_api_react ├──Pipfile └──Pipfile.lock ``` ### 建立一個 Django project 名為 leadmanager ```= $ django-admin startproject leadmanager ``` 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ │ ├──__init__.py │ │ ├──asgi.py │ │ ├──settings.py │ │ ├──urls.py │ │ └──wsgi.py │ │ │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` 前往 leadmanager 資料夾 ``` $ cd leadmanager ``` *終端機目前位置 `~/django_rest_api_react/leadmanager/`* bulding a Django application 新增一個你要執行的 Django 應用程式 ```= $ python manage.py startapp leads ``` 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ ├──leads │ │ ├──migrations │ │ ├──__init__.py │ │ ├──admin.py │ │ ├──apps.py │ │ ├──models.py │ │ ├──tests.py │ │ └──views.py │ │ │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` 開起 `./leadmanager/leadmanager/settings.py` 加入應用程式 leads 和 rest_framework 在 `INSTALLED_APPS`: ```python= INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', # add the rest_framework 'leads', # add the leads app ] ``` ### creating a Django model 開啟 `./leadmanager/leads/models.py` 並新增 Lead model: ```python= from django.db import models class Lead(models.Model): name = models.CharField(max_length=100) email = models.EmailField(max_length=100, unique=True) message = models.CharField(max_length=300, blank=True) created_at = models.DateTimeField(auto_now_add=True) ``` 創建 migration ```= $ python manage.py makemigrations leads ``` 遷移資料庫 ```= $ python manage.py migrate ``` 執行完後會創建一個 db.sqlite3 和 0001_initial 檔 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ ├──leads │ │ ├──migrations │ │ │ ├──__init__.py │ │ │ └──0001_initial.py │ │ │ │ │ ├──__init__.py │ │ ├──admin.py │ │ ├──apps.py │ │ ├──models.py │ │ ├──tests.py │ │ └──views.py │ │ │ ├──db.sqlite3 │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` ### Django REST serializers 新增一個檔案命名為 `./leadmanager/leads/serializers.py` ，在裡面寫入： ```python= from rest_framework import serializers from leads.models import Lead # Lead Serializer class LeadSerializer(serializers.ModelSerializer): class Meta: model = Lead #fields = ('id', 'name', 'email', 'message') fields = '__all__' # 所有欄位 ``` 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ ├──leads │ │ ├──migrations │ │ ├──__init__.py │ │ ├──admin.py │ │ ├──apps.py │ │ ├──models.py │ │ ├──serializers.py │ │ ├──tests.py │ │ └──views.py │ │ │ ├──db.sqlite3 │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` ### creating an API *setting up the controll… ehm the views* 新增一個檔案命名為 `./leadmanager/leads/api.py` ，在裡面寫入： ```python= from leads.models import Lead from rest_framework import viewsets, permissions from .serializers import LeadSerializer # Lead Viewsets class LeadViewSet(viewsets.ModelViewSet): queryset = Lead.objects.all() permission_classes = [ permissions.AllowAny ] serializer_class = LeadSerializer ``` 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ ├──leads │ │ ├──migrations │ │ ├──__init__.py │ │ ├──admin.py │ │ ├──api.py │ │ ├──apps.py │ │ ├──models.py │ │ ├──serializers.py │ │ ├──tests.py │ │ └──views.py │ │ │ ├──db.sqlite3 │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` ### setting up the rout… ehm the urls 配置 URL，開啟 `./leadmanager/leadmanager/urls.py:` 寫入： ```python= from django.contrib import admin from django.urls import path, include # modify urlpatterns = [ path('', include('leads.urls')), #modify ] ``` 新增一個檔案命名為 `./leadmanager/leads/urls.py` 在裡面寫入： ```python= from rest_framework import routers from .api import LeadViewSet router = routers.DefaultRouter() router.register('api/leads', LeadViewSet, 'leads') urlpatterns = router.urls ``` 資料結構 ``` django_rest_api_react ├──leadmanager │ ├──leadmanager │ ├──leads │ │ ├──migrations │ │ ├──__init__.py │ │ ├──admin.py │ │ ├──api.py │ │ ├──apps.py │ │ ├──models.py │ │ ├──serializers.py │ │ ├──tests.py │ │ ├──urls.py │ │ └──views.py │ │ │ ├──db.sqlite3 │ └──manage.py │ ├──Pipfile └──Pipfile.lock ``` 現在你可以啟動 development server 檢查看看: ```= $ python manage.py runserver ``` 前往：http://127.0.0.1:8000/api/leads/ (關閉直接在終端機按 `control + c`) ![](https://i.imgur.com/jzYy7OB.png) 現在透過下方表格新增資料 [[2]Django Rest API + React.js + Redux + webpack 前後端整合](https://hackmd.io/@RoyChen/rJaW62chH)