Приветствую всех, кто интересуется веб-разработкой! Сегодня мы разберем одну из фундаментальных задач: создание полноценного приложения, где клиентская часть на Vue.js общается с сервером на Node.js. Это основа, на которой строятся бесчисленные современные веб-приложения.
Мы не будем углубляться в сложные архитектуры и используем самые простые инструменты. Наша цель — понять принцип взаимодействия.
Что мы построим?
Создадим простое приложение «Список задач». Клиент на Vue будет отображать список дел, добавлять новые и удалять старые. Сервер на Node.js будет хранить этот список (пока что в памяти) и обрабатывать все запросы от клиента.
Технологический стек:
-
Бэкенд: Node.js + Express
-
Фронтенд: Vue.js
-
Связь: HTTP-запросы (GET, POST, DELETE)
Настраиваем сервер (Node.js + Express)
Сервер будет нашим «мозговым центром». Он будет слушать запросы и отправлять данные в формате JSON.
Создайте новую папку для проекта, например vue-node-demo, а внутри нее папку server. Откройте терминал в server и выполните: npm init -y npm install express cors express — это фреймворк для создания сервера, а cors позволит нашему Vue-клиенту с другого порта беспрепятственно общаться с сервером.
Пишем код сервера (server/index.js):
Создайте файл index.js и напишите в нем следующий код:
// Импортируем необходимые модули
const express = require('express');
const cors = require('cors');
// Создаем экземпляр приложения Express
const app = express();
const PORT = 5000; // Порт, на котором будет работать наш сервер
// Подключаем middleware
app.use(cors()); // Разрешаем запросы с любого origin (для разработки)
app.use(express.json()); // Позволяет серверу читать JSON из тела запроса
// Наш "массив в памяти" будет служить базой данных
let tasks = [
{ id: 1, text: 'Изучить Vue.js' },
{ id: 2, text: 'Написать простой сервер на Node.js' },
];
// Маршруты API
// GET /api/tasks - Получить все задачи
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
// POST /api/tasks - Добавить новую задачу
app.post('/api/tasks', (req, res) => {
const newTask = {
id: tasks.length + 1, // Простейший способ генерации ID
text: req.body.text, // Текст задачи берем из тела запроса
};
tasks.push(newTask);
res.status(201).json(newTask); // Возвращаем созданную задачу со статусом 201 (Created)
});
// DELETE /api/tasks/:id - Удалить задачу по ID
app.delete('/api/tasks/:id', (req, res) => {
const taskId = parseInt(req.params.id);
tasks = tasks.filter(task => task.id !== taskId);
res.status(204).send(); // Возвращаем статус 204 (No Content) - успешно, но без тела
});
// Запускаем сервер
app.listen(PORT, () => {
console.log(`Сервер запущен на http://localhost:${PORT}`);
});
В терминале выполните: node index.js
Вы должны увидеть сообщение: Сервер запущен на http://localhost:5000.
Поздравляем, ваш API готов! Вы можете проверить его работу в Postman или просто перейдя по адресу http://localhost:5000/api/tasks в браузере.
Создаем клиент (Vue.js)
Теперь создадим интерфейс, который будет взаимодействовать с нашим сервером.
Создаем Vue-приложение:
Откройте новый терминал в корне проекта (vue-node-demo) и выполните: npm create vue@latest client
На вопрос Add TypeScript? -> No
Add JSX Support? -> No
Add Vue Router for Single Page Application? -> No
Остальные опции также можно выбрать No для простоты.
cd client
npm install
npm install axios
axios — популярная библиотека для удобной работы с HTTP-запросами.
Модифицируем компонент (client/src/App.vue):
Заменим содержимое App.vue на следующее:
<template>
<div id="app">
<h1>Мой список задач</h1>
<div class="task-form">
<input v-model="newTaskText" @keyup.enter="addTask" placeholder="Введите новую задачу...">
<button @click="addTask">Добавить</button>
</div>
<ul class="task-list">
<li v-for="task in tasks" :key="task.id" class="task-item">
<span>{{ task.text }}</span>
<button @click="deleteTask(task.id)" class="delete-btn">Удалить</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
// Создаем экземпляр axios с базовым URL нашего сервера
const apiClient = axios.create({
baseURL: 'http://localhost:5000/api',
});
export default {
name: 'App',
data() {
return {
tasks: [], // Здесь будем хранить список задач
newTaskText: '' // Текст для новой задачи
};
},
// Когда компонент создан, загружаем задачи с сервера
async created() {
await this.fetchTasks();
},
methods: {
// Метод для получения задач с сервера
async fetchTasks() {
try {
const response = await apiClient.get('/tasks');
this.tasks = response.data;
} catch (error) {
console.error('Ошибка при загрузке задач:', error);
}
},
// Метод для добавления новой задачи
async addTask() {
if (this.newTaskText.trim() === '') return; // Не добавляем пустые задачи
try {
await apiClient.post('/tasks', { text: this.newTaskText });
this.newTaskText = ''; // Очищаем поле ввода
await this.fetchTasks(); // Обновляем список после добавления
} catch (error) {
console.error('Ошибка при добавлении задачи:', error);
}
},
// Метод для удаления задачи
async deleteTask(taskId) {
try {
await apiClient.delete(`/tasks/${taskId}`);
await this.fetchTasks(); // Обновляем список после удаления
} catch (error) {
console.error('Ошибка при удалении задачи:', error);
}
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
}
.task-form {
margin-bottom: 20px;
}
input {
padding: 10px;
width: 70%;
margin-right: 10px;
}
button {
padding: 10px 15px;
cursor: pointer;
}
.task-list {
list-style: none;
padding: 0;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.delete-btn {
background-color: #ff4444;
color: white;
border: none;
}
</style>
Убедитесь, что сервер все еще работает на localhost:5000. Затем в терминале в папке client выполните:
npm run dev
Vue сообщит вам адрес (скорее всего, http://localhost:5173). Перейдите по нему.
Автор: Евгений Морковин
0 комментариев
Оставьте комментарий
Комментарии