在 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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery聚合函数实例
May 21 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
js实现div色块碰撞
Jan 16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 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 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
yii中widget的用法
2014/12/03 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JavaScript中Function详解
2015/02/27 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python实现ping的方法
2015/07/06 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python中列表和元组的区别
2017/12/18 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python 实现兔子生兔子示例
2019/11/21 Python
Pytorch之parameters的使用
2019/12/31 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
国际金融专业自荐信
2014/07/05 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
vue的项目如何打包上线
2022/04/13 Vue.js