Как объединить vue.js и PHP с MYSQL?

Question

[miksha]

Извиняюсь за глупый вопрос - новичок...
Может есть у кого-нибудь рабочий пример?

Есть база данных - в ней таблица со столбцами - id и name, например.
Есть файл db.php, где мы соединяемся с базой данных, производим с ней какие-то действия и т.д.
Есть файл index.html, где привязана vue.js.
Как просто вывести список строк таблицы через vue.js??

В документации vue.js был такой пример:

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: [
      { name: 'Chuck Norris', id: 123 },
      { name: 'Bruce Lee', id: 321 },
      { name: 'Jackie Chan', id: 1235 },
      { name: 'Jet Li', id: 423535 }
    ]
  }
})

Вот как передать в gridData данные из нашей БД?
Как запустить цикл, который заполнить все это дело?

Answer 1

[Decadal]

Вам предстоит узнать еще много нового, в рамках одного ответа всё не рассказать.
Vue это фронтенд, штука, отвечающая за интерактивность интерфейса, поэтому в её документации практически нет ничего о работе с сервером. Но сама работа с сервером есть, строится она на основе запросов на сервер. Для вас актуален AJAX (это тоже фронтенд, но не часть vue).
AJAX позволяет запросить что-то у сервера без перезагрузки страницы. Теперь мы подбираемся к PHP - запрос должен обработать серверный язык, и лучше бы вам использовать фреймворк, а не чистый PHP.
В общем виде - сервер разбирает параметры запроса и на их основе отстраивает запрос в базу данных (SQL->DML). Здесь начинается mysql.
В ответе на sql-запрос содержится срез данных, которые запросил пользователь. Ответ преобразуется сначала в массивы или объекты выбранного вами серверного языка, а потом в JSON (или xml, или другой формат данных), после чего отдается в обработчик запроса AJAX.

Чтобы дать рабочий пример, нужно скинуть вам целый проект. Ознакамливайтесь с упомянутыми мной технологиями отдельно, вам придется потратить на это пару вечеров)

Answer 2

[Infokain]

Я тоже новичок в этом деле, но с твердостью могу рекомендовать готовый проект в коробке vue.js для фронт-енда и Laravel7 для бэк енда, https://coreui.io/vue-laravel/

Answer 3

[Iqonic Design]

I acn also Recommanded a production ready Admin Template