Vue3+TypeScript+Django Rest Framework 搭建个人博客（一）：框架代码初始化

最新推荐文章于 2025-11-27 23:01:49 发布

原创

最新推荐文章于 2025-11-27 23:01:49 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#django #typescript #pycharm

本文详细介绍了如何利用Django Rest Framework和Vue3+TypeScript搭建个人博客的后端和前端框架。首先，通过PyCharm初始化Django项目，配置数据库和项目结构，接着编写模型和API接口。然后，使用Vue CLI初始化前端项目，安装依赖并运行。最后，配置前端代理，实现前后端联调，完成代码的Git版本管理。

本文适合对有 Python 语言有一定基础的人群，希望利用 Python 做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在 Window 10 Professional 系统下开发

大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vue初始化项目框架代码，跑通Hello world。

一、后端框架代码搭建

后端 Python 代码通过 PyCharm 能比较快速的搭建 Django 项目，因为在 PyCharm 的专业版里面，已经内置了 Django 框架

1.1 通过 `PyCharm` 初始化 `Django` 项目

通过 pip 安装Django 包

为了更好的兼容性，我们自己安装 Django 2 版本，不采用最新版本。在命令行输入如下命令：

pip install django==2.2.23

在 PyCharm 的首屏界面，点击 New Project 对话框，在左侧选择 Django，在右侧的 Location中选择项目地址，项目命令为Blog 并将我们之前安装的 Python 路径选择为 Interpreter ，如下图：

点击Create，等待 PyCharm 执行创建。

如果选择的 Python Interpreter 环境中没有安装 Django，PyCharm 会自动安装 Django 最新版本，由于我们已经安装了 Django，PyCharm 会自动使用环境中的 Django 版本

完成后左侧的导航区域会自动生成Django框架项目所需的文件，结构如下图：

在 Pycharm 右下角点击 Terminal，通过 pip 安装 Django Rest Framework

pip install djangorestframework==3.12.4

验证框架是否可以运行

运行点击 PyCharm 右上角的运行按钮，如果正常，在 PyCharm 的运行控制台会打印如下信息

Performing system checks...

Watching for file changes with StatReloader
System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
July 17, 2021 - 17:42:28
Django version 2.2.23, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

打开 Edge 或 Chrome 浏览器，输入 http://127.0.0.1:8000，回车，如下图，说明框架搭建成功

1.2 配置 `Django Rest Framework`

启用 Django Rest Framework

在 Blog 文件夹下，打开 settings.py 文件，在 INSTALLED_APPS 的 list 中增加 rest_framework

INSTALLED_APPS = [
    'django.contrib.admin',  
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
]

在 settings.py 中增加 Rest Framework 的配置

REST_FRAMEWORK = {
   
   
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}

1.3 配置 `Sqlite` 数据库

在项目路径下，创建data文件夹
在 settings.py 中修改 DATABASES 中 default 下的 NAME 的值，增加 data 路径，接入如下

DATABASES = {
   
   
    'default': {
   
   
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'),
    }
}

1.4 调整项目结构

修改 Blog 文件夹名称为 project

通过 PyCharm 自动生成的项目结构，会自动生成一个和项目名称一样的子文件夹，为了有效的组织后端的各个模块，这里我们将自动生成的 Blog 文件夹修改为 project

操作如图：

点击 Refector，然后点击左下角的 Do Refector 完成修改。

在 settings.py 文件中，将 ROOT_URLCONF 中的 Blog 修改为 project

ROOT_URLCONF = 'project.urls'

在 settings.py 文件中，将 TEMPLATES 中的 DIRS 的值修改为 [BASE_DIR + '/templates']

TEMPLATES = [    
  {
   
           
    	'BACKEND': 'django.template.backends.django.DjangoTemplates',
    	'DIRS': [BASE_DIR + '/templates'],
    	'APP_DIRS': True,
     	'OPTIONS': {
   
   
        	'context_processors': [
            	'django.template.context_processors.debug',
            	'django.template.context_processors.request',
            	'django.contrib.auth.context_processors.auth',
            	'django.contrib.messages.context_processors.messages',
          	],
      },
  },</