Fullstack? Why not (Django + Vue-js)

Table of Contents

1. Django side
2. Vue.js side

Implement episode 1

---

Django side

---

• Create a new Django project

django-admin startproject {project} .

• Start the server with

python manage.py runserver

• Add application

python manage.py startapp {app}

• Migrate database

python manage.py migrate

Change settings before run server

• Change the {django-project-dir}\{django-project-name}\settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'shark',
    'corsheaders',
]

CORS_ORIGIN_ALLOW_ALL = True

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

shark is an application that I added with startapp

'corsheaders'  
CORS_ORIGIN_ALLOW_ALL = True  
'corsheaders.middleware.CorsMiddleware',

These three line is used for the CORS purpose (Just think that it enabled CORS which allow you pass API between server-client)

• Database settings
  Using sqlite3

  DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
  }
  

  or Oracle

  DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.oracle',
        'NAME': 'localhost:1521/XEPDB1',
        'USER': 'django',
        'PASSWORD': 'django',
    }
  }
  

  or Mysql

  DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'polling',
        'HOST': 'localhost',
        'USER': 'djangouser',
        'PASSWORD': 'djangopassword',
          
        'OPTIONS': {
            'sql_mode': 'traditional',
        }
    }
  }
  

  These 3 are patterns I have used in my testing projects.

Run python manage.py migrate to apply these changes

Vue.js side

---

vue create testfrontend

testfrontend is my frontend project

• Start the frontend with

$cd testfrontend
$npm run serve