BBS项目分布搭建四(点赞点踩及评论功能)

1. 点赞点踩样式准备

# 在base.html文件中 head标签内 添加css模块：{% block css %}{% endblock %}# 修改 article_detail.html内容：
{% extends 'base.html' %}{% block css %}<style>#div_digg {float: right;margin-bottom: 10px;margin-right: 30px;font-size: 12px;width: 125px;text-align: center;margin-top: 10px;}.diggit {float: left;width: 46px;height: 52px;background: url(/static/img/upup.gif) no-repeat;text-align: center;cursor: pointer;margin-top: 2px;padding-top: 5px;}.buryit {float: right;margin-left: 20px;width: 46px;height: 52px;background: url(/static/img/downdown.gif) no-repeat;text-align: center;cursor: pointer;margin-top: 2px;padding-top: 5px;}.clear {clear: both;}.diggword {margin-top: 5px;margin-left: 0;font-size: 12px;color: #808080;}</style>
{% endblock %}{% block content %}<h1>{{ article_detail.title }}</h1><div class="article_content">{{ article_detail.content|safe }}</div>{#    点赞点踩样式开始#}<div class="clearfix"><div id="div_digg"><div class="diggit active"><span class="diggnum" id="digg_count">{{ article_detail.up_num }}</span></div><div class="buryit active"><span class="burynum" id="bury_count">{{ article_detail.down_num }}</span></div><div class="clear"></div><div class="diggword" id="digg_tips" style="color: red;"></div><div class="error_msg" style="color: red"></div></div></div>{#    点赞点踩样式结束#}
{% endblock %}

2. 前端逻辑书写

# 在base.html文件中 body标签内 添加：
{% block js %}{% endblock %}# 在 article_detail.html 添加js模块：
{% block js %}<script>$('.active').click(function () {var is_up = $(this).hasClass('diggit');  // true falsevar article_id = '{{ article_id }}';// 发送ajax请求$.ajax({url: '/up_or_down/',type: 'post',data: {'is_up': is_up, article_id: article_id},success: function (res) {console.log(res);}})})</script>
{% endblock %}# 在views.py中添加功能：
# 9. 点赞点踩
def up_or_down(request):print(123)# 添加路由：# 点赞点踩表url(r'^up_or_down/', views.up_or_down),

3. 后端逻辑实现

# 在views.py中添加 点赞点踩功能：import json
from django.db.models import F# 9. 点赞点踩
def up_or_down(request):'''1. 验证登录2. 验证是不是自己发布的文章，自己的文章不能点击3. 验证是否已经被点击过，如果点击过了，就不要在点了4. 正常入库4.1 点赞点踩表要操作4.2 文章表也要操作:param request::return:'''if request.method == 'POST':user_id = request.session.get('id')back_dic = {'status': 200, 'msg': '支持成功', 'data': {}}# 1. 接收参数is_up = request.POST.get('is_up')  # true <class 'str'>article_id = request.POST.get('article_id')# print(is_up, type(is_up))# 2. 验证参数是否登录if not request.session.get('username'):back_dic['status'] = 1010back_dic['msg'] = '<a href="/login/" style="color: red">请先登录</a>'return JsonResponse(back_dic)# 验证是不是自己的文章article_obj = models.Article.objects.filter(pk=article_id).first()# 通过文章查用户，if article_obj.blog.userinfo.username == request.session.get('username'):# 当前点击的文章是自己的back_dic['status'] = 1011back_dic['msg'] = '不能点击自己的文章哦，宝贝~'return JsonResponse(back_dic)# 验证是否点击过,参考点赞点踩表is_click = models.UpAndDown.objects.filter(article_id=article_id, user_id=user_id).first()if is_click:# 已经点过back_dic['status'] = 1012back_dic['msg'] = '你已经点过喽，宝贝~'return JsonResponse(back_dic)# 对传递过来的参数is_up做反序列话，需要转为布尔值is_up = json.loads(is_up)print(is_up, type(is_up))if is_up:# 操作文章表models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)back_dic['msg'] = '点赞成功'else:# 点踩models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1)back_dic['msg'] = '反对成功'# 操作点赞点踩表models.UpAndDown.objects.create(is_up=is_up, article_id=article_id, user_id=user_id)return JsonResponse(back_dic)# 修改article_detail.html：$('.active').click(function () {var is_up = $(this).hasClass('diggit');  // true falsevar article_id = '{{ article_id }}';// 发送ajax请求$.ajax({url: '/up_or_down/',type: 'post',data: {'is_up': is_up, article_id: article_id},success: function (res) {console.log(res);if (res.status == 200) {layer.msg(res.msg)} else if (res.status == 1010) {$('.error_msg').append(res.msg)} else {layer.msg(res.msg)}}})})# 添加路由 ：# 点赞点踩表url(r'^up_or_down/', views.up_or_down),"""注意：：：所有路由 最好短的放上面 避免匹配不到对应路由就已经结束匹配！！！"""

4. 前端逻辑实现

# 修改article_detail.html：{% block js %}<script>$('.active').click(function () {var is_up = $(this).hasClass('diggit');  // true falsevar article_id = '{{ article_id }}';var _this = $(this)// 发送ajax请求$.ajax({url: '/up_or_down/',type: 'post',data: {'is_up': is_up, article_id: article_id},success: function (res) {console.log(res);if (res.status == 200) {$('.error_msg').text(res.msg);var old_num = Number(_this.children().text());_this.children().text(old_num + 1)} else if (res.status == 1010) {$('.error_msg').append(res.msg)} else {layer.msg(res.msg)}}})})</script>
{% endblock %}

5. 评论样式准备

# 修改article_detail.html：{#    点赞点踩样式结束#}{#    评论样式开始#}<div ><p><span class="glyphicon glyphicon-comment"></span>发表评论</p><p><textarea name="" id="" cols="30" rows="10"></textarea></p><p><input type="button" class="btn btn-success" value="提交"></p></div>{#    评论样式结束#}<div style="height: 1000px"></div>{% endblock %}

BBS项目分布搭建四(点赞点踩及评论功能)相关推荐

Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像
文章目录 1 BBS项目介绍.表设计项目开发流程表设计 2 表创建同步.注册.登录功能数据库表创建及同步注册功能登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...
Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
tornado项目搭建_Day71-73 BBS项目(1)
目录 1.项目开发流程 2.bbs表设计 3.数据库表创建及同步 4.注册功能 forms组件注册页面 5.登录功能实现图片验证码 6.搭建BBS首页导航条修改密码退出登录 7.admin后台 ...
乐优商城之项目搭建(四)
文章目录 (一)项目分类 (二)电商行业 (三)专业术语 (四)项目介绍 (五)技术选型 (六)开发环境 (七)搭建后台环境:父工程 (八)搭建后台环境:eureka (九)搭建后台环境:zuul ( ...
Node-express项目--个人简历：搭建posts接口并实现评论、点赞以及相关功能
功能描述: 用户发布一条post信息,其他用户(包括自己)可以对这条post信息进行点赞.评论.取消点赞.删除评论用户可以删除自己发布的post信息,但不能删除其他用户发布的post 用户可以取消自 ...
基于Django的博客BBS项目
基于Django的博客BBS项目项目流程内容概要第一部分第二部分第三部分第四部分项目具体流程 1.数据库表创建及同步 1.1创建项目 1.2创建数据库 1.3修改配置文件与__init__ ...
auth复习和BBS项目的登录(1)
auth复习 auth组件验证:authenticate(request,username='andy',password='123) 登录:login(request,user)注销:login(r ...
Django学习 day74之BBS项目day3
BBS项目day3 一首页页面搭建(轮播图) 前端 js js升级版后端二 admin后台管理路由 admin.py中注册 setting中配置国际化表名显示中文字段显示中文字段下方的提 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...

BBS项目分布搭建四(点赞点踩及评论功能)

1. 点赞点踩样式准备

2. 前端逻辑书写

3. 后端逻辑实现

4. 前端逻辑实现

5. 评论样式准备

BBS项目分布搭建四(点赞点踩及评论功能)相关推荐

最新文章

热门文章