Teil 8: Eine Python Flask- und MySQL-Webanwendung von Grund auf entwickeln

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.

Loslegen Sie

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.

Likes hinzufügen

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

JavaScript-Funktion im Erfolgsrückruf eines jQuery-AJAX-Aufrufs /getAllWishes aufrufen.

CreateThumb(data[i].Id,data[i].Title,data[i].Description,data[i].FilePath,data[i].Like)

Änderungen speichern und Server neu starten. Sobald Sie sich in der App angemeldet haben, sollten Sie die Anzahl der Likes für jeden Wunsch sehen können.

Zeigen Sie, ob der Wunsch gefällt

You & 20 Others。为了实现这一点，我们需要修改 sp_GetAllWishes 以包含一些代码，指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢，我们进行一个函数调用。创建一个名为 hasLiked 的函数，该函数接受用户 ID 和愿望 IDSehen 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

als Parameter an und geben zurück, ob der Wunsch dem Benutzer gefallen hat.

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 函数 hasLikedJetzt 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 方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLikedDie

-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 函数中，我们将检查 HasLikedIn 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)');
}

Wie im obigen Code gezeigt, zeigen wir die Anzahl der „Gefällt mir“-Angaben an, wenn dem Benutzer ein bestimmter Wunsch nicht gefällt. Wenn dem Benutzer dieser Wunsch gefällt, zeigen wir eine aussagekräftigere Nachricht an.

Aktualisieren Sie die Anzahl der Likes

likeWenn 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

geklickt wird. 🎜

我们首先对 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!