Dans la partie précédente de cette série de didacticiels, nous avons rempli la page du tableau de bord de l'application avec les souhaits créés par différents utilisateurs. Nous avons également attaché un bouton « J'aime » à chaque souhait afin que les utilisateurs puissent aimer un souhait spécifique.
Dans cette partie de la série, nous apprendrons comment activer/désactiver l'affichage J'aime/Je n'aime pas et afficher le nombre total de j'aime qu'un souhait spécifique a reçu.
Commençons par cloner la partie précédente de ce tutoriel depuis GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git
Après avoir cloné le code source, accédez au répertoire du projet et démarrez le serveur Web.
cd PythonFlaskMySQLApp_Part7 python app.py
Pointez votre navigateur sur http://localhost:5002/ et l'application devrait être en cours d'exécution.
Nous allons d'abord implémenter une fonctionnalité pour afficher le nombre total d'un souhait spécifique qui a été obtenu. Lorsqu'un nouveau souhait est ajouté, nous serons dans le tableau 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 ;
Comme indiqué dans le code de la procédure stockée ci-dessus, insérez le souhait dans la table tbl_wish
表后,我们获取了最后插入的 ID
并将数据插入到 tbl_likes
.
Ensuite, nous devons modifier sp_GetAllWishes
存储过程以包含每个愿望获得的点赞数。我们将使用 MySQL 函数来获取愿望总数。因此,创建一个名为 getSum
的函数,它将获取愿望 ID
et renvoyer le nombre total de likes.
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 ;
Maintenant, utilisez la fonction MySQL dans la procédure stockée sp_GetAllWishes
中调用上面名为 getSum
pour obtenir le nombre total de likes pour chaque souhait.
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 ;
Modifier getAllWishes
Méthode Python pour inclure le nombre de likes. Lorsque vous parcourez les résultats renvoyés par une procédure stockée MySQL, incluez un champ similaire comme celui-ci :
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)
Modifiez la CreateThumb
méthode JavaScript pour créer une plage supplémentaire que nous utiliserons pour afficher le nombre de likes.
var likeSpan = $('<span>').attr('aria-hidden','true').html(' '+like+' like(s)');
Et ajoutez likeSpan
au paragraphe parent p
. Il s'agit de la fonction JavaScript likeSpan
附加到父段落 p
。这是修改后的 CreateThumb
modifiée.
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; }
Incluez le paramètre /getAllWishes
的成功回调中调用 CreateThumb
JavaScript 函数时,包含 like
lors de l'appel d'une fonction JavaScript
/getAllWishes
.
CreateThumb(data[i].Id,data[i].Title,data[i].Description,data[i].FilePath,data[i].Like)
Montrez si le souhait est apprécié
You & 20 Others
。为了实现这一点,我们需要修改 sp_GetAllWishes
以包含一些代码,指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢,我们进行一个函数调用。创建一个名为 hasLiked
的函数,该函数接受用户 ID
和愿望 ID
Affichez le nombre de likes sous chaque souhait. Il n'est pas clair si l'utilisateur connecté a aimé le souhait. Nous afficherons donc un message correct comme
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
Maintenant dans pour renvoyer un champ supplémentaire dans l'ensemble de données renvoyé indiquant le statut préféré de l'utilisateur.
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
Ouvrir en paramètre.
_user = session.get('user') conn = mysql.connect() cursor = conn.cursor() cursor.callproc('sp_GetAllWishes',(_user,))
getAllWishes
方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLiked
La méthode est désormais modifiée pour inclure le statut similaire de l'utilisateur pour un souhait spécifique. Modifiez le code pour inclure HasLiked
dans le dictionnaire que vous créez.
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
Dans la fonction JavaScript, nous vérifierons HasLiked
et ajouterons du HTML en conséquence.
if (hasLiked == "1") { likeSpan.html(' You & ' + (Number(like) - 1) + ' Others'); } else { likeSpan.html(' ' + like + ' like(s)'); }
Actualiser le nombre de likes
like
Lorsque nous cliquons sur le bouton J'aime, le statut J'aime est mis à jour dans la base de données mais ne change pas dans le tableau de bord. Mettons donc à jour cela dans le rappel de réussite de l'appel AJAX lorsque le bouton
我们首先对 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 上获取。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!