在本教程系列的前一部分中,我们用不同用户创建的愿望填充了应用程序的仪表板页面。我们还为每个愿望附加了一个“点赞”按钮,以便用户可以点赞特定的愿望。
在本系列的这一部分中,我们将了解如何切换喜欢/不喜欢显示并显示特定愿望收到的点赞总数。
开始使用
我们首先从 GitHub 克隆本教程的前一部分。
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git
登录后复制
克隆源代码后,导航到项目目录并启动 Web 服务器。
cd PythonFlaskMySQLApp_Part7python app.py
登录后复制
将浏览器指向 http://localhost:5002/,应用程序应该正在运行。
立即学习“Python免费学习笔记(深入)”;
添加点赞数
我们首先将实现一项功能来显示特定愿望已获得的总计数。当添加新愿望时,我们将在 tbl_likes 表中添加一个条目。因此,修改 MySQL 存储过程 sp_addWish 以将条目添加到 tbl_likes 表中。
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_addWish`( IN p_title varchar(45),IN p_description varchar(1000),IN p_user_id bigint,IN p_file_path varchar(200),IN p_is_private int,IN p_is_done int)BEGINinsert into tbl_wish(wish_title,wish_description,wish_user_id,wish_date,wish_file_path,wish_private,wish_accomplished)values(p_title,p_description,p_user_id,NOW(),p_file_path,p_is_private,p_is_done);SET @last_id = LAST_INSERT_ID();insert into tbl_likes(wish_id,user_id,wish_like)values(@last_id,p_user_id,0);END$$DELIMITER ;
登录后复制
如上面的存储过程代码所示,将愿望插入到 tbl_wish 表后,我们获取了最后插入的 ID 并将数据插入到 tbl_likes 表。
接下来,我们需要修改 sp_GetAllWishes 存储过程以包含每个愿望获得的点赞数。我们将使用 MySQL 函数来获取愿望总数。因此,创建一个名为 getSum 的函数,它将获取愿望 ID 并返回喜欢的总数。
DELIMITER $$CREATE DEFINER=`root`@`localhost` FUNCTION `getSum`( p_wish_id int) RETURNS int(11)BEGINselect sum(wish_like) into @sm from tbl_likes where wish_id = p_wish_id;RETURN @sm;END$$DELIMITER ;
登录后复制
现在,在存储过程 sp_GetAllWishes 中调用上面名为 getSum 的 MySQL 函数来获取每个愿望的点赞总数。
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetAllWishes`()BEGIN select wish_id,wish_title,wish_description,wish_file_path,getSum(wish_id)from tbl_wish where wish_private = 0;END$$DELIMITER ;
登录后复制
修改 getAllWishes Python 方法以包含点赞计数。在迭代从 MySQL 存储过程返回的结果时,包括如下所示的 like 字段:
for wish in result: wish_dict = { 'Id': wish[0], 'Title': wish[1], 'Description': wish[2], 'FilePath': wish[3], 'Like':wish[4]} wishes_dict.append(wish_dict)
登录后复制
修改 CreateThumb JavaScript 方法以创建一个额外的范围,我们将用它来显示点赞计数。
var likeSpan = $('').attr('aria-hidden','true').html(' '+like+' like(s)');
登录后复制
并将 likeSpan 附加到父段落 p。这是修改后的 CreateThumb JavaScript 函数。
function CreateThumb(id, title, desc, filepath, like) { var mainDiv = $('').attr('class', 'col-sm-4 col-md-4'); var thumbNail = $('
').attr('class', 'thumbnail'); var img = $('
').attr({ 'src': filepath, 'data-holder-rendered': true, 'style': 'height: 150px; width: 150px; display: block' }); var caption = $('
').attr('class', 'caption'); var title = $('
').text(title); var desc = $('').text(desc); var p = $('
'); var btn = $('').attr({ 'id': 'btn_' + id, 'type': 'button', 'class': 'btn btn-danger btn-sm' }); var span = $('').attr({ 'class': 'glyphicon glyphicon-thumbs-up', 'aria-hidden': 'true' }); var likeSpan = $('').attr('aria-hidden', 'true').html(' ' + like + ' like(s)'); p.append(btn.append(span)); p.append(likeSpan); caption.append(title); caption.append(desc); caption.append(p); thumbNail.append(img); thumbNail.append(caption); mainDiv.append(thumbNail); return mainDiv;}在 jQuery AJAX 调用 /getAllWishes 的成功回调中调用 CreateThumb JavaScript 函数时,包含 like 参数。
CreateThumb(data[i].Id,data[i].Title,data[i].Description,data[i].FilePath,data[i].Like)
登录后复制
保存更改并重新启动服务器。登录应用程序后,您应该能够看到与每个愿望相对应的点赞数。
显示愿望是否被喜欢
查看每个愿望下的点赞数,并不清楚登录用户是否点赞了该愿望。因此,我们将显示一条正确的消息,例如 You & 20 Others。为了实现这一点,我们需要修改 sp_GetAllWishes 以包含一些代码,指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢,我们进行一个函数调用。创建一个名为 hasLiked 的函数,该函数接受用户 ID 和愿望 ID 作为参数,并返回该愿望是否被用户喜欢.
DELIMITER $$CREATE DEFINER=`root`@`localhost` FUNCTION `hasLiked`( p_wish int,p_user int) RETURNS int(11)BEGINselect wish_like into @myval from tbl_likes where wish_id = p_wish and user_id = p_user;RETURN @myval;END$$DELIMITER ;
登录后复制
现在在 sp_GetAllWishes 中调用上述 MySQL 函数 hasLiked ,以在返回的数据集中返回一个额外字段,指示用户喜欢的状态。
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetAllWishes`( p_user int)BEGINselect wish_id,wish_title,wish_description,wish_file_path,getSum(wish_id),hasLiked(wish_id,p_user)from tbl_wish where wish_private = 0;END
登录后复制
打开 app.py 并修改对 MySQL 存储过程 sp_GetAllWishes 的调用,以包含用户 ID 作为参数。
_user = session.get('user')conn = mysql.connect()cursor = conn.cursor()cursor.callproc('sp_GetAllWishes',(_user,))
登录后复制
现在修改 getAllWishes 方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLiked。
for wish in result: wish_dict = { 'Id': wish[0], 'Title': wish[1], 'Description': wish[2], 'FilePath': wish[3], 'Like':wish[4], 'HasLiked':wish[5]} wishes_dict.append(wish_dict)
登录后复制
在 CreateThumb JavaScript 函数中,我们将检查 HasLiked 并相应地添加 HTML。
if (hasLiked == "1") { likeSpan.html(' You & ' + (Number(like) - 1) + ' Others');} else { likeSpan.html(' ' + like + ' like(s)');}
登录后复制
如上面的代码所示,如果用户不喜欢某个特定愿望,我们就会显示点赞计数。如果用户喜欢这个愿望,我们将显示更具描述性的消息。
刷新点赞数
当我们点击“赞”按钮时,“赞”状态会在数据库中更新,但在仪表板中不会更改。因此,让我们在 like 按钮点击时 AJAX 调用的成功回调中更新它。
我们首先对 MySQL 存储过程 sp_AddUpdateLikes 进行更改。早些时候,我们传递了喜欢的状态,1 表示喜欢,0 表示不喜欢。我们将对其进行修改并在存储过程中切换类似/不同。打开 sp_AddUpdateLikes 并将赞状态选择到变量中并检查变量状态。如果变量状态为“相似”,我们会将状态更新为“相似”,反之亦然。以下是修改后的 sp_AddUpdateLikes 存储过程。
-- ---------------------------------------------------------------------------------- Routine DDL-- Note: comments before and after the routine body will not be stored by the server-- --------------------------------------------------------------------------------DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_AddUpdateLikes`( p_wish_id int,p_user_id int,p_like int)BEGINif (select exists (select 1 from tbl_likes where wish_id = p_wish_id and user_id = p_user_id)) thenselect wish_like into @currentVal from tbl_likes where wish_id = p_wish_id and user_id = p_user_id;if @currentVal = 0 thenupdate tbl_likes set wish_like = 1 where wish_id = p_wish_id and user_id = p_user_id;elseupdate tbl_likes set wish_like = 0 where wish_id = p_wish_id and user_id = p_user_id;end if;elseinsert into tbl_likes(wish_id,user_id,wish_like)values(p_wish_id,p_user_id,p_like);end if;END
登录后复制
在CreateThumb JavaScript函数中,为我们之前创建的likeSpan分配一个ID,这样我们就可以根据需要更新状态.
var likeSpan = $('').attr({'aria-hidden':'true','id':'span_'+id});
登录后复制
打开 app.py。在 addUpdateLike 方法中,一旦数据更新成功,我们将使用另一个存储过程调用来获取愿望之类的计数和状态。因此,创建一个名为 sp_getLikeStatus 的 MySQL 存储过程。在 sp_getLikeStatus 中,我们将调用已创建的 MySQL 函数 getSum 和 hasLiked 来获取状态。
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_getLikeStatus`( IN p_wish_id int,IN p_user_id int)BEGINselect getSum(p_wish_id),hasLiked(p_wish_id,p_user_id);END$$DELIMITER ;
登录后复制
从 Python 方法 addUpdateLike 调用 sp_AddUpdateLikes 后,关闭光标和连接。
if len(data) is 0: conn.commit() cursor.close() conn.close()
登录后复制
现在调用存储过程 sp_getLikeStatus。
conn = mysql.connect()cursor = conn.cursor()cursor.callproc('sp_getLikeStatus',(_wishId,_user))result = cursor.fetchall()
登录后复制
随响应一起返回点赞计数和点赞状态。
return json.dumps({'status':'OK','total':result[0][0],'likeStatus':result[0][1]})
登录后复制
在dashboard.html中,在对addUpdateLike方法进行AJAX调用的成功回调中,解析返回的响应并根据点赞状态显示点赞计数.
success: function(response) { var obj = JSON.parse(response); if (obj.likeStatus == "1") { $('#span_' + spId).html(' You & ' + (Number(obj.total) - 1) + ' Others'); } else { $('#span_' + spId).html(' ' + obj.total + ' like(s)'); } }
登录后复制
保存更改,重新启动服务器,然后使用有效凭据登录。进入仪表板页面后,尝试点赞某个特定愿望,然后查看点赞状态如何相应更新。
总结
在本系列的这一部分中,我们为仪表板页面中显示的愿望实现了类似/不同的功能。在本系列的后续部分中,我们将在应用程序中实现更多新功能并完善一些现有功能。
请在下面的评论中告诉我们您的想法和建议或任何更正。本教程的源代码可在 GitHub 上获取。
以上就是第 8 部分:从头开始开发 Python Flask 和 MySQL Web 应用程序的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2225795.html
关于作者
php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
使用Python Mahotas加载图像
上一篇
2025年2月26日 11:24:28
相关推荐
经过长久以来的不懈努力,我终于成功的将selectivizr与pie这两个解决css3的利器进行了深度的整合,大大降低了使用难度 只要在你的页面上加入这一行代码,整个页面全部兼容css3,不要忘了将文件下载回来放进/js/文件夹 兼容…
div{clear:both;min-height:100px;_height:100px;}可完成最小高度、关于可变高度的div完成自在扩展高度并关于ie6ie7firefox兼容。 W3C//DTDXHTML1.0Transitiona…
1、canvas 1)介绍:HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身并没有绘制能力(它仅仅是图形的容器) – 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返…
重新开始写博客。一点一点积累,不间断。 看了阮一峰老师的中文网页字体开发指南,做一些记录。 完整原文 http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html 1:font-fa…
本文为大家详细介绍下使用3种不同方式来清空select标签中option选项,具体语法格式如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 方法一 复制代码 代码如下: document.getElementById(“s…
首页 首页 首页 首页 首页 首页 首页 首页 首页 #nav { height:32px; back…
A. SwapSort time limit per test 1 second memory limit per test 256 megabytes input standard input output standard output…
在写一个网站的样式表的时候,都会不可避免地用到一些中文字体,比如说微软雅黑、黑体等,除非是做英文站,或者说你乐意整站都用浏览器默认的字体,那我也算服了u。在 css 中写入中文字体的方法一般采用 font-family:”微软雅…
我现在的项目是打开这个页面,然后2个文本框(一个开始时间一个结束时间)自动显示出今天和3个月前的日期 现在的问题是 我想把开始时间的限制去掉(不显示,表示没有开始的限制) 但是我找了很久都没有找到,默认时间显示的那段代码 现在的代码如下 …
B. BerSU Ball time limit per test 1 second memory limit per test 256 megabytes input standard input output standard outp…