CRUD (Create, Read, Update, Delete) — это набор операций, который позволяет выполнять основные действия с данными в приложении. Создание CRUD приложения может показаться сложным, но следуя нескольким простым шагам, вы сможете создать свое собственное приложение.

В этом ответе мы рассмотрим, как создать CRUD приложение с использованием HTML, CSS, JavaScript и Node.js с Express и MongoDB. Мы построим простое приложение для управления списком задач.

Шаг 1: Установка необходимого ПО

  • Установите Node.js с официального сайта.
  • Установите MongoDB и запустите его локально.
  • Убедитесь, что у вас есть текстовый редактор (например, Visual Studio Code).

Шаг 2: Создание проекта

Создайте новую папку для вашего проекта и перейдите в нее через терминал.

mkdir my-crud-app
cd my-crud-app

Инициализируйте новый проект Node.js:

npm init -y

Шаг 3: Установка зависимостей

Установите необходимые пакеты:

npm install express mongoose body-parser cors

Шаг 4: Создание серверной части

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

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/mycrudapp', { useNewUrlParser: true, useUnifiedTopology: true });

const TaskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    completed: { type: Boolean, default: false }
});

const Task = mongoose.model('Task', TaskSchema);

app.post('/tasks', async (req, res) => {
    const task = new Task(req.body);
    await task.save();
    res.send(task);
});

app.get('/tasks', async (req, res) => {
    const tasks = await Task.find();
    res.send(tasks);
});

app.put('/tasks/:id', async (req, res) => {
    const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.send(task);
});

app.delete('/tasks/:id', async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.send({ message: 'Task deleted' });
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

Шаг 5: Создание клиентской части

Создайте папку public и внутри нее файл index.html с следующим содержимым:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Приложение</title>
</head>
<body>
    <h1>Список задач</h1>
    <input type="text" id="taskInput" placeholder="Введите задачу">
    <button onclick="addTask()">Добавить</button>
    <ul id="taskList"></ul>

    <script>
        async function fetchTasks() {
            const response = await fetch('http://localhost:3000/tasks');
            const tasks = await response.json();
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.innerText = task.title;
                taskList.appendChild(li);
            });
        }

        async function addTask() {
            const taskInput = document.getElementById('taskInput');
            const response = await fetch('http://localhost:3000/tasks', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title: taskInput.value })
            });
            taskInput.value = '';
            fetchTasks();
        }

        fetchTasks();
    </script>
</body>
</html>

Шаг 6: Запуск приложения

Запустите сервер с помощью команды:

node server.js

Теперь откройте index.html в вашем браузере и попробуйте добавить задачи.

Заключение

Мы создали простое CRUD приложение для управления задачами. Вы можете расширять его функциональность, добавляя возможность редактирования и удаления задач, а также улучшая интерфейс с помощью CSS и других библиотек, таких как React или Vue.js.

Создание CRUD приложения — это отличный способ начать изучение веб-разработки и взаимодействия с базами данных. Успехов в программировании!