点赞

  • 点赞的过程:数字增加,并在后台点赞表记录数据

  • 需要发过去的数据:用户id,新闻id

  • 用户id从session里获得,那新闻id怎么获取呢?这想到分页是循环新闻列表来展示内容,循环的新闻id可以做为参数传入事件中(在事件里发送ajax请求),看前端代码:

    <div class="content-list" id="content_list">
    {% for item in new_list %}
    <div class="item">
    <a onclick="Favor(this,{{item.nid}})">点赞9</a>
    </div>
    {% end %}
    </div>
    • 点赞数就在后台根据新闻id去统计对应的客户id数(点赞表中 )或者在新闻表在加一个字段--点赞数(favor_count),每次点了赞加个1

    • 没点赞的,点了+1,点了赞的,再点-1

代码实现:

  1、后端render+  list【新闻1,新闻2...】  前端{{% for item in new_list %}}  点赞标签绑定onclick=‘func(this,{{item.nid}})’

  2、js:后台会返回一个操作编码,让前端判断,是加1操作,还是减1操作

function DoFavor(ths,nid){
//nid 新闻id
//只有登录状态才能发送点赞ajax请求 //获取特定登陆状态标签的属性值
if($('#action_nav').attr('is-login') == 'true'){
$.ajax({
url:'/favor',
type:'POST',
data:{news_id:nid},
dataType:'json',
success:function(arg){
if(arg.status){
//获取新闻点赞数显示标签
var $favorCount = $("#favor_count_"+nid);
//获取点赞数
var c = parseInt($favorCount.text());
if(arg.code == 2301){
//更新显示
$favorCount.text(c+1);
//给点赞图像加上活动状态
$(ths).find('span').addClass("active");
//加动态效果
AddFavorAnimation(ths);
}else if(arg.code == 2302){
//更新显示
$favorCount.text(c-1);
//给点赞图像去除活动状态
$(ths).find('span').removeClass('active');
//动画效果
}
}
}
})
}
}

3、后台判断处理

class FavorHandler(BaseRequestHandler):

    #装饰器主要做了一件---对用户登陆状态进行验证,如果没登录,就不会执行post方法
@decrator.auth_login_json
def psot(self,*args,**kwargs):
#这对象相当于以前的字典,用封装错误信息,数据,状态
rep = BaseResponse() news_id = self.get_argument("news_id",None)
if not news_id:
rep.summary = '新闻ID不能为空'
else:
user_info_id = self.session['user_info']['nid']
#创建链接
conn = ORM.session
#去数据库看看有没有已经点赞
has_favor = conn.query(ORM.Favor).filter(ORM.Favor.user_info_id == user_info_id,
ORM.Favor.news_id == new_id).count()
#如果已赞,再点就是取消赞
if has_favor:
#取消赞就去点赞表里把那条数据删除
conn.query(ORM.Favor).filter(ORM.Favor.user_inro_id == user_info_id,
ORM.Favor.news_id == news_id).delete()
#并在新闻表里修改点赞数-1
conn.query(ORM.News).filter(ORM.News.nid == news_id).update(
{"favor_count":ORM.News.favor_count - 1},synchronize_session='evaluate'
)
#设置编码
rep.code = StatusCodeEnum.FavorMinus
#如果没赞,加赞
else:
#给点赞表增加数据
conn.add(ORM.Favor(user_info_id=user_info_id,news_id=news_id,ctime=datetime.datetime.now))
#给新闻表的点赞跟新+1
conn.query(ORM.News).filter(ORM.News.nid == news_id).update(
{'favor_count':ORM.News.favor_count + 1},synchronize_session='evaluate'
)<br>          rep.code = StatusCodeEnum.FavorPlus
conn.commit()
conn.close() rep.status = True
self.write(json.dumps(rep.__dict__))

4、配置编码

FavorPlus = 2301
FavorMinus = 2302 class BaseRespinse: def __init__(self):
self.status = False
self.code = StatusCodeEnum.Success
self.data = None
self.summary = None
self.message = {}

评论树

  • 评论树默认不展开,点击后展开,display:None
  • 刚开始看到的新闻是没有评论数据的,只有点击了后才有,本质上就偷偷发了请求给后台,然后把评论数据返回显示在页面上

抽屉之Tornado实战(5)--点赞与评论树的更多相关文章

  1. 抽屉之Tornado实战(1)--分析与架构

    抽屉之Tornado实战(1)--分析与架构   项目模拟地址:http://dig.chouti.com/ 知识点应用: AJAX  用于偷偷发请求 原生ajax jQuery  ajax($.aj ...

  2. 抽屉之Tornado实战(9)--装饰器实现用户登录状态验证

    当然今天讲的验证,不只Tornado会用,以后用到web框架都会用到,最常见的场景就是只有用户登陆了才能执行某些操作,所以在执行这些操作前要先做登陆状态的验证. 比如:点赞,发布,评论等需要验证,都需 ...

  3. 抽屉之Tornado实战(2)--数据库表设计

    经过我们上次分析,数据库要有最基本的四张表,用户表,消息表,类型表,点赞表,评论表,接下来我们看着怎么设计吧 首先我们要清楚,表设计的代码是写在models下的 用户表 #一张表对应一个类 class ...

  4. 抽屉之Tornado实战(6)--session工厂(工厂方法模式)

    我之前写的session一般保存在服务器的内存里,那可以保存在缓存,或是数据库,那问题来了,不同地方,保存方式是不同的,所以需要定义不同的类,cache/redis/memcached类 sessio ...

  5. 抽屉之Tornado实战(7)--form表单验证

    在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class Base ...

  6. 抽屉之Tornado实战(4)--发帖及上传图片

    对于链接,点击获取标题时,本质发送ajax请求,然后去链接抓取信息,发布又是发送ajax请求 发布信息,还要有发布者的信息,并在信息表需要记录发布者的用户名,发布者的头像,发布者的id,而这些信息可以 ...

  7. 抽屉之Tornado实战(3)--注册

    知识点应用:标签绑定事件,jQuery获取用户值-->AJAX发送数据-->后台路由系统-->业务逻辑处理-->ORM数据操作-->write返回-->AJAX回调 ...

  8. Tornado实战

    抽屉之Tornado实战(1)--分析与架构 抽屉之Tornado实战(2)--数据库表设计 抽屉之Tornado实战(3)--注册 抽屉之Tornado实战(4)--发帖及上传图片 抽屉之Torna ...

  9. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

随机推荐

  1. 【MongoDB】MongoDb的“not master and slaveok=false”错误及解决方法 mongo连接从库出现问题

    链接mongodb报错如下 2016-03-14T16:26:00.912+0800 E QUERY [thread1] Error: listDatabases failed:{ "ok& ...

  2. idea android 开发

    plugins 勾上 插件即可

  3. Python3实现Win10桌面背景自动切换

    [本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...

  4. 还原Stack操作

    下午看到一题.给定两个int[]数组,int[] org和int[] res, 分别代表一串数字,和这串数字经过stack的push 和 pop操作之后的数字,让返回一个String, String里 ...

  5. Spring注解@Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier、@scope

    以下内容摘自部分网友的,并加上了自己的理解 @Service用于标注业务层组件(我们通常定义的service层就用这个) @Controller用于标注控制层组件(如struts中的action.Sp ...

  6. Unity Remote远程调试

    http://www.cnblogs.com/qinghuaideren/p/3623368.html http://blog.csdn.net/u012741077/article/details/ ...

  7. eclipse安装emmet插件

    http://www.cnblogs.com/matchless/archive/2013/04/10/3011973.html

  8. [Full-stack] 状态管理技巧 - Redux

    资源一: In React JS Tutorials, lectures from 9. From: React高级篇(一)从Flux到Redux,react-redux 从Flux到Redux,再到 ...

  9. 【Vue】转-Vue.js经典开源项目汇总

    版权声明:本文为EnweiTech原创文章,未经博主允许不得转载. https://blog.csdn.net/English0523/article/details/88694219 Vue是什么? ...

  10. 【netcore基础】.NET Core使用EPPlus实现MVC API里的Excel导出功能 配置中文表头

    EPPlus 用来操作excel非常方便,不用依赖微软的office包,所以推荐使用. 下面是具体步骤和代码 首先用nuget安装 EPPlus.Core 我装的版本是 1.5.4 然后就可以用 Ex ...