交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    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如何使用rules对表单字段进行校验
    • vue form 表单提交后刷新页面的方法
    • vue 使用自定义指令实现表单校验的方法
    • vue表单自定义校验规则介绍
    • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
    • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
    • vue使用Element组件时v-for循环里的表单项验证方法
    • vue中vee validate表单校验的几种基本使用

    广而告之:
    热门推荐:
    简介JavaScript中getUTCMonth()方法的使用

     javascript Date.getUTCMonth()方法返回按照通用时间在指定日期的月份。由getUTCMonth返回的值是0和11之间的整数对应的月份。 0代表一月,1代表二月,2表 示三月份,依此类推。 语法 Date.getUTCMonth() 下面是参数的详细信息:     NA 返回值: 按照通···

    微信小程序滑动选择器的实现代码

    本文介绍了微信小程序滑动选择器的实现代码,分享给大家,具体如下: 实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以···

    帝国cmsSQL调用已注册会员人数和最新会员名称

    <?php $members=$empire->gettotal("select count(*) as total from phome_enewsmember"); $newmember=$empire->fetch1("select userid,username from phome_enewsmember order by userid desc limit 1"); ?> 会员总人数:<?=$members?> <br> 最新会···

    Mysql中replace与replace into的用法讲解

    Mysql replace与replace into都是经常会用到的功能;replace其实是做了一次update操作,而不是先delete再insert;而replace into其实与insert into很相像,但对于replace into,假如表中的一个旧记录与一个用于PRIMARY KEY或一个UNIQUE索引的新记录具有相同的值,则在新记录被···

    固定 table宽度 table-layout: fixed

    为了让表格能够填充屏幕(剩余空白区域),常将其宽度属性定义为:100%,单元格也是用百分数来定义。 但这样就会出现问题: 如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,很难看。 很容易想到的解决方法是,禁用文本换行:···

    elementUI select组件默认选中效果实现的方法

    首先,v-model的值为当前被选中的el-option的 value 属性值 需求:进入编辑页面,状态栏默认选中生效,如下显示: html部分代码: <el-form-item label="状态"> <el-select v-model="form.status" placeholder="请选择"> <el-option v-for="item···

    Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

    需求: 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置; 2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸; 需要注意的点: window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效。 解决“多···

    "PageMethods未定义"或"对象不支持此属性或方法"解决方法分享

    1.检查web.config中是否加入对于asp.net ajax的支持的代码 2.检查ScriptManager中是否设置了EnableMethods=true 3.检查后台cs中是否引用的命名空间System.Web.Services或者加入了[System.Web.Services.WebMethod] 4.后台函数必须是public static 5. 还有一种情况就是,···

    将Excel中数据导入到Access数据库中的方法

    Default.aspx 复制代码 代码如下:<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans···

    详解CSS中的Box Model盒属性的使用

    页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成。从内到外分别是: content -> padding -> border -> margin按理来说一个元素的宽度(高度以此类推)应该···