Мой JS отправляет такой JSON на серверную часть, которая отслеживает лайки, антипатии, просмотры и т. д. в базе данных SQLite:
Код: Выделить всё
{
"action": {action e.g. like, dislike, view}
"id": {video_id e.g. 1)
}
Код: Выделить всё
@app.route('/trackStatistics-Ue3ARmqbiF63KepjbxeI', methods=['POST'])
def track_statistics():
try:
# Get the JSON data from the request
data = request.get_json()
# Validate the action and id
if 'action' not in data or 'id' not in data:
return jsonify({'error': 'Invalid request'}), 400
action = data['action']
video_id = data['id']
data = get_video(video_id)
print(data)
if action == "like":
data["likes"] = int(data["likes"]) + 1
elif action == "dislike":
data["dislikes"] = int(data["dislikes"]) + 1
elif action == "unlike":
data["likes"] = int(data["likes"]) - 1
elif action == "undislike":
data["dislikes"] = int(data["dislikes"]) - 1
elif action == "view":
data["views"] = int(data["views"]) + 1
update_video(video_id, data["publisher"], data["title"], data["likes"], data["dislikes"], data["views"], data["comments"], False)
print(data)
# Return the updated data
return jsonify(data)
except Exception as e:
print(str(e))
return jsonify({'error': str(e)}), 500
Код: Выделить всё
import sqlite3
import json
from datetime import datetime
def get_video(video_id):
conn = sqlite3.connect('../databases/videos.db')
c = conn.cursor()
c.execute("SELECT * FROM videos WHERE id = ?", (video_id,))
video = c.fetchone()
comments = json.loads(video[6]) if video[6] else []
video = list(video)
video[6] = comments
conn.close()
return {
"id": video[0],
"publisher": video[1],
"title": video[2],
"likes": video[3],
"dislikes": video[4],
"views": video[5],
"comments": video[6],
"created_at": video[7],
"updated_at": video[8]
}
def create_video(publisher, title, likes, dislikes, views, comments):
conn = sqlite3.connect('../databases/videos.db')
c = conn.cursor()
now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
comments_json = json.dumps(comments)
c.execute("INSERT INTO videos (publisher, title, likes, dislikes, views, comments, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
(publisher, title, likes, dislikes, views, comments_json, now, now))
conn.commit()
conn.close()
return c.lastrowid
def update_video(video_id, publisher, title, likes, dislikes, views, comments, update_time):
conn = sqlite3.connect('../databases/videos.db')
c = conn.cursor()
# Get the current updated_at time
c.execute("SELECT updated_at FROM videos WHERE id = ?", (video_id,))
last_updated = c.fetchone()[0]
if update_time:
now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
else:
now = last_updated
comments_json = json.dumps(comments)
c.execute("UPDATE videos SET publisher = ?, title = ?, likes = ?, dislikes = ?, views = ?, comments = ?, updated_at = ? WHERE id = ?",
(publisher, title, likes, dislikes, views, comments_json, now, video_id))
conn.commit()
conn.close()
return json.dumps(get_video(video_id))
Вот JS, который я использую для взаимодействия с серверной частью:
Код: Выделить всё
var liked = false;
var disliked = false;
var followed = false;
var commentsOpen = false;
var url = window.location.search;
var urlParams = new URLSearchParams(url);
var id = urlParams.get("c");
var trackStatisticsRoute =
"http://localhost:5005/trackStatistics-Ue3ARmqbiF63KepjbxeI";
$(document).ready(function () {
if (id) {
document.title = "ByteClips - " + id;
}
var vidFile = "../videos/" + id + "/video.mp4";
var dataFile = "../videos/" + id + "/data.json";
console.log(vidFile);
$("#vidSrc").attr("src", vidFile);
$(".video")[0].load();
fetch(dataFile)
.then((response) => response.text())
.then((data) => {
data.id = id;
vidData = JSON.parse(data);
});
console.log("updateRating view");
updateRating("view", id);
$(".video-buttons div button").on("mouseenter", function () {
$(this).find("i").css("opacity", 0);
$(this).find(".counter").css("opacity", 1);
});
$(".video-buttons div button").on("mouseleave", function () {
$(this).find("i").css("opacity", 1);
$(this).find(".counter").css("opacity", 0);
});
});
function updateRating(action, id) {
const requestData = {
action: action,
id: id,
};
$.ajax({
type: "POST",
url: trackStatisticsRoute,
data: JSON.stringify(requestData),
contentType: "application/json",
success: function (data) {
// console.log('AJAX request successful', data);
// updateUI(data);
},
error: function (jqXHR, textStatus, errorThrown) {
// console.log('AJAX request error:', textStatus, errorThrown);
// console.log('Response:', jqXHR.responseText);
// alert('AJAX request failed. Check console for details.');
console.log("womp womp");
},
});
}
function updateUI(data) {
let newData;
if (typeof data === "string" || data instanceof String) {
newData = JSON.parse(data);
} else {
newData = data;
}
$("#like .counter").text(data["likes"]);
$("#dislike .counter").text(data["dislikes"]);
$("#share .counter").text(data["views"]);
$("#comment .counter").text(data["comments"].length);
}
if (liked) {
$("#like").css("background", "#fff");
$("#like").css("color", "#26daa5");
} else {
$("#like").css("background", "#26daa5");
$("#like").css("color", "#fff");
}
if (disliked) {
$("#dislike").css("background", "#fff");
$("#dislike").css("color", "#26daa5");
} else {
$("#dislike").css("background", "#26daa5");
$("#dislike").css("color", "#fff");
}
if (followed) {
$("#follow").css("background", "#fff");
$("#follow").css("color", "#26daa5");
$("#follow i").attr("class", "fa-solid fa-user-minus");
} else {
$("#follow").css("background", "#26daa5");
$("#follow").css("color", "#fff");
$("#follow i").attr("class", "fa-solid fa-user-plus");
}
$("#like").on("click", function () {
if (liked) {
// ons.notification.toast('Removed Like!', { timeout: 1000, animation: 'fall' });
liked = false;
$("#like").css("background", "#26daa5");
$("#like").css("color", "#fff");
console.log("updateRating unlike");
updateRating("unlike", id);
} else {
// ons.notification.toast('Liked!', { timeout: 1000, animation: 'fall' });
if (disliked) {
console.log("updateRating undislike");
updateRating("undislike", id);
}
liked = true;
disliked = false;
$("#like").css("background", "#fff");
$("#like").css("color", "#26daa5");
$("#dislike").css("background", "#26daa5");
$("#dislike").css("color", "#fff");
console.log("updateRating like");
updateRating("like", id);
}
});
$("#dislike").on("click", function () {
if (disliked) {
// ons.notification.toast('Removed Dislike!', { timeout: 1000, animation: 'fall' });
disliked = false;
$("#dislike").css("background", "#26daa5");
$("#dislike").css("color", "#fff");
console.log("updateRating undislike");
updateRating("undislike", id);
} else {
// ons.notification.toast('Disliked!', { timeout: 1000, animation: 'fall' });
if (liked) {
console.log("updateRating unlike");
updateRating("unlike", id);
}
disliked = true;
liked = false;
$("#dislike").css("background", "#fff");
$("#dislike").css("color", "#26daa5");
$("#like").css("background", "#26daa5");
$("#like").css("color", "#fff");
console.log("updateRating dislike");
updateRating("dislike", id);
}
});
$("#follow").on("click", function () {
if (followed) {
// ons.notification.toast('Unfollowed!', { timeout: 1000, animation: 'fall' });
followed = false;
$("#follow i").attr("class", "fa-solid fa-user-plus");
$("#follow").css("background", "#26daa5");
$("#follow").css("color", "#fff");
} else {
// ons.notification.toast('Followed!', { timeout: 1000, animation: 'fall' });
followed = true;
$("#follow i").attr("class", "fa-solid fa-user-minus");
$("#follow").css("background", "#fff");
$("#follow").css("color", "#26daa5");
}
});
$("#comment").on("click", function () {
console.log("comments opened");
if (commentsOpen) {
commentsOpen = false;
$("#comment").css("background", "#26daa5");
$("#comment").css("color", "#fff");
} else {
commentsOpen = true;
$("#comment").css("background", "#fff");
$("#comment").css("color", "#26daa5");
}
});
Код: Выделить всё
ByteClips
Your browser does not support the video tag.
[i]
View
[/i]
0
[i][/i]
0
[i][/i]
0
[i][/i]
0
[i][/i]
0
Запрос:
POST http://localhost :5005/trackStatistics HTTP/1.1
Хост: localhost:5005
Соединение: поддержание активности
Длина контента: 26
сек-ch-ua: «Not)A;Бренд ";v="99", "Microsoft Edge";v="127", "Chromium";v="127"
Принять: /
sec-ch- ua-платформа: "Windows"
sec-ch-ua-mobile: ?0
Агент пользователя: {я подверг это цензуре
Тип контента: application/json
Происхождение : http://127.0.0.1:5500
Sec-Fetch-Site: межсайтовый
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: пустой
Referer : http://127.0.0.1:5500/
Кодировка принятия: gzip, deflate, br, zstd
Язык принятия: en-US,en;q=0.9
{"action":"view","id":"1"
Ответ:
HTTP/1.1 200 ОК
Сервер: Werkzeug /3.0.3 Python/3.12.4
Дата: среда, 31 июля 2024 г., 16:51:01 GMT
Тип контента: application/json
Длина контента: 200
Access-Control-Allow-Origin: http://127.0.0.1:5500
Варьируется: Origin
Соединение: закрыть
{
"комментарии" : "[]",
"create_at": "2024-07-30 23:30:05",
"не нравится": 0,
"id": 1,
"лайки": 0,
"издатель": "1",
"title": "Тест 1",
"updated_at": "2024-07-31 05:23: 12",
"просмотров": 108
да, я использую MS Edge, потому что у меня нет места для установки других браузеров, и вы можете' t uninstall Edge ._.
Я не знаю, как это воспроизвести, но думаю, что это я пытаюсь записать в файл SQL, используя sqlite3 внутри бэкэнда Flask. Я привел в этом вопросе весь код всей страницы, потому что я глупый.
Подробнее здесь: https://stackoverflow.com/questions/788 ... refreshing
