Как реализовать систему комментариев php и vue3?
Что есть сейчас:
Эндпоинт для комментариев, который отдает по n (стандартно 10) комментариев, отвечающих условиям запроса, общее число число комментариев и две ссылки для пагинации на следующие и предыдущие n комментариев.
Комментарии связанны друг с другом через nulluble ключ parentId. Каждый комментарий содержит поле, указывающее на количество всех потомков, независимо от уровня вложенности и коллекцию самих потомков, которые подгружаются по необходимости (код коллекции ниже).
На фронте я получаю первые n корневых комментариев (где parentId null) и по нажатию на кнопку подгружаю следующие.
export class Collection<T> extends ArrayCollection<T> { protected query: Query<T>|null; protected countResults: Number|null; public isLoading: boolean; constructor(query: Query<T> = null) { super(); this.query = query this.countResults = null this.isLoading = false } async load(): Promise<void> { if (this.isLoading) return ; this.isLoading = true if (this.hasMore) { const result = await this.query.execute() if (result) { this.query = result.next this.countResults = result.count this.push(... result.results) } else { this.query = null } } this.isLoading = false; } get hasMore() { return this.query !== null } get count(): Number { if (!this.countResults) return 0 return this.countResults } async loadAll(): Promise<void> { while (this.hasMore) await this.load() } } |
export class Collection<T> extends ArrayCollection<T> { protected query: Query<T>|null; protected countResults: Number|null; public isLoading: boolean; constructor(query: Query<T> = null) { super(); this.query = query this.countResults = null this.isLoading = false } async load(): Promise<void> { if (this.isLoading) return ; this.isLoading = true if (this.hasMore) { const result = await this.query.execute() if (result) { this.query = result.next this.countResults = result.count this.push(... result.results) } else { this.query = null } } this.isLoading = false; } get hasMore() { return this.query !== null } get count(): Number { if (!this.countResults) return 0 return this.countResults } async loadAll(): Promise<void> { while (this.hasMore) await this.load() } }
При добавлении нового комментария он прилетает с сервера по вебсокетам обратно во фронт и добавляется в соответствующую коллекцию (зависит от уровня вложенности). Но при загрузке всех комментариев из одной коллекции это ведет к удвоению новых комментариев на фронте, т.к. он уже прилетел по сокетам.
Плюс не знаю как лучше подгружать дочерние комментарии грузить коллекцию по уровням или рекурсией тянуть все дочерние комментарии ( и как тогда быть с пагинацией и рендорингом).
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации системы комментариев на PHP и Vue.js 3 можно использовать следующий подход.
1. Начнем с бекенда на PHP. Создадим базу данных MySQL для хранения комментариев. Нам понадобится таблица с полями id (идентификатор комментария), parent_id (идентификатор родительского комментария, если есть), user_id (идентификатор пользователя), content (текст комментария), created_at (дата создания комментария).
2. Создадим файл comment.php, который будет отвечать за обработку запросов к API для работы с комментариями. В этом файле будем реализовывать функции для создания, получения, обновления и удаления комментариев.
```php
```
3. Теперь перейдем к фронтенду на Vue.js 3. Создадим компонент Comment.vue, который будет отображать отдельный комментарий, а также форму для добавления нового комментария.
```php
<div> <div> <p>{{ comment.content }}</p> <button>Reply</button> </div> <textarea></textarea> <button type="submit">Add Comment</button> </div> export default { data() { return { comments: [], newComment: '', replyTo: null }; }, methods: { addComment() { // Реализация отправки нового комментария на сервер }, reply(id) { this.replyTo = id; }, cancelReply() { this.replyTo = null; } } };
```
4. Используем Axios для взаимодействия с API на PHP:
```php
import axios from 'axios'; methods: { async addComment() { const response = await axios.post('/api/comment.php', { content: this.newComment }); this.comments.push(response.data); this.newComment = ''; }, async getComments() { const response = await axios.get('/api/comment.php'); this.comments = response.data; }, // Другие методы для обновления, удаления комментариев }
```
5. Не забудьте настроить маршруты на сервере для обработки запросов к API и настройки базы данных. Теперь у вас должна быть рабочая система комментариев на PHP и Vue.js 3.