Для начала создаем приложение.
Устанавливаем библиотеку vue-axios, ссылка на npm vue-axios. Вводим команду - npm install --save axios vue-axios.
Подключаем пакет в main.js.
main.js
/* jshint ignore:start */
import { createApp } from "vue"
import App from "./App.vue"
import axios from "axios"
import VueAxios from "vue-axios"
createApp(App)
.use(VueAxios, axios)
.mount("#app")
Ссылка на Github json-server.
Ссылка на npm json-server.
Устанавливаем json-server глобально, если он еще не установлен командой - npm install -g json-server.
Далее ставим json-server локально командой - npm install --save-dev json-server.
В package.json в разделе "scripts" добавляем новый скрипт.
часть кода package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"jsonserver": "json-server --watch db.json",
},
Создаем в корне проекта файл с данными, а данном случае db.json.
db.json для примера
{
"cars": [
{
"name": "Ford"
}
]
}
Теперь для запуска проекта мы будем пользоваться стандартной командой - npm run serve.
А для запуска сервера командой - npm run jsonserver.
При этом соответственно нужно будет запустить два терминала.
Рассмотрим на примере как добавлять данные в нашу базу данных.
main.js
/* jshint ignore:start */
import { createApp } from "vue"
import App from "./App.vue"
import axios from "axios"
import VueAxios from "vue-axios"
createApp(App)
.use(VueAxios, axios)
.mount("#app")
App.vue
<template>
<div>
<div class="container pt-2">
<div class="form-group">
<label for="name">Car name</label>
<input
id="name"
v-model.trim="carName"
type="text"
class="form-control"
>
</div>
<div class="form-group">
<label for="year">Car year</label>
<input
id="year"
v-model.number="carYear"
type="text"
class="form-control"
>
</div>
<br>
<button class="btn btn-success" @click="createCar">Create car</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
carName: "",
carYear: "2023"
}
},
methods: {
createCar () {
console.log("Press button Create car")
const car = {
name: this.carName,
year: this.carYear
}
this.axios.post("http://localhost:3000/cars", car)
}
}
}
</script>
<style scoped></style>
Теперь заполнив в форме поля и нажав кнопку "Create car" в нашу базу данных запишутся новые данные.
Обработаем данные которые отправляются на сервер.
часть кода App.vue
methods: {
createCar () {
console.log("Press button Create car")
const car = {
name: this.carName,
year: this.carYear
}
this.axios.post("http://localhost:3000/cars", car)
.then(response => {
console.log(response)
console.log(response.data)
})
}
}
Вся статистика по запросам смотрится во вкладке браузера "сеть". Response можно посмотреть в консоли.
Рассмотрим на примере.
App.vue
<template>
<div>
<div class="container pt-2">
<div class="form-group">
<label for="name">Car name</label>
<input
id="name"
v-model.trim="carName"
type="text"
class="form-control"
>
</div>
<div class="form-group">
<label for="year">Car year</label>
<input
id="year"
v-model.number="carYear"
type="text"
class="form-control"
>
</div>
<br>
<button class="btn btn-success" @click="createCar">Create car</button>
<button class="btn btn-primary" @click="loadCars">Load cars</button>
</div>
<hr>
<ul class="list-group">
<li
v-for="car of cars"
:key="car.id"
class="list-group-item"
>
<strong>{{ car.name }}</strong> - {{ car.year }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
carName: "",
carYear: "2023",
cars: []
}
},
methods: {
createCar () {
console.log("Press button Create car")
const car = {
name: this.carName,
year: this.carYear
}
this.axios.post("http://localhost:3000/cars", car)
.then(response => {
console.log(response)
console.log(response.data)
})
},
loadCars() {
this.axios.get("http://localhost:3000/cars")
.then(response => {
console.log(response)
console.log(response.data)
this.cars = response.data
})
}
}
}
</script>
<style scoped></style>
Мы можем устанавливать настройки для axios глобально. Существует два варианта, непосредственно добавить в фале main.js, и второй - создать js с настройками для axios, а в main.js подключить уже этот js с настройками.
Рассмотрим первый пример.
main.js
/* jshint ignore:start */
import { createApp } from "vue"
import App from "./App.vue"
import axios from "axios"
import VueAxios from "vue-axios"
createApp(App)
.use(VueAxios, axios)
.mount("#app")
axios.defaults.baseURL = "http://localhost:3000/"
Тогда App.vue будет иметь вид:
App.vue
<template>
<div>
<div class="container pt-2">
<div class="form-group">
<label for="name">Car name</label>
<input
id="name"
v-model.trim="carName"
type="text"
class="form-control"
>
</div>
<div class="form-group">
<label for="year">Car year</label>
<input
id="year"
v-model.number="carYear"
type="text"
class="form-control"
>
</div>
<br>
<button class="btn btn-success" @click="createCar">Create car</button>
<button class="btn btn-primary" @click="loadCars">Load cars</button>
</div>
<hr>
<ul class="list-group">
<li
v-for="car of cars"
:key="car.id"
class="list-group-item"
>
<strong>{{ car.name }}</strong> - {{ car.year }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
carName: "",
carYear: "2023",
cars: []
}
},
methods: {
createCar () {
console.log("Press button Create car")
const car = {
name: this.carName,
year: this.carYear
}
this.axios.post("cars", car)
.then(response => {
console.log(response)
console.log(response.data)
})
},
loadCars() {
this.axios.get("cars")
.then(response => {
console.log(response)
console.log(response.data)
this.cars = response.data
})
}
}
}
</script>
<style scoped></style>
Рассмотрим второй пример.
В РАЗРАБОТКЕ
Интерсопторы, по другому перехватчики. Axios позволяет перехватывать запросы или ответы до того, как они будут обработаны. Для примера добавим код в наш main.js.
код перехватчика для примера
axios.interceptors.request.use(
function (request) {
request.headers.set("Auth", "RAND TOKEN " + Math.random())
return request
}
)
main.js
/* jshint ignore:start */
import { createApp } from "vue"
import App from "./App.vue"
import axios from "axios"
import VueAxios from "vue-axios"
createApp(App)
.use(VueAxios, axios)
.mount("#app")
axios.defaults.baseURL = "http://localhost:3000/"
axios.interceptors.request.use(
function (request) {
request.headers.set("Auth", "RAND TOKEN " + Math.random())
return request
}
)