Как создать бэкенд для NuxtJS?

введение в этом учебном пособии вы научитесь создавать полный бэкенд для приложения nuxtjs с использованием back4app мы пройдем через интеграцию основных функций back4app таких как управление базами данных, функции cloud code, rest и graphql api, аутентификация пользователей и запросы в реальном времени (live queries) чтобы создать безопасный, масштабируемый и надежный бэкенд, который бесшовно взаимодействует с вашим фронтендом nuxtjs вы также увидите, как быстрая настройка и интуитивно понятная среда back4app могут значительно сократить время и усилия по сравнению с ручной настройкой серверов и баз данных в процессе вы получите практический опыт с ключевыми функциональными возможностями, включая расширенные функции безопасности, планирование задач с помощью cloud jobs и настройку вебхуков для внешних интеграций к концу этого учебного пособия вы будете хорошо подготовлены, чтобы улучшить эту базовую настройку до готового к производству приложения или легко интегрировать пользовательскую логику и сторонние api по мере необходимости предварительные условия чтобы завершить этот учебник, вам потребуется аккаунт back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет аккаунта, вы можете создать его бесплатно следуйте приведенному выше руководству, чтобы подготовить ваш проект базовая среда разработки nuxtjs вы можете настроить это с помощью создать приложение nuxt https //nuxtjs org/docs/get started/installation или аналогичного инструмента убедитесь, что у вас установлен node js на вашем компьютере установленный node js (версия 14 или выше) вам потребуется node js для установки npm пакетов и запуска локальных серверов разработки установка node js https //nodejs org/en/download/ знание javascript и основных концепций nuxtjs официальная документация nuxtjs https //nuxtjs org/docs если вы новичок в nuxtjs, ознакомьтесь с официальной документацией или учебником для начинающих перед началом убедитесь, что у вас есть все эти предварительные условия перед началом наличие вашего проекта back4app и готовой локальной среды nuxtjs поможет вам легче следовать инструкциям шаг 1 – настройка проекта back4app создание нового проекта первый шаг в создании вашего бэкенда nuxtjs на back4app – это создание нового проекта если вы еще не создали его, выполните следующие шаги войдите в свою учетную запись back4app нажмите кнопку “новое приложение” в вашей панели управления back4app дайте вашему приложению имя (например, “nuxtjs backend tutorial”) после создания проекта вы увидите его в списке на вашей панели управления back4app этот проект станет основой для всех конфигураций бэкенда, обсуждаемых в этом учебном пособии подключите parse sdk back4app использует платформу parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого подключение вашего приложения nuxtjs к back4app включает установку пакета parse npm и его инициализацию с учетными данными из вашей панели управления back4app получите свои ключи parse на вашей панели управления back4app перейдите в раздел “настройки приложения” или “безопасность и ключи”, чтобы найти ваш идентификатор приложения и javascript ключ вы также найдете url адрес сервера parse (часто в формате https //parseapi back4app com ) установите parse sdk в вашем проекте nuxtjs npm install parse если вы используете yarn, вы можете установить его с помощью yarn add parse инициализируйте parse в вашем приложении nuxtjs удобный подход — создать плагин nuxt для настройки parse в вашем проекте nuxt создайте файл (например, parse client js ) в директории plugins и добавьте следующее plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // inject parse globally so you can access it as $parse anywhere in nuxt inject('parse', parse) } далее откройте ваш nuxt config js файл и добавьте этот плагин, чтобы он загружался на стороне клиента export default { // plugins \[ { src ' /plugins/parse client js', mode 'client' } ], // } завершив этот шаг, вы установили безопасное соединение между вашим фронтендом nuxtjs и бэкендом back4app все запросы и транзакции данных безопасно маршрутизируются через этот sdk, что снижает сложность ручных вызовов rest или graphql (хотя вы все равно можете использовать их при необходимости) шаг 2 – настройка базы данных сохранение и запрос данных с вашим проектом back4app и интегрированным sdk parse в ваше приложение nuxt вы теперь можете начинать сохранять и извлекать данные самый простой способ создать запись — использовать класс parse object например, вы можете создать композируемый метод или метод хранилища для обработки операций с данными // example create a todo item export const createtodoitem = async (title, iscompleted) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) todo set('iscompleted', iscompleted) try { const savedtodo = await todo save() console log('todo saved successfully ', savedtodo) return savedtodo } catch (error) { console error('error saving todo ', error) } } // example query all todo items export const fetchtodos = async () => { const todo = this $parse object extend('todo') const query = new this $parse query(todo) try { const results = await query find() console log('fetched todo items ', results) return results } catch (error) { console error('error fetching todos ', error) } } в качестве альтернативы вы можете использовать конечные точки rest api back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app также предоставляет интерфейс graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } эти разнообразные варианты позволяют вам интегрировать операции с данными так, как это лучше всего подходит вашему процессу разработки будь то через parse sdk, rest или graphql проектирование схемы и типы данных по умолчанию parse позволяет создавать схемы на лету , но вы также можете определить свои классы и типы данных в панели управления back4app для большего контроля перейдите в раздел “база данных” в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте соответствующие столбцы, такие как title (строка) и iscompleted (булевый) back4app также поддерживает различные типы данных строка , число , булевый , объект , дата , файл , указатель , массив , отношение , geopoint , и полигон вы можете выбрать подходящий тип для каждого поля если вы предпочитаете, вы также можете позволить parse автоматически создать эти столбцы, когда вы впервые сохраняете объект из вашего приложения nuxt back4app предлагает ai агента, который может помочь вам спроектировать вашу модель данных откройте ai агента из вашей панели управления приложением или в меню опишите вашу модель данных простым языком (например, “пожалуйста, создайте новое приложение todo на back4app с полной схемой класса ”) позвольте ai агенту создать схему для вас использование ai агента может сэкономить ваше время при настройке архитектуры данных и обеспечить согласованность в вашем приложении реляционные данные если у вас есть реляционные данные скажем, объект категория который указывает на несколько задач вы можете использовать указатели или связи в parse например // linking a task to a category with a pointer export const createtaskforcategory = async (categoryobjectid, title) => { const todo = this $parse object extend('todo') const todo = new todo() // construct a pointer to the category const category = this $parse object extend('category') const categorypointer = new category() categorypointer id = categoryobjectid // set fields todo set('title', title) todo set('category', categorypointer) try { return await todo save() } catch (err) { console error('error creating task with category relationship ', err) } } когда вы выполняете запрос, вы также можете включить данные указателя const query = new this $parse query('todo') query include('category') const todoswithcategory = await query find() этот include('category') вызов извлекает детали категории вместе с каждой задачей, делая ваши реляционные данные легко доступными живые запросы для обновлений в реальном времени back4app предоставляет живые запросы в вашем приложении nuxtjs вы можете подписаться на изменения в конкретном классе включите живые запросы в вашей панели управления back4app в разделе вашего приложения настройки сервера убедитесь, что «живые запросы» включены инициализируйте подписку на живой запрос в вашем parse client js или аналогичном файле plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io' inject('parse', parse) } теперь в вашем коде export const subscribetotodos = async (callback) => { const query = new this $parse query('todo') const subscription = await query subscribe() subscription on('create', (newtodo) => { console log('new todo created ', newtodo) callback('create', newtodo) }) subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo) callback('update', updatedtodo) }) subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo) callback('delete', deletedtodo) }) return subscription } подписываясь, вы получаете уведомления в реальном времени, когда создается, обновляется или удаляется новый todo эта функция особенно ценна для совместных или динамических приложений, где нескольким пользователям необходимо видеть последние данные без обновления страницы шаг 3 – применение безопасности с помощью acl и clp механизм безопасности back4app back4app серьезно относится к безопасности, предоставляя списки контроля доступа (acl) и разрешения на уровне класса (clp) эти функции позволяют ограничить, кто может читать или записывать данные на уровне отдельных объектов или классов, обеспечивая, чтобы только авторизованные пользователи могли изменять ваши данные списки контроля доступа (acl) acl применяется к отдельным объектам, чтобы определить, какие пользователи, роли или общественность могут выполнять операции чтения/записи например export const createprivatetodo = async (title, owneruser) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) // create an acl granting read/write access only to the owner const acl = new this $parse acl(owneruser) acl setpublicreadaccess(false) acl setpublicwriteaccess(false) todo setacl(acl) try { return await todo save() } catch (err) { console error('error saving private todo ', err) } } когда вы сохраняете объект, у него есть acl, который предотвращает чтение или изменение его кем либо, кроме указанного пользователя разрешения на уровне класса (clp) clp управляют стандартными разрешениями для всего класса, такими как возможность публичного чтения или записи, или доступ только для определенных ролей перейдите в свою панель управления back4app , выберите свое приложение и откройте раздел база данных выберите класс (например, “todo”) откройте вкладку разрешения на уровне класса настройте свои параметры по умолчанию, такие как “требуется аутентификация” для чтения или записи, или “нет доступа” для публичного эти разрешения устанавливают базовый уровень, в то время как acl уточняют разрешения для отдельных объектов надежная модель безопасности обычно сочетает в себе как clp (широкие ограничения), так и acl (точные ограничения для каждого объекта) для получения дополнительной информации перейдите по ссылке руководство по безопасности приложений шаг 4 – написание и развертывание облачных функций облачный код – это функция среды parse server, которая позволяет вам запускать пользовательский javascript код на стороне сервера без необходимости управлять вашими серверами или инфраструктурой написав облачный код, вы можете расширить ваш бэкенд back4app дополнительной бизнес логикой, валидациями, триггерами и интеграциями, которые работают безопасно и эффективно на parse server как это работает когда вы пишете cloud code, вы обычно размещаете свои функции javascript, триггеры и любые необходимые модули npm в файле main js (или app js ) этот файл затем развертывается в вашем проекте back4app, который выполняется в среде parse server поскольку эти функции и триггеры работают на сервере, вы можете доверять им обработку конфиденциальной логики, обработку чувствительных данных или выполнение api вызовов только для бэкенда процессов, которые вы, возможно, не хотите открывать напрямую клиенту весь cloud code для вашего приложения back4app работает внутри parse server, который управляется back4app, поэтому вам не нужно беспокоиться о техническом обслуживании сервера, масштабировании или предоставлении ресурсов каждый раз, когда вы обновляете и развертываете свой файл main js, работающий parse server обновляется с вашим последним кодом структура файла main js типичный main js может содержать заявления о требовании для любых необходимых модулей (пакеты npm, встроенные модули node или другие файлы облачного кода) определения облачных функций с использованием parse cloud define() триггеры такие как parse cloud beforesave() , parse cloud aftersave() , и т д модули npm которые вы установили (если необходимо) например, вы можете установить пакет, такой как axios для выполнения http запросов затем вы можете требовать (или импортировать) его в верхней части вашего файла // main js // 1 import necessary modules and other cloud code files const axios = require('axios') const report = require(' /reports') // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url if (!url) { throw new error('url parameter is required') } const response = await axios get(url) return response data }) // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object if (!todo get('title')) { throw new error('todo must have a title') } }) с возможностью установки и использования модулей npm, cloud code становится невероятно гибким, позволяя вам интегрироваться с внешними api, выполнять преобразования данных или выполнять сложную серверную логику типичные случаи использования бизнес логика например, вы можете рассчитать балл пользователя в игре, агрегируя несколько свойств объектов, а затем автоматически сохранять эти данные проверка данных убедитесь, что определенные поля присутствуют или что у пользователя есть правильные разрешения перед сохранением или удалением записи триггеры выполняйте действия, когда данные изменяются (например, отправляйте уведомление, когда пользователь обновляет свой профиль) интеграции подключайтесь к сторонним api или сервисам например, вы можете интегрироваться с платежными шлюзами, уведомлениями slack или платформами email маркетинга непосредственно из cloud code обеспечение безопасности добавьте дополнительный уровень безопасности, проверяя и очищая входные параметры в ваших функциях cloud code например, вы можете убедиться, что входящие данные соответствуют определенным форматам, отклонять недействительные или вредоносные входные данные и применять правила доступа на основе ролей или разрешений пользователей перед выполнением чувствительных операций разверните вашу функцию ниже приведена простая функция cloud code, которая вычисляет длину текстовой строки, отправленной с клиента main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params if (!text) { throw new error('no text provided') } return { length text length } }) развертывание через back4app cli 1 установите cli для linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash для windows скачайте файл b4a exe с страницы релизов https //github com/back4app/parse cli/releases 2 настройте ваш ключ аккаунта b4a configure accountkey 3 разверните ваш облачный код b4a deploy развертывание через панель управления в панели управления вашего приложения перейдите в облачный код > функции скопируйте/вставьте функцию в редактор main js нажмите развернуть вызов вашей функции из вашего приложения nuxtjs с использованием parse sdk export const gettextlength = async (text) => { try { const result = await this $parse cloud run('calculatetextlength', { text }) console log('text length ', result length) } catch (err) { console error('error calling cloud function ', err) } } вы также можете вызвать его через rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength или через graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } эта гибкость позволяет вам интегрировать вашу пользовательскую логику в ваш фронтенд nuxtjs или любое другое клиентское приложение, поддерживающее rest или graphql шаг 5 – настройка аутентификации пользователей аутентификация пользователей в back4app back4app использует класс parse user в качестве основы для аутентификации по умолчанию parse обрабатывает хеширование паролей, токены сессий и безопасное хранение это означает, что вам не нужно вручную настраивать сложные потоки безопасности настройка аутентификации пользователей в приложении nuxt вы можете создать нового пользователя с помощью export const signupuser = async (username, password, email) => { const user = new this $parse user() user set('username', username) user set('password', password) user set('email', email) try { await user signup() console log('user signed up successfully!') } catch (error) { console error('error signing up user ', error) } } войти в существующий аккаунт export const loginuser = async (username, password) => { try { const user = await this $parse user login(username, password) console log('user logged in ', user) } catch (error) { console error('error logging in user ', error) } } через rest, вход может выглядеть так curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login управление сессиями после успешного входа в систему parse создает токен сессии который хранится в объекте пользователя в вашем приложении nuxt вы можете получить доступ к текущему вошедшему пользователю const currentuser = this $parse user current() if (currentuser) { console log('currently logged in user ', currentuser getusername()) } else { console log('no user is logged in') } parse автоматически обрабатывает сессии на основе токенов в фоновом режиме, но вы также можете управлять ими вручную или аннулировать их это полезно, когда вам нужно выйти из системы await this $parse user logout() интеграция социальных логинов back4app и parse могут интегрироваться с популярными провайдерами oauth, такими как google или facebook , установив дополнительные пакеты или используя существующие адаптеры например, вы можете настроить вход через facebook, настроив свой facebook app id и используя parse facebookutils login() подробные инструкции могут различаться, поэтому обратитесь к документации по социальным логинам https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await this $parse facebookutils login('email') console log(user existed() ? 'user logged in' 'user signed up and logged in') } catch (error) { console error('error logging in with facebook ', error) } } подтверждение электронной почты и сброс пароля чтобы включить подтверждение электронной почты и сброс пароля перейдите в настройки электронной почты в вашей панели управления back4app включите подтверждение электронной почты для обеспечения проверки новых пользователей на владение их адресами электронной почты настройте адрес отправителя , шаблоны электронной почты и ваш собственный домен, если это необходимо эти функции улучшают безопасность учетной записи и пользовательский опыт, проверяя право собственности пользователей на электронные адреса и предоставляя безопасный метод восстановления пароля шаг 6 – управление файловым хранилищем загрузка и получение файлов parse включает класс parse file , который обрабатывает загрузку файлов, которые back4app хранит безопасно export const uploadimage = async (file) => { // file is typically from an \<input type="file" > in a nuxt component const name = file name const parsefile = new this $parse file(name, file) try { const savedfile = await parsefile save() console log('file saved ', savedfile url()) return savedfile url() } catch (err) { console error('error uploading file ', err) } } чтобы прикрепить файл к объекту в базе данных export const createphotoobject = async (file) => { const photo = this $parse object extend('photo') const photo = new photo() const parsefile = new this $parse file(file name, file) photo set('imagefile', parsefile) return await photo save() } получение url файла довольно просто const imagefile = photo get('imagefile') const imageurl = imagefile url() // use imageurl as needed безопасность файлов parse server предоставляет гибкие настройки для управления безопасностью загрузки файлов следующий пример показывает, как вы можете установить разрешения для контроля того, кто может загружать файлы на сервер { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic если установлено в true, позволяет любому, независимо от статуса аутентификации, загружать файлы enableforanonymoususer управляет тем, могут ли анонимные пользователи (не зарегистрированные) загружать файлы enableforauthenticateduser указывает, могут ли загружать файлы только аутентифицированные пользователи это идеально подходит для обеспечения того, чтобы только доверенные пользователи имели доступ к этой функции шаг 7 – планирование задач с помощью облачных заданий облачные задания облачные задания в back4app позволяют вам планировать и выполнять рутинные задачи на вашем сервере такие как очистка старых данных или отправка ежедневного сводного отчета по электронной почте типичное облачное задание может выглядеть так // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo') const query = new parse query(todo) // for example, remove todos older than 30 days const now = new date() const thirty days = 30 24 60 60 1000 const cutoff = new date(now thirty days) query lessthan('createdat', cutoff) try { const oldtodos = await query find({ usemasterkey true }) await parse object destroyall(oldtodos, { usemasterkey true }) return `deleted ${oldtodos length} old todos ` } catch (err) { throw new error('error during cleanup ' + err message) } }) разверните ваш облачный код с новым заданием (через cli или панель управления) перейдите в панель управления back4app > настройки приложения > настройки сервера > фоновые задания запланируйте выполнение задания ежедневно или с любым другим интервалом, который вам подходит облачные задания позволяют вам автоматизировать фоновое обслуживание или другие периодические процессы без необходимости ручного вмешательства шаг 8 – интеграция вебхуков вебхуки позволяют вашему приложению back4app отправлять http запросы на внешний сервис, когда происходят определенные события это мощный инструмент для интеграции с системами третьих сторон, такими как платежные шлюзы (например, stripe), инструменты email маркетинга или аналитические платформы перейдите к настройкам вебхуков в вашей панели управления back4app > дополнительно > вебхуки и затем нажмите на добавить вебхук настройте конечную точку (например, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) настройте триггеры для указания, какие события в ваших классах back4app или функциях cloud code будут вызывать вебхук например, если вы хотите уведомлять канал slack каждый раз, когда создается новая задача создайте приложение slack, которое принимает входящие вебхуки скопируйте url вебхука slack в вашей панели управления back4app установите конечную точку на этот url slack для события "новая запись в классе todo " вы также можете добавить пользовательские http заголовки или полезные нагрузки, если это необходимо вы также можете определить вебхуки в cloud code, выполняя пользовательские http запросы в триггерах, таких как beforesave, aftersave шаг 9 – изучение панели администратора back4app приложение back4app admin app – это веб интерфейс управления, предназначенный для нетехнических пользователей, чтобы выполнять операции crud и обрабатывать рутинные задачи с данными без написания кода он предоставляет ориентированный на модель , удобный для пользователя интерфейс, который упрощает администрирование базы данных, управление пользовательскими данными и операции на уровне предприятия включение приложения администратора включите его, перейдя в app dashboard > more > admin app и нажав кнопку "включить приложение администратора" создайте первого администратора (имя пользователя/пароль), что автоматически создаст новую роль (b4aadminuser) и классы (b4asetting, b4amenuitem и b4acustomfield) в схеме вашего приложения выберите поддомен для доступа к интерфейсу администратора и завершите настройку войти с использованием учетных данных администратора, которые вы создали для доступа к новой панели управления admin app после активации приложение back4app admin app упрощает просмотр, редактирование или удаление записей из вашей базы данных без необходимости прямого использования панели управления parse или бэкенд кода с настраиваемыми контролями доступа вы можете безопасно делиться этим интерфейсом с членами команды или клиентами, которым нужен понятный способ управления данными заключение следуя этому подробному руководству, вы создана безопасная серверная часть для приложения nuxtjs на back4app настроена база данных с классами схем, типами данных и отношениями интегрированы запросы в реальном времени (live queries) для немедленного обновления данных применены меры безопасности с использованием acl и clp для защиты и управления доступом к данным реализованы функции cloud code для выполнения пользовательской бизнес логики на стороне сервера настроена аутентификация пользователей с поддержкой проверки электронной почты и сброса паролей управление загрузкой файлов и их извлечением, с дополнительными мерами безопасности для файлов запланированы облачные задания для автоматизированных фоновых задач использованы webhooks для интеграции с внешними сервисами изучен панель администратора back4app для управления данными с надежным фронтендом nuxtjs и мощной серверной частью back4app вы теперь хорошо подготовлены для разработки функциональных, масштабируемых и безопасных приложений продолжайте исследовать более продвинутые функции, интегрируйте свою бизнес логику и используйте возможности back4app, чтобы сэкономить вам бесчисленные часы на администрировании серверов и баз данных удачного кодирования! следующие шаги создайте готовое к производству приложение nuxtjs путем расширения этого бэкенда для обработки более сложных моделей данных, стратегий кэширования и оптимизации производительности интегрируйте расширенные функции такие как специализированные потоки аутентификации, контроль доступа на основе ролей или внешние api (например, платежные шлюзы) посмотрите официальную документацию back4app для более глубокого изучения вопросов безопасности, настройки производительности и анализа логов изучите другие учебники по приложениям для чата в реальном времени, панелям управления iot или услугам на основе местоположения вы можете комбинировать техники, изученные здесь, с api третьих сторон для создания сложных, реальных приложений