dbを使わず静的サイトを構築をしています。
お問い合わせフォームを作りたいのですが、本番環境はftpサーバなので、node mailerは使えません。
そこでphpmailerを使うことにして、nuxtjs のaxiosでやり取りをしようとしたのですが、
npm run devの環境では何とかエラーなしでrequestを送れているものの、responseがhtmlコードが戻ってきてしまいます。
npm run generate を叩いて静的サイトを構築してから試したら,undefinedが戻ってきてしまいます。
要は↓
*xampp環境でのphpにnuxtからhttp requestを送ってメール送信はxamppからの環境でphpに行ってもらいresponseをnuxtjsに戻したいという考え方です。
*phpファイルはローカルでnuxtが起動しているサーバと別にローカルでのxampp環境で起動されています
index.vue (axiosを送ろうととしているvue)
<template>
<div id="contanct" class="container mx-auto my-56 max-w-90">
<div class="content-title mb-20">
<h1 class="text-2xl text-gray-700">お問い合わせ</h1>
<div class="under-line h-2 w-32 bg-red-300 mb-20"></div>
<form @submit.prevent="formCheck()" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
<div class="-mx-3 md:flex mb-6">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="grid-first-name">
氏
</label>
<input
v-model="first_name"
@keyup="check_invalid('first_name')"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3"
id="grid-last-name"
type="text"
placeholder="佐藤">
<p class="text-red text-xs italic">{{ errors.first_name_invalid }}</p>
</div>
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="grid-last-name">
名
</label>
<input
@keyup="check_invalid('last_name')"
v-model="last_name"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3"
id="grid-last-name"
type="text"
placeholder="本田">
<p class="text-red text-xs italic">{{ errors.last_name_invalid }}</p>
</div>
</div>
<div class="-mx-3 md:flex mb-6">
<div class="md:w-full px-3">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="grid-password">
メールアドレス
</label>
<input
@keyup="check_invalid('email_address')"
v-model="email_address"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3"
id="grid-password"
type="email"
placeholder="example@example.com">
<p class="text-red text-xs italic">{{ errors.email_address_invalid }}</p>
</div>
</div>
<div class="-mx-3 md:flex mb-6">
<div class="md:w-full px-3">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="grid-password">
メールアドレス
</label>
<textarea
@keyup="check_invalid('contact_info')"
v-model="contact_info"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3"
id="grid-textarea"
placeholder="ご用意を自由に書いてください。。。"
rows="10">
</textarea>
<p class="text-red text-xs italic">{{ errors.contact_info_invalid }}</p>
</div>
</div>
<button type="submit" class="inline-block py-3 text-xl text-white shadow bg-green-300">Send</button>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
},
head(){
return{
title:'お問い合わせ|わかば会計事務所',
}
},
transition (to, from) {
if (!from) { return 'slide-left' }
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
},
data(){
return{
first_name:'',
last_name:'',
email_address:'',
contact_info:'',
errors:{
first_name_invalid : '',
last_name_invalid : '',
email_address_invalid : '',
contact_info_invalid:''
}
}
},
methods:{
formCheck(){
if(this.first_name == ''){
return this.errors.first_name_invalid = '氏は必修項目です';
}
if(this.last_name == ''){
return this.errors.last_name_invalid = '名は必修項目です';
}
if(this.email_address == ''){
return this.errors.email_address_invalid = 'メールアドレスは必修項目です';
}
if(this.contact_info == ''){
return this.errors.contact_info_invalid = '要件も入力してください。';
}
//もし全部が入力されたら
if(this.first_name !== '' && this.last_name !== '' && this.email_address !== '' && this.contact_info !== ''){
this.send_data();
}
},
check_invalid(val){
switch (val) {
case 'first_name':
if(this.errors.first_name_invalid != '' && this.first_name != ''){
return this.errors.first_name_invalid = '';
}
break;
case 'last_name':
if(this.errors.last_name_invalid != '' && this.last_name != ''){
return this.errors.last_name_invalid = '';
}
break;
case 'email_address':
if(this.errors.email_address_invalid != '' && this.email_address != ''){
return this.errors.email_address_invalid = '';
}
break;
case 'contact_info':
if(this.errors.contact_info_invalid != '' && this.contact_info != ''){
return this.errors.contact_info_invalid = '';
}
break;
}
},
send_data(){
let params = new URLSearchParams();
params.append('text','test');
axios.post([URL],params
// {
// 'first_name' : this.first_name,
// 'last_name' : this.last_name,
// 'email_address' : this.email_address,
// 'contact_info' : this.contact_info,
// }
).then(function (Response) {
console.log('res');
console.log(Response.data)
}).catch(error =>{
console.log(error.data);
})
}
}
}
</script>
<style lang="scss" scoped>
.text-red{
color: red;
}
</style>
mail.php 受け取るphpファイル
<?php
echo "hello";
?>
config.nuxt.js
.......
plugins: [
{ src: '~/plugins/axios.js', mode: 'client'}
],
axios: {
proxy: true,
},
proxy:{
'/send_email' : {target: 'http://localhost:3000', pathRewrite: {'^/vendor/phpmailer': '/'}}
},
......
axios.js
axios.jsではaxiosの外部アクセス権限をオッケーにしています
export default function({ $axios, redirect }) {
$axios.setToken('access_token')
$axios.onResponse(config => {
$axios.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
})
$axios.onError(error => {
if(error.response.status === 500) {
redirect('/404')
}
})
$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', [
'post'
])
}
response.data の結果
<!doctype html>
<html >
<head >
<title>ashitamo</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="for test nust js"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/runtime.js" as="script"><link rel="preload" href="/_nuxt/commons.app.js" as="script"><link rel="preload" href="/_nuxt/vendors.app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"><link rel="preload" href="/_nuxt/app.117ae7e03df8c389b7a6.hot-update.js" as="script">
</head>
<body >
<div id="__nuxt"><style>#nuxt-loading { visibility: hidden; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; animation: nuxtLoadingIn 10s ease; -webkit-animation: nuxtLoadingIn 10s ease; animation-fill-mode: forwards; overflow: hidden;}@keyframes nuxtLoadingIn { 0% {visibility: hidden;opacity: 0; } 20% {visibility: visible;opacity: 0; } 100% {visibility: visible;opacity: 1; }}@-webkit-keyframes nuxtLoadingIn { 0% {visibility: hidden;opacity: 0; } 20% {visibility: visible;opacity: 0; } 100% {visibility: visible;opacity: 1; }}#nuxt-loading>div,#nuxt-loading>div:after { border-radius: 50%; width: 5rem; height: 5rem;}#nuxt-loading>div { font-size: 10px; position: relative; text-indent: -9999em; border: .5rem solid #F5F5F5; border-left: .5rem solid #fff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: nuxtLoading 1.1s infinite linear; animation: nuxtLoading 1.1s infinite linear;}#nuxt-loading.error>div { border-left: .5rem solid #ff4500; animation-duration: 5s;}@-webkit-keyframes nuxtLoading { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }}@keyframes nuxtLoading { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }}</style><script>window.addEventListener('error', function () { var e = document.getElementById('nuxt-loading'); if (e) {e.className += ' error'; }});</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div>
<script type="text/javascript" src="/_nuxt/runtime.js"></script><script type="text/javascript" src="/_nuxt/commons.app.js"></script><script type="text/javascript" src="/_nuxt/vendors.app.js"></script><script type="text/javascript" src="/_nuxt/app.js"></script></body>
</html>