學習使用VUE3+Django+GraphQL實現簡單的Blog網站

這周每天花點時間學習使用VUE3+Django+GraphQL的使用,按照RealPython的網站的教程走了一遍,踩了一遍坑.

Realpython上的教程使用的是Vue2的Vue-CLI模塊,Vue本身已經進化到VUE3,並且推薦使用Vite代替Vue-CLI.我按照教程上的步驟將代碼轉化為VUE3+Vite+Composition API模式.

在這裡重新整理一下教程,將遇見的坑也整理如下: 原英文的URL在這裡 Build a Blog Using Django, Vue, and GraphQL(https://realpython.com/python-django-blog/)

Step1 : Setup a Django Blog

安裝Django

Python環境下執行 pip install Django 

生成Django Backend Project

django-admin startproject backend .

django-admin將生成Django backend的項目:

目錄結果如下:

dvg
└── backend
    ├── manage.py
    ├── requirements.txt
    └── backend
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

Run Django Migrate

進入 backend目錄

python manage.py migrate

Create Super User

python manage.py createsuperuser

啟動Django Server,檢查第一步成果

python manage.py runserver

在瀏覽器中訪問http://localhost:8000，和http://localhost:8000/admin  確認Django Server已經正常運行.

## 我使用的是vscode的開發環境,在vscode中創建python的virtual enviroment. 

Step 2: Create the Django Blog Admin

創建Django Blog App

python manage.py startapp blog

命令執行後的blog目錄結構如下:

blog
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

在Backend Project中裝載blog App

修改backend的setting.py的INSTALL_APPS,插入 “blog”

INSTALLED_APPS = [
  ...
  "blog",
]

創建Blog數據Model

1. Profile Model: 用於記錄Blog用戶信息
2. Tag Model:用於Blog的標簽
3. Posts:發表的Blog

修改blog下的models.py, 修改內容如下:

import Django模塊

from django.db import models
from django.conf import settings

Profile Model

class Profile(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,
    )
    website = models.URLField(blank=True)
    bio = models.CharField(max_length=240, blank=True)

    def __str__(self):
        return self.user.get_username()

Tag Model

class Tag(models.Model):
    name = models.CharField(max_length=50, unique=True)

    def __str__(self):
        return self.name

Posts Model

class Post(models.Model):
    class Meta:
        ordering = ["-publish_date"]

    title = models.CharField(max_length=255, unique=True)
    subtitle = models.CharField(max_length=255, blank=True)
    slug = models.SlugField(max_length=255, unique=True)
    body = models.TextField()
    meta_description = models.CharField(max_length=150, blank=True)
    date_created = models.DateTimeField(auto_now_add=True)
    date_modified = models.DateTimeField(auto_now=True)
    publish_date = models.DateTimeField(blank=True, null=True)
    published = models.BooleanField(default=False)

    author = models.ForeignKey(Profile, on_delete=models.PROTECT)
    tags = models.ManyToManyField(Tag, blank=True)

 將Blog數據Model加入admin模塊實現數據模塊的數據的增刪修改等操作

修改blog/amdin.py

Profile和Tag模塊數據項較少,直接使用系統的內容,加入如下代碼:

@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
    model = Profile

@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    model = Tag

Posts的內容比較多,對admin的顯示內容進行簡單定製:

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    model = Post

    list_display = (
        "id",
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
    )
    list_filter = (
        "published",
        "publish_date",
    )
    list_editable = (
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
    )
    search_fields = (
        "title",
        "subtitle",
        "slug",
        "body",
    )
    prepopulated_fields = {
        "slug": (
            "title",
            "subtitle",
        )
    }
    date_hierarchy = "publish_date"
    save_on_top = True

將Blog的Model數據Migrate到資料庫中

python manage.py makemigrations

python manage.py migrate

至此Blog的數據輸入部分已經在Django上已經實現了. 在Browser上進入 http://localhost:8000/admin中可以對Profile,Posts,Tag進行對應的增刪修改等操作

未完待續.....