在本教程系列的前一部分中，我们用不同用户创建的愿望填充了应用程序的仪表板页面。我们还为每个愿望附加了一个“点赞”按钮，以便用户可以点赞特定的愿望。
在本系列的这一部分中，我们将了解如何切换喜欢/不喜欢显示并显示特定愿望收到的点赞总数。
开始使用
我们首先从 GitHub 克隆本教程的前一部分。
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git
克隆源代码后，导航到项目目录并启动 Web 服务器。
cd PythonFlaskMySQLApp_Part7 python 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
)
BEGIN
insert 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)
BEGIN
select 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 = $('<span>').attr('aria-hidden','true').html(' '+like+' like(s)');
并将 likeSpan 附加到父段落 p。这是修改后的 CreateThumb JavaScript 函数。
function CreateThumb(id, title, desc, filepath, like) {
var mainDiv = $('<div>').attr('class', 'col-sm-4 col-md-4');
var thumbNail = $('<div>').attr('class', 'thumbnail');
var img = $('<img>').attr({
'src': filepath,
'data-holder-rendered': true,
'style': 'height: 150px; width: 150px; display: block'
});
var caption = $('<div>').attr('class', 'caption');
var title = $('<h3>').text(title);
var desc = $('<p>').text(desc);
var p = $('<p>');
var btn = $('<button>').attr({
'id': 'btn_' + id,
'type': 'button',
'class': 'btn btn-danger btn-sm'
});
var span = $('<span>').attr({
'class': 'glyphicon glyphicon-thumbs-up',
'aria-hidden': 'true'
});
var likeSpan = $('<span>').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)
BEGIN
select 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
)
BEGIN
select 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
)
BEGIN
if (select exists (select 1 from tbl_likes where wish_id = p_wish_id and user_id = p_user_id)) then
select wish_like into @currentVal from tbl_likes where wish_id = p_wish_id and user_id = p_user_id;
if @currentVal = 0 then
update tbl_likes set wish_like = 1 where wish_id = p_wish_id and user_id = p_user_id;
else
update tbl_likes set wish_like = 0 where wish_id = p_wish_id and user_id = p_user_id;
end if;
else
insert 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 = $('<span>').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
)
BEGIN
select 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 上获取。
