Python Django REST framework | D E W = 露の世 = 我知这世界本如露水般短暂，然而，然而

lhchen74/django-vue3

# backends

# django

pip install django
django-admin startproject backends
cd backends
python manage.py startapp lyb
backends/settings.py INSTALLED_APPS add lyb

INSTALLED_APPS = [
    ...
    'lyb'
    ...
]

python manage.py runserver

# models

lyb/models.py

from django.db import models

class Lyb(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=50)
    content = models.TextField()
    posttime = models.DateTimeField(auto_now_add=True)

    class Meta:
        db_table = "d_lyb"

python manage.py makemigrations
python manage.py migrate

# djangorestframework

Quickstart - Django REST framework

pip install djangorestframework
backends/settings.py INSTALLED_APPS add rest_framework

INSTALLED_APPS = [
    ...
    'rest_framework'
    ...
]

# serializer

lyb/serializers.py

from rest_framework import serializers
from .models import Lyb


class LybSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Lyb
        fields = "__all__"

# viewset

lyb/views.py

from django.shortcuts import render
from rest_framework import viewsets
from .models import Lyb
from .serializers import LybSerializer

class LybViewSet(viewsets.ModelViewSet):
    queryset = Lyb.objects.all().order_by('-posttime')
    serializer_class = LybSerializer

# router

backends/urls.py

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from lyb.views import LybViewSet

router = routers.DefaultRouter()
router.register(r'lyb', LybViewSet)

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

# djangorestframework interface

python manage.py runserver

http://localhost:8000/api/lyb

# django-cors-headers

pip install django-cors-headers
backends/settings.py INSTALLED_APPS add corsheaders

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

backends/settings.py MIDDLEWARE add corsheaders.middleware.CorsMiddleware

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

backends/settings.py setting allow cors

1	CORS_ALLOW_ALL_ORIGINS = True

# frontends

# vite-app

npm init vite-app frontends
cd frontends
npm install & npm install axios
npm run dev
index.html add milligram CDN link

Milligram - A minimalist CSS framework

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
/>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
/>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>

components/Lyb.vue

<template>
    <div class="row">
        <div class="column">
            <table>
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>内容</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in ly_list" :key="item.url">
                        <td>{{ item.title }}</td>
                        <td>{{ item.author }}</td>
                        <td>{{ item.content }}</td>
                        <td>
                            <button
                                @click="editLyb(item)"
                                style="margin: 0.5rem"
                            >
                                编辑
                            </button>
                            <button @click="deleteLyb(item)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="column">
            <input type="hidden" v-model="lyb.url" />
            <div>
                <label for="title">标题</label
                ><input type="text" id="title" v-model="lyb.title" />
            </div>
            <div>
                <label for="author">作者</label
                ><input type="text" id="author" v-model="lyb.author" />
            </div>
            <div>
                <label for="content">内容</label
                ><textarea id="content" v-model="lyb.content"></textarea>
            </div>
            <button @click="saveLyb">确定</button>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import { reactive, onMounted, toRefs } from "vue";

    export default {
        name: "Lyb",
        setup() {
            let base_url = "http://localhost:8000/api/lyb/";

            const lyb_blank = { url: "", title: "", author: "", content: "" };

            const state = reactive({
                ly_list: [],
                lyb: Object.assign({}, lyb_blank),
            });

            const getLyb = () => {
                axios
                    .get(base_url)
                    .then((res) => {
                        state.ly_list = res.data;
                        state.lyb = Object.assign({}, lyb_blank);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            };

            const editLyb = (item) => {
                state.lyb.url = item.url;
                state.lyb.title = item.title;
                state.lyb.author = item.author;
                state.lyb.content = item.content;
            };

            const deleteLyb = (item) => {
                axios
                    .delete(item.url)
                    .then(() => {
                        getLyb();
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            };

            const saveLyb = () => {
                let newLyb = {
                    title: state.lyb.title,
                    author: state.lyb.author,
                    content: state.lyb.content,
                };

                if (!state.lyb.url) {
                    // add
                    axios
                        .post(base_url, newLyb)
                        .then(() => {
                            getLyb();
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    // update
                    axios
                        .put(state.lyb.url, newLyb)
                        .then(() => {
                            getLyb();
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            };

            onMounted(() => {
                getLyb();
            });

            return {
                ...toRefs(state),
                editLyb,
                saveLyb,
                deleteLyb,
            };
        },
    };
</script>

npm run dev

http://localhost:3000/

python