BBS项目分布搭建四(点赞点踩及评论功能准备)
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 false
var 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'] = 1010
back_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'] = 1011
back_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'] = 1012
back_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 false
var 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 false
var 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项目分布搭建四(点赞点踩及评论功能准备)的更多相关文章
- BBS项目分布搭建二(个人站点相关)
BBS项目分布搭建二 1. 首页详情补充 # 在home.html文件中 body标签内补充: <div class="container-fluid"> <di ...
- BBS项目分布搭建三(个人站点时间归档补充,实现侧边栏跳转、无线级分类、实现文章详情页展示功能)
BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...
- BBS项目分布搭建五(评论相关功能实现)
BBS项目分布搭建五(评论相关) 1. 根评论逻辑实现 # 在models.py文件中 修改: # 7. 评论表 parent = models.ForeignKey(to='self', null= ...
- .Net Core3.0 WebApi 项目框架搭建 四:JWT权限验证
.Net Core3.0 WebApi 项目框架搭建:目录 什么是JWT 根据维基百科定义,JWT(读作 [/dʒɒt/]),即JSON Web Tokens,是一种基于JSON的.用于在网络上声明某 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现评论功能
评论功能分析 上图可以看出评论功能主要实现了:评论的发布.评论列表的展示. 在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口: 发布评论 获取评论列表(考虑分页) 评论 Model 的建 ...
- .Net Core3.0 WebApi 项目框架搭建:目录
一.目录 .Net Core3.0 WebApi 项目框架搭建 一:实现简单的Resful Api .Net Core3.0 WebApi 项目框架搭建 二:API 文档神器 Swagger .Net ...
- node-express项目的搭建并通过mongoose操作MongoDB实现增删改查分页排序(四)
最近写了一个用node来操作MongoDB完成增.删.改.查.排序.分页功能的示例,并且已经放在了服务器上地址:http://39.105.32.180:3333. Mongoose是在node.js ...
- day74 bbs项目☞点赞与评论
目录 一.文章详情展示 1 将侧边栏做成inclusion_tag 二.点赞点踩功能 三.评论功能 整体总结: 在出现bug的时候,先判断是前端bug还是后端bug,再判断bug错误类型,以及报错信息 ...
- BBS 项目(四)
目录 BBS 项目(四) 首页布局 个人头像显示 个人站点路由设计 个人站点页面设计 base.html site.html 左侧过滤功能 404.html BBS 项目(四) 首页布局 <!D ...
随机推荐
- ubuntu php连接oracle数据库
转载请注明来源:https://www.cnblogs.com/hookjc/ 需要将数据库从mysql迁移到oracle.下了个oracle xe在ubuntu下折腾了好久,都只能启动1521的侦听 ...
- UITableViewCell结构
- java篇之JDBC原理和使用方法
JDBC学过但又属于很容易忘记的那种,每次要用到,都要看下连接模式.每次找又很费时间,总之好麻烦呀呀呀,所以写篇博客,总结下原理和常用接口,要是又忘了可以直接来博客上看,嘿嘿. 一.什么是JDBC 1 ...
- 为什么重写hashCode()和equals()方法
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11477229.html 这两个方法可能大多数新手都没重写过,为什么要重写更是不知道了,所以这里 ...
- MySQL日志管理、备份与恢复
MySQL日志管理.备份与恢复 目录 MySQL日志管理.备份与恢复 一.MySQL日志管理 1. MySQL日志路径 2. 设置.修改日志路径 3. 查询日志功能是否开启 二.MySQL备份与恢复 ...
- SpringBoot学习第一天
1 引用starter包可以很方面的引入一组你需要的依赖,而不需要逐个去添加依赖到项目中,也就是一站式获取,比如你想写一个有关spring 和jpa相关的项目,仅仅只需要添加一个spring-boot ...
- jquery里的Ajax解析
现在对Jquery的Ajax进行详细的解析. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百 ...
- 趣谈IO多路复用的本质
在<轻松搞懂5种IO模型>中,我发起了一个投票. 答案是[同步IO多路复用].目前,60%的朋友答对了.原因这里解释一下. 同步和异步的概念区别 同步:线程自己去获取结果.(一个线程) 异 ...
- (翻译) CAP 理论 FAQ
CAP 理论 FAQ 0. 关于这个文档 没有其它比CAP理论更引人注意的话题了, 这个FAQ的目的, 是说明对于CAP, 当前哪些是已知的, 并帮助那些刚接触这个理论的人快速了解, 并解决一些错误的 ...
- 命令行下Git调用IDEA的diff功能
命令行下git diff, 有人欢喜有人厌, 本文以IDEA diff为例, 介绍如何更换Git的diff工具. IDEA diff IDEA作为一个图形化工具, 其实也提供了极少一部分命令行接口, ...