Vue3+TypeScript+Django Rest Framework 搭建个人博客(六):踩坑汇总

博客 站已经部署完成,在过程中我们解决了很多问题,曾子曰:吾日三省,这一篇就是总结我们遇到的问题,俗称:踩坑

大家好,我是,经过几个星期的努力,我们已经把开发的博客部署上线了,这一章我们主要讲讲过程中解决的比较麻烦的问题和可以作为经验的地方。

一、软件版本

关于软件版本的选择,实际上没有特定的标准,整理而言,我个人的开发是后端尽可能选择稳定的版本,前端尽可能跟随时代潮流。因为前端的变化很快,每个月都在推出新的版本和新的解决方案,而后端更注重的是业务逻辑的完备度和系统的稳定性,因此在技术选型的时候,尽可能选择稳定版本。

1.1 Python 技术栈选型

  • Python

目前 Python的版本已经到 3.10 版本,但我没有选择最高的版本,而是选择了 3.7 版本,这里面有几个考量:

  1. Django 版本对 Python 版本的支持程度
  2. Django 生态中对 Python 和 Django 版本的支持程度,比如Django Rest Framework、Django-Filter、Django-MPTT等。
  • Django

在选型中,基于核心框架进行选择,Django 的版本我没有选择最新的 3.0,而是选择了 2.2 版本中最新版本。在这样的选择下,我这边在使用第三方包时,就不用太担心第三方包对 Python 和 Django 版本的兼容问题。

可能有人会疑惑,为什么没有选择 Python 2,我的观点是,毕竟 Python 3才是后面的发展方向。

1.2 Vue 技术栈选型

  • Vue

目前 Vue 也存在两个版本,我们这里选择了 Vue 3,虽然 Vue 2 更成熟,但考虑到前端是一个发展非常快的领域,因此尽可能选择跟随时代潮流的软件和工具。

  • 构建工具

构建工具选择了 Vite,确实热编译的速度太快了,我们的博客 站由于代码量较少,几乎感觉不到有延迟,修改完立马生效。

  • TypeScript

TypeScript 的选择也是前端领域里面的一种趋势,它更适合多人协作的中大型项目,由于 是弱类型的动态语言,在类型判断时无法及时有效的发现潜在的问题,而通过 TypeScript的语法,可以很好的约束和规范代码,在编写阶段就能发现尽可能多的问题。

  • CSS

我们使用了 Less 作为 CSS 的预编译器,从而支持更灵活的 CSS 定义和管理。

  • UI 组件 Element-Plus

是国内比较成熟的UI组件库,是Element-UI 对 Vue 3 版本的支持版本。

二、后端踩坑记

2.1 跨域问题

我们的博客 站使用的是认证机制,而默认会验证跨域和,因此我们需要做 3 件事情

2.1.1 去掉中间件

2.1.2 编写不验证 中间件

2.1.3 加入自定义的中间件

2.2 扩充用户表

在中默认的用户表,属性一般不能完全满足业务需求,因此会考虑扩充表属性,这里需要做几个点:

2.2.1 继承

2.2.2 修改认证用户表名称

在 中增加一条配置

2.2.3 自定义登录和登出接口

这里通过调用自带的方法和完成账 认证和登录,这里面实现了管理的机制

登录代码:

通过自带的方法实现登出,这里面实现了失效机制。代码如下:

2.3 Filter 外键查询

在列表查询中,一般都会提供各种入参条件来完成查询,这里我们使用的是第三方包实现的。具体教程见:django-filter — django-filter 2.4.0 documentation

如果希望能通过外键ID作为过滤条件,比如通过分类ID查询文章列表,同时也希望在返回的列表中能展示分类名称,此时就需要做如下操作。

在中,对外键字段不做什么调整,采用默认方式,对返回结果中的分类信息,通过定一个只读字段实现。

如下代码,通过方法定义,而原始的字段,不做任何定义,默认即可,然后在中列出。这样就可以在查询条件中,通过分类ID来过滤文章列表。

2.4 路由定义

通过中的定义路由后,如果在中通过方式引入,则需要在中的中定义的

的代码:

的代码

2.5 前后端路由区分

在部署的时候,为了方便Nginx的路由区分代理,我们在后端的所有接口都增加前缀,这也符合规范要求。

所以在 中,所有的接口前都增加前缀。

2.6 Windows 和 类 Unix 系统路径兼容

在我们开发的时候, 我们使用的是系统,其路径表达方式是,而部署的时候是放在类 系统中,其路径表达方式是 /,为了兼容两种表达方式,Python 默认使用 / 方式,因此在上传文件的时候,统一成一种方式,将 转换成 /。

def get_upload_file_path(upload_name):    # Generate date based path to put uploaded file.    date_path = datetime.now().strftime('%Y/%m/%d')    # Complete upload path (upload_path + date_path).    upload_path = os.path.join(settings.UPLOAD_URL, date_path)    full_path = os.path.join(settings.BASE_DIR, upload_path)    make_sure_path_exist(full_path)    file_name = slugify_filename(upload_name)    return os.path.join

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月21日
下一篇 2021年7月22日

相关推荐