В этой статье мы создадим простое приложение ToDo, используя Node.js для серверной части и Vue.js для клиентской. Мы также подготовим Docker образ для удобного развертывания приложения.
Установка необходимых инструментов
Перед началом убедитесь, что у вас установлены следующие инструменты:
Создание серверной части на Node.js
Создайте папку для проекта и перейдите в нее:
mkdir todo-app
cd todo-app
Инициализируйте новый проект Node.js:
mkdir server
cd server
npm init -y
Установите необходимые зависимости:
npm install express cors body-parser
Создайте файл server.js:
// server/server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(bodyParser.json());
let todos = [];
app.get('/todos', (req, res) => {
res.json(todos);
});
app.post('/todos', (req, res) => {
const todo = req.body;
todos.push(todo);
res.status(201).json(todo);
});
app.delete('/todos/:id', (req, res) => {
const { id } = req.params;
todos = todos.filter(todo => todo.id !== id);
res.status(204).send();
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Запустите сервер:
node server.js
Создание клиентской части на Vue.js
Создайте клиентскую часть: В корневой папке проекта выполните:
vue create client
Выберите настройки по умолчанию или настройте по своему усмотрению.
Перейдите в папку клиента:
cd client
Установите Axios для работы с HTTP-запросами:
npm install axios
Измените файл src/App.vue:
<template>
<div id="app">
<h1>ToDo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button @click="removeTodo(todo.id)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
async fetchTodos() {
const response = await axios.get('http://localhost:5000/todos');
this.todos = response.data;
},
async addTodo() {
if (this.newTodo) {
const todo = { id: Date.now().toString(), text: this.newTodo };
await axios.post('http://localhost:5000/todos', todo);
this.newTodo = '';
this.fetchTodos();
}
},
async removeTodo(id) {
await axios.delete(`http://localhost:5000/todos/${id}`);
this.fetchTodos();
}
},
mounted() {
this.fetchTodos();
}
};
</script>
<style>
/* Добавьте стили по своему усмотрению */
</style>
Запустите клиентское приложение:
npm run server
Шаг 4: Подготовка Docker образа
Создайте файл Dockerfile в папке server:
# server/Dockerfile
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
Ссылки:
Building a CRUD Application with Node.js, Express, and MongoDB