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

2024-11-26 21:04:31

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，进行授权，完成授权后选择要部署的项目仓库

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

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

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

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

总结

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

vue中vee validate表单校验的几种基本使用

今天主要记录一下用vee-validate来进行表单校验的几个基本使用.包括最基础的必填和长度校验:异步请求服务的校验(重名校验),还有延迟校验.如何引入等就不在这里赘述了,直接进入主题. 1.必填和长度校验直接采用v-validate属性进行配置,不同的校验采用 '|' 隔开.是否有报错根据 errors.has('userName') 进行判断,'userName'对应的是表单的name属性的值. errors.first('userName)会展示表单校验中第一个错误信息. <el-co
vue form 表单提交后刷新页面的方法

最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>
vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法
详解vue如何使用rules对表单字段进行校验

1.在代码中,添加属性::rule <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con"> <FormItem prop="phone"> <Input v-model="form.phone&
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig
vue表单自定义校验规则介绍

如下所示: <div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

1.使用Vue.js实现双向表单数据绑定,例子  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r
vue 使用自定义指令实现表单校验的方法

笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,
在 Vue 应用中使用 Netlify 表单功能的方法详解

Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-
Vue项目中打包优化的四种方法详解

目录前言打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录总结前言默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:
基于vue.js中事件修饰符.self的用法(详解)

.self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''
vue组件中使用props传递数据的实例详解

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa
vue iview组件表格 render函数的使用方法详解

如果要在标签中加入属性,例如img 中src属性 a标签中href属性此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on
vue2中引用及使用 better-scroll的方法详解

使用时有三个要点: 一:html部分 <div class="example" ref="divScroll"> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div> [注] 1.最外层加re
对python PLT中的image和skimage处理图片方法详解

用PLT比较轻量级,用opencv是比较重量级 import numpy as np from PIL import Image if __name__ == '__main__': image_file = '/Users/mac/Documents/学习文档/机器学习/5.Package/son.png' height = 100 #假定写入图片的高度是100 img = Image.open(image_file) img_width, img_height = img.size #获取i
对Vue table 动态表格td可编辑的方法详解

项目中需求用到可编辑表格下图这种 ↓ element UI 组件table表格中增加template 模版翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope
Navicat Premium 15无限试用注册表修改的方法详解

最近看上了Navicat Premium 15对PostgreSQL的支持,老版本的会有找不到oid字段报错,网上栖息的一些和谐版本是通过暴力修改二进制文件中的密钥来完成的,把可执行文件的数字签名也给破坏了,若遇到别有用心的捆绑个后门也不是不可以,运行着没有底气,于是寻找突破14天试用的办法. 网上有12版本的删注册表方法,显得有些暴力,本文在这些方法的基础上缩小了删除的范围,避免伤及无辜. 首先把HKEY_CURRENT_USER\Software\Classes\CLSID和HKEY_CUR
ASP.NET Core中Razor页面的Handlers处理方法详解

简介在前一篇文章中,我们讨论了Razor页面.今天我们来谈谈处理方法(Handlers). 我们知道可以将代码和模型放在 .cshtml 文件里面或与 .cshtml 匹配的 .cshtml.cs 文件中. Razor页面处理程序或处理方法将用户请求匹配到我们的方法:请求来自 **.cshtml **文件. Razor页面遵循特定的命名约定.从上一篇文章可以看出,.NET Core开发工具自动生成了很多处理方法,例如下面这些: OnGet OnPost OnGetAsync OnPostAsy

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

相关推荐

随机推荐