相信很多朋友在平时浏览网站,资讯类信息或浏览朋友圈的时候都看到过点赞这个东东吧。今天与大家共享的内容就是给文章加个赞的功能,其实赞与踩,功能都是一样的!
咱们看截图,这个就是赞的功能了
步骤:设计数据库,程序设计,前端代码,ajax请求,后端处理。
1)数据库设计
先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“赞”总数,pic_ip则记录用户点击赞后的IP数据。
2)程序设计:index.php
在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。
3)CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。
4)jQuery代码,ajax请求
当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值
5)love.php,后端处理
后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“赞过了”,反之,则进行一下操作:
1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。
源码下载
总结:
点赞其实就是发了一个ajax请求,比如你要赞一个商品。商品表肯定有一个计数的字段。你发一个请求过去把这个字段+1
该成功了就返回一个现在的数。然后把页面改一下就成了
领取专属 10元无门槛券
私享最新 技术干货