Partie 8 : Développer une application Web Python Flask et MySQL à partir de zéro

Dans la partie précédente de cette série de didacticiels, nous avons rempli la page du tableau de bord de l'application avec les souhaits créés par différents utilisateurs. Nous avons également attaché un bouton « J'aime » à chaque souhait afin que les utilisateurs puissent aimer un souhait spécifique.

Dans cette partie de la série, nous apprendrons comment activer/désactiver l'affichage J'aime/Je n'aime pas et afficher le nombre total de j'aime qu'un souhait spécifique a reçu.

Commencer

Commençons par cloner la partie précédente de ce tutoriel depuis GitHub.

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

Après avoir cloné le code source, accédez au répertoire du projet et démarrez le serveur Web.

cd PythonFlaskMySQLApp_Part7
python app.py

Pointez votre navigateur sur http://localhost:5002/ et l'application devrait être en cours d'exécution.

Ajouter des likes

Nous allons d'abord implémenter une fonctionnalité pour afficher le nombre total d'un souhait spécifique qui a été obtenu. Lorsqu'un nouveau souhait est ajouté, nous serons dans le tableau 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 ;

Comme indiqué dans le code de la procédure stockée ci-dessus, insérez le souhait dans la table tbl_wish 表后，我们获取了最后插入的 ID 并将数据插入到 tbl_likes.

Ensuite, nous devons modifier sp_GetAllWishes 存储过程以包含每个愿望获得的点赞数。我们将使用 MySQL 函数来获取愿望总数。因此，创建一个名为 getSum 的函数，它将获取愿望 ID et renvoyer le nombre total de likes.

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 ;

Maintenant, utilisez la fonction MySQL dans la procédure stockée sp_GetAllWishes 中调用上面名为 getSum pour obtenir le nombre total de likes pour chaque souhait.

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 ;

Modifier getAllWishes Méthode Python pour inclure le nombre de likes. Lorsque vous parcourez les résultats renvoyés par une procédure stockée MySQL, incluez un champ similaire comme celui-ci :

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)

Modifiez la CreateThumb méthode JavaScript pour créer une plage supplémentaire que nous utiliserons pour afficher le nombre de likes.

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

Et ajoutez likeSpan au paragraphe parent p. Il s'agit de la fonction JavaScript likeSpan 附加到父段落 p。这是修改后的 CreateThumb modifiée.

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(' ' + 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;


}

Incluez le paramètre /getAllWishes 的成功回调中调用 CreateThumb JavaScript 函数时，包含 like lors de l'appel d'une fonction JavaScript

dans le rappel de réussite d'un appel jQuery AJAX /getAllWishes.

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

Enregistrez les modifications et redémarrez le serveur. Une fois connecté à l’application, vous devriez pouvoir voir le nombre de likes correspondant à chaque souhait.

Montrez si le souhait est apprécié

You & 20 Others。为了实现这一点，我们需要修改 sp_GetAllWishes 以包含一些代码，指示登录用户是否喜欢某个特定愿望。为了检查一个愿望是否被喜欢，我们进行一个函数调用。创建一个名为 hasLiked 的函数，该函数接受用户 ID 和愿望 IDAffichez le nombre de likes sous chaque souhait. Il n'est pas clair si l'utilisateur connecté a aimé le souhait. Nous afficherons donc un message correct comme

comme paramètre et indiquerons si le souhait a été apprécié par l'utilisateur.

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 函数 hasLikedMaintenant dans

pour renvoyer un champ supplémentaire dans l'ensemble de données renvoyé indiquant le statut préféré de l'utilisateur.

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 的调用，以包含用户 IDOuvrir

en paramètre.

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

getAllWishes 方法以包含用户对特定愿望的类似状态。修改代码以在创建的字典中包含 HasLikedLa méthode

est désormais modifiée pour inclure le statut similaire de l'utilisateur pour un souhait spécifique. Modifiez le code pour inclure HasLiked dans le dictionnaire que vous créez.

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 函数中，我们将检查 HasLikedDans la fonction

JavaScript, nous vérifierons HasLiked et ajouterons du HTML en conséquence.

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

Comme le montre le code ci-dessus, si l'utilisateur n'aime pas un souhait particulier, nous affichons le nombre de likes. Si l'utilisateur aime ce souhait, nous afficherons un message plus descriptif.

Actualiser le nombre de likes

likeLorsque nous cliquons sur le bouton J'aime, le statut J'aime est mis à jour dans la base de données mais ne change pas dans le tableau de bord. Mettons donc à jour cela dans le rappel de réussite de l'appel AJAX lorsque le bouton

est cliqué. 🎜

我们首先对 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 上获取。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!