基于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 王晓曼！！

起来就集中精力准备复试啦，最后十天冲冲冲！！