如何在我的vue项目中使用mailjet?

时间:2017-09-28 16:39:17

标签: javascript vue.js mailjet

我想使用mailjet作为contac我安装" $ yarn add node-mailjet" 我按照步骤操作,但如果我使用的是mailjet这是我的代码,我有点困惑:

contact.vue:

  <form accept-charset="UTF-8" action="/contacto" class="row" method="post" id="contactForm">

    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Nombre" name="contact[name]" id="contact_name" required>
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="email" class="form-control" placeholder="Correo Electronico" name="contact[email]" id="contact_email" required>
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Asunto" name="contact[issue]" id="contact_issue">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="input-group textarea">
        <textarea class="form-control" placeholder="Tu Mensaje" name="contact[comment]" id="contact_comment" required></textarea>
        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
      </div>
    </div>
    <div class="col-sm-12">
      <input type="submit" value="Enviar información" class="btn btn-danger active">
      <!--<a href="#" class="btn btn-danger active" @click="enviar()">Enviar</a>-->
    </div>
  </form>

脚本:

export default {
}
    var Mailjet = require('node-mailjet').connect('xxxxapi-keyxxx', 'xxxapi-secretxxxx');

// The third argument (the object) is not mandatory. Each configuration key is also optional
const mailjet = require('apiv3')
  .connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE, {
    url: 'api.mailjet.com', // default is the API url
    version: 'v3.1', // default is '/v3'
    perform_api_call: true // used for tests. default is true
  }),

var sendEmail = Mailjet.post('send');

var emailData = {
    'FromEmail': 'my@email.com',
    'FromName': 'My Name',
    'Subject': 'Test with the NodeJS Mailjet wrapper',
    'Text-part': 'Hello NodeJs !',
    'Recipients': [{
      'Email': 'example@gmail.com'
    }],
    'Attachments': [{
      "Content-Type": "text-plain",
      "Filename": "test.txt",
      "Content": "VGhpcyBpcyB5b3VyIGF0dGFjaGVkIGZpbGUhISEK", // Base64 for "This is your attached file!!!"
    }]
  },
  sendEmail
  .request(emailData)
  .then(handlePostResponse)
  .catch(handleError);

如果你能告诉我,我真的很感激,如果我在哪里,我有错误。

1 个答案:

答案 0 :(得分:0)

不幸的是,Mailjet是为后端服务器制作的,而vue是前端的,因此它将无法工作。

但是,您可以使用诸如emailjs.com之类的桥接服务来完成它,这就是我所追求的解决方法!