Главная » Vue

Учебное пособие по Laravel и Vue Chart с примером

На чтение 7 мин. Просмотров 45 Опубликовано

Создание диаграмм с помощью Laravel и Vue js Chart js Tutorial Example — тема сегодняшнего дня. В этой теме мы будем использовать две веб-технологии. Laravel как бэкэнд, а Vue.js как компонент Frontend. Мы вставим данные из компонента vue и отобразим данные в виде диаграмм. Для диаграмм мы будем использовать библиотеку chartjs. Мы используем vue-chartjs в качестве оболочки для chart.js. Интерактивные диаграммы могут предоставить удобный способ визуализировать ваши данные. Это удобные и красивые графики с Chart.js и Vue.js. Доступны как для новичков, так и для профессионалов; Простой в использовании, легко расширяемый; С полной мощью chart.js .

Содержание
  1. Laravel и Vue Chart js
  2. Шаг 1. Установите и настройте Laravel 5.6
  3. Шаг 2. Создайте компонент vue.js, который отображает форму.
  4. Шаг 3. Создайте файлы контроллера, модели и миграции.
  5. Шаг 4. Отправьте запрос на публикацию и сохраните монету.
  6. Шаг 5: Создайте компонент диаграммы для отображения диаграмм.
  7. Шаг 6. Зарегистрируйте ChartComponent.vue в файле app.js.

Laravel и Vue Chart js

Прежде всего, как обычно, мы начнем обучение с загрузки последней версии Laravel, а на момент создания этого примера Laravel 5.6 является последним, так что позвольте нам взять его.

Шаг 1. Установите и настройте Laravel 5.6

Выполните следующую команду в своем терминале. 

 composer create-project laravel/laravel lavuecharts --prefer-dist

Теперь laravel mix настроен для нас из коробки , но мы не можем получить к нему доступ, потому что нам нужно установить зависимости. Итак, давайте сделаем это. Введите следующую команду, чтобы установить зависимости vue js. 

 npm install

После этого перейдите к файлу webpack.mix.js в корневой папке. 

//webpack.mix.jslet mix  = require ('laravel-mix'); mix.js ('resources/assets/js/app.js', 'public/js') .sass ('resources/assets/sass/app.scss', 'public/ css ');

Файл webpack.mix.js компилирует код es6 и шаблон vue код компилятора в vanilla js, и нам просто нужно включить этот сгенерированный js файл в наш проект. Если вы новичок в laravel mix, ознакомьтесь с моей статьей ниже. Это поможет вам понять.

  • Laravel Mix For Compiling Assets Tutorial

Теперь нужно перейти в терминал и набрать следующую команду, чтобы посмотреть наши файлы js и sass на предмет наличия компиляция. Итак, когда мы меняем код vue.js, он автоматически перекомпилирует его, поэтому мы не выполняем компиляцию каждый раз вручную. 

 npm run dev

Кроме того, мы необходимо настроить базу данных в файле .env . Следующим шагом будет создание маршрутов для добавления и отображения данных. Мы строим простое приложение, которое объединяет детали монеты. Он содержит название, цену и

Шаг 2. Создайте компонент vue.js, который отображает форму.

Во-первых, нам нужно изменить welcome.blade. php и добавьте атрибут id к основному div , чтобы мы могли привязать экземпляр vue в наше приложение Laravel 5.6. 

       Добавить сведения о монете      
 
  window.Laravel =  csrf_token (),]);  ?>        
 Следующим шагом является создание компонента формы внутри папки  resources >> assets >> js >> components  с именем  AddCoin.vue.  
 
//AddComponent.vue  
 
 
 Добавить монету  
 
  
  
  
 
 
  
  
 
 
  
  
 
 
 
  
 
  
 
 
  export default {data () {return {coin  : {}}}, методы: {addCoin () {alert ('submit');}}}  


 Итак, мы создали компонент, теперь нам нужно включить  этот компонент внутри файла  resources >> assets >> js >> app.js . 


//app.jsrequire ('./bootstrap'); window.  Vue = require ('vue'); Vue.component ('coin-add-component', require ('./components/AddComponent.vue')); const app = new Vue ({el: '#app'})  ; 


 Наконец, включите этот компонент в файл  welcome.blade.php . 


 
 
 


 Ваш файл  web.php  выглядит следующим образом.  


//web.phpRoute :: get ('/', fu  nction () {return view ('welcome');}); 


 Теперь запустите сервер разработки Laravel. 


 php artisan serve 


 Перейдите на  


  


  Шаг 3. Создайте файлы контроллера, модели и миграции.  


  Введите команду ниже, чтобы сгенерировать файлы модели и миграции. 


 php artisan make: model Coin -m php artisan make: controller CoinController 


 Он генерирует модель, миграцию и контроллер  файл.  В файле контроллера напишите функцию хранения, чтобы сохранить детали монет.  Теперь создайте схему для нашей таблицы монет.  Итак, перейдите к только что созданному файлу миграции. 


//create_coins_table.phppublic function up () {Schema :: create ('Coins', function (Blueprint $ table) {$ table-> increments (  'id'); $ table-> string ('name'); $ table-> integer ('year'); $ table-> integer ('price'); $ table-> timestamps ();});});  


 Затем перенесите таблицу. 


 php artisan migrate 


 Теперь закодируйте функцию хранения внутри  CoinController.  php . 


 используйте App  Coin;  публичное хранилище функций (Request $ request) {$ coin = new Coin;  $ coin-> name = $ request-> имя;  $ coin-> год = $ запрос-> год;  $ coin-> price = $ request-> цена;  $ coin-> сохранить ();  return response () -> json (['success' => 'Монета успешно добавлена'], 200);  } 


 Также определите маршрут публикации для  монеты , который будет сохраняться в базе данных. 


//web.phpRoute ::  post ('/Coins', 'CoinController @ store'); 


  Шаг 4. Отправьте запрос на публикацию и сохраните монету.  


 Сначала нам нужно установить модуль  vue-axios  для этого приложения.  Итак, давайте сделаем это. 


 npm install vue-axios --save-dev 


 Теперь используйте этот модуль. 


// app.jsimport VueAxios из 'vue-axios'; импортировать axios из 'axios'; require ('./bootstrap'); window.Vue = require ('vue'); Vue.use (VueAxios, axios); Vue.component  ('coin-add-component', require ('./components/AddComponent.vue')); const app = new Vue ({el: '#app'}); 


 Хорошо,  так что теперь нам просто нужно отправить почтовый запрос, содержащий данные монеты. 


//AddComponent.vueexport default {data () {return {coin: {}}}, methods: {addCoin (  ) {let uri = 'http://localhost: 8000/Coins';  this.axios.post (uri, this.coin) .then ((ответ) => {window.location.reload ();});  }}} 


 Если вы попытаетесь отправить запрос на публикацию, вы можете получить код ответа  200  с данными об успешном завершении. 


  Шаг 5: Создайте компонент диаграммы для отображения диаграмм.  


 Мы собираемся отображать  диаграмму Биткойна  на протяжении многих лет.  Я жестко запрограммировал запрос прямо сейчас, но в реальном времени он динамический.  Итак, сначала мы собираемся получить данные о биткойнах из базы данных.  Для этого нам нужно определить маршрут и записать запрос в файл контроллера. 


 Route :: get ('/Coins', 'CoinController @ index'); 


 Запишите функцию  index  в файл  CoinController.php . 


//CoinController.phppublic функция index ()  {$ Coins =  DB :: table ('монеты') -> где ('имя', '=', 'Биткойн') -> orderBy ('год', 'ASC') -> get ();  return response () -> json ($ Coins);} 


 Теперь создайте файл  ChartComponent.vue  в папке  компонентов.  


  import {Line} from 'vue-chartjs'; export default {extends: Line, mount () {let uri = 'http://localhost: 8000/Coins'  ;  let Years = new Array ();  let Labels = new Array ();  let Цены = новый массив ();  this.axios.get (uri) .then ((response) => {let data = response.data; if (data) {data.forEach (element => {Years.push (element.year); Labels.push (  element.name); Price.push (element.price);}); this.renderChart ({метки: Годы, наборы данных: [{метка: 'Биткойн', backgroundColor: '# FC2525', данные: Цены}]},  {responseive: true, keepAspectRatio: false})} else {console.log ('Нет данных');}});  }}  


 Здесь я отправил запрос на получение на сервер Laravel и получил данные биткойнов.  Я сохранил эти данные в массиве, а затем передал их в объект конфигурации диаграммы. 


  Примечание.  Я использовал  Line Chart . Вы можете использовать  столбчатую диаграмму, кольцевую диаграмму, круговую диаграмму  


 Вы можете найти дополнительную конфигурацию в этой документации. 


  Шаг 6. Зарегистрируйте ChartComponent.vue в файле app.js.  


 Наш последний файл  app.js  выглядит следующим образом. 


//app.jsimport VueAxios из 'vue-axios'; импорт axios из 'axios'; require ('./bootstrap'); window.Vue = require ('vue'); Vue.use (  VueAxios, axios); Vue.component ('coin-add-component', require ('./components/AddComponent.vue')); Vue.component ('chart-component', require ('./components/ChartComponent.  vue ')); const app = new Vue ({el:' #app '}); 


 Также используйте этот компонент диаграммы внутри  welcome.blade.php  файл 


       Добавить сведения о монете       
     
  окно  .Laravel =  csrf_token (),]);  ?>      




  


 Наконец,  Создание диаграмм с помощью Laravel Vue js Chart js Tutorial With Example  завершено.  Спасибо, что приняли. 


 Fork Me On Github
Оцените статью
nanomode.ru
Добавить комментарий