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


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

    • 八个页面
    • 两个子应用
    • 四个实体
    • 十个视图函数

如果你想做一个系统:首先是确定UI设计,即要做哪些页面,然后页面之间是如何跳转;再就是开始确定技术栈,即要使用哪些技术来完成这个系统,一般都包含前端、后端、数据库等;最后就开始着手实际操作了,最主要是分析整个系统的逻辑,然后想想各个部分该如何在逻辑上实现,于是就开始设计数据库了等等。
本次项目,我选择的技术栈是:
  • 前端:Vue。
  • 后端:Django。
  • 数据库:Mysql和Redis。
由于前后端不分离,所以先来看看Django的MTV模式。
  • M 表示模型(Model):编写程序应有的功能,负责业务对象与数据库的映射(ORM)。
  • T 表示模板 (Template):负责如何把页面(html)展示给用户。
  • V 表示视图(View):负责业务逻辑,并在适当时候调用 Model和 Template。
可能这样,还有点抽象,那就来分析,整个系统的用户操作流程图。
Project|基于Vue和Django的个人博客系统 —— 图文讲解
文章图片

下面我就开始啦!
八个页面
  • 【Project|基于Vue和Django的个人博客系统 —— 图文讲解】第一个页面:注册页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第二个页面:登录页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第三个页面:忘记密码页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第四个页面:用户中心页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第五个页面:主页页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第六个页面:写博客页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第七个页面:博客详情页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第八个页面:404页面。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

    当然,这是我已经写好的页面,也可以实现逻辑上的跳转,如果大家刚开始,设计好页面结构后,可以先写静态页面,然后后续再改奥。
两个子应用 从上面的八个页面,我们大概可以知道,一共是有以下功能的:
  • 注册功能(图片验证码、短信验证码)
  • 登录功能(手机号、密码)
  • 退出登录功能(清理cookie和session)
  • 忘记密码功能(类似注册功能)
  • 用户中心功能(修改图像、简介)
  • 主页展示功能(专栏分类、博客列表、分页功能)
  • 编写博客功能(富文本编辑器)
  • 博客详情功能(文章详情、推荐功能、评论功能)
基本上上述功能可以分为两个模块:
一个是用户模块,包括用户注册、登录、退出登录、忘记密码、用户中心、编写博客。
一个是主页模块,包括主页展示、博客详情(发表评论)。
这样我们就从逻辑上稍微简化了,分为user子应用和home子应用。
四个实体 从上述的页面和功能中,我们可以抽象出一些实体,这样方便后续数据的存取等。
  • 第一个实体是用户,由于涉及到注册、登录、忘记密码和个人中心,所以综合考虑,用户表可以定义以下相关的字段。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第二个实体是分类,分类就相对比较简单了,给一个分类的名字其实就差不多了,因为Django自带的ORM会自动帮助我们创建id。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第三个实体是文章,文章就看个人怎么设计了,我这里是包含了文章的作者,文章的标题图、文章的标题、文章所属的分类、文章的概要、文章的内容、文章的浏览量、文章的评论量等。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

  • 第四个实体是评论,评论包含评论人、评论的文章、评论的内容、评论的时间等。
    Project|基于Vue和Django的个人博客系统 —— 图文讲解
    文章图片

    刚开始,我也觉得这个数据库的设计很复杂,但是其实大概功能需求和页面结构构思出来后,就可以根据这些页面所需要哪些数据,然后这些数据要从哪里来,又要往哪里去,就可以设计出基本的表格,然后主要功能实现后,也可以添加自己的创意。
同时,注意!凡是涉及到数据库的操作,都需要做异常处理,以防“删库跑路”。
十个视图函数
  • 第一个视图函数:图片验证码视图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 王晓曼!!
起来就集中精力准备复试啦,最后十天冲冲冲!!

    推荐阅读