Учебное пособие по Vue js Axios — сегодня ведущая тема. Axios — отличная клиентская библиотека http. По умолчанию он использует promises и работает как на клиенте, так и на сервере. Axios — впечатляющая клиентская библиотека HTTP, которая позволяет асинхронно отправлять HTTP-запросы для взаимодействия с конечными точками REST. Использовать REST API и создавать HTTP-запросы легко с Axios и Vue. js .

Vue js Axios Tutorial

Мы будем использовать Axios для отправки HTTP-запроса на сервер Node.js и извлечения данные из базы данных и отображать их на стороне клиента. Мы сделаем GET и POST запрос к серверу Node.js . На бэкэнде мы будем использовать веб-фреймворк Express . Итак, сначала нам нужно установить Vue.js с помощью интерфейса командной строки. Если вы не знакомы с Vue cli, ознакомьтесь с этим Учебником по Vue cli.

Если вы хотите узнать больше о Vue.js, ознакомьтесь с этим Vue JS 2 — Полное руководство (включая Vue Router и Vuex) курс.

Шаг 1. Установите Vue.js.

Если вы не установили vue cli, введите следующую команду.

 npm install -g @ vue/cli 

Теперь введите команду для создания проекта Vue.

 vue create vueaxiospro 

Это создаст необходимый шаблон для работы с ним.

Шаг 2 : Установите пакет Vue-router.

Перейдите в терминал командной строки и введите следующую команду.

 npm install vue-router --save 

Он установит модуль и обновит файл package.json .

Теперь нам нужно настроить vue-r external для нашего приложения. Для этого сначала создайте один компонент в каталоге components и назовите этот файл

//AddTicket.  vue  
 Добавить заявку 
   export default {}  

Теперь импортируйте этот компонент внутри src> > Файл main.js . Также включите модуль Vue-router в файл main.js . Таким образом, мы можем определять и регистрировать наши маршруты в приложении Vue .

//main.jsimport Vue из 'vue'; импортировать приложение из './App.  vue '; импортировать VueRouter из' vue-router '; импортировать AddTicket из' ./components/AddTicket.vue';Vue.use(VueRouter);const routes = [{name: 'add', path: '/add',  component: AddTicket}]; const router = new VueRouter ({mode: 'history', routes: routes}); Vue.config.productionTip = false; new Vue ({render: h => h (App), router}). $ mount ('# app') 

Итак, я определил один объект маршрутов, который представляет собой массив различных маршрутов с его компонентом, и передал этот объект в Модуль VueRouter . Теперь весь этот объект зарегистрирован в приложении Vue. Если вы переключитесь на этот URL: http://localhost: 8080/add, вы увидите, что наш маршрут /add работает.

Шаг 3. Создайте форму начальной загрузки для добавления тикета.

Теперь добавьте следующий код в файл AddTicket.vue .

  
 
 Создать билет 
  
 
 
  Идентификатор электронной почты:   
 
 
 
 
 
  Билет  Описание:    
 
 
 
 
  Создать заявку  
  
   экспорт по умолчанию {data () {return {ticket: {}}}, методы: {addTicket ()  {предупреждение ('нажал');  }}}  

Также добавьте Bootstrap CDN в файл public >> index.html .

Теперь вы можете видеть, что наши классы начальной загрузки работают с нашей формой.

Шаг 4. Настройте конечную точку API серверной части Node.js.

Создайте новую папку вне проекта vue называется exp-api. Сначала внутри этой папки создайте файл package.json , введя следующую команду.

 npm init 

Установите следующие зависимости.

 npm install --save express body-parser cors mongoose 

Также установите nodemon как devDependencies.

 npm install --save-dev nodemon 

Добавить сценарий запуска в файл package.json .

 "scripts": {"start": "nodemon server.js"}, 

Создайте файл server.js в корне проекта и добавьте следующий код внутри файла server.js .

 const express = require ('express'); const path = require ('path'); const bodyParser =  require ('body-parser'); const cors = require ('cors'); const mongoose = require ('mongoose'); const config = require ('./config/DB'); mongoose.Promise = global.Promise  ; mongoose.connect (config.DB);  const app = express (); var port = process.env.PORT ||  4000; app.listen (port, function () {console.log ('Node js Express js Tutorial at port', port);}); 

Далее нам нужно создать База данных MongoDB и подключите ее к нашему приложению express .

Примечание. У вас должна быть установлена ​​база данных MongoDB. на вашем сервере или локальном, иначе сначала вам нужно загрузить его и запустить сервер MongoDB .

Создайте один config папка в корне проекта. В этом случае создайте один файл с именем

//DB.jsmodule.exports = {DB: 'mongodb://localhost: 27017/ticketapp'  }; 

Шаг 5. Создайте экспресс-маршруты для нашего приложения.

Теперь нам нужно создать две папки внутри корень с именем exproutes и

В папке моделей создайте одну модель с именем Ticket.js.

//Ticket.jsconst mongoose = require ('mongoose'); const Schema = mongoose.Schema;//Определение коллекции и схемы для Itemsvar Ticket = new Schema ({email:  {type: String}, description: {type: String}}, {collection: 'Tickets'}); module.exports = mongoose.model ('Ticket', Ticket); 

Теперь, определить два маршрута для нашего приложения: GET и POST .

Итак, внутри exproutes , создайте один файл с именем ticket.route.js file.

//ticket.route.jsconst  express = require ('express'); const app = express (); const ticketRoutes = express.Router (); const Ticket = require ('../models/Ticket'); ticketRoutes.route ('/add').  post (функция (req, res) {var ticket = new Ticket (req.body);  ticket.save () .then (ticket => {res.status (200) .json ({'ticket': 'билет успешно добавлен'});}) .catch (err => {res.status (400).  send ("невозможно сохранить в базу данных");});  });  ticketRoutes.route ('/'). get (function (req, res) {Ticket.find (function (err, Tickets) {if (err) {console. журнал (ошибка);  } else {res.json (билеты);  }});  });  module.exports = ticketRoutes; 

Теперь зарегистрируйте эти маршруты в веб-приложении Express. Итак, наш последний файл server.js выглядит так.

//server.jsconst express = require ('express'); const path = require ('path  '); const bodyParser = require (' body-parser '); const cors = require (' cors '); const mongoose = require (' mongoose '); const config = require (' ./config/DB '); const  ticketRoutes = require ('./exproutes/ticket.route'); mongoose.Promise = global.Promise; mongoose.connect (config.DB);  const app = express (); app.use (bodyParser.json ()); app.use (cors ()); app.use ('/tickets', ticketRoutes); var port = process.env.PORT ||  4000; app.listen (port, function () {console.log ('Node js Express js Tutorial at port', port);}); 

Шаг 6: Установите вверх по axios в приложении Vue.js.

Сначала установите axios с помощью следующей команды.

 yarn add axios vue-axios 

Теперь используйте этот модуль внутри файла src >> main.js .

// main.js импортировать axios из 'axios'; импортировать VueAxios из 'vue-axios'; Vue.use (VueAxios, axios); 

Теперь мы можем использовать модуль axios внутри компонента AddTicket.vue .

Пример сообщения Vue js Axios

Написать следующий код внутри файла AddTicket.vue .

//AddTicket.vuemethods: {addTicket () {let uri = 'http://localhost: 4000/ билеты/добавить ';  this.axios.post (uri, this.ticket) .then ((ответ) => {console.log (ответ);});  }} 

Мы использовали метод post от axios для отправки данных на сервер Node.js . Затем Node.js сохранит эти данные в базе данных.

Пример получения Vue js Axios

Теперь нам нужно отобразить Билеты. Итак, создайте один компонент внутри папки components под названием

//TicketView.vue  
 
 Билеты 
 
 
 
 
 ID 
 
 Идентификатор электронной почты 
 
  Описание 
 
 
 
 
 
 
  экспорт по умолчанию {data () {return {items: []}}  , методы: {}}  

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

//main.jsimport TicketView from '. /компоненты/TicketView. vue '; const routes = [{name:' add ', path:'/add ', component: AddTicket}, {name:' index ', path:'/index ', component: TicketView}]; 

Извлекаем данные с помощью метода axios get.

//TicketView.vue  экспортируем данные по умолчанию {data () {return {tickets:  []}}, создано: function () {this.fetchItems ();  }, методы: {fetchItems () {let uri = 'http://localhost: 4000/Tickets';  this.axios.get (uri) .then ((ответ) => {this.tickets = response.data;});  }}}  

Мы использовали метод жизненного цикла под названием created (). Когда этот компонент загружается, этот метод вызывается по умолчанию. Итак, мы должны получить данные в это время. Итак, после создания компонента мы можем получить данные с сервера. Теперь отобразите данные.

//TicketView.vue  
 
 Tickets 
 
  
 
 
 ID 
 
 Email ID 
 
 Описание 
 
 
 
 
 
 {{ticket._id}} 
 
 {{ticket.email}} 
 
 {{ticket.description}}  
 
 
 
 
 
 
  экспорт по умолчанию {data () {return {tickets: []}},  создано: функция () {this.fetchItems ();  }, методы: {fetchItems () {let uri = 'http://localhost: 4000/Tickets';  this.axios.get (uri) .then ((ответ) => {this.tickets = response.data;});  }}}  

Хорошо, теперь перейдите по адресу http://localhost: 8080/index. Как видите, мы можем получать данные из базы данных. Вот как вы можете использовать библиотеку на основе Axios Promise. Наконец, наш Vue js Axios Tutorial закончен.

Код Github для Node.js API

Код Github для проекта Vue Axios