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

它是通过在部署应用时直接解析超文本标记语言文件，识别超文本标记语言中的形式标签来实现的，本文记录如何在一个某视频剪辑软件应用中使用表单功能。

开发

首先使用@vue/cli新建一个某视频剪辑软件应用，完成一系列步骤后，运行应用

某视频剪辑软件创建我的-棒极了-应用.纱线服务创建一个形式表单

！- data-netlify='true '表明使用形式功能netlify-蜜罐='bot-field '指定机器人识别字段-模板表单id='app '方法='POST '名称='联系人'数据-netlify=' true ' netlify-蜜罐='bot-field ' @提交。防止='处理提交'输入名称=' bot-field '隐藏标签为='用户名'用户名：输入类型='text' id='username '占位符='请输入你的用户名name=' username ' v-model=' form。用户名“/标签标签为='电子邮件'邮箱：输入类型='email' id='email '占位符='请输入你的邮箱name=' email ' v-model='表单。电子邮件/标签按钮类型=“提交”提交/按钮/表单/模板注意应用的根节点一定要保留id=' ' app '属性，否则经过静态化之后页面上绑定的事件会失效

在形式标签上监听使服从事件，并且阻止浏览器默认事件，使用爱可信提交邮政请求

纱线添加爱可信

handleSubmit() { axios .发帖('/'，这个。编码({ ' form-name ' : ' contact '，//请求数据一定要加上表单名称属性.this.form })，{ header : { ' Content-Type ' : ' application/x-www-form-URL编码' } }).然后(()={ alert('提交成功');}) .catch(()={ alert('提交失败');});}安装预渲染插件prerender-spa插件github.com/chrisvfritz…,作用是静态化某视频剪辑软件应用，一定要预渲染某视频剪辑软件应用，因为如果是通过射流研究…渲染的页面，内特利是解析不到形式表单的

纱线添加先决条件spa插件-开发新建一个vue.config.js文件用来扩展工具配置

const path=require(' path ')const PrerenderSPAPlugin=require(' prerender-spa-plugin ')模块。exports={ configureweb pack k :()={ if(process。ENV。node _ ENV！=='生产')返回返回{ plugins :[new PrerenderSPAPlugin({ static dir :路径。join(_ dirname，' dist ')，routes: ['/'] }) ] } }完整代码如下

模板！- data-netlify='true '表明使用形式功能netlify-蜜罐='bot-field '指定机器人识别字段-表单id='app '方法='POST '名称='联系人'数据-netlify=' true ' netlify-蜜罐='bot-field ' @提交。防止='处理提交'输入名称=' bot-field '隐藏标签为='用户名'用户名：输入类型='text' id='username '占位符='请输入你的用户名name=' username ' v-model=' form。用户名“/标签标签为='电子邮件'邮箱：输入类型='email' id='email '占位符='请输入你的邮箱name=' email ' v-model='表单。电子邮件/标签按钮类型=“提交”提交/按钮/表单/模板脚本从“axios”导入axios；导出默认{ name: 'app '，data(){ return { form : { username : ' '，email: ' ' } }}，methods: { encode(数据){返回对象键(数据)。map(key=` $ { encodeURIComponent(key)}=$ { encodeURIComponent(data[key])} `).join(' ')；}，handleSubmit() { axios .发帖('/'，这个。编码({ '表单名称' : '联系人'，this.form })，{ header : { ' Content-Type ' : ' application/x-www-form-URL编码' } }).然后(()={ alert('提交成功');}) .catch(()={ alert('提交失败');});} }};/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}标签{ display: block}/样式部署

在Github上新建仓库，上传代码，然后点击Netlify上的New site表单Git进行授权，授权完成后选择要部署的项目仓库

填写构建命令，然后单击“部署站点”按钮

经过一段时间的等待，该地址成功部署，没有任何意外的应用程序

注意提交数据中的表单名称属性，否则Netlify将不会收到数据并返回404错误

输入测试数据，然后单击提交，在Netlify的站点操作面板中查看数据

摘要

以上就是边肖介绍的在Vue应用中使用Netlify形函数的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！