Работа с сервером и с vue-axios

Настройка приложения

Создаем проект

Для начала создаем приложение.

Устанавливаем библиотеку 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")

Устанавливаем JSON сервер

Ссылка на 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.

При этом соответственно нужно будет запустить два терминала.

 

Создание объектов POST

Рассмотрим на примере как добавлять данные в нашу базу данных.

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 можно посмотреть в консоли.

 

Получение объектов GET

Рассмотрим на примере.

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
	}
)

 

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

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены