# drf_project

**Repository Path**: xiaobai_long/drf_project

## Basic Information

- **Project Name**: drf_project
- **Description**: python3.8+ django3.13 + djangorestframework3.12.2 + vue 个人博客项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-03-30
- **Last Updated**: 2025-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Python, Django, Vue

## README

# drf_project

## 介绍
* python3.8 + django3.13+ djangorestframework3.12.2 + vue 个人博客项目
* 后端项目目录：drf_project/drf_vue_blog
* 前端项目目录：drf_project/drf_vue_blog/frontend

在线地址：暂无。。。


## 前后端页面截图
  * 暂无

## 软件架构
软件架构说明:
 * 1.暂无

## 安装教程

1.  暂无
2.  xxxx
3.  xxxx

## 使用说明

1.  暂无
2.  xxxx
3.  xxxx


## 项目特点

* 使用 django3、djangorestframework3、vue，前后端分离。


## 项目涉及知识点：
#### 1.序列化与Django： 
* 前后端分离核心思想之一：两端交互不通过模板语言，而只传输需要的数据。  
* 序列化：把 python对象转换成JSON。--json.dumps()
* 反序列化：把 JSON转换为 javascript对象。--json.loads()

#### 2.序列化器与视图
* ModelSerializer、APIView
* httpie库-使用方式：
  * http http://127.0.0.1:8000/api/article/
  * http POST http://127.0.0.1:8000/api/article/ title=PostByJson body=HelloWorld!

#### 3.DRF-基于类的视图
* APIView、Mixin、ListModelMixin、CreateModelMixin

#### 4.DRF-用户权限
* DRF 内置:IsAuthenticated、IsAdminUser、AllowAny 等权限控制类。

#### 5.DRF-超链接与分页
* 超链接：DRF框架-HyperlinkedIdentityField
* 分页：settings.py 中设置 DRF的配置

### 6.DRF-视图集
* 提供默认的增删改查
* 使用框架提供的 Router 类就可以自动处理视图和 url 的连接。

### 7.文章过滤
* 方式1.修改视图集中的 queryset-精准过滤
* 方式2.覆写 get_queryset()方法-精准过滤
* 方式3.运用django-filter，写到配置文件中或者单独配置在特定的视图中 
* 方式4.使用SearchFilter-模糊匹配

### 8.文章分类
* 一对多外键：ForeignKey
* 请求方法：
  * POST ：创建新的资源。
  * PUT ： 整体更新特定资源，默认情况下你需要完整给出所有必须的字段。
  * PATCH： 部分更新特定资源，仅需要给出需要更新的字段，未给出的字段默认不更改。

### 9.文章标签
* 多对多：ManyToManyField

### 10.Markdown 正文
* Markdown:是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档

### 11.文章标题图
* DRF处理文件上传：
  * 1.沿用了 Django 的老路子，即用： multipart/form-data 表单发送夹杂着元数据的文件
  * 2.用 Base64 对文件进行编码（将文件变成字符串）。这种方法简单粗暴，并且只靠 Json 接口就可以实现。
    代价是数据传输大小增加了约 33％，并在服务器和客户端中增加了编码/解码的开销。
  * 3.首先在 multipart/form-data 中单独发送文件，然后后端将保存好的文件 id 返回给客户端。
    客户端拿到文件 id 后，发送带有文件 id 的 Json 数据，在服务器端将它们关联起来。
  * 4.首先单独发送 Json 数据，然后后端保存好这些元数据后将其 id 返回给客户端。接着客户端发送带有元数据 id 的文件，在服务器端将它们关联起来。

### 12.评论
* 一对多的作者外键、一对多的文章外键
* 匿名函数：lambda

### 13.评论的评论-多级评论
* 一个父评论可以有多个子评论，而一个子评论只能有一个父评论。一对多
* 嵌套序列化器：CommentChildrenSerializer

### 14.JWT身份验证
* Web程序是使用HTTP 协议传输的，而HTTP 协议是无状态的协议，对于事务没有记忆能力。也就是说，如果没有其他形式的帮助
  ，服务器是没办法知道前后两次请求是否是同一个用户发起的，也不具有对用户进行身份验证的能力。


* 传统 web 开发中（以及前面的章节），身份验证通常是基于 Session 会话机制的。Session 对象存储特定用户会话所需的属性及配置信息。
  这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。 
  Session 通常是存储在服务器当中的，如果 Session 过多，会对服务器产生压力。


* 另一种比较常用的身份验证方式是 JWT (JSON Web Token) 令牌。JWT 是一种开放标准，它定义了一种紧凑且自包含的方式，
  用于在各方之间作为 JSON 对象安全地传输信息。由于 Token 是经过数字签名的，因此可以被验证和信任。
  JWT 非常适合用于身份验证和服务器到服务器授权。与 Session 不同，JWT 的 Token 是保存在用户端的，即摆脱了对服务器的依赖。

### 14.用户管理
* lookup_field: 指定了解析超链接关系的字段。将其配置为 username 后，用户详情接口的地址表示为用户名而不是主键。
* 权限分配/自定义动作

### 15.vue前端环境
* vue官方文档：https://v3.cn.vuejs.org/guide/composition-api-introduction.html
* 1.安装 Node.js：
  * 验证环境npm -v
  * 修改为国内镜像： npm config set registry https://registry.npm.taobao.org 
* 2.安装 Vue 的命令行工具(方便搭建 Vue 项目的骨架)：
  * npm install -g @vue/cli
  * 验证环境：vue --version
* 3.命令行搭建vue 骨架：
  * cd 项目根目录
  * vue create frontend（选择vue3）
* 4.运行 vue 开发服务器：
  * cd frontend/ : 进入frontend目录
  * npm run serve
* 5.安装对等依赖  
  * npm install --save vue@3.2.0
  

### 16.vue-文章列表
* 1、安装 Axios( Django与Vue之间通信的前端库)：npm install axios
* 2.解决跨域：
  * 跨域问题：跨域问题是由于浏览器的同源策略（域名，协议，端口均相同）造成的，是浏览器施加的安全限制。说简单点，
    Vue 服务器端口（8080）和 Django 服务器端口（8000）不一致，因此无法通过 Javascript 代码请求后端资源。
    * 方式一：创建 frontend/vue.config.js 文件并写入
      (给前端服务器设置了代理，即将 /api 地址的前端请求转发到 8000 端口的后端服务器去，从而规避跨域问题。):
    * 方式二：后端引入 django-cors-middleware 这个库，在后端解决此问题。  
  ```  
  module.exports = {    
      devServer: {  
          proxy: {  
              '/api': {  
                  target: `http://127.0.0.1:8000/api`,  
                  changeOrigin: true,  
                  pathRewrite: {  
                      '^/api': ''  
                  }
              }
          }
      }
  };

* 3.vue结构：
  * index.html：整个前端工程提供html的入口
  * main.js：把后续你要写的 Vue 组件挂载到刚才那个 index.html 中
  * App.vue：最主要的写代码的地方  
  

* 4.vue之script：
  * 当一个 Vue 实例被创建时，它将 data 对象返回的所有属性加入到 Vue 的响应式系统中。
  更神奇的是，当这些属性的值发生改变时，视图将会产生“响应”，即自动更新为新的值 
  

* 5.vue 之template(模板语法)：
  * 元素块中以 v 打头的属性即是 Vue 的模板语法标记。 v-for 即循环可迭代元素（info.results 对应后端数据的 json 结构。
    请对照后端接口进行理解。），v-bind:key 给定了循环中每个元素的主键，作用是方便 Vue 渲染时对元素进行识别。
  * Vue 默认同样也用双花括号{{ }} 定义它所持有的数据对象。


* 6.vue 之 style：
  * css，规定了页面各元素的大小、位置、颜色等样式。


* 7.vue-组件化：
  * 组件化是 Vue 的核心思想之一。组件可以把网页分解成一个个的小功能，达到代码解耦及复用。
  

### 17.vue-文章详情
* Vue 的官方前端路由：vue-router
  * 安装：  
    a. 进入 frontend 目录    
    b. npm install vue-router@4(有些镜像源可能找不到。淘宝镜像源可以下载)


### 18.vue-翻页与监听
* is_page_exists()：确认需要跳转的页面是否存在，如果不存在那就不渲染对应的跳转标签。
* get_page_param()：用于获取页码。
* watch：它的作用是监听 Vue 管理的数据，一旦发生变化就执行对应的方法。


### 19.搜索文章
* v-model : 创建双向数据绑定。< input > 中的数据和 Vue 管理的 searchText 数据绑定在一起。
* v-on:click : 绑定按钮的鼠标点击时间。.prevent 用于阻止按钮原本的表单提交功能。
* this.$router：路由器对象。
* this.$route ：路径对象。
* :to 是 v-bind:to 的简写，意思是“将 to 属性和 get_path(...) 的返回值保持一致。


### 20.vue-资料更新与异步
* async/await ： async 表示函数里含有异步操作，await 表示紧跟在后面的表达式需要等待结果。
  await 关键字只能用在 async 函数中，并且由于它返回的 Promise 对象运行的结果可能是 rejected ，所以最好放到 try...catch 语句中。
* async 函数返回的不再是 return 后面的数据，而是包含数据的 Promise 对象，因此调用它的位置需要改为 Promise.then().catch() 进行
  异常处理。（有点像 axios.then().catch())


### 21.vue-资料删除与组件通信
* Vue 中父组件向子组件传递信息的方式： Props
* Vue 规定 camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
* computed: 计算属性。
  * 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要与它有关系的参数没有发生改变，多次访问此计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，方法将总会再次执行函数。
  * 计算属性默认不接受参数，并且不能产生副作用。也就是说，在它的执行过程中不能改变任何 Vue 所管理的数据，否则将会报错。计算属性是依赖数据工作的，副作用会使代码不可预测（鸡生蛋，蛋生鸡）
* Vue 的子组件给父组件传递信息：采用的是事件的形式。
* Vuex ：是一个专为 Vue 应用程序开发的状态管理模式。
* ref：访问子组件。

### 22.vue-标题图的提交
* 在发表新闻纸页面中选定图片后，不等待文章的提交而是立即将图片上传。
* 图片上传成功后返回图片id，前端将id 保存待用。
* 提交文章时，将图片id 一并提交。

### 23.vue-发布评论
* 组件通过 Props 获取了文章对象，利用 watch 监听此对象并实时更新关联评论。注意这里不能通过 mounted() 去实现此逻辑，原因是因为挂载 Vue 实例的时候 article 的初始值是 null。
* 提交评论用 submit() 方法，后端若返回成功则将最新的评论更新到 this.comments 中。
* replyTo() 方法用于记录评论的父级（即“评论的评论”），如果为 null 则表示此评论自己就是第一级。
* formatted_time() 方法，用于格式化日期。

### 24.vue-组合式API
* Vue 2 ：能够很好的胜任任何中小大型项目，但是对于超大型项目（几百个以上的组件）有天生的缺陷，最显著的矛盾是逻辑关注点分离：你可能很难短时间分清哪些方法在操作哪些数据、哪些变量又被哪些组件所更改了。
* 组合式 API： 将相同逻辑关注点代码聚合在了一起，并且很自然的支持代码复用。

### 25.项目部署：
* 前端项目打包：进入 frontend 目录，运行： npm run build
* 修改后端配置：
  * 修改项-关闭调试模式。关闭后 django 不再处理静态资源：DEBUG = False
  * 修改项-允许所有的IP访问网络服务：ALLOWED_HOSTS = ['*']
  * 修改项-指定需要收集的静态文件的位置-即前端打包文件所在位置
  ```
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, "frontend/dist/"),
  ]
  ```
  * 新增项-静态文件收集目录：STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')
  * 虚拟环境中执行：pip freeze > requirements.txt