Как создать CRUD-приложение на Vue.js?

введение в этом руководстве вы узнаете, как создать полностью функциональное crud (создание, чтение, обновление, удаление) приложение с использованием vue js мы воспользуемся мощью back4app, чтобы легко управлять вашим бэкендом этот учебник проведет вас через настройку проекта back4app, создание динамической модели данных и реализацию операций crud с помощью vue js сначала вы создадите проект back4app с именем basic crud app vue , предоставляя надежную нереляционную базу данных для вашего приложения вы разработаете свою модель данных, настраивая коллекции и поля вручную или используя интеллектуального ai агента back4app затем вы будете управлять своими данными с помощью приложения администратора back4app — удобного интерфейса с функцией перетаскивания — позволяющего вам легко создавать, читать, обновлять и удалять записи наконец, вы интегрируете свой фронтенд на vue js с back4app через вызовы rest api (используя axios) для выполнения безопасных и эффективных операций crud к концу этого учебника у вас будет готовое к производству приложение на vue js, которое выполняет основные функции crud вместе с безопасной аутентификацией пользователей и управлением данными основные выводы научитесь создавать приложение crud на основе vue js с поддержкой масштабируемого бэкенда поймите, как структурировать гибкий бэкенд и подключить его к вашему проекту на vue js узнайте, как использовать интуитивно понятное приложение admin от back4app для бесшовных операций crud изучите техники развертывания, включая контейнеризацию docker, для вашего приложения на vue js предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app с настроенным новым проектом нужна помощь? смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки vue js используйте vue cli или ваш любимый ide, например, vscode базовые знания vue js, современного javascript и rest api обновите свои знания о документации vue js https //vuejs org/guide/introduction html при необходимости шаг 1 – настройка проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите на кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app vue и следуйте инструкциям для завершения настройки создать новый проект после создания проекта он появится на вашей панели управления, laying the foundation for your backend шаг 2 – проектирование модели данных структурирование ваших данных для этого crud приложения вы определите несколько коллекций в вашем проекте back4app примеры ниже иллюстрируют основные коллекции и их поля, необходимые для функциональности crud 1\ коллекция предметов эта коллекция хранит информацию о каждом предмете поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название предмета описание строка краткое резюме предмета создано дата время создания элемента обновлено дата время последнего обновления 2\ коллекция пользователей эта коллекция обрабатывает учетные данные пользователей и данные аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты хешпароля строка зашифрованный пароль для входа создано дата время создания аккаунта обновлено дата последнее время обновления учетной записи вы можете добавить эти коллекции и поля вручную в панели управления back4app создать новый класс вы можете добавить поля, выбрав тип данных, указав имя поля, установив значение по умолчанию и отметив его как обязательное, если это необходимо создать колонку использование ai агента back4app для настройки схемы интегрированный ai агент back4app может автоматически генерировать вашу схему данных на основе вашего описания этот инструмент ускоряет настройку и гарантирует, что ваша модель соответствует требованиям crud как использовать ai агента откройте ai агента войдите в свою панель управления back4app и перейдите к ai агенту в настройках вашего проекта опишите вашу модель данных введите подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите после того как ai агент сгенерирует предложенную схему, просмотрите ее и подтвердите, чтобы реализовать конфигурацию пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот подход, основанный на ии, экономит время и обеспечивает оптимизированную и согласованную модель данных шаг 3 – включение админ приложения и управление crud операциями обзор админ приложения админ приложение back4app предоставляет интерфейс без кода для управления бэкендом с его функциями перетаскивания вы можете без труда выполнять crud операции, такие как создание, чтение, обновление и удаление записей активация админ приложения перейдите в меню “дополнительно” в вашей панели управления back4app выберите “админ приложение” и нажмите “включить админ приложение ” настройте учетные данные администратора , создав свою первую учетную запись администратора этот процесс также устанавливает роли (например, b4aadminuser ) и системные коллекции включить админ приложение после активации войдите в админ приложение, чтобы начать управлять своими данными панель управления приложения администратора управление crud операциями через приложение администратора в приложении администратора вы можете создавать новые записи нажмите «добавить запись» в любой коллекции (например, товары), чтобы вставить новые данные редактировать или просматривать записи выберите запись, чтобы просмотреть ее детали или изменить ее поля удалять записи удаляйте записи, которые больше не нужны этот интерфейс упрощает обработку данных и улучшает общий пользовательский опыт шаг 4 – подключение вашего приложения vue js к back4app как только ваш бэкенд будет готов, пора связать ваше приложение vue js с back4app использование rest api вызовов с axios мы будем использовать rest api вызовы через axios для выполнения операций crud установите axios запустите следующую команду в каталоге вашего проекта npm install axios настройте axios создайте экземпляр axios в файле (например, api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; реализуйте методы crud в компонентах vue вот пример того, как получать и создавать элементы // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('ошибка при получении элементов ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('ошибка при добавлении элемента ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('ошибка при обновлении элемента ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('ошибка при удалении элемента ', error)); } }; интегрируйте эти методы api в ваши компоненты vue для управления данными вашего приложения шаг 5 – защита вашего бэкенда настройка списков контроля доступа (acl) защитите свои данные, настроив acl для ваших записей например, чтобы создать элемент, который может просматривать или изменять только его владелец import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } настройка разрешений на уровне класса (clp) используйте панель управления back4app для настройки clp, чтобы только аутентифицированные пользователи могли получить доступ к определенным коллекциям это гарантирует, что ваш бэкенд остается защищенным по умолчанию шаг 6 – реализация аутентификации пользователей настройка регистрации и входа пользователей back4app использует встроенную коллекцию пользователей для аутентификации в вашем приложении vue js вы можете управлять регистрацией и входом пользователей с помощью вызовов rest api вот как // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; эта настройка также позволяет вам управлять сессиями, сбросом паролей и дополнительными функциями аутентификации шаг 7 – развертывание вашего приложения vue js back4app упрощает процесс развертывания вы можете развернуть ваше приложение vue js, используя различные методы, включая контейнеризацию docker 7 1 сборка вашего приложения vue js компиляция и упаковка используйте vue cli для компиляции вашего приложения npm run build просмотрите сборку подтвердите, что выходная папка (обычно dist/ ) содержит все необходимые файлы 7 2 обзор структуры проекта обычная структура проекта vue js может выглядеть следующим образом basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 контейнеризация вашего приложения vue js если вы предпочитаете контейнеризированное развертывание, добавьте файл dockerfile в корень вашего проекта \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 развертывание с помощью back4app web deployment подключите ваш репозиторий github убедитесь, что ваш проект vue js размещен на github настройте развертывание в панели управления back4app выберите web deployment опцию, свяжите ваш репозиторий (например, basic crud app vue ), и выберите нужную ветку установите команды сборки укажите вашу команду сборки (например, npm run build ) и укажите папку вывода (например, dist ) развертывание нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – заключительные мысли и следующие шаги поздравляем! вы создали crud приложение на основе vue js, интегрированное с back4app вы настроили проект под названием basic crud app vue , создали коллекции для элементов и пользователей, и использовали приложение back4app admin для управления данными кроме того, вы подключили свой фронтенд на vue js через вызовы rest api и установили меры безопасности следующие шаги расширьте ваше приложение включите функции, такие как расширенная фильтрация, детальные представления элементов или обновления в реальном времени улучшите функциональность бэкенда изучите облачные функции, интегрируйте внешние api или реализуйте управление доступом на основе ролей продолжайте учиться обратитесь к документации back4app https //www back4app com/docs и дополнительным ресурсам, чтобы еще больше улучшить ваше приложение счастливого кодирования и наслаждайтесь созданием вашего crud приложения на vue js!