[PYTHON] CRUD GET with Nuxt & Django REST Framework ①

Overview

Front: Nuxt Backend: Django REST Framework (DRF) When I started a new project etc. in, it became troublesome to check the settings etc. one by one, so I will summarize it.

However, writing only the configuration file is not enough as an article personally.

So, I plan to write up to the point of implementing membership registration by hitting the API, which is the basic operation, to perform CRUD. This time, DB uses SQLite. If you want to use another RDB such as PostgreSQL or MySQL, just rewrite the DB settings on the DRF side, so please make those settings yourself.

In this article, you can get detailed product information by hitting the API created by DRF from Nuxt.

The source code can be found at here, so if you have any questions, please take a look.

You can also answer by asking Twitter or in the comments section of this article if you have any questions.

Back end

First, create a familiar project. Let's arrange from the setting from the DRF side.

$  mkdir nuxt-django
$ cd nuxt-django
$ django-admin startproject server
$ cd server
$ django-admin startapp practice

First, let's change the configuration file.

settings.py


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'practice', #add to
    'rest_framework', #add to
    'corsheaders', #add to
]

......


#add to
#Origin to allow
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:3000',
    )
CORS_ORIGIN_ALLOW_ALL = True

......

#The following changes and additions

# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'ja-JP'
TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

What I added to ʻINSTALLED_APPS is the rest_frameworkwhich is required to use the app and DRF added bystartapp, and the corsheaders` which is necessary to access with axios.

CORS_ORIGIN_WHITELIST needs to be written to set where to allow access.

After that, change LANGUAGE_CODE and TIME_ZONE to support Japanese.

The last MEDIA ... was added to handle images after this. It is not necessary if you do not use the image file, but it is recommended to describe it because it will be used in many cases.

urls.py


from django.contrib import admin
from django.urls import path,include #add to
from django.conf.urls.static import static #add to
from django.conf import settings #add to


urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/',include('practice.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

models.py


from django.db import models

# Create your models here.


CATEGORY = (
    (1, 'Beverage'),
    (2, 'flower arrangement'),
)

class Item(models.Model):
    name = models.CharField(verbose_name='Product name',max_length=255,null=False)
    category = models.IntegerField(verbose_name='category',choices=CATEGORY)
    image = models.FileField(verbose_name='image')
    price = models.PositiveIntegerField(verbose_name='image',null=False)
    description = models.TextField(verbose_name='Details',blank=True,null=True)

    def __str__(self):
        return self.name

This time I made a model of a common product. Then create a serializer to handle this item.

serializers.py


from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = '__all__'

Then write views.py and urls.py to route this.

views.py


from django.shortcuts import render

from rest_framework import viewsets,filters,permissions,generics
from .serializers import ItemSerializer
from .models import Item

# Create your views here.
class ItemListView(generics.ListAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

class ItemDetailView(generics.RetrieveAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

practice/urls.py


from django.urls import path

from .views import ItemListView,ItemDetailView

urlpatterns = [
    path('items/',ItemListView.as_view()),
    path('items/<int:pk>/',ItemDetailView.as_view()),
]

Finally, add the following so that admin can handle the data.

admin.py


from django.contrib import admin

from .models import Item

# Register your models here.
admin.site.register(Item)

Regarding why ʻItemListView and ʻItemDetailView are separated, it will be easier to use if they are separated when implementing permissions, and it will be necessary to separate them later.

This completes the basic backend settings.

$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py createsuperuser
username(leave blank to use 'kuehar'): kueharx
mail address: 
Password: 
Password (again): 
Superuser created successfully.
$ python manage.py runserver

With the local server running http://localhost:8000/admin Let's access and add data like this.

スクリーンショット 2020-05-10 18.44.25.png

After that http://localhost:8000/api/items When you access, you should see a screen like the one below.

スクリーンショット 2020-05-10 19.28.58.png

At this stage, the construction of the backend for GET from the frontend is complete.

Now let's move on to building the front end.

front end

First, let's create a project. This time I made it with the following settings.

$ npx create-nuxt-app client

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description nuxt-django-auth sample app
? Author name kueharx
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework Express
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
$ cd client

do it

$ npm run dev

Then

スクリーンショット 2020-05-10 20.35.59.png

I feel like this.

I will add settings. First of all,

$ npm install -s @nuxtjs/axios

After doing, add the following description to the configuration file.

JavaScript:nuxt.config.js



....

modules: [
    '@nuxtjs/axios',
  ],

axios: {
    baseURL: 'http://localhost:8000/api/',
  },

To add. This is an element that indicates which local server to connect to when using axios, and if you do not add this, you will not be able to hit the api you created earlier.

Well, inspire looks like this at first,

スクリーンショット 2020-05-10 20.36.55.png

Let's add some code.

This time, I will make a card that displays the product outline and link.

Let's make that card first.

ItemCard.vue


<template>
  <div class="card item-card">
    <img :src="item.image" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">
        {{ item.name }}
      </h5>
      <p class="card-text">
        <strong>Category</strong> {{ item.category }}
      </p>
      <p class="card-text">
        <strong>price:</strong> {{ item.price }}
      </p>
      <div class="action-buttons">
        <nuxt-link :to="`/items/${item.id}/`" class="btn btn-sm btn-primary">
Details
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item', 'onDelete']
}
</script>
<style>
.item-card {
    box-shadow: 0 1rem 1.5rem rgba(0,0,0,.6);
}
img.card-img-top{
    height:200px;
}
.action-buttons {
  text-align: right;
}
</style>

The card layout is now complete.

Let's read this card with inspire.

inspire.vue


<template>
  <v-layout>
    <v-flex class="text-center">
      <img
        src="/v.png "
        alt="Vuetify.js"
        class="mb-5"
      >
      <blockquote class="blockquote">
        &#8220;First, solve the problem. Then, write the code.&#8221;
        <footer>
          <small>
            <em>&mdash;John Johnson</em>
          </small>
        <div class="row">
        <div class="col-12 text-right mb-4">
        <div class="d-flex justify-content-between">
          <h3>Product list</h3>
          <!-- <nuxt-link to="/items/add" class="btn btn-info">
Add a product
          </nuxt-link> -->
        </div>
      </div>
      <template v-for="item in items">
        <div :key="item.id" class="col-lg-3 col-md-4 col-sm-6 mb-4">
          <item-card :on-delete="deleteitem" :item="item" />
        </div>
      </template>
    </div>
        </footer>
      </blockquote>
    </v-flex>
  </v-layout>
</template>

<script>
import ItemCard from '~/components/ItemCard.vue'

export default {
  components: {
    ItemCard
  },
  async asyncData ({ $axios, params }) {
    try {
      const items = await $axios.$get('items/')
      return { items }
    } catch (e) {
      return { items: [] }
    }
  },
  data () {
    return {
      items: []
    }
  },
  methods: {
    async deleteitem (item_id) { //eslint-disable-line
      try {
        await this.$axios.$delete(`/items/${item_id}/`) //eslint-disable-line
        const newitems = await this.$axios.$get('/items/')
        this.items = newitems
      } catch (e) {
        console.log(e)
      }
    }
  },
  head () {
    return {
      title: 'Product list'
    }
  }
}
</script>

Applying these ...

スクリーンショット 2020-05-10 21.53.22.png

As mentioned above, I was able to get the list properly.

~~ This time, we will make a product detail page next time. ~~

I have written! CRUD GET with Nuxt & Django REST Framework ②

Recommended Posts

CRUD GET with Nuxt & Django REST Framework ②
CRUD GET with Nuxt & Django REST Framework ①
Django REST framework with Vue.js
Login with django rest framework
[Django] Use MessagePack with Django REST framework
CRUD with Django
Implementation of CRUD using REST API with Python + Django Rest framework + igGrid
Django REST framework basics
Django Rest Framework Tips
Implementing authentication in Django REST Framework with djoser
Create a Todo app with Django REST Framework + Angular
Get started with Django! ~ Tutorial ⑤ ~
More new user authentication methods with Django REST Framework
Create a Todo app with the Django REST framework
Create APIs around user authentication with Django REST Framework
Get started with Django! ~ Tutorial ④ ~
When you want to filter with Django REST framework
Get started with Django! ~ Tutorial ⑥ ~
Django REST framework stumbling block
Implement hierarchical URLs with drf-nested-routers in Django REST framework
How to get started with Django
Get started with the Python framework Django on Mac OS X
Create a REST API to operate dynamodb with the Django REST Framework
Step notes to get started with django
Logical deletion in Django, DRF (Django REST Framework)
Understand the benefits of the Django Rest Framework
Miscellaneous notes about the Django REST framework
Django REST Framework + Clean Architecture Design Consideration
How to deal with garbled characters in json of Django REST Framework
How to get people to try out django rest framework features in one file
The easiest way to get started with Django
Internationalization with django
How to automatically generate API document with Django REST framework & POST from document screen
Django REST framework A little useful to know.
Implement JWT login functionality in Django REST framework
Sometimes you want to access View information from Serializer with DRF (Django REST Framework)
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 1 ~
List method for nested resources in Django REST framework
Implement APIs at explosive speed using Django REST Framework
[Django Rest Framework] Customize the filter function using Django-Filter
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 2 ~
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 3 ~
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 4 ~
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 5 ~
Django 1.11 started with Python3.6
Development digest with Django
Django python web framework
Output PDF with Django
Markdown output with Django
Use Gentelella with django
Twitter OAuth with Django
Getting Started with Django 1
Send email with Django
File upload with django
Get started with MicroPython
Get Tweets with Tweepy
Use LESS with Django
Get date with python
Pooling mechanize with Django
Get started with Mezzanine
Use MySQL with Django