Home

lhchen74/django-vue3

# backends

# django

  1. pip install django
  2. django-admin startproject backends
  3. cd backends
  4. python manage.py startapp lyb
  5. backends/settings.py INSTALLED_APPS add lyb
1
2
3
4
5
INSTALLED_APPS = [
    ...
    'lyb'
    ...
]
  1. python manage.py runserver

# models

  1. lyb/models.py
1
2
3
4
5
6
7
8
9
10
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"
  1. python manage.py makemigrations
  2. python manage.py migrate

# djangorestframework

Quickstart - Django REST framework

  1. pip install djangorestframework
  2. backends/settings.py INSTALLED_APPS add rest_framework
1
2
3
4
5
INSTALLED_APPS = [
    ...
    'rest_framework'
    ...
]

# serializer

lyb/serializers.py

1
2
3
4
5
6
7
8
from rest_framework import serializers
from .models import Lyb


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

# viewset

lyb/views.py

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
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

  1. pip install django-cors-headers
  2. backends/settings.py INSTALLED_APPS add corsheaders
1
2
3
4
5
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
  1. backends/settings.py MIDDLEWARE add corsheaders.middleware.CorsMiddleware
1
2
3
4
5
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
  1. backends/settings.py setting allow cors
1
CORS_ALLOW_ALL_ORIGINS = True

# frontends

# vite-app

  1. npm init vite-app frontends
  2. cd frontends
  3. npm install & npm install axios
  4. npm run dev
  5. index.html add milligram CDN link

Milligram - A minimalist CSS framework

1
2
3
4
5
6
7
8
9
10
11
12
<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"
/>
  1. components/Lyb.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<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>
  1. npm run dev

http://localhost:3000/

Edited on