Practice of using Vuejs and Django to make a background system

ricite. Management platform construction record: Combine Vuejs and Django, and use REST API to call the data of other website applications and also record the responsible tool usage method

chmod setting

backend/ db media/ 664 :www-data

PATCH METHOD DOES NOT WORK IN DJANGO

Need to REwrite the view.py and serializers.py for this.

Git

After the repo is built on github, upload git to local files

git add ...
git commit -m "some comment"
git push

Download the repo on github to the local

git add ...
git commit -m "some comment"
git pull

Fontend init

Choose nvm as node’s version manager: nvm-sh/nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Choose LTS for node (stable version)

nvm install --lts

Install Vuejs

npm install -g vue-cli

Use Webpack template to create a project: vuejs-templates/webpack

vue init webpack frontend
cd frontend
npm install

Backend init

Install python3, pip (python3 package manager), venv (virtual environment)

sudo apt-get install python3 python3-pip python3-venv

Install Django, create a project (project) and application (app)

source venv/bin/activate
pip3 install django
django-admin startproject backend
cd backend/
python3 manage.py startapp users

Representational state transfer (REST)

Build an API for the front-end to capture back-end data: Django-rest-framework

pip3 install djangorestframework
touch backend/users/serializers.py
# backend/backend/setting.py
# ...
INSTALL_APPS = [
    # ...
    'rest_framework',
    # ...
]

# backend/users/serializers.py
from django.contrib.auth.forms import User

from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = '__all__'

# backend/users/views.py
from django.contrib.auth.forms import User

from .serializers import UserSerializer

from rest_framework import viewsets

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer

# backend/backend/urls.py
# ...

from django.urls import include

from rest_framework import routers

from  users . views  import  UserViewSet

router = routers.DefaultRouter()

router.register(
    'users',
    UserViewSet
)

urlpatterns = [
    # ...
    path('api/', include(router.urls)),
    # ...
]

Cross-Origin Resource Sharing (CORS)

Since the front and back ends are on different ports when running locally, cross-domain sharing needs to be deployed , using Django-cors-headers .

pip3 install django-cors-headers
# backend/backend/settings.py
# ...

INSTALL_APPS = [
    # ...
    'corsheaders',
]

# ...

MIDDLEWARE  = [
     # ... 
    # There are requirements for the location, see the official document'django.contrib.sessions.middleware.SessionMiddleware 
    ' ,
     'corsheaders.middleware.CorsMiddleware' ,
     'django.middleware.common.CommonMiddleware' ,
     # ...
]

# ...

# When product is changed to False, and whitelist 
CORS_ORIGIN_ALLOW_ALL  =  Ture

# ...

JWT

Security considerations, use JWT for authentication, see REST framework JWT Auth for details

pip3 install djangorestframework-jwt
# backend/backend/settings.py
# ...

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}

# ...

# backend/backend/urls.py
# ...

from rest_framework_jwt.views import obtain_jwt_token

urlpatterns = [
    # ...
    path('api/token_auth/', obtain_jwt_token),
    #...
]

Axios Vuex

Use axios to configure with Vuex when calling the front end

mkdir fontend/src/store
touch fontend/src/store/index.js

Server deployment and SSL certificate

Domain name and server purchase apache and wsgi_mod certbot

Download Details:

Author: huanglianqi

Live Demo: https://admin.ricifoundation.com/#/login

GitHub: https://github.com/huanglianqi/ricite

#vuejs #vue #javascript #vue-js #django