отправка формы на почту vue
Как отправлять электронные письма из приложения Vue.js с помощью EmailJS
Несколько дней назад я решил поработать над простым проектом Vue, и мне нужно было отправлять электронные письма через контакт, который я только что создал. Я хотел получать автоматическое электронное письмо каждый раз, когда кто-то заполняет мою контактную форму.
Итак, я занялся поиском и наткнулся на EmailJs. Я решил написать эту статью, потому что считал их документацию отличной и действительно простой в использовании. Я также надеюсь, что это поможет кому-то там 🙂
Давайте начнем!
В этой статье я покажу вам, как использовать EmailJS для отправки писем из вашего приложения Vuejs.
Прежде чем продолжить, я предполагаю, что на вашем компьютере установлен Vue CLI, так как я буду создавать с ним мини-демонстрационный проект. Если нет, вы можете проверить, как его установить здесь.
Мы создадим проект с помощью этой команды:
Будет создан новый каталог проекта, и вы сможете перейти в него с помощью этой команды:
Как установить EmailJS
Прежде чем мы начнем писать наш код, вы захотите создать учетную запись EmailJS. С помощью своей учетной записи вы сможете создавать шаблоны электронной почты и выбирать электронную почту, на которую будут отправляться ваши автоматические электронные письма.
Как только вы войдете в свою новую учетную запись, вы будете перенаправлены на панель управления.
Как создать шаблон электронного письма
Шаблоны электронной почты могут дополнительно содержать динамические переменные практически в любом поле (например, в теме, содержании, адресе электронной почты ДО, ОТ имени и т. Д.). Они заполняются из вызова JavaScript. Мы скоро займемся этим.
Сначала давайте добавим почтовую службу. Я выбрал Gmail, но вы можете выбрать любую услугу, которая лучше всего соответствует вашим потребностям.
Затем мы создадим наш шаблон электронной почты. Перейдите на страницу шаблонов. Создайте новый шаблон. Наш шаблон электронного письма будет определять тему нашего электронного письма, какой контент он будет содержать, куда его следует отправить и так далее.
Наборы двойных фигурных скобок, показанные выше, <
Ниже приведено небольшое объяснение доступных полей в нашем шаблоне:
Как установить EmailJS в ваше приложение
Теперь перейдем к коду 🙂 Чтобы установить EmailJS в свое приложение, используйте эту команду:
Мы собираемся отправлять электронную почту из очень простой контактной формы. Он будет собирать данные, включая: имя (отправителя), адрес электронной почты (отправителя) и содержание сообщения. Все просто!
Объясняя нашу разметку
Как я упоминал ранее, мы будем отправлять электронную почту из очень простой контактной формы. Итак, создайте div элемент, который будет содержать содержимое нашей формы. Мы будем добавлять стиль в нашу форму, поэтому добавьте класс container к div элементу.
Вы можете запустить свой сервер с помощью команды:
Now, open your browser to localhost:8080 and you should see your form:
We will also be creating a method called sendEmail which handles the submission of our data. But before we do that, we need to import emailjs in our file.
Add the following line just under script :
Below is the rest of the code needed in our script :
What this code is doing
I used a try. catch above but you don’t necessarily have to use it. Remember when I asked you to copy your Service ID, Template ID and User ID details to your clipboard and paste them for when they’re needed? Well you absolutely need them now! So replace that part of the snippet with your actual details.
It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.
Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.
Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.
GitHub Repo
You can find the code for this article in my GitHub account.
Feel free to share this article if you found it helpful. Thanks for reading!
Как на vue.js реализовать отправку формы на почту?
Должен стоять код который отправит все что вам нужно. А в общем то браузер не умеет в сокеты поэтому напрямую ни как
Должен стоять код который отправит все что вам нужно
Это же наверное нужно было в ответе написать)) а так то код что вы написали никакого отношения конкретно к отправке почты не имеет.
А в общем то браузер не умеет в сокеты
Andrey Suha, Не стоит со мной спорить кроме как на деньги. Положим 200$
Организуйте SMTP сессию с помощью этого протокола. Деньги ваши.
Если не сможете. Либо извинения либо деньги.
Владимир Коротенко, а я и не говорил что с помощью этого протокола можно организовать smpt, но это тоже сокеты и браузер их поддерживаете. Игра слов, улавливаете?
Я к тому что человеку который задаёт подобные вопросы нужно объяснить что ему нужно делать или почему того что он хочет сделать нельзя, а не кидать кусок кода который даже не решает его проблему.
P.s. извеняться мне не за что и денег тоже Вам не дам))
Andrey Suha, Какая игра слов? Когда говорят сокеты имеют в виду вполне определенные вещи.
А когда разговор про почтовый сеанс, то это становится просто железобетонным утверждением.
Но вы утверждаете что браузер таки умеет в сокеты причем непосредственно. Я хочу этот цирк увидеть.
ПС на любом современном кроме 11 IE
Andrey Suha, У вас фронтенд, во всем другом мире говорят именно так.
Так как насчет отправить почту из браузера?
Этот пример SMTP показывает почту, отправленную Смитом на хост Alpha.ARPA,
Джонс, Грин и Браун на хосте Beta.ARPA. Здесь мы предполагаем
этот хост Alpha напрямую связывается с хостом Beta.
S: ПОЧТА ОТ:
R: 250 ОК
S: RCPT TO:
R: 250 ОК
S: RCPT TO:
R: 550 Нет такого пользователя здесь
S: RCPT TO:
R: 250 ОК
Vue.js для начинающих, урок 10: формы
Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.
Цель урока
Мы собираемся создать форму, которая позволяет посетителям сайта отправлять отзывы на товары. При этом нужно, чтобы отзыв можно было бы отправить только в том случае, если заполнены все поля формы, которые обязательно должны быть заполнены.
Начальный вариант кода
Вот что сейчас находится в index.html :
Так выглядит main.js :
Задача
Нам надо, чтобы посетители сайта могли бы оставлять отзывы на товары, но на нашем сайте пока нет средств, позволяющих получать данные от пользователей. Такими средствами являются формы.
Решение задачи
Зарегистрируем новый компонент, приступим к формированию его шаблона и оснастим его некоторыми данными:
Директива v-model
Директива v-model позволяет организовывать двустороннюю привязку данных. При такой схеме работы, если что-то новое оказывается в поле ввода, это приводит к изменению данных. И, соответственно, когда меняются данные, обновляется состояние элемента управления, эти данные использующего.
Добавим к полю ввода директиву v-model и привяжем это поле к свойству name из данных компонента.
Теперь добавим в шаблон компонента полный код формы:
Дополним набор данных компонента, добавив в него те данные, к которым привязаны вышеописанные элементы управления:
Доработаем метод onSubmit :
Далее, нам надо организовать прослушивание этого события, разместив в шаблоне product следующее:
Вот код этого метода:
Вывод отзывов о товаре
Страница с формой для ввода отзывов
Проверка форм
В формах часто бывают поля, которые, перед отправкой формы, должны быть обязательно заполнены. Например, нам не хотелось бы, чтобы пользователи отправляли бы отзывы, в которых поле текста отзыва было бы пустым.
Подобная конструкция приведёт к автоматическому выводу сообщения об ошибке в том случае, если пользователь попытается отправить форму, в которой required-поле окажется пустым.
Сообщение об ошибке
Наличие в браузере стандартных механизмов проверки полей форм — это очень приятно, так как это может освободить нас от создания собственных механизмов проверки полей. Но то, как проводится стандартная проверка данных, может, в каком-то особом случае, нас не устроить. В такой ситуации вполне логично будет написать собственный код проверки форм.
Пользовательская проверка форм
Поговорим о том, как создать собственную систему проверки форм.
Включим в состав данных компонента product-review массив для хранения сообщений об ошибках. Назовём его errors :
Мы хотели бы добавлять в этот массив сведения об ошибках, возникающих в ситуациях, когда поля формы оказываются пустыми. Речь идёт о следующем коде:
А куда поместить этот код?
Если же хотя бы одно из полей оказывается пустым, мы помещаем в массив errors сообщение об ошибке, зависящее от того, что именно не ввёл пользователь перед отправкой формы.
Осталось лишь вывести эти ошибки, что можно сделать с помощью следующего кода:
Сообщения об ошибках
Теперь у нас имеется собственная система валидации формы.
Практикум
Итоги
Сегодня мы говорили о работе с формами. Вот самое важное из того, что вы сегодня узнали:
Работа с формами
Типичное использование
Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.
Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:
Текст
Многострочный текст
Интерполяция внутри textarea ( ) не будет работать. Используйте вместо неё директиву v-model
Чекбоксы
Один чекбокс, привязанный к булевому значению:
Список чекбоксов, привязанных к одному массиву:
Радиокнопки
Выпадающие списки
Выбор одного варианта из списка:
Если начальное значение выражения v-model не соответствует ни одному из вариантов списка, элемент
Выбрано: << selected >>
Динамическое отображение списка опций с помощью v-for :
Связывание значений
Для радиокнопок и выпадающих списков в качестве v-model обычно используются статические строки, а для чекбоксов — булевые значения:
Чекбокс
Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.
Радиокнопки
Списки выбора
Модификаторы
.number
Для автоматического приведения введённого пользователем к Number, добавьте модификатор number :
Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim для полей ввода, обрабатываемых через v-model :
Использование v-model с компонентами
Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию
Чистые, масштабируемые формы с Vue Composition API
Формы — одна из самых сложных частей разработки веб-интерфейса, где обычно накапливается много грязного кода.
Компонентно-ориентированные фреймворки, такие как Vue.js 2, многое сделали для улучшения масштабируемости кода, но проблема чистоты кода форм сохраняется.
В этом уроке я покажу вам, как новое Vue Composition API (начиная с Vue 3) сделает ваш код форм намного чище и более масштабируемым.
Почему код формы часто отстой
Ключевым шаблоном проектирования основанных на компонентах сред, таких как Vue, является состав компонентов. Этот шаблон говорит нам, что нужно абстрагировать функции нашего приложения в изолированные, специализированные компоненты, которые связывают состояние с props и событиями.
Однако формы нельзя аккуратно абстрагировать в соответствии с этим шаблоном, поскольку функциональность и состояние формы явно не принадлежат какому-либо одному компоненту, и поэтому их разделение часто вызывает больше проблем, чем пользы.
Другая важная причина, по которой код форм часто отстой в приложениях Vue, заключается в том, что вплоть до Vue 2 у Vue не было надежных средств повторного использования кода между компонентами. Это важно в формах, так как входные данные часто различаются, но имеют много общего в функциональности.
Основной метод повторного использования кода, предлагаемый Vue 2, — это миксины, которые как многие утверждают, явный анти-паттерн.
Vue Composition API
Composition API — это новый способ определения компонентов с помощью Vue.js, который станет основной функцией Vue 3. Он также доступен для использования сегодня в Vue 2 в качестве плагина.
Это новое API предназначено для борьбы с некоторыми из упомянутых мною проблем (не только в формах, но и в любом аспекте архитектуры приложения).
Если вы все еще не знакомы с API-интерфейсом композиции или не знаете, для чего он нужен, я рекомендую сначала прочитать документацию, а также другую статью, которую я написал, «Когда использовать новый API-интерфейс Vue (а когда нет»).
Composition API — это не замена классическому Vue API, а то, что вы можете использовать при необходимости. Как вы увидите в этой статье, создание чистого и масштабируемого кода формы является идеальным вариантом использования.
Добавление Composition API в проект Vue 2
Так как я пишу это руководство до выпуска Vue 3, давайте добавим API композиции в проект Vue 2 в качестве плагина.
Мы начнем с создания нового проекта Vue CLI ( используем только необходимые функции — все, что нам нужно — без роутера, Vuex и т. д.) И установим плагин Composition API с помощью NPM.
Далее, давайте добавим плагин к нашему экземпляру Vue в main.js.
Создание компонентов ввода формы
Чтобы сделать это простым примером, мы собираемся создать форму с двумя input — имя и адрес электронной почты. Давайте создадим их как отдельные компоненты.
Теперь давайте настроим шаблон компонента InputName обычным способом, включая элемент ввода HTML с директивой v-model, создающий двустороннюю привязку с компонентом.
Настройка формы
Оставим пока input и настроим форму. Вы можете создать ее как отдельный компонент, чтобы сделать ее многократно используемой, но для простоты руководства я просто объявлю ее в шаблоне компонента App.
Мы добавим атрибут novalidate, чтобы браузер знал, что мы сами реализуем пользовательскую проверку. Мы также будем слушать событие отправки формы submit, предотвращая автоматическую отправку и обработаем это событие с помощью метода onSubmit, который мы вскоре объявим.
Затем мы добавим компоненты InputName и InputEmail и свяжем с ними локальный переменные name и email соответственно.
Давайте теперь определим функциональность формы, используя Composition API. Мы добавим метод setup в определение компонента, где мы объявим две переменные name и email, используя метод ref Composition API. Этот метод необходимо будет импортировать из пакета Composition API.
Затем мы объявим функцию onSubmit для обработки отправки формы. Я не буду определять какую-либо функциональность, поскольку она не имеет отношения к этому уроку.
Наконец, нам нужно вернуть две переменные состояния и метод, который мы создали из функции setup, чтобы они были доступны для шаблона компонента.
Настройка input
Далее мы собираемся определить функциональность компонента InputName.
Поскольку родительская форма использует v-model с этим компонентом, важно объявить значение prop, которое будет составлять половину двусторонней привязки.
Давайте создадим функцию setup. В этот метод передаются props, как и объект контекста, что дает нам доступ к методам экземпляра компонента. Мы можем деструктурировать этот второй аргумент и получить метод emit. Нам понадобится это для выполнения другой половины двусторонней привязки v-model, то есть для реактивного выделения новых значений входных данных.
Прежде чем мы перейдем к этому, давайте объявим входную переменную состояния input, которая будет привязана к входному HTML-элементу, который мы объявили в шаблоне.
Значением этой переменной будет то, что мы вернем из определенной функции композиции useInputValidator. Эта функция будет обрабатывать всю общую логику проверки.
Мы передадим значение prop этому методу, и вторым аргументом будет функция обратного вызова, которая возвращает проверенное входное значение. Давайте использовать этот обратный вызов, чтобы выдать этот ввод как событие и выполнить контракт v-model.
Функция проверки ввода
Давайте теперь создадим композиционную функцию useInputValidator. Для этого мы сначала создадим папку features, а затем создадим для нее файл модуля.
В файле модуля мы собираемся экспортировать функцию. Мы только что увидели, что ему понадобятся два аргумента — props, значение полученное из родительской формы, которую мы будем называть startVal, и метод обратного вызова, который мы будем вызывать onValidate.
Помните, что эта функция должна возвращать входную переменную состояния input, поэтому давайте продолжим и объявим об этом, присваивая ref, которая инициализируется значением, предоставленным props.
Прежде чем мы вернем значение input из функции, давайте посмотрим его значение и вызовем обратный вызов onValidate, используя входные данные в качестве аргумента.
Добавление валидаторов
Следующим шагом является добавление функций валидатора. Для компонента InputName у нас есть только одно правило проверки — minLength, обеспечивающее ввод трех символов или более. Для еще не созданного компонента InputEmail потребуется подтверждение корректности электронный почты.
Теперь мы создадим эти валидаторы в служебном модуле JavaScript validators.js в папке src. В реальном проекте вы, вероятно, вместо этого использовали бы стороннюю библиотеку.
Я не буду подробно останавливаться на функциях валидатора, но обратите внимание на две важные вещи:
Вернувшись к функции композиции, мы хотим, чтобы потребительский компонент определял необходимые ему валидации, поэтому давайте начнем с добавления еще одного аргумента в validators профиля функции, который должен быть массивом функций валидации.
Внутри watcher input мы теперь обработаем функции проверки. Давайте используем метод map массива validators, передавая текущее значение входных данных каждому методу validator.
Возврат будет записан в новой переменной состояния, errors, которые мы также вернем в потребляющий компонент.
Наконец, возвращаясь к компоненту InputName, мы собираемся предоставить три обязательных аргумента методу useInputValidator. Помните, что второй аргумент теперь является массивом валидаторов, поэтому давайте объявим массив на месте и передадим в minLength, который мы получим путем импорта из файла валидаторов.
minLength — это фабричная функция, поэтому мы вызываем функцию со значением минимальной длины, которую мы хотим указать.
Теперь мы также получаем два объекта, возвращаемых нашей композиционной функцией — input и errors. Оба они будут возвращены из метода setup для доступности в контексте рендеринга компонента.
Это последняя функциональность, которую мы добавим к этому компоненту. Прежде чем мы продолжим, важно уделить немного времени и оценить, насколько читабельнее этот код, чем то, что вы увидели бы, если бы мы использовали миксины.
Во-первых, мы ясно видим, где наши переменные состояния объявляются и изменяются без необходимости переходить в отдельный файл модуля mixin. Во-вторых, нам не нужно беспокоиться о столкновении имен между нашими локальными переменными и функцией композиции.
Отображение ошибок
Переходя к шаблону нашего компонента InputName, теперь у нас есть массив потенциальных ошибок для отображения. Давайте делегируем это компоненту ошибки под названием ErrorDisplay.
Функциональность ErrorDisplay слишком тривиальна, чтобы здесь ее описывать.
Повторное использование кода
Это основная функциональность нашей формы с Composition API. Целью этого руководства было создание чистого и масштабируемого кода формы, и я хочу доказать вам, что мы сделали это, заканчивая определением нашего второго пользовательского ввода InputEmail.
Если цель этого руководства была достигнута, у вас не должно возникнуть проблем с ее пониманием без моего дальнейшего пояснения!