VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    建站教程 2019年11月09日 关键词:,,,,

    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表单校验的几种基本使用

    广而告之:
    热门推荐:
    JS简单判断是否在微信浏览器打开的方法示例

    本文实例讲述了JS简单判断是否在微信浏览器打开的方法。分享给大家供大家参考,具体如下: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中,点击下载链接无法下载应用。那么针对这些浏览器我们需要给···

    影响PHP+MYSQL执行速度的写法对比第1/7页

    <?php  include_once("../db.php");  if($_GET[x2]==0 and $_GET[x1]==0)  {  $t=" s1='' ";  }else  {  if($_GET[x2]!=0)  {  $t=" x2='$_GET[x2]' ";  }else  if($_GET[x···

    web2.0产品以及功能简单介绍

    什么是web2.0?web2.0包括那些社会化网络产品以及功能简介 Web2.0,是相对Web1.0的新的一类互联网应用的统称。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。Web2.0是以 Blog、TAG、SN···

    preg

    preg_match_all — 进行全局正则表达式匹配 说明 复制代码 代码如下:int preg_match_all ( string pattern, string subject, array matches [, int flags] ) 在 subject 中搜索所有与 pattern 给出的正则表达式匹配的内容并将结果以 flags 指定的顺序放到 matches 中。搜···

    php htmlspecialchars加强版

    复制代码 代码如下: //取消HTML代码 function shtmlspecialchars($string) { if(is_array($string)) { foreach($string as $key => $val) { $string[$key] = shtmlspecialchars($val); } } else { $string = preg_replace(‘/&((#(\d{3,5}|x[a-fA-F0-9]{4})|[a-zA-···

    VSCode配置react开发环境的步骤

    vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ESLint 和 Prettier 插件可以实现在 vscode 中完美支持 JSX 语法。 编辑···

    [js高手之路]寄生组合式继承的优势详解

    在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){ this.skills = [ 'php', 'javascript' ]; this.userName = uName; } Person.prototype.showUserName = function(){ retur···

    微信公众号之主动给用户发送消息功能

    前一段时间项目中遇到一个稍微麻烦一点的问题。 即客户要求,他在后台编辑好文章后要主动给每个用户都发送消息,并可以让用户点击直接进入文章页面。 于是乎,当时脑子一热,想着没什么大的问题,so easy。模板消息不就得了。 后来在写代码的过程中却发现,并不行。 微信公众号···

    angular5 子组件监听父组件传入值的变化方法

    项目中遇到一个问题,就是在ngInit()中调用方法,只调用一次的问题,当父组件传值变化时,并不会再次执行。 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'cs-img···

    织梦dedecms系统判断栏目子栏目是否存在

    在实际使用“织梦全站调用二级栏目以及子栏目”时遇到一个问题,网站的一些二级栏目并没有子栏目,织梦就把同级栏目调用出来了。这样的话,给客户的感觉明显是不好的!  后来咨询了一下QQ群内的高手,发现问题出现在织梦的程序上面!  打开:i···