基于Vue和Django的个人博客系统 —— 图文讲解

如果你想做一个系统：首先是确定UI设计，即要做哪些页面，然后页面之间是如何跳转；再就是开始确定技术栈，即要使用哪些技术来完成这个系统，一般都包含前端、后端、数据库等；最后就开始着手实际操作了，最主要是分析整个系统的逻辑，然后想想各个部分该如何在逻辑上实现，于是就开始设计数据库了等等。

本次项目，我选择的技术栈是：

前端：Vue。
后端：Django。
数据库：Mysql和Redis。

由于前后端不分离，所以先来看看Django的MTV模式。

M 表示模型（Model）：编写程序应有的功能，负责业务对象与数据库的映射(ORM)。
T 表示模板 (Template)：负责如何把页面(html)展示给用户。
V 表示视图（View）：负责业务逻辑，并在适当时候调用 Model和 Template。

可能这样，还有点抽象，那就来分析，整个系统的用户操作流程图。

在这里插入图片描述

下面我就开始啦！

八个页面

第一个页面：注册页面。
第二个页面：登录页面。
第三个页面：忘记密码页面。
第四个页面：用户中心页面。
第五个页面：主页页面。
第六个页面：写博客页面。
第七个页面：博客详情页面。
第八个页面：404页面。

当然，这是我已经写好的页面，也可以实现逻辑上的跳转，如果大家刚开始，设计好页面结构后，可以先写静态页面，然后后续再改奥。

两个子应用

从上面的八个页面，我们大概可以知道，一共是有以下功能的：

注册功能（图片验证码、短信验证码）
登录功能（手机号、密码）
退出登录功能（清理cookie和session）
忘记密码功能（类似注册功能）
用户中心功能（修改图像、简介）
主页展示功能（专栏分类、博客列表、分页功能）
编写博客功能（富文本编辑器）
博客详情功能（文章详情、推荐功能、评论功能）

基本上上述功能可以分为两个模块：

一个是用户模块，包括用户注册、登录、退出登录、忘记密码、用户中心、编写博客。
一个是主页模块，包括主页展示、博客详情（发表评论）。

这样我们就从逻辑上稍微简化了，分为user子应用和home子应用。

四个实体

从上述的页面和功能中，我们可以抽象出一些实体，这样方便后续数据的存取等。

第一个实体是用户，由于涉及到注册、登录、忘记密码和个人中心，所以综合考虑，用户表可以定义以下相关的字段。
第二个实体是分类，分类就相对比较简单了，给一个分类的名字其实就差不多了，因为Django自带的ORM会自动帮助我们创建id。
第三个实体是文章，文章就看个人怎么设计了，我这里是包含了文章的作者，文章的标题图、文章的标题、文章所属的分类、文章的概要、文章的内容、文章的浏览量、文章的评论量等。
第四个实体是评论，评论包含评论人、评论的文章、评论的内容、评论的时间等。

刚开始，我也觉得这个数据库的设计很复杂，但是其实大概功能需求和页面结构构思出来后，就可以根据这些页面所需要哪些数据，然后这些数据要从哪里来，又要往哪里去，就可以设计出基本的表格，然后主要功能实现后，也可以添加自己的创意。

同时，注意！凡是涉及到数据库的操作，都需要做异常处理，以防“删库跑路”。

十个视图函数

第一个视图函数：图片验证码视图ImageCodeView。

这个是注册和忘记密码页面需要的图片验证码。当url定位到注册或者忘记密码时，就会在mounted生命周期函数中，调用generate_image_code()方法，于是就给image_code_url赋值为/imagecode/?uuid=，在html页面中，图片验证码处设置img标签，将src绑定到image_code_url，于是向该url发送请求定位到该类视图函数。
```
该视图函数主要流程(get)：
①获取uuid。
②验证uuid。
③生成验证码。
④将键值对(uuid，text)保存到redis中。
⑤返回image。
```
第二个视图函数：短信验证码视图SmsCodeView。

这个是注册和忘记密码页面需要的短信验证码。在注册页面中，每一个表单的值都绑定到了对应的data中，然后使用表单标记变量来对应显示表单值错误提示。当点击发送短信验证码时，会相应的检查mobile和image_code，然后就向 ‘/smscode/?mobile=’ + this.mobile + ‘&image_code=’ + this.image_code + ‘&uuid=’ + this.uuid进行发送请求，如果成功，就在按钮上进行显示倒计时，如果错误就在对应的地方提示错误。上述请求的url会对应定位到该类视图函数。
```
该视图函数主要流程(get)：
①获取url？后面对应的三个参数。
②验证参数，比对image_code和从redis中取出的text。
③随机生成短信验证码。
④将键值对（mobile，sms_code）存入到redis中。
⑤发送短信。
```
第三个视图函数：注册视图RegisterView。

对于页面中包含按钮的：一般都有两个处理函数，一个是get，此函数主要返回对应的页面，并且在返回前获取页面所需的数据，然后传递到页面中；一个是post，主要是当相关数据填充完毕后，点击提交按钮后，进行的一系列处理，包括数据库存取以及页面跳转等。
```
该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数（虽然前端也有验证）。
③验证成功后将数据存到数据库user表中。
④使用login进行状态保持（会生成唯一标识sessionid）。
⑤页面跳转重定向。
⑥设置cookie（方便后续在其他页面使用相关信息）。
```

第四个视图函数：登录视图LoginView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③使用系统自带认证authenticate进行用户认证。
④使用login进行状态保持。
⑤根据next参数来进行页面的跳转（因为系统对于未登录会自动跳转到next）。
⑥页面重定向。

第五个视图函数：退出登录视图LogoutView。

该视图函数主要流程（get）：
①清理session。
②清理cookie。

第六个视图函数：忘记密码视图ForgetPasswordView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③根据mobile参数查询数据库user表，如果没有就创建新的用户，反之则将修改数据保存到数据库对应用户字段上。
④重定向页面。

第七个视图函数：用户中心视图UserCenterView。

该视图函数主要流程（post）：
①获取表单参数。
②修改保存到数据库user表。
③重定向页面。

第八个视图函数：编写博客视图WriteBlogView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③验证成功的数据保存到数据库。
④重定向页面。

第九个视图函数：主页视图IndexView。

该视图函数主要流程（get）：
①获取所有分类和选中分类。
②查询点击分类对应的所有文章。
③获取分页处理对应的参数。
④返回页面。

第十个视图函数：博客详情视图DetailView。

该视图函数主要流程（post）：
①接收用户信息并且判断是否登录。
②未登录用户则跳转到登录页面。
③登录用户则可以接收form数据（包含评论文章id和评论内容content）。
④保存评论数据到数据库comment并且刷新页面。

大概的就写完啦！！

2022年3月16日0:01 王晓曼！！