在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解

發(fā)布時(shí)間：2020-09-15 03:10:42 來(lái)源：腳本之家閱讀：160 作者：輕劍快馬欄目：web開(kāi)發(fā)

Netlify 帶有內(nèi)置表單處理功能，可以用來(lái)存儲(chǔ)表單數(shù)據(jù)，下載 csv 文件，同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過(guò)配置 webhook 發(fā)送請(qǐng)求。

它是通過(guò)在部署應(yīng)用時(shí)直接解析 HTML 文件，識(shí)別 html 中的 form 標(biāo)簽來(lái)實(shí)現(xiàn)的，本文記錄如何在一個(gè) Vue 應(yīng)用中使用表單功能。

開(kāi)發(fā)

首先使用@vue/cli 新建一個(gè) Vue 應(yīng)用，完成一系列步驟后，運(yùn)行應(yīng)用

vue create my-awesome-app
...
yarn serve

創(chuàng)建一個(gè) form 表單

<!--
 data-netlify="true" 表明使用 form 功能
 netlify-honeypot="bot-field" 指定機(jī)器人識(shí)別字段
 -->
<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="請(qǐng)輸入你的用戶名"
  name="username"
  v-model="form.username"
  >
 </label>
 <label for="email">
  郵箱：
  <input type="email" id="email" placeholder="請(qǐng)輸入你的郵箱" name="email" v-model="form.email">
 </label>
 <button type="submit">Submit</button>
 </form>
</template>

注意應(yīng)用的根節(jié)點(diǎn)一定要保留 id=''app" 屬性，否則經(jīng)過(guò)靜態(tài)化之后頁(yè)面上綁定的事件會(huì)失效

在 form 標(biāo)簽上監(jiān)聽(tīng) submit 事件，并且阻止瀏覽器默認(rèn)事件，使用 axios 提交 post 請(qǐng)求

yarn add axios

handleSubmit() {
 axios
 .post(
  "/",
  this.encode({
  "form-name": "contact", // 請(qǐng)求數(shù)據(jù)一定要加上 form-name 屬性
  ...this.form
  }),
  {
  header: { "Content-Type": "application/x-www-form-urlencoded" }
  }
 )
 .then(() => {
  alert("提交成功");
 })
 .catch(() => {
  alert("提交失敗");
 });
}

安裝預(yù)渲染插件 prerender-spa-plugin github.com/chrisvfritz… ，作用是靜態(tài)化 Vue 應(yīng)用，一定要預(yù)渲染 Vue 應(yīng)用，因?yàn)槿绻峭ㄟ^(guò) js 渲染的頁(yè)面， Netlify 是解析不到 form 表單的

yarn add prerender-spa-plugin --dev

新建一個(gè) vue.config.js 文件用來(lái)擴(kuò)展 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" 指定機(jī)器人識(shí)別字段
 -->
 <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="請(qǐng)輸入你的用戶名"
  name="username"
  v-model="form.username"
  >
 </label>
 <label for="email">
  郵箱：
  <input type="email" id="email" placeholder="請(qǐng)輸入你的郵箱" 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 上新建一個(gè)倉(cāng)庫(kù)，上傳代碼，之后在 Netlify 上點(diǎn)擊 New site form Git，進(jìn)行授權(quán)，完成授權(quán)后選擇要部署的項(xiàng)目倉(cāng)庫(kù)