学习使用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

Profile Model: 用于记录Blog用户信息
Tag Model:用于Blog的标签
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