亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2019年06月03日 16:40:06   作者:輕劍快馬  
Netlify 帶有內(nèi)置表單處理功能,可以用來存儲表單數(shù)據(jù),下載 csv 文件,同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過配置 webhook 發(fā)送請求。這篇文章主要介紹了在 Vue 應(yīng)用中使用 Netlify 表單功能,需要的朋友可以參考下

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

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

開發(fā)

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

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

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

<!--
 data-netlify="true" 表明使用 form 功能
 netlify-honeypot="bot-field" 指定機(jī)器人識別字段
 -->
<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>

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

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

yarn add axios

handleSubmit() {
 axios
 .post(
  "/",
  this.encode({
  "form-name": "contact", // 請求數(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)槿绻峭ㄟ^ js 渲染的頁面, Netlify 是解析不到 form 表單的

yarn add prerender-spa-plugin --dev

新建一個 vue.config.js 文件用來擴(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ī)器人識別字段
 -->
 <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 上點(diǎn)擊 New site form Git,進(jìn)行授權(quán),完成授權(quán)后選擇要部署的項(xiàng)目倉庫

 

 填寫構(gòu)建命令,點(diǎn)擊 Deploy site 按鈕

 

 經(jīng)過一段時(shí)間的等待,不出意外應(yīng)用就部署成功了地址 

 

注意在提交數(shù)據(jù)中一定要有 form-name 屬性,否則 Netlify 會接收不到數(shù)據(jù),返回 404 錯誤

 

 輸入測試數(shù)據(jù),點(diǎn)擊提交就可以在 Netlify 的站點(diǎn)操作面板看到數(shù)據(jù)了

 

總結(jié)

以上所述是小編給大家介紹的在 Vue 應(yīng)用中使用 Netlify 表單功能的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG詳解

    利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG詳解

    Vite作為一個構(gòu)建工具,提供了一種快速的方法來構(gòu)建Vue應(yīng)用,而Vue3?則是一個前端框架,提供了強(qiáng)大的功能來構(gòu)建和管理前端項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • vue-cli webpack 開發(fā)環(huán)境跨域詳解

    vue-cli webpack 開發(fā)環(huán)境跨域詳解

    本篇文章主要介紹了vue-cli webpack 開發(fā)環(huán)境跨域詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue 右鍵菜單插件 簡單、可擴(kuò)展、樣式自定義的右鍵菜單

    vue 右鍵菜單插件 簡單、可擴(kuò)展、樣式自定義的右鍵菜單

    這篇文章主要介紹了vue 右鍵菜單插件 簡單、可擴(kuò)展、樣式自定義的右鍵菜單,本文給大家分享個例子,給大家及時(shí)的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-11-11
  • vue項(xiàng)目打包:修改dist文件名方式

    vue項(xiàng)目打包:修改dist文件名方式

    這篇文章主要介紹了vue項(xiàng)目打包:修改dist文件名方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue項(xiàng)目打包部署全過程(history模式)

    Vue項(xiàng)目打包部署全過程(history模式)

    vue項(xiàng)目中我們比較常用的模式為hash和history模式,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的全過程,講解的是vue-router中history模式的部署,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • vue引用public文件夾中文件的多種方式

    vue引用public文件夾中文件的多種方式

    由于一些演示需要對一些簡單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時(shí)候不會進(jìn)行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下
    2024-02-02
  • vue中的cookies緩存存值方式 超簡單

    vue中的cookies緩存存值方式 超簡單

    這篇文章主要介紹了vue中的cookies緩存存值方式,超簡單!具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue組件高級通訊之$children與$parent

    Vue組件高級通訊之$children與$parent

    這篇文章主要為大家介紹了Vue組件高級通訊之$children與$parent,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • VUE前端實(shí)現(xiàn)token的無感刷新方式

    VUE前端實(shí)現(xiàn)token的無感刷新方式

    這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無感刷新方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue3中#default=“scope”的使用

    Vue3中#default=“scope”的使用

    在Vue3中,我們經(jīng)常會遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下
    2023-10-10

最新評論