在 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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
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
第三节--定义一个类
2006/11/16 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js获取form的方法
2015/05/06 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
后勤园长自我鉴定
2013/10/17 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
驳回起诉裁定书
2015/05/19 职场文书
安全教育培训制度
2015/08/06 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Redis中一个String类型引发的惨案
2021/07/25 Redis
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python