Backend Setup with Django

Internationalization & Timezone

# d_prj/settings.py
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False

Frontend HTTP Client: Axios

Installation & Global Registration

# v-proj/src/main.js
import axios from 'axios'
Vue.prototype.$http = axios

Sample GET Request inapting to Vue Lifecycle

// v-proj/src/views/Car.vue
export default {
  data () {
    return { autos: [] }
  },
  async created () {
    try {
      const { data } = await this.$http.get('http://127.0.0.1:8000/autos/')
      this.autos = data
    } catch (err) {
      console.error(err)
    }
  }
}

Handling CORS in Django

Install django-cors-headers

pip install django-cors-headers

Enable CORS Globally

# d_prj/settings.py
INSTALLED_APPS += ['corsheaders']
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware'] + MIDDLEWARE
CORS_ALLOW_ALL_ORIGINS = True

Sanding Data with Axios

Query Params vs Request Body

// v-proj/src/views/Car.vue
await this.$http.post('http://127.0.0.1:8000/autos/', {
  make: 'Tesla',
  year: 2023
}, {
  params: { format: 'json' }   // appended to URL
})

Receiving Data in Django

# app/views.py
from django.http import JsonResponse
import json

def autos_view(request):
    if request.method == 'POST':
        payload = json.loads(request.body)
        print(payload)  # {'make': 'Tesla', 'year': 2023}
    return JsonResponse({'status': 'ok'})

Returning Media-Ready JSON

# app/views.py
from django.conf import settings

def autos_list(request):
    qs = list(Auto.objects.values('id', 'title', 'photo'))
    for auto in qs:
        auto['photo'] = f"http://localhost:8000{settings.MEDIA_URL}{auto['photo']}"
    return JsonResponse(qs, safe=False)

Centralized JS Settings

// v-proj/src/config/api.js
export default {
  BASE_URL: 'http://127.0.0.1:8000'
}

// v-proj/src/main.js
import apiCfg from '@/config/api'
Vue.prototype.$api = apiCfg

// usage in any component
this.$http.get(`${this.$api.BASE_URL}/autos/${id}/`)

Adding Element-UI

npm i element-ui -S

// v-proj/src/main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Integrating jQuery & Bootstrap 3

npm i jquery bootstrap@3

// v-proj/vue.config.js
const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

// v-proj/src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'