第 8 部分：從頭開始開發 Python Flask 和 MySQL Web 應用程式

在本教學系列的前一部分中，我們用不同使用者建立的願望填滿了應用程式的儀表板頁面。我們還為每個願望附加了一個「讚」按鈕，以便用戶可以點讚特定的願望。

在本系列的這一部分中，我們將了解如何切換喜歡/不喜歡顯示並顯示特定願望收到的讚總數。

開始使用

我們先從 GitHub 複製本教學的前一部分。

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git

複製原始程式碼後，導覽至專案目錄並啟動 Web 伺服器。

cd PythonFlaskMySQLApp_Part7
python app.py

將瀏覽器指向 http://localhost:5002/，應用程式應該正在執行。

新增按讚數

我們首先將實作一項功能來顯示特定願望已獲得的總計數。當新增願望時，我們將在 tbl_likes 表中新增一個條目。因此，修改 MySQL 預存程序 sp_addWish 以將條目新增至 tbl_likes 表中。

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 ;

如上面的預存程序程式碼所示，將願望插入到tbl_wish 表後，我們取得了最後插入的ID 並將資料插入到tbl_likes 表。

接下來，我們需要修改 sp_GetAllWishes 預存程序以包含每個願望獲得的讚數。我們將使用 MySQL 函數來取得願望總數。因此，建立一個名為 getSum 的函數，它將取得願望 ID 並傳回喜歡的總數。

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 ;

現在，在預存程序 sp_GetAllWishes 中呼叫上面名為 getSum 的 MySQL 函數來取得每個願望的按讚總數。

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 ;

修改 getAllWishes Python 方法以包含按讚計數。在迭代從 MySQL 預存程序傳回的結果時，包括如下所示的 like 欄位：

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)

修改 CreateThumb JavaScript 方法以建立額外的範圍，我們將使用它來顯示按讚計數。

var likeSpan = $('<span>').attr('aria-hidden','true').html(' '+like+' like(s)');

並將 likeSpan 附加到父段落 p。這是修改後的 CreateThumb JavaScript 函數。

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  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/465/014/169344271149286.png?x-oss-process=image/resize,p_40"  class="lazy"  alt="第 8 部分：從頭開始開發 Python Flask 和 MySQL Web 應用程式" >').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;


}

在 jQuery AJAX 呼叫 /getAllWishes 的成功回呼中呼叫 CreateThumb JavaScript 函數時，包含 like 參數。

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

儲存變更並重新啟動伺服器。登入應用程式後，您應該能夠看到與每個願望相對應的點讚數。

顯示願望是否被喜歡

查看每個願望下的按讚數，並不清楚登入使用者是否按讚了該願望。因此，我們將顯示一條正確的訊息，例如 You & 20 Others。為了實現這一點，我們需要修改 sp_GetAllWishes 以包含一些程式碼，指示登入使用者是否喜歡某個特定願望。為了檢查一個願望是否被喜歡，我們進行一個函數呼叫。建立一個名為 hasLiked 的函數，該函數接受使用者 ID 和願望 ID 作為參數，並傳回該願望是否被使用者喜歡.

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 ，以便在傳回的資料集中傳回額外字段，指示使用者喜歡的狀態。

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 為參數。

_user = session.get('user')
conn = mysql.connect()
cursor = conn.cursor()
cursor.callproc('sp_GetAllWishes',(_user,))

現在修改 getAllWishes 方法以包含使用者對特定願望的類似狀態。修改程式碼以在創建的字典中包含 HasLiked。

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 並相應地新增 HTML。

if (hasLiked == "1") {
    likeSpan.html(' You & ' + (Number(like) - 1) + ' Others');
} else {
    likeSpan.html(' ' + like + ' like(s)');
}

如上面的程式碼所示，如果使用者不喜歡某個特定願望，我們就會顯示按讚計數。如果用戶喜歡這個願望，我們將顯示更具描述性的訊息。

刷新按讚數

當我們點擊「讚」按鈕時，「讚」狀態會在資料庫中更新，但在儀表板中不會更改。因此，讓我們在 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 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！