8부: 처음부터 Python Flask 및 MySQL 웹 애플리케이션 개발

이 튜토리얼 시리즈의 이전 부분에서는 다양한 사용자가 만든 소원으로 애플리케이션의 대시보드 페이지를 채웠습니다. 또한 사용자가 특정 희망사항에 '좋아요'를 표시할 수 있도록 각 희망사항에 '좋아요' 버튼을 첨부했습니다.

이 시리즈에서는 좋아요/싫어요 표시를 전환하는 방법과 특정 소원이 받은 총 좋아요 수를 표시하는 방법을 알아봅니다.

시작하기

GitHub에서 이 튜토리얼의 이전 부분을 복제하는 것부터 시작하겠습니다.

으아아아

소스 코드를 복제한 후 프로젝트 디렉터리로 이동하여 웹 서버를 시작합니다.

으아아아

브라우저에서 http://localhost:5002/를 가리키면 애플리케이션이 실행되어야 합니다.

좋아요 추가

먼저 획득한 특정 소원의 총 횟수를 표시하는 기능을 구현하겠습니다. 새로운 소원이 추가되면 tbl_likes 表中添加一个条目。因此，修改 MySQL 存储过程 sp_addWish 以将条目添加到 tbl_likes 테이블에 표시됩니다.

으아아아

위의 저장프로시저 코드와 같이 tbl_wish 表后，我们获取了最后插入的 ID 并将数据插入到 tbl_likes테이블에 소원을 입력합니다.

다음으로 sp_GetAllWishes 存储过程以包含每个愿望获得的点赞数。我们将使用 MySQL 函数来获取愿望总数。因此，创建一个名为 getSum 的函数，它将获取愿望 ID를 수정하고 총 좋아요 수를 반환해야 합니다.

으아아아

이제 저장 프로시저에서 MySQL 기능을 사용하여 sp_GetAllWishes 中调用上面名为 getSum 각 소원에 대한 총 좋아요 수를 가져옵니다.

으아아아

수정 getAllWishes Python 메소드를 유사 개수를 포함하도록 수정합니다. MySQL 저장 프로시저에서 반환된 결과를 반복할 때 다음과 같은 like 필드를 포함하세요.

으아아아

좋아요 개수를 표시하는 데 사용할 추가 범위를 생성하려면 CreateThumb JavaScript 메서드를 수정하세요.

으아아아

그리고 상위 단락 p에 likeSpan을 추가하세요. 이것은 수정된 likeSpan 附加到父段落 p。这是修改后的 CreateThumb JavaScript 함수입니다.

으아아아

jQuery AJAX 호출 /getAllWishes의 성공 콜백에서 /getAllWishes 的成功回调中调用 CreateThumb JavaScript 函数时，包含 like JavaScript 함수를 호출할 때

매개변수를 포함하세요.

으아아아

변경 사항을 저장하고 서버를 다시 시작하세요. 앱에 로그인하면 각 희망사항에 해당하는 좋아요 수를 확인할 수 있습니다.

소원에 좋아요 표시

You & 20 Others。为了实现这一点，我们需要修改 sp_GetAllWishes 以包含一些代码，指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢，我们进行一个函数调用。创建一个名为 hasLiked 的函数，该函数接受用户 ID 和愿望 ID각 소원 아래의 좋아요 수를 확인하세요. 로그인한 사용자가 소원을 좋아했는지 여부는 확실하지 않습니다. 따라서

와 같은 올바른 메시지를 매개변수로 표시하고 사용자가 해당 소원을 좋아했는지 여부를 반환합니다.

으아아아 sp_GetAllWishes 中调用上述 MySQL 函数 hasLiked이제

에서는 반환된 데이터세트에 사용자가 선호하는 상태를 나타내는 추가 필드를 반환합니다.

으아아아 app.py 并修改对 MySQL 存储过程 sp_GetAllWishes 的调用，以包含用户 IDOpen

을 매개변수로 사용하세요.

으아아아 getAllWishes 方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLiked 이제

메소드가 특정 희망사항에 대한 사용자의 유사한 상태를 포함하도록 수정되었습니다. 생성한 사전에 HasLiked를 포함하도록 코드를 수정하세요.

으아아아 CreateThumb JavaScript 函数中，我们将检查 HasLiked

JavaScript 함수에서 HasLiked를 확인하고 이에 따라 HTML을 추가합니다.

으아아아

위 코드에서 볼 수 있듯이 사용자가 특정 소원을 싫어하면 좋아요 수가 표시됩니다. 사용자가 이 소원을 좋아하면 더 설명적인 메시지가 표시됩니다.

좋아요 수 새로고침

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 上获取。

위 내용은 8부: 처음부터 Python Flask 및 MySQL 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!