使用Python Flask和MySQL从头开始创建Web应用程序：第8部分

最新推荐文章于 2024-05-06 00:08:33 发布

cunjie3951

最新推荐文章于 2024-05-06 00:08:33 发布

阅读量154

点赞数

文章标签： python java 数据库 mysql js ViewUI

在本教程系列的上一部分中，我们使用了不同用户创建的愿望来填充应用程序的仪表板页面。我们还为每个愿望附加了一个“喜欢”按钮，以便用户喜欢一个特定的愿望。

在本系列的这一部分中，我们将看到如何切换“喜欢/不喜欢”显示并显示特定愿望收到的喜欢总数。

入门

首先，从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存储过程，以包括每个愿望获得的点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 ;

修改Python的getAllWishes方法，以包含“喜欢”计数。在迭代从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('&nbsp;'+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>').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('&nbsp;' + 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 ;

现在拨打上面的MySQL的功能hasLiked内sp_GetAllWishes在返回的数据集指示相同状态的用户返回一个额外的字段。

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('&nbsp;You & ' + (Number(like) - 1) + ' Others');
} else {
    likeSpan.html('&nbsp;' + like + ' like(s)');
}

从上面的代码中可以看出，如果用户不喜欢某个特定的愿望，我们将显示“喜欢”计数。如果用户喜欢该愿望，我们将显示更多描述性消息。

刷新喜欢计数

当我们单击“赞”按钮时，“赞”状态在数据库中已更新，但在仪表盘中未更改。因此，让我们在单击like按钮时在AJAX调用的成功回调中对其进行更新。

我们将从对MySQL存储过程sp_AddUpdateLikes进行更改开始。之前我们传递的是like状态，“ 1”代表“ like”，“ 0”代表“ like”。我们将对其进行修改，并在存储过程中切换“喜欢/不喜欢”。打开sp_AddUpdateLikes然后将类似状态选择到变量中，然后检查变量状态。如果变量状态为“ like”，则将状态更新为“ like”，反之亦然。这是修改后的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('&nbsp;You & ' + (Number(obj.total) - 1) + ' Others');
    } else {
        $('#span_' + spId).html('&nbsp;' + obj.total + ' like(s)');
    }
  
}

保存更改，重新启动服务器，然后使用有效的凭据登录。进入信息中心页面后，尝试喜欢一个特定的愿望，并查看相似状态如何相应地更新。

包起来

在本系列的这一部分中，我们为仪表板页面中显示的愿望实现了“喜欢/不喜欢”功能。在本系列的后续部分中，我们将在应用程序中实现更多新功能，并完善一些现有功能。

请在下面的评论中让我们知道您的想法和建议，或任何更正。该教程的源代码可在GitHub上获得。

翻译自: https://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-8--cms-23593

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Python Flask和MySQL从头开始创建Web应用程序：第8部分

在本教程系列的上一部分中，我们使用了不同用户创建的愿望来填充应用程序的仪表板页面。我们还为每个愿望附加了一个“喜欢”按钮，以便用户喜欢一个特定的愿望。在本系列的这一部分中，我们将看到如何切换“喜欢/不喜欢”显示并显示特定愿望收到的喜欢总数。入门首先，从GitHub克隆本教程的上一部分。 git clone https://github.com/jay3dec/PythonFl...
复制链接

扫一扫