# Django+vue-Fourm **Repository Path**: sic096/django-vue-fourm ## Basic Information - **Project Name**: Django+vue-Fourm - **Description**: 一个简单的使用Django和vue开发的论坛系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-07-23 - **Last Updated**: 2024-11-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目介绍 本项目主要是一个论坛系统，用户可以在该论坛完成帖子的发布、搜索、点赞、评论、收藏等功能，同时也可以查看自己点赞、收藏的帖子，以及对个人资料、密码等信息的修改。 项目亮点：暗黑模式、用户密码md5加密存储、jwt鉴权、用户信息持久化存储、邮箱验证码 主要技术：Django、rest_framework、vue # 1.项目准备 下载项目到本地并解压，使用pycharm打开DjangoForum目录，使用vscode打开vue-forum目录 ## 1.1后端环境设置 ### 1.1.1安装依赖 使用pycharm打开DjangoForum目录后，为该项目新建一个本地解释器，在pycharm的设置--项目设置--解释器--右边点击解释器添加新的解释器 等待解释器安装完成之后，在pycharm的终端新建一个终端，注意看终端路径是否为当前项目的目录 ```python pip install -r .\requirements.txt\ ``` 终端下执行上述代码安装依赖 ### 1.1.2 数据库设置 在项目的setting文件中，根据代码要求创建数据库06_forum，并设置成自己数据库的用户名和密码 ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': '06_forum', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '127.0.0.1', 'PORT': '3306', } } ``` ### 1.1.3 其他设置 在setting文件的底部，在项目的seeting文件的最下方，将下面的信息修改成自己的信息： ```python # 邮箱相关配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = 'smtp.qq.com' EMAIL_PORT = 587 EMAIL_USE_TLS = True EMAIL_HOST_USER = '自己的邮箱' EMAIL_HOST_PASSWORD = '秘钥' DEFAULT_FROM_EMAIL = '自己的邮箱' LOGIN_URL = '/stu_login' ``` 以QQ邮箱为例，在邮箱设置--账号栏目下，开启pop3服务后，可以获取自己的授权码 ![image-20240723194236051](Django+vue论坛系统.assets/image-20240723194236051.png) 将上述所有内容都设置完成之后，点击右上角的启动即可，也可以使用以下命令启动项目： ```python python manage.py runserver 127.0.0.1:8080 ``` ## 1.2 前端环境设置 使用vscode打开vue-forum目录后，在终端环境下执行npm i 安装依赖 依赖安装完成之后，使用npm run dev启动项目 ![image-20240723194710672](Django+vue论坛系统.assets/image-20240723194710672.png) ![image-20240723194701304](Django+vue论坛系统.assets/image-20240723194701304.png) # 2数据库设计 ## 2.1 概念结构设计 #### ![img](Django+vue论坛系统.assets/wps1.jpg) 图2.1 ER图 ## 2.2 逻辑结构设计 用户：{用户编号、昵称、电子邮箱、密码、头像、简介、创建时间、更新时间} 验证码：{电子邮箱、验证码、创建时间} 帖子：{标题、内容、分类、创建时间、更新时间、作者、点赞数、评论数、收藏数} 点赞：{用户编号、帖子编号、点赞时间} 评论：{用户编号、帖子编号、评论内容、评论时间} 收藏：{用户编号、帖子编号、收藏时间} 表2.2.1 用户信息表 | 字段名 | 字段类型 | 备注 | 是否为空 | | ---------- | ------------ | -------- | -------- | | nickname | VARCHAR(100) | 昵称 | 否 | | password | VARCHAR(100) | 密码 | 否 | | avatar | VARCHAR(100) | 头像 | 否 | | email | VARCHAR(100) | 邮箱 | 否 | | introduce | VARCHAR(100) | 简介 | 否 | | created_at | DATETIME | 创建时间 | 否 | | updated_at | DATETIME | 更新时间 | 否 | 表2.2.2 验证码表 | 字段名 | 字段类型 | 备注 | 是否为空 | | ------------ | ------------- | -------- | -------- | | email | EmailField | 邮箱 | 否 | | captcha | CharField | 验证码 | 否 | | created_time | DateTimeField | 创建时间 | 否 | 表2.2.3 帖子表 | 字段名 | 字段类型 | 备注 | 是否为空 | | -------------- | ------------ | -------- | -------- | | title | VARCHAR(100) | 标题 | 否 | | content | TEXT | 内容 | 否 | | category | VARCHAR(100) | 分类 | 否 | | created_at | DATETIME | 创建时间 | 否 | | updated_at | DATETIME | 更新时间 | 否 | | user | INT | 作者 | 否 | | like_count | INT | 点赞数 | 否 | | comment_count | INT | 评论数 | 否 | | favorite_count | INT | 收藏数 | 否 | 表2.2.4 点赞表 | 字段名 | 字段类型 | 备注 | 是否为空 | | ---------- | -------- | -------- | -------- | | user | INT | 用户 | 否 | | post | INT | 帖子 | 否 | | created_at | DATETIME | 点赞时间 | 否 | 表2.2.5 评论表 | 字段名 | 字段类型 | 备注 | 是否为空 | | ---------- | -------- | -------- | -------- | | user | INT | 用户 | 否 | | post | INT | 帖子 | 否 | | content | TEXT | 评论内容 | 否 | | created_at | DATETIME | 评论时间 | 否 | 表2.2.6 收藏表 | 字段名 | 字段类型 | 备注 | 是否为空 | | ---------- | -------- | -------- | -------- | | user | INT | 用户 | 否 | | post | INT | 帖子 | 否 | | created_at | DATETIME | 收藏时间 | 否 | ## 2.3 物理结构设计 本系统采用 MySQL 数据库。MySQL 是一个关系型数据库管理系统，以其高性能、可靠性和易用性而广受欢迎，特别适用于Web应用的后端数据存储。 # 3系统设计与实现 在安全性方面，使用了jwt来实现用户的身份验证，获取用户的信息。 ![img](Django+vue论坛系统.assets/wps2.jpg) 在用户密码的存储方面，使用md5加密存储，即使数据库遭到了泄露，攻击者看到的也只是md5加密后的信息，很难逆向推导出用户的密码，保证了用户信息的安全性。 ![img](Django+vue论坛系统.assets/wps3.jpg) 在注册用户的时候，用户使用邮箱账号进行注册，后期也通过邮箱账号进行登录，同时在注册的时候，用户需要先填入邮箱号，再获取验证码，使用这个验证码进行注册。这样保证了账号的唯一性，而且也能避免非法用户的批量注册。 ![img](Django+vue论坛系统.assets/wps4.jpg) ![img](Django+vue论坛系统.assets/wps5.jpg) ![img](Django+vue论坛系统.assets/wps6.jpg) 在用户注册上传头像，和后期更换头像的时候，都是在用户选择完头像之后，先自动执行上传的动作，上传成功之后，后端会把地址返还给前端，展示给用户，用于提示用户头像已上传完成。当用户再执行提交按钮的时候，在这个post请求里面，会把用户头像的地址和其他信息发送给后端，后端再进行存储。 ![img](Django+vue论坛系统.assets/wps7.jpg) ![img](Django+vue论坛系统.assets/wps8.jpg) 前端使用vueuse的usedark和两套css样式，实现了暗黑模式的视线和持久化存储。 ![img](Django+vue论坛系统.assets/wps9.jpg) ![img](Django+vue论坛系统.assets/wps10.jpg) ![img](Django+vue论坛系统.assets/wps11.jpg) ![img](Django+vue论坛系统.assets/wps12.jpg) # 4前后端的开发和交互界面的介绍 本项目使用了vue router来实现路由的跳转，使用axios来实现前后端内容的交互，在axios里面，重新封装了axios，在请求拦截器里面自动添加token，在相应拦截器里面添加错误的响应码的拦截和错误信息展示。 ![img](Django+vue论坛系统.assets/wps13.jpg) 论坛首页（用户未登录的情况下）： ![img](Django+vue论坛系统.assets/wps14.jpg) 点击注册按钮可以前往注册界面 ![img](Django+vue论坛系统.assets/wps15.jpg) 注册成功后会自动跳转到登录页面 ![img](Django+vue论坛系统.assets/wps16.jpg) 网站首页（用户登录的情况）： ![img](Django+vue论坛系统.assets/wps17.jpg) 用户可以在首页浏览帖子列表并完成翻页的动作： ![img](Django+vue论坛系统.assets/wps18.jpg) 点击帖子可以进入到帖子详情，并完成帖子的点赞、收藏、评论： ![img](Django+vue论坛系统.assets/wps19.jpg) 用户发表后评论后的界面： ![img](Django+vue论坛系统.assets/wps20.jpg) 用户点击导航栏可以切换不同的板块： ![img](Django+vue论坛系统.assets/wps21.jpg) ![img](Django+vue论坛系统.assets/wps22.jpg) 用户点击学习板块（当前板块没有内容）： ![img](Django+vue论坛系统.assets/wps23.jpg) 用户进行搜索帖子内容操作： ![img](Django+vue论坛系统.assets/wps24.jpg) 用户发布帖子界面： ![img](Django+vue论坛系统.assets/wps25.jpg) 用户成功发布帖子之后，会跳转到论坛首页，在首页可以看到刚刚发布的帖子： ![img](Django+vue论坛系统.assets/wps26.jpg) 在论坛首页，点击用户头像可以进入到用户的主页，看到用户发布的所有帖子，如果进入到的是自己的主页，则每个帖子下面都会有修改和删除的按钮： ![img](Django+vue论坛系统.assets/wps27.jpg) 如果是进入到他人主页，则没有修改和删除的按钮： ![img](Django+vue论坛系统.assets/wps28.jpg) 用户点击修改则会跳转到修改帖子的页面： ![img](Django+vue论坛系统.assets/wps29.jpg) 如果点击删除，则会有弹框提示用户是否删除帖子： ![img](Django+vue论坛系统.assets/wps30.jpg) 点击用户昵称旁边的三角符号，可以打开用户的操作栏： ![img](Django+vue论坛系统.assets/wps31.jpg) 点击修改信息可以进入到修改用户信息的界面： ![img](Django+vue论坛系统.assets/wps32.jpg) 点击修改密码会打开修改密码的弹框： ![img](Django+vue论坛系统.assets/wps33.jpg) 成功修改密码之后会跳转到登录的界面： ![img](Django+vue论坛系统.assets/wps34.jpg) 点击我的点赞和我的收藏，分别会跳转到点赞和收藏列表： ![img](Django+vue论坛系统.assets/wps35.jpg) 点击退出登录会将用户退出并跳转到登录的界面，点击注销会注销用户并删除用户发布过的所有的帖子、评论内容。 用户的登录是持久化的，这里技术方面是使用pinia，将用户的昵称、头像、token等用户信息，存储在pinia中，使用pinia的pinia-plugin-persistedstate插件完成数据的持久化存储。 ![img](Django+vue论坛系统.assets/wps36.jpg)