Practice of using Vuejs and Django to make a background system

Practice of using Vuejs and Django to make a background system

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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router