专栏首页技术进阶之路使用 Django + Vue.js 开发个人博客网站(完整版附源码)—— Python-课程设计-期末项目

使用 Django + Vue.js 开发个人博客网站(完整版附源码)—— Python-课程设计-期末项目

页面展示:

源码

首页

不同板块

注册页面

登录页面

个人信息

写文章页面

文章详情页面

文章评论

本文主要讲解 Python 后端部分,由于仅仅用到了 vue 作为 js 框架并非前后端分离项目,故前端不单独介绍。

一、项目内容(做什么)

本项目实现了一个网页端的 博客系统 ,该博客系统允许多人注册登录,用户可以在网站上面发布博客,浏览别人发布的博客。

实际意义在于:当一个小组或者一个班级需要进行学习与交流的时候可以用到,大家都可以在上面分享自己的学习心得,然后互相学习,由于本项目分了板块,所以要查找相关的技术栈也很方便。

项目主要模块

需求驱动开发,先分析需求(这里参考了网上其它博客系统的需求):

本项目实现的主要功能:

  1. 只要用户有手机号就可以进行注册登录,注册的时候需要 图片验证码手机短信验证码
  2. 用户登陆之后可以选择记住我,这样就算下次关闭了浏览器也可以实现 自动登陆
  3. 用户可以修改个人信息,包括 上传头像 等;
  4. 博客按照类型进行 分类 ,管理员可以在后台管理页面修改具体分为哪几类;
  5. 用户可以 在线写博客,文本编辑器采用的是 富文本 编辑器,用户使用图形化界面即可写出 HTML 代码存储在数据库中;
  6. 用户可以查看所有人写的博客,同时可以评论博客,博客的展示与评论的展示都使用了 分页 的功能;
  7. 用户查看博客的次数记录为 浏览量 ,用户的浏览数目记录为 评论数,根据这两项系统 自动推荐 热度比较高的文章。

二、项目方案(怎么做)

项目开发模式

  • 开发模式:前后端不分离;
  • 后端框架:Django + Django 模板引擎;

语言及工具版本

  • Python 3.6
  • MySQL 5.7
  • Django 3.0
  • Redis 3.2

数据库设计

主要涉及四个实体:

  • 文章:用户:评论:分类

他们之间的 关系 如下:

  • 一个文章对应一个分类,而一个分类可以有多篇文章,所以他们之间的关系是多对一的;
  • 一个用户可以发布多篇文章,同时可以发表多个评论,而每一个评论只对应于一个用户,每一篇文章只属于一个用户,所以用户与文章、评论之间是一对多的;

有了实体和关系,下面用 ER 图表示一下:

加上 属性(属性不全,在概念模型中会补全):

然后设计它的 概念模型

对应的 物理模型 为:

在物理模型中,由于存在一对多的关系,所以文章表和评论表中加上了两个 外键约束

建立数据表

一般到这里可以直接创建数据库和表了,但是由于使用的是 Django,他集成了 ORM 框架,即 Object Relation Mapping 对象关系映射,所以我们不必直接写 SQL 语句,而是可以写出实体类,再执行 Django 的文件迁移命令,就可以自动生成数据表了。

先来看 User 实体:

class User(AbstractUser):
    # 手机号(长度为11, 唯一, 不为空)
    mobile = models.CharField(max_length=11, unique=True, blank=False)

    # 头像信息(图片类型的, 保存到项目目录下的 avatar 文件夹下_以日期创建文件夹区分, 可以为空)
    avatar = models.ImageField(upload_to='avatar/%Y%m%d/', blank=True)

    # 简介信息(最大长度为500, 可以为空)
    user_desc = models.CharField(max_length=500, blank=True)

这里之定义了三个字段,为什么?

因为我们集成了 Django 自带的一个实体类 AbstractUser ,这个是实体类为我们提供了用户名、姓名、邮箱地址等通用信息,所以我们就不用单独指定了。

但是要在配置文件中说明自己已经更改了用户类:

# 替换系统的用户模型为我们自定义的用户模型
AUTH_USER_MODEL = 'users.User'

自动生成的 users 表:

文章分类实体:

class ArticleCategory(models.Model):
    """
    文章分类实体类
    """
    # 栏目标题
    title = models.CharField(max_length=100, blank=True)
    # 创建时间
    created = models.DateTimeField(default=timezone.now)

文章实体类:

class Article(models.Model):
    """
    文章实体类
    """
    # 外键约束: 和用户表关联在一起: 设置级联删除: 即删除用户的同时会删除该用户的所有文章
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    # 文章标题图: 图片类型的, 保存到项目目录下的 article 文件夹下_以日期创建文件夹区分, 可以为空
    avatar = models.ImageField(upload_to='article/%Y%m%d/', blank=True)

    # 文章栏目是 "一对多" 外键: 一个栏目对应多个文章
    category = models.ForeignKey(
        ArticleCategory,
        null=True,
        blank=True,
        on_delete=models.CASCADE,
        related_name='article'
    )

    # 文章标签
    tags = models.CharField(max_length=20, blank=True)

    # 文章标题
    title = models.CharField(max_length=100, null=False, blank=False)

    # 概要
    summary = models.CharField(max_length=200, null=False, blank=False)

    # 文章正文
    content = models.TextField()

    # 浏览量: 正整数
    total_view = models.PositiveIntegerField(default=0)

    # 文章评论数
    comments_count = models.PositiveIntegerField(default=0)

    # 文章创建时间: 默认写当前的时间
    created = models.DateTimeField(default=timezone.now)

    # 文章更新时间: 自动写入当前时间
    updated = models.DateTimeField(auto_now=True)

评论实体类:

class Comment(models.Model):
    """
    评论实体类
    """
    # 评论内容
    content = models.TextField()
    # 评论的文章
    article = models.ForeignKey(Article, on_delete=models.SET_NULL, null=True)
    # 发表评论的用户
    user = models.ForeignKey('users.User', on_delete=models.SET_NULL, null=True)
    # 评论时间
    created = models.DateTimeField(auto_now_add=True)

项目结构与路由设置

项目结构如下:

  • home 为子应用:管理博客和评论
  • libs 为依赖的第三方库:图片验证码和手机号短信验证码;
  • logs 没传上来:用于日志输出;
  • media 媒体资源文件:头像图片之类的;
  • my_blog 主应用:用于注册其它应用,设置超级管理员等;
  • static 静态资源目录:js 和 css 等;
  • template 模板引擎文件夹:就是几个主页面;
  • users 用户子应用:用于实现用户登陆等功能;
  • utils 工具类包:自定义装填码信息;

路由结构如下:

根路由:

urlpatterns = [
    path('admin/', admin.site.urls),

    # include 首先设置一个元组(子应用的路由, 子应用的名字)
    # 然后设置命名空间 namespace 可以防止不同应用路由重名的问题
    path('', include(('users.urls', 'users'), namespace='users')),
    path('', include(('home.urls', 'home'), namespace='home'))
]

users 子路由:

urlpatterns = [

    # path(路由, 视图函数名)
    path('register/', RegisterView.as_view(), name='register'),

    # 图片验证码的路由
    path('imagecode/', CaptchaView.as_view(), name='imagecode'),

    # 手机验证码的路由
    path('smscode/', SmsCodeView.as_view(), name='smscode'),

    # 登陆的路由
    path('login/', LoginView.as_view(), name='login'),

    # 退出登陆
    path('logout/', LogoutView.as_view(), name='logout'),

    # 忘记密码
    path('forgetpassword/', ForgetPasswordView.as_view(), name='forgetpassword'),

    # 用户个人信息页面
    path('center/', UserCenterView.as_view(), name='center'),

    # 写文章的路由
    path('writeblog/', WriteBlogView.as_view(), name='writeblog'),
]

home 子路由:

urlpatterns = [
    # 首页的路由 即什么路径都不写就会跳转到首页
    path('', IndexView.as_view(), name='index'),
    path('detail/', DetailView.as_view(), name='detail'),
]

这里使用了路由的 namespace 设置路由的命名空间,主要是为了后面引用方便。

比如在页面种经常这么写:

三、技术要点(关键技术)

  1. 采用 Vue 作为前端框架;
  2. 采用 Django 作为后端框架;
  3. 采用 Django 模板引擎;
  4. 采用 云通讯 短信发送;
  5. 采用 session 技术;

这里我将注册部分做的过于复杂,按理说我这种小网站不需要手机短信验证码啥的,我这里这么做的原因主要是学习使用短信验证码进行认证,因为之前在开发的时候没有用到过短信验证码,用过邮箱验证码,这次在本项目中用到了之后再做相似的项目就比较熟悉了。

日志管理

值得一提的是使用了 Django 自带的日志记录功能,在 settings 文件中配置如下:

# 设置日志
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,  # 是否禁用已经存在的日志器
    'formatters': {  # 日志信息显示的格式
        'verbose': {
            'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
        },
        'simple': {
            'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
        },
    },
    'filters': {  # 对日志进行过滤
        'require_debug_true': {  # django在debug模式下才输出日志
            '()': 'django.utils.log.RequireDebugTrue',
        },
    },
    'handlers': {  # 日志处理方法
        'console': {  # 向终端中输出日志
            'level': 'INFO',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
            'formatter': 'simple'
        },
        'file': {  # 向文件中输出日志,日志会以文件的方式保存到项目目录下的 logs 文件夹下面;
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': os.path.join(BASE_DIR, 'logs/blog.log'),  # 日志文件的位置
            'maxBytes': 300 * 1024 * 1024,
            'backupCount': 10,
            'formatter': 'verbose'
        },
    },
    'loggers': {  # 日志器
        'django': {  # 定义了一个名为django的日志器
            'handlers': ['console', 'file'],  # 可以同时向终端与文件中输出日志
            'propagate': True,  # 是否继续传递日志信息
            'level': 'INFO',  # 日志器接收的最低日志级别为 INFO
        },
    }
}

然后就可以在 logs/blog.log 文件下查看日志信息了:

通过 Django 自带的 后台管理系统 管理后台:

创建用户

创建超级用户

17858918831
wangshuo
wangsuoo@qq.com
wsuo2821

文章分类

通过蠕虫复制更多的数据:

INSERT INTO tb_article(avatar,tags,title,summary,content,total_view,comments_count,created,updated,author_id,category_id)
SELECT avatar,tags,title,summary,content,total_view,comments_count,created,updated,author_id,category_id FROM tb_article;

四、难点及解决过程(所有碰到的问题、原因及解决方法)

1、图片验证码

这里使用了一个第三方库实现了功能,工具地址:https://bitbucket.org/akorn/wheezy.captcha

前端用户可以点击切换验证码,这里使用的策略是,写一个接口用于返回验证码图片,为了实现定时过期的功能,我存到了 Redis 中,这样指定时间之后验证码就会过期:

"""
生成验证码并且存储到 Redis 中
:param request: 请求对象
:return: 返回值,这里是一个响应对象
"""
# 首先从前端获取到验证码的 uuid
uuid = request.GET.get('uuid')
# 然后做一个判断,确保 UUID 存在
if uuid is None:
    return HttpResponseBadRequest("验证码有误!")
# 通过验证码库生成验证码
text, image = captcha.generate_captcha()
# 获取 Redis 连接
redis_conn = get_redis_connection("default")
# 存入 Redis 中, (键, 存活时间, 值) 300s = 5分钟
redis_conn.setex("img:%s" % uuid, 300, text)
# 返回给前端验证码图片
return HttpResponse(image, content_type="image/jpeg")

将验证码的 UUID 存储到 Redis 作为 key,将真正的验证码的值作为 value 存储进去,这样之后校验的时候就可以直接拿过来比较,如果匹配则可以注册,不匹配则报错。

如图,Redis 中存储的值:

2、手机短信验证码

这里使用的是 容联云通讯 网址:https://www.yuntongxun.com/

注册之后可以将自己的电话号码设置为测试账号,仅可以向自己的手机号发短信,测试成功的页面如下:

使用的是官方提供的接口,在项目文件中将自己的密钥信息填进去就能用:

可以使用 main 函数测试:

接口设计:

"""
    用 Random 库生成随机的手机验证码,然后存储到 Redis 中,同时在控制台打印输出,方便调试
    最后调用 '容联云' 的接口发送验证码:
        注意目前这里只能向我指定的手机号发送验证码. 17858918830
"""
# 随机生成 6 位验证码
sms_code = '%06d' % randint(0, 999999)
# 将验证码输出到控制台
logging.info(sms_code)
# 保存到 Redis 中
redis_conn.setex('sms:%s' % mobile, 300, sms_code)
# 发送短信 17858918830;
# 参数一是手机号;
# 参数二是模板中的内容, 您的验证码为 1234, 请于 5 分钟之内填写;
# 参数三是短信模板,用于测试只能是1.
CCP().send_template_sms(mobile, [sms_code, 5], 1)
# 响应结果
return JsonResponse({'code': RETCODE.OK,
                     'errmsg': '发送短信成功'})

这里采取的策略是,先使用 random 库生成一个 6 位的随机数,然后将验证码保存到 Redis 中,并设置过期时间,这里为了方便调试也把它打印到 控制台 了,实际测试中我的手机确实可以接收到验证码,也注册成功了,就是官方的这个免费的接口响应比较慢。

3、登陆状态保持

状态保持:

  • 将通过认证的用户的唯一标识信息(比如:用户ID)写入到当前 session 会话中;
  • Django 用户认证系统提供了 login() 方法封装了写入 session 的操作,帮助我们快速实现状态保持;
  • login() 位置:django.contrib.auth.__init__.py 文件中。

同时如果用户点击了记住我按钮之后,就会将登录信息写入 cookie 中。

# 认证登陆的用户: authenticate 是 Django 自带的认证方法
user = authenticate(mobile=mobile, password=password)
if user is None:
    return HttpResponseBadRequest('用户名或者密码错误')
# 实现登陆状态保持
login(request, user)
# 根据 next 参数来进行页面的跳转: 由用户信息页面传递的参数
nex = request.GET.get('next')
if nex:
    response = redirect(nex)
else:
    response = redirect(reverse('home:index'))
# 存储到 Cookie 中
if remember != 'on':
    # 用户没有选择记住我,浏览区会话结束就过期
    request.session.set_expiry(0)
    response.set_cookie('is_login', True)
    response.set_cookie('username', user.username, max_age=30 * 24 * 3600)
else:
    # 用户选择了记住我: set_expiry 默认两周之后过期
    request.session.set_expiry(None)
    response.set_cookie('is_login', True, max_age=14 * 24 * 3600)
    response.set_cookie('username', user.username, max_age=30 * 24 * 3600)

而且这里由于配置了 Redis 的名称为 session ,所以会自动存储到 Redis 中,持续时间为一个月,也就是说关掉浏览器之后一个月之内都不用重新登陆。

"session": {  # session
    "BACKEND": "django_redis.cache.RedisCache",
    "LOCATION": "redis://127.0.0.1:6379/1",
    "OPTIONS": {
        "CLIENT_CLASS": "django_redis.client.DefaultClient",
    }
},


# 将 session 的存取由数据库存储改为 Redis 存储
SESSION_ENGINE = "django.contrib.sessions.backends.cache"
SESSION_CACHE_ALIAS = "session"

我前两天测试的,现在 Redis 中还有:

查看使用的 Cookie 信息:

# 默认的认证方法中是对username进行认证。我们需要修改认证的字段为mobile。
# 所以我们需要在User的模型中修改
USERNAME_FIELD = 'mobile'

可以看到电话号码已经作为 username 存储到 cookie 中了

4、退出登陆

使用模板语言:

<a class="dropdown-item" href='{% url "user:logout" %}'>退出登录</a>

已经显示登陆了:

这个时候点击退出登录发现已经没有了:

5、图片上传

图片属于静态资源,在说图片上传之前先说一下怎么访问的静态资源,我是在根目录下创建了一个 static 文件夹,然后在 settings 中配置如下信息:

# 访问静态资源的路由
STATIC_URL = '/static/'

# 设置本地静态资源的加载路径
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

图片上传经过 Django 的封装之后就变得非常简单了,我在定义用户实体的时候就指定了上传文件夹:

# 头像信息(图片类型的, 保存到项目目录下的 avatar 文件夹下_以日期创建文件夹区分, 可以为空)
avatar = models.ImageField(upload_to='avatar/%Y%m%d/', blank=True)

但是仅仅是这样还是不行的,要指定访问路径和访问路由。

# 设置图片上传路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

# 图片的统一路由
MEDIA_URL = '/media/'
# 设置图片路由访问规则
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

修改之后:

6、跨域问题

什么都没写错,但就是访问不到,报错信息如下:

看到 CSRF 就想起来了跨域问题,因为之前做 Web 开发的时候也遇到过类似的情况,可以在前端解决,也可以在后端解决,这里 Django 提供了一种更简单的方法:

直接在表单下面添加一个标签即可。

7、用户访问问题

Django自带的类:

让我们的类实现该类:

然后启动:

报错找不到,因为 Django 默认的跳转连接是 accounts,需要在设置里修改:

# 设置未登录用户跳转的路由
LOGIN_URL = '/login/'

? 源码地址:https://gitee.com/wsuo/Blog_Django 求个 Star ⭐。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计算机网络总结 8800字

    1-07 internet(互联网):通用名词,泛指由多台计算机网络互连而成的网络,协议无特指。Internet(因特网):专用名词,特指采用 TCP/IP 协...

    wsuo
  • 前后端分离中使用 Session 域传输对象

    前端使用 Vue,后端使用 SpringBoot 框架,使用 Session 传值后端获取不到。

    wsuo
  • Python 中甜甜的语法糖

    首先解释一下语法糖是什么意思,其实就是简化我们的代码,让那些复杂的操作交给解释器来完成,这些语法糖刚开始学的时候觉得很难记住,如果看别人写的语法糖更容易蒙圈,还...

    wsuo
  • Linux centos6.5 安装

    本来打算玩 netty的 但是这个东西暂时也不用,而且我之前玩过mina就暂时不玩这个了,等以后有时间再玩,那玩啥呢?前几天和我们领导要了百度网盘会员,下了60...

    彼岸舞
  • Material Design — 网格列表(Grid lists)

    霖酱
  • 一种快速准确的人脸检测、识别和验证系统

    即将迎来了2019世界人工智能大会,相信这个会议又一次推动人工智能的发展,有兴趣的同学可以去参加感受一下人工智能的热度,绝不会低于这个夏天的高温。

    计算机视觉研究院
  • [日常] nginx的错误日志error_log设置

    nginx error_log设置 1.error_log syslog:server=192.168.1.1 [级别] //直接发送给远程syslog日志集中...

    陶士涵
  • django 中如何将字典变量传给template视图层的JS

    django中,将view.py中的数据绑定到template中的html 中,我们可以用 render 函数携带 context 参数,复杂的数据结构可以用字...

    酒馆丁老师
  • Chrome用户代理切换插件User-Agent Switcher下载

    您是否曾需要经常切换用户代理字符串?开发需要同时在移动PC浏览器上运行的网站?是否厌倦了一些古老的网站,因为没有Netscape 4而无法使用?

    德顺
  • markdown基础语法

    一个淡定的打工菜鸟

扫码关注云+社区

领取腾讯云代金券