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 이제

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

으아아아

like좋아요 버튼을 클릭하면 좋아요 상태가 데이터베이스에 업데이트되지만 대시보드에서는 변경되지 않습니다. 따라서

我们首先对 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!