Im vorherigen Teil dieser Tutorial-Reihe haben wir die Dashboard-Seite der Anwendung mit Wünschen verschiedener Benutzer gefüllt. Außerdem haben wir jedem Wunsch einen „Gefällt mir“-Button hinzugefügt, damit Nutzer einen bestimmten Wunsch mit „Gefällt mir“ markieren können.
In diesem Teil der Serie lernen wir, wie man die Like/Dislike-Anzeige umschaltet und die Gesamtzahl der Likes anzeigt, die ein bestimmter Wunsch erhalten hat.
Beginnen wir damit, den vorherigen Teil dieses Tutorials von GitHub zu klonen.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git
Navigieren Sie nach dem Klonen des Quellcodes zum Projektverzeichnis und starten Sie den Webserver.
cd PythonFlaskMySQLApp_Part7 python app.py
Stellen Sie Ihren Browser auf http://localhost:5002/ und die Anwendung sollte ausgeführt werden.
Wir werden zunächst eine Funktion implementieren, um die Gesamtzahl eines bestimmten Wunsches anzuzeigen, der erhalten wurde. Wenn ein neuer Wunsch hinzugefügt wird, werden wir in der tbl_likes
表中添加一个条目。因此,修改 MySQL 存储过程 sp_addWish
以将条目添加到 tbl_likes
-Tabelle angezeigt.
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 ;
Fügen Sie den Wunsch wie im Code der gespeicherten Prozedur oben gezeigt in die Tabelle tbl_wish
表后,我们获取了最后插入的 ID
并将数据插入到 tbl_likes
ein.
Als nächstes müssen wir sp_GetAllWishes
存储过程以包含每个愿望获得的点赞数。我们将使用 MySQL 函数来获取愿望总数。因此,创建一个名为 getSum
的函数,它将获取愿望 ID
ändern und die Gesamtzahl der Likes zurückgeben.
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 ;
Verwenden Sie nun die MySQL-Funktion in der gespeicherten Prozedur sp_GetAllWishes
中调用上面名为 getSum
, um die Gesamtzahl der „Gefällt mir“-Angaben für jeden Wunsch zu ermitteln.
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 ;
Ändern Sie die getAllWishes
Python-Methode, um die Anzahl der Likes einzubeziehen. Wenn Sie die von einer gespeicherten MySQL-Prozedur zurückgegebenen Ergebnisse durchlaufen, fügen Sie ein „Gefällt mir“-Feld wie dieses ein:
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)
Ändern Sie die CreateThumb
JavaScript-Methode, um einen zusätzlichen Bereich zu erstellen, den wir zur Anzeige der Like-Anzahl verwenden.
var likeSpan = $('<span>').attr('aria-hidden','true').html(' '+like+' like(s)');
Und hängen Sie likeSpan
an den übergeordneten Absatz p
an. Dies ist die modifizierte likeSpan
附加到父段落 p
。这是修改后的 CreateThumb
JavaScript-Funktion.
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; }
Fügen Sie den /getAllWishes
的成功回调中调用 CreateThumb
JavaScript 函数时,包含 like
-Parameter ein, wenn Sie eine
/getAllWishes
aufrufen.
CreateThumb(data[i].Id,data[i].Title,data[i].Description,data[i].FilePath,data[i].Like)
Zeigen Sie, ob der Wunsch gefällt
You & 20 Others
。为了实现这一点,我们需要修改 sp_GetAllWishes
以包含一些代码,指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢,我们进行一个函数调用。创建一个名为 hasLiked
的函数,该函数接受用户 ID
和愿望 ID
Sehen Sie sich die Anzahl der „Gefällt mir“-Angaben für jeden Wunsch an. Es ist nicht klar, ob dem angemeldeten Benutzer der Wunsch gefallen hat. Wir zeigen also eine korrekte Nachricht wie
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
Jetzt in , um ein zusätzliches Feld im zurückgegebenen Datensatz zurückzugeben, das den bevorzugten Status des Benutzers angibt.
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
Öffnen als Parameter.
_user = session.get('user') conn = mysql.connect() cursor = conn.cursor() cursor.callproc('sp_GetAllWishes',(_user,))
getAllWishes
方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLiked
Die -Methode wurde jetzt geändert, um den ähnlichen Status des Benutzers für einen bestimmten Wunsch einzubeziehen. Ändern Sie den Code, um HasLiked
in das von Ihnen erstellte Wörterbuch aufzunehmen.
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
In der JavaScript-Funktion suchen wir nach HasLiked
und fügen entsprechend HTML hinzu.
if (hasLiked == "1") { likeSpan.html(' You & ' + (Number(like) - 1) + ' Others'); } else { likeSpan.html(' ' + like + ' like(s)'); }
Aktualisieren Sie die Anzahl der Likes
like
Wenn wir auf die Schaltfläche „Gefällt mir“ klicken, wird der „Gefällt mir“-Status in der Datenbank aktualisiert, ändert sich jedoch nicht im Dashboard. Aktualisieren wir dies also im Erfolgsrückruf des AJAX-Aufrufs, wenn auf die Schaltfläche
我们首先对 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 上获取。
Das obige ist der detaillierte Inhalt vonTeil 8: Eine Python Flask- und MySQL-Webanwendung von Grund auf entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!