В части I мы подготовили нашу среду Vue, а в части II мы создали простой пользовательский интерфейс для формы.
Итак, сегодня мы создадим весь серверный сервис для Vue WebApp с использованием четырех технологий Google: Google Form, Google Spreadsheet, Google Drive и Gmail, а также Google Chrome DevTools.
Перейдите в Google Form и создайте blank
форму.
Слева вверху назовите файл MyFormWebApp
, а затем измените содержимое, как показано ниже; обязательно используйте правую боковую панель для добавления карточек, а затем измените содержание, чтобы оно было короткими, за исключением message
, чтобы он был абзацем.
После создания полей или карточек в форме Google мы можем теперь создать электронную таблицу, в которой будут храниться все наши ответы.
В верхней части формы есть две вкладки: Questions
и Responses
. Выберите ответы
Теперь нажмите Зеленую кнопку, которая создаст новую таблицу Google на Google Диске.
Выберите значение по умолчанию, равное create new spreadsheet
.
Он свяжет нашу форму с электронной таблицей, и вы сможете найти все это в своей учетной записи на Google Диске.
Чтобы получать уведомления на свой Gmail, сделайте следующее:
- Мы создали новую форму Google
- Мы сделали ответы, чтобы они сохранялись в таблице Google, которая полностью обрабатывается Google Диском.
- Мы ответили, что Gmail может получать уведомления.
Теперь давайте проведем тестирование в реальном времени, связав Google Form с нашим веб-приложением.
В форме Google нажмите кнопку preview
, вторую в правом верхнем углу, чтобы открыть окно предварительного просмотра, в котором вы можете вводить данные.
Вместо этого щелкните F12
или щелкните правой кнопкой мыши и выберите inspect
. Это откроет Chrome DevTools.
Чтобы связать форму с нашим Vue WebApp, щелкните ctrl+shift+c
или кнопку, выделенную на фотографии выше с помощью курсора.
Щелкнув по нему или используя команду, мы можем выбрать элемент и проверить его. Таким образом, выберите поле ввода на name
, которое будет выглядеть следующим образом:
Если вы можете помочь заметить, есть поле name
со значением entry.126
и т. Д. Это значение поможет нам связать нашу форму с Vue WebApp. Итак, чтобы извлечь значение, щелкните правой кнопкой мыши светло-синюю область и выберите edit as HTML
.
Перейдите в наше приложение Vue и вставьте значение, скопированное из DevTools, в наш v-text-field
из name
:
Мы проделаем со всем точно такую же процедуру, шаги которой показаны ниже:
На рисунках выше показано, как извлечь поля email
, phone number
и message
из формы с помощью Chrome DevTools.
Теперь нам осталось, как отправить значения, введенные в нашу форму Google, которая, в свою очередь, сохранит их в таблице Google на Google Диске.
Мы будем выполнять тот же процесс, в ходе которого мы будем проверять форму, чтобы взять ссылку и передать ее как действие в нашу форму.
Снова нажмите кнопку preview
. После этого щелкните F12
или щелкните правой кнопкой мыши и inspect
Найдите тег form
и скопируйте action
со ссылкой, например:
В вашем редакторе кода это должно выглядеть так:
Итак, в основном,
- Мы добавили ссылку формы на
v-form
в смыслеaction
,target
,method
иid
- Мы извлекли имя со значениями каждого поля в форме, используя
inspect
в Chrome DevTool, и соответственно добавили значения в код.
Используйте npm run serve
, чтобы убедиться, что он работает
Это завершает все для серверной части.
Итак, теперь мы создаем серверную часть, используя 4 технологии Google:
- Форма Google для сбора входных данных
- Таблица Google, чтобы увидеть ответы
- Google Диск для хранения наших данных в качестве серверной службы
- Gmail для служб уведомлений
- И, наконец, Chrome DevTools для проверки и устранения всей суеты, стоящей за этим.
У нас остался только хостинг с использованием Firebase, который мы рассмотрим в следующей статье, так что следите за обновлениями!