Question

我已经在localhost / send上设置了具有post方法的节点快递服务器，在localhost上设置了vue应用。

即使在远程计算机上，Vue应用程序也可以完美运行。

发布请求需要json对象，并通过nodemailer发送邮件。当我通过邮递员应用程序发出发帖请求时，它可以工作。

当我想通过Vue应用程序（axios）发送发出发帖请求的电子邮件时，出现问题。我将整个电子邮件数据存储在Vuex中，并在组件中使用“计算”来使用它。我可以呈现数据，但是在我的电子邮件中，整个数据是不确定的。

我在做什么错了？

以下代码：

节点服务器

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const path = require('path');

const app = express();

app.use('/', express.static(path.join(__dirname, 'render')));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname+'/render/index.html'));
});
app.post('/send', (req, res) => {
  const email = {
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    startPoint: req.body.startPoint,
    endPoint: req.body.endPoint,
    dateTime: req.body.dateTime
  };
    // create reusable transporter object using the default SMTP transport
    let transporter = nodemailer.createTransport({
      host: 'mail.advertidea.pl',
      port: 587,
      secure: false, // true for 465, false for other ports
      auth: {
          user: 'emailIsCorrect', // generated ethereal user
          pass: 'passIsCorrect'  // generated ethereal password
      },
      tls:{
        rejectUnauthorized:false
      }
    });

  // mail for admin
  // setup email data with unicode symbols
  let adminMailOptions = {
    from: '"GoodTransfer" <test@advertidea.pl>', // sender address
    to: 'kamil.grzaba@gmail.com', // list of receivers
    subject: 'New transfer request', // Subject line
    html: `<p>${email.name}, asks for transfer.<p><br>
          <p>Transfer details:</p><br><br>
          <p>starting point: ${email.startPoint}</p>
          <p>ending point: ${email.endPoint}</p>
          <p>date and time: ${email.dateTime}</p><br><br>
          <p>clients email: ${email.email}</p>
          <p>phone number: <a href="tel:${email.phone}">${email.phone}</a></p>` // html body
  };

  // send mail with defined transport object
  transporter.sendMail(adminMailOptions, (error, info) => {
      if (error) {
          return console.log(error);
      }
      console.log('Message sent: %s', info.messageId);
      console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
  });

Vuex商店

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    email: {
      name: '',
      email: 'test@test.pl',
      phone: '',
      startPoint: '',
      endPoint: '',
      date: new Date().toISOString().substr(0, 10),
    },
  },
  getters: {
    email: state => state.email,
  },
  mutations: {
    updateEmail(state, email) {
      this.state.email = email;
    },
  },
  actions: {

  },
});

Vue组件

import axios from 'axios';

export default {
  name: 'Book',
  data() {
    return {
      newEmail: '',
      valid: false,
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid',
      ],
    };
  },
  computed: {
    email: {
      get() {
        return this.$store.state.email;
      },
      set(value) {
        this.$store.commit('updateMessage', value);
      },
      /* return this.$store.getters.email; */
    },
  },
  methods: {
    submitForm() {
      console.log(JSON.stringify(this.email));
      axios.post('http://goodtransfer.pixelart.pl/send', JSON.stringify(this.email), 'json')
        .then((res) => {
          console.log(res);
          console.log(res.data);
        });
    },
  },
};

Answer 1

好的，我刚刚发现了问题所在。通过axios发出请求时，应使用对象作为有效负载，而不是分层的数据。

通过axios（Vuex）发布请求时，计算对象未定义

1 个答案: