Bahagian 8: Membangunkan Python Flask dan aplikasi web MySQL dari awal

Dalam bahagian sebelumnya siri tutorial ini, kami mengisi halaman papan pemuka aplikasi dengan keinginan yang dibuat oleh pengguna yang berbeza. Kami juga melampirkan butang "Suka" pada setiap hasrat supaya pengguna boleh menyukai hasrat tertentu.

Dalam bahagian siri ini, kita akan belajar cara menogol paparan suka/tidak suka dan memaparkan jumlah bilangan suka yang telah diterima oleh hasrat tertentu.

Mulakan

Mari mulakan dengan mengklon bahagian sebelumnya tutorial ini daripada GitHub.

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

Selepas mengklonkan kod sumber, navigasi ke direktori projek dan mulakan pelayan web.

cd PythonFlaskMySQLApp_Part7
python app.py

Tuding pelayar anda ke http://localhost:5002/ dan aplikasi sepatutnya berjalan.

Tambah suka

Kami mula-mula akan melaksanakan ciri untuk memaparkan jumlah kiraan hasrat tertentu yang telah diperolehi. Apabila hasrat baharu ditambahkan, kami akan menambah entri dalam jadual tbl_likes. Oleh itu, ubah suai prosedur tersimpan MySQL sp_addWish untuk menambah entri pada jadual tbl_likes. 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>').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

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

Seperti yang ditunjukkan dalam kod prosedur yang disimpan di atas, selepas memasukkan hasrat ke dalam jadual tbl_wish, kami mendapat ID yang terakhir dimasukkan dan Masukkan data ke dalam jadual tbl_likes. 🎜 🎜Seterusnya, kita perlu mengubah suai prosedur tersimpan sp_GetAllWishes untuk memasukkan bilangan suka setiap keinginan yang diterima. Kami akan menggunakan fungsi MySQL untuk mendapatkan jumlah bilangan kehendak. Jadi buat fungsi yang dipanggil getSum yang akan mendapat ID dan mengembalikan jumlah suka. 🎜

var likeSpan = $('<span>').attr({'aria-hidden':'true','id':'span_'+id});

🎜Sekarang, panggil fungsi MySQL di atas bernama getSum dalam prosedur tersimpan sp_GetAllWishes untuk mendapatkan jumlah bilangan suka bagi setiap keinginan. 🎜

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 ;

🎜Ubah suai getAllWishes kaedah Python untuk memasukkan kiraan suka. Apabila mengulangi hasil yang dikembalikan daripada prosedur tersimpan MySQL, sertakan medan seperti ini: 🎜

if len(data) is 0:
    conn.commit()
    cursor.close()
    conn.close()

🎜Ubah suai kaedah JavaScript CreateThumb untuk mencipta skop tambahan yang akan kami gunakan untuk memaparkan kiraan suka. 🎜

conn = mysql.connect()
cursor = conn.cursor()
cursor.callproc('sp_getLikeStatus',(_wishId,_user))
result = cursor.fetchall()

🎜Dan tambahkan likeSpan pada perenggan induk p. Ini ialah fungsi JavaScript CreateThumb yang diubah suai. 🎜

return json.dumps({'status':'OK','total':result[0][0],'likeStatus':result[0][1]})

🎜Apabila memanggil fungsi JavaScript CreateThumb dalam panggilan balik kejayaan jQuery AJAX call /getAllWishes, sertakan parameter suka.

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)');
    }
  
}

🎜Simpan perubahan dan mulakan semula pelayan. Setelah log masuk ke aplikasi, anda sepatutnya dapat melihat bilangan suka yang sepadan dengan setiap keinginan. 🎜 🎜 🎜🎜 Tunjukkan sama ada hasrat itu disukai🎜 🎜Lihat bilangan suka di bawah setiap hasrat Tidak jelas sama ada pengguna yang log masuk menyukai hasrat tersebut. Oleh itu, kami akan memaparkan mesej yang betul, seperti Anda & 20 Yang Lain. Untuk mencapai matlamat ini, kami perlu mengubah suai sp_GetAllWishes untuk memasukkan beberapa kod yang menunjukkan sama ada pengguna yang log masuk menyukai hasrat tertentu. Untuk menyemak sama ada hasrat disukai, kami membuat panggilan fungsi. Buat fungsi yang dipanggil hasLike yang menerima ID pengguna dan keinginan ID kod> sebagai parameter dan mengembalikan sama ada keinginan itu disukai oleh pengguna.🎜 rrreee 🎜Sekarang panggil fungsi MySQL di atas hasLike dalam sp_GetAllWishes untuk mengembalikan medan tambahan dalam set data yang dikembalikan yang menunjukkan keadaan yang disukai pengguna . 🎜 rrreee 🎜Buka app.py dan ubah suai panggilan ke prosedur tersimpan MySQL sp_GetAllWishes untuk memasukkan pengguna ID sebagai parameter.

rrreee 🎜Sekarang ubah suai kaedah getAllWishes untuk memasukkan status serupa pengguna untuk keinginan tertentu. Ubah suai kod untuk memasukkan HasLike dalam kamus yang anda buat. 🎜 rrreee 🎜Dalam fungsi JavaScript CreateThumb, kami akan menyemak HasLike dan menambah HTML dengan sewajarnya. 🎜 rrreee 🎜Seperti yang ditunjukkan dalam kod di atas, jika pengguna tidak menyukai hasrat tertentu, kami memaparkan kiraan suka. Jika pengguna menyukai hasrat ini, kami akan memaparkan mesej yang lebih deskriptif. 🎜 🎜 🎜🎜 Muat semula bilangan suka🎜 🎜Apabila kita klik butang Suka, status Suka dikemas kini dalam pangkalan data tetapi tidak berubah di papan pemuka. Jadi mari kita kemas kini ini dalam panggilan balik kejayaan panggilan AJAX apabila butang suka diklik. 🎜

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

Atas ialah kandungan terperinci Bahagian 8: Membangunkan Python Flask dan aplikasi web MySQL dari awal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!