Vue3+TypeScript+Django Rest Framework 搭建个人博客

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

大家好！我是 落霞孤鹜 ，从今天开始一步一步搭建一套基于 Python 语言的个人博客，这个项目也是我的个人博客搭建过程的记录，在实现过程中踏过了很多坑，这些坑也会在实现具体功能时列举出来，希望能帮助到可能遇到同样问题的你。

整个项目从开始实现到完成，我耗时2个星期，这两个星期是利用晚上下班时间完成的，每天花费1个小时左右，所以合起来大约是个15-20个小时左右，在这里说明时间是想让小伙伴们能对自己完成这个项目的时间有一个初步的评估。

一、项目背景

做个人博客也是我思考良久后的一个目标，大学期间在QQ空间记录自己的心路历程，工作后一直没有找到一个好的地方承载自己的所思所想（当然，这也是自己懒，没有花精力去整理），后来在上写过几篇博客，再后来觉得知乎和公众号也是一个很好的平台。但是今年觉得，虽然这些平台都挺好，终归不是自己的家，希望能给自己的文字找一个家。在这样的想法下催生了搭建一个自己的博客这么一个想法。

自己熟悉 Java 和 Python ，两种语言都写过完整的项目，但是还没有用 Python 结合前后端分离技术实现一套 Web 系统。所以最终决定用 Python 来开发。

在实现博客的过程中，我借鉴了很多夜尽天明的博文，基于他的思想和方式，完成了前端代码的构建。

已经实现的博客地址：落霞孤鹜的个人博客

效果图：

二、技术栈

博客基于的技术如下：

Django 框架：快速搭建 Web 应用程序的 Python 开源框架，该框架功能齐全，是 Python 世界的 Spring，Lavarel，Ruby On Rail。
Django Rest Framework：用于将Django全栈框架的视图层转换成基于Restful的接口，适配前后端分离架构。
Vue 3：是一套用于构建用户界面的渐进式框架，在前后端分离架构下负责前端页面的开发。
Element-Plus：一套基于 Vue 3.0 的桌面端组件库，可以帮助开发者快速搭建Vue 3的页面。
TypeScript：TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成，帮助 JavaScript 能够胜任开发大型项目，TypeScript 教程
SQLite 数据库：是一种嵌入式数据库, 它的数据库就是一个文件。

顺便提一下开发工具。

Pycharm： JetBrains 公司出品的 Python 语言的 IDE，功能强大，可以使用社区版本，也可以使用付费的旗舰版。
VS Code：前端开发利器，微软公司出品的开源免费文本编辑器，通过插件实现 IDE 的功能，也可以用 JetBrains 出品的 WebStorm。

三、项目结构

项目使用前后端分离框架，所以代码项目结构按照前端和后端两部分呈现

3.1 前端项目结构

3.1.1 代码目录说明

public：项目的公共文件，一般存放 fav.icon 和 logo.icon
assets：图片目录，在页面中用到的一些图片文件
components：包含页面中可以复用的组件
less：Less 文件，负责项目的全局样式设置
router：前端页面路由信息
store：Vuex 的集中式存储管理应用的所有组件的状态。
types：TypeScript 需要的类型定义说明
utils：包含各类工具方法
views：所有页面文件，以 .vue 结尾
App.vue：项目主页面
main.ts：TypeScript 的项目入口文件
shims-vue.d.ts：TypeScript 对 Vue 的垫片文件，用于配置 TypeScript 支持识别.vue 文件
vite-env.d.ts：Vite 的环境配置文件
.gitingore：Git 版本管理中的排除文件记录，在这个文件中出现的文件，不纳入版本管理，比如 node_modules
index.html：项目如何页面，Vue 的挂在入口
package.json：项目依赖和配置文件
README.md：项目说明文件，基于 MarkDown 语法
tsconfig.json：TypeScript 的配置文件
vite.config.ts：Vite 的配置文件
yarn-error.log：Yarn 安装依赖时的错误记录文件
yarn.lock：Yarn 安装依赖后的版本号锁定文件

3.2 后端项目结构

3.2.1 代码目录说明

project：Django的配置代码和控制代码，比如 settings.py，urls.py，同时放置了一些自定义的Django中间件和公共方法
blog：博客核心逻辑所在目录，负责博客的CRUD。

common：处理用户登录，注销，修改密码，图片上传等基础公共功能，同时包含一些工具类和代码常量。
data：存放 Sqlite 数据库文件。
logs：存放项目的日志，按照天进行风分割。
upload：用于存放上传的文件，按照日期方式的文件夹进行组织。
manage.py：Django的管理和控制代码，通过执行 python manage.py XXX 方式完成对整个项目的管理
requirements.txt：记录 Python 项目的所有依赖包和版本号

博客项目的结构简单清晰，想把它运行起来也超级简单。你是不是开始手痒痒了，那接下来我们一起让它运行起来吧。

四、开发环境搭建

环境准备分类前端开发环境准备、后端环境准备、代码仓库创建。开发环境基于WIndows 10 搭建。

需要的开发环境：

Python 3.9.6
Node.js 14.17.3
NPM 6.14.13
Yarn 1.22.10
Git 2.32.0.windows.2

4.1 前端开发环境搭建

下载和安装 Node.js 下载链接如下：

https://nodejs.org/dist/v14.17.3/node-v14.17.3-x86.msi

安装 Node 后，会自动安装 NPM，在命令行中输入如下命令，验证是否安装成功

node -v
# v14.17.3
npm -v
# 6.14.13

NPM 全换淘宝镜像源，加速依赖安装速度

npm config set registry https://registry.npm.taobao.org
npm config get registry
#https://registry.npm.taobao.org/

全局安装 Yarn

npm install -g yarn
yarn version
# yarn version v1.22.10

Yarn 切换淘宝镜像源，加速依赖安装速度

yarn config set registry https://registry.npm.taobao.org/
# yarn config v1.22.10
# success Set "registry" to "https://registry.npm.taobao.org/".
# Done in 0.13s.
yarn config get registry
# https://registry.npm.taobao.org/

安装Vite

yarn global add create-vite-app
# yarn global v1.22.10
# [1/4] Resolving packages...
# warning [email protected]: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
# [2/4] Fetching packages...
# [3/4] Linking dependencies...
# [4/4] Building fresh packages...

# success Installed "[email protected]" with binaries:
#     - create-vite-app
#     - cva
# Done in 1.47s.

下载和安装 VS Code，下载链接如下

https://code.visualstudio.com/Download

安装 VS Code 所需要的插件

直接在 VS Code 的插件市场中搜索并安装

Vetur
ESLint

4.2 后端开发环境搭建

下载 Python 3.9

https://www.python.org/ftp/python/3.9.6/python-3.9.6-amd64.exe

在下载完成后安装的时候，记得勾选将Python加入的Path中

验证是否安装成功

按 win+r，输入 cmd，回车，输入 python 验证是否安装成功，如果成功，会显示如图所示，可以正确显示 Python 版本信息

python -V
# Python 3.9.6
pip -V
# pip 21.1.3 from c:\users\administrator\appdata\local\programs\python\python39\lib\site-packages\pip (python 3.9)

pip 更换国内源

pip config set global.index-url https://pypi.douban.com/simple
#Writing to C:\Users\Administrator\AppData\Roaming\pip\pip.ini
pip config list
#global.index-url='https://pypi.douban.com/simple'

下载和安装 Pycharm，安装教程如下链接。

https://www.runoob.com/w3cnote/pycharm-windows-install.html

4.3 代码仓库准备

下载和安装Git，版本管理软件，下载链接如下。

https://git-scm.com/download/win

安装完成后，在cmd中输入 git 命令，如果出现如下显示，在说明安装成功

C:\Users\ai> git version
# git version 2.32.0.windows.2

如果显示如下错误，则需要设置系统环境变量

C:\Users\ai> git version
# 'git' 不是内部或外部命令，也不是可运行的程序
# 或批处理文件。

创建代码仓库。

在 GitHub 或者 Gitee 上创建仓库，由于 GitHub 的网速问题，我选择在 Gitee 上创建仓库，这里需要两个仓库，一个是前端代码仓库 Blog-Frontend，一个是后端代码仓库 Blog-Backend。

创建仓库的教程链接：

创建你的第一个仓库 - Gitee
关于Github私有仓库的创建 - 知乎 (zhihu.com)

4.4 设置系统环境变量

在搭建开发环境的时候，需要频繁的设置环境变量，这里是Win10设置环境变量的教程。

https://jingyan.baidu.com/article/00a07f3876cd0582d128dc55.html

五、博客功能介绍

博客本质是上是一个信息管理系统，所以符合信息系统的特点，基于我们对自己博客的基本需求，我们至少需要三部分功能：

用户管理
写博客（管理后台）
看博客（博客网站）

5.1 用户管理

作为用户管理功能，我们需要处理管理员和不同用户两种不同角色，以此来区分用户登录后进入到哪一个页面。

作为个人博客，管理员就是我们自己，因此只需要一个账号，而且这个账号属于系统内置。

普通用户就是进入到博客网站浏览我们博客的人，可以是注册的用户，也可以是游客。

注册用户可以评论博客，登录后可以改密码，也可以退出登录。

5.2 写博客（管理后台）

管理后台主要是管理博客的内容，比如发表博客，下架博客，修改博客，分类，查看评论，查看用户等。

5.3 看博客

游客可以查看所有发布的博客，可以通过注册功能注册成博客用户，然后发布博客的评论。