パート 8: Python Flask および MySQL Web アプリケーションを最初から開発する

このチュートリアル シリーズの前の部分では、さまざまなユーザーが作成したウィッシュをアプリケーションのダッシュボード ページに入力しました。また、ユーザーが特定のウィッシュに「いいね！」できるように、各ウィッシュに「いいね！」ボタンを付けました。

シリーズのこのパートでは、いいね/嫌いの表示を切り替え、特定のウィッシュが受け取ったいいねの合計数を表示する方法を見ていきます。

使い始める

このチュートリアルの前の部分を GitHub から複製することから始めます。

ソース コードのクローンを作成した後、プロジェクト ディレクトリに移動し、Web サーバーを起動します。

ブラウザで http://localhost:5002/ を指定すると、アプリケーションが実行されるはずです。

「いいね！」を追加

まず、特定の願いが叶えられた総数を表示する機能を実装します。新しいウィッシュが追加されると、tbl_likes テーブルにエントリが追加されます。したがって、MySQL ストアド プロシージャ sp_addWish を変更して、tbl_likes テーブルにエントリを追加します。

上記のストアド プロシージャ コードに示すように、tbl_wish テーブルにウィッシュを挿入した後、最後に挿入された ID を取得し、そのデータを tbl_likes## に挿入します。 ＃ 表面。

sp_GetAllWishes ストアド プロシージャを変更して、各ウィッシュが受け取ったいいねの数を含める必要があります。 MySQL 関数を使用してウィッシュの総数を取得します。そこで、ウィッシュ ID を取得し、いいねの合計数を返す getSum という関数を作成します。 リーリー

sp_GetAllWishes で getSum という名前の上記の MySQL 関数を呼び出して、各ウィッシュのいいねの合計数を取得します。 リーリー

getAllWishes Python メソッドを変更して、いいね数を含めます。 MySQL ストアド プロシージャから返された結果を反復処理する場合は、次のような like フィールドを含めます: リーリー

JavaScript メソッドを変更して、いいね数を表示するために使用する追加のスコープを作成します。 リーリー そして

を親段落 p に追加します。これは、変更された CreateThumb JavaScript 関数です。 リーリー jQuery AJAX 呼び出し

の成功コールバックで CreateThumb JavaScript 関数を呼び出すときに、like パラメーターを含めます。 リーリー 変更を保存し、サーバーを再起動します。アプリにログインすると、各願いに対応する「いいね！」の数が表示されるはずです。

願いが気に入ったかどうかを表示

各ウィッシュの下の「いいね！」の数を確認します。ログインしているユーザーがそのウィッシュに「いいね！」をしたかどうかは不明です。したがって、

のような正しいメッセージが表示されます。これを実現するには、sp_GetAllWishes を変更して、ログインしているユーザーが特定のウィッシュを好むかどうかを示すコードを含める必要があります。ウィッシュが気に入ったかどうかを確認するには、関数呼び出しを行います。ユーザー ID とウィッシュ ID をパラメーターとして受け取り、ウィッシュがユーザーに気に入られたかどうかを返す hasLiked という名前の関数を作成します。 リーリー ここで、sp_GetAllWishes

hasLiked を呼び出し、返されたデータセットにユーザーのいいねステータスを示す追加フィールドを返します。 リーリー app.py

sp_GetAllWishes への呼び出しを変更して、ユーザー ID をパラメータとして含めます。 リーリー 次に、getAllWishes

HasLiked を含めるようにコードを変更します。 リーリー #CreateThumb JavaScript 関数で、

をチェックし、それに応じて HTML を追加します。 リーリー 上記のコードに示されているように、ユーザーが特定のウィッシュを気に入らない場合は、いいね数を表示します。ユーザーがこの願いを気に入った場合は、より説明的なメッセージが表示されます。

「いいね！」ボタンをクリックすると、データベース内の「いいね！」ステータスが更新されますが、ダッシュボードでは変更されません。そこで、

ボタンがクリックされたときの 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 Web アプリケーションを最初から開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。