开发环境部署（五）Django + REACT项目部署

单纯想学习如何写django项目，直接访问djangoproject.com的教程，学会创建project和apps即可。

本文重点是建立restframework提供REST的DRF项目，并且完成与REACT的前端交互（加上必要的中间插件）

1、后端的搭建

1、按照官方教程安装相关依赖

http://www.django-rest-framework.org/

sudo pip3 install djangorestframewor
sudo pip3 install markdown
sudo pip3 install django-filter

2、创建新的DJANGO项目和对应的API项目

# Set up a new project with a single application
django-admin.py startproject Backend.  # Note the trailing '.' character
cd Backend
django-admin.py startapp api
cd ..

3、执行命令建立数据库

python3 manage.py migrate

4、创建新用户

python3 manage.py createsuperuser --email admin@example.com --username admin

5、创建一个新的 Backend/api/serializers.py

from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('url', 'username', 'email', 'groups')


class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ('url', 'name')

6、在api/views.py下创建如下内容

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from Backend.api.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

7、在根目录Backend/urls 创建如下内容

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from Backend.api.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

8、在Backend的 settings.py中添加如下内容

INSTALLED_APPS = (
    ...
    'rest_framework',
)

9、最终API调用图

python3 manage.py runserver

 

 

2、前端的搭建

先安装nodejs

 

参考官方网站的教程

https://reactjs.org/docs/add-react-to-a-new-app.html

1、安装并创建新app

sudo npm install -g create-react-app
create-react-app my-app

2、启动app

cd my-app
npm start

3、刷新页面看到结果

 

4、接下来安装相关依赖

(不安装会提示 ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed)

sudo npm install -g npm-install-peer #这是解决ajd@^6.0.0的问题
sudo npm install webpack
sudo npm install --save-dev babel-preset-es2015 babel-preset-stage-3
sudo npm install --save redux redux-logger redux-persist react-redux
sudo npm install --save axios react-router-dom lodas

（可能安装完还会提示requires a peer of react@>=15 but none is installed. You must install peer dependencies yourself。

检查一下package.json，如安装了react高版本就没问题，可能没识别对)

现在，我们先只展示将前端连接后端的主要部分。

5、首先创建一个 redux store，用它来保存用户的 token，以便将来进行更多的API调用。