在 Vue 应用中使用 Netlify 表单功能的方法详解


Posted in Javascript onJune 03, 2019

Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。

它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能。

开发

首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用

vue create my-awesome-app
...
yarn serve

创建一个 form 表单

<!--
 data-netlify="true" 表明使用 form 功能
 netlify-honeypot="bot-field" 指定机器人识别字段
 -->
<template>
 <form
 id="app"
 method="POST"
 name="contact"
 data-netlify="true"
 netlify-honeypot="bot-field"
 @submit.prevent="handleSubmit"
 >
 <input name="bot-field" hidden>
 <label for="username">
  用户名:
  <input
  type="text"
  id="username"
  placeholder="请输入你的用户名"
  name="username"
  v-model="form.username"
  >
 </label>
 <label for="email">
  邮箱:
  <input type="email" id="email" placeholder="请输入你的邮箱" name="email" v-model="form.email">
 </label>
 <button type="submit">Submit</button>
 </form>
</template>

注意应用的根节点一定要保留 id=''app" 属性,否则经过静态化之后页面上绑定的事件会失效

在 form 标签上监听 submit 事件,并且阻止浏览器默认事件,使用 axios 提交 post 请求

yarn add axios

handleSubmit() {
 axios
 .post(
  "/",
  this.encode({
  "form-name": "contact", // 请求数据一定要加上 form-name 属性
  ...this.form
  }),
  {
  header: { "Content-Type": "application/x-www-form-urlencoded" }
  }
 )
 .then(() => {
  alert("提交成功");
 })
 .catch(() => {
  alert("提交失败");
 });
}

安装预渲染插件 prerender-spa-plugin github.com/chrisvfritz… ,作用是静态化 Vue 应用,一定要预渲染 Vue 应用,因为如果是通过 js 渲染的页面, Netlify 是解析不到 form 表单的

yarn add prerender-spa-plugin --dev

新建一个 vue.config.js 文件用来扩展  webpack 配置

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
 configureWebpack: () => {
 if (process.env.NODE_ENV !== 'production') return
 return {
  plugins: [
  new PrerenderSPAPlugin({
   staticDir: path.join(__dirname, 'dist'),
   routes: ['/']
  })
  ]
 }
 }
}

完整代码如下

<template>
 <!--
 data-netlify="true" 表明使用 form 功能
 netlify-honeypot="bot-field" 指定机器人识别字段
 -->
 <form
 id="app"
 method="POST"
 name="contact"
 data-netlify="true"
 netlify-honeypot="bot-field"
 @submit.prevent="handleSubmit"
 >
 <input name="bot-field" hidden>
 <label for="username">
  用户名:
  <input
  type="text"
  id="username"
  placeholder="请输入你的用户名"
  name="username"
  v-model="form.username"
  >
 </label>
 <label for="email">
  邮箱:
  <input type="email" id="email" placeholder="请输入你的邮箱" name="email" v-model="form.email">
 </label>
 <button type="submit">Submit</button>
 </form>
</template>

<script>
import axios from "axios";

export default {
 name: "app",
 data() {
 return {
  form: {
  username: "",
  email: ""
  }
 };
 },
 methods: {
 encode(data) {
  return Object.keys(data)
  .map(
   key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
  )
  .join("&");
 },
 handleSubmit() {
  axios
  .post(
   "/",
   this.encode({
   "form-name": "contact",
   ...this.form
   }),
   {
   header: { "Content-Type": "application/x-www-form-urlencoded" }
   }
  )
  .then(() => {
   alert("提交成功");
  })
  .catch(() => {
   alert("提交失败");
  });
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
label {
 display: block;
}
</style>

部署

在 Github 上新建一个仓库,上传代码,之后在 Netlify 上点击 New site form Git,进行授权,完成授权后选择要部署的项目仓库

在 Vue 应用中使用 Netlify 表单功能的方法详解 

 填写构建命令,点击 Deploy site 按钮

在 Vue 应用中使用 Netlify 表单功能的方法详解 

 经过一段时间的等待,不出意外应用就部署成功了地址 

在 Vue 应用中使用 Netlify 表单功能的方法详解 

注意在提交数据中一定要有 form-name 属性,否则 Netlify 会接收不到数据,返回 404 错误

在 Vue 应用中使用 Netlify 表单功能的方法详解 

 输入测试数据,点击提交就可以在 Netlify 的站点操作面板看到数据了

 在 Vue 应用中使用 Netlify 表单功能的方法详解

总结

以上所述是小编给大家介绍的在 Vue 应用中使用 Netlify 表单功能的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
JavaScript从原型到原型链深入理解
Jun 03 #Javascript
生产制造追溯系统之再说条码打印
Jun 03 #Javascript
VUE安装使用教程详解
Jun 03 #Javascript
教你完全理解ReentrantLock重入锁
Jun 03 #Javascript
生产制造追溯系统之在线打印功能
Jun 03 #Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 #Javascript
You might like
php字符串分割函数explode的实例代码
2013/02/07 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP 类与构造函数解析
2017/02/06 PHP
一个实用的php验证码类
2017/07/06 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python 中@property的用法详解
2020/01/15 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
毕业生在校学习的自我评价分享
2013/10/08 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
中班中秋节活动反思
2014/02/18 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang