denbeke/mailbear

🐻 MailBear: 表单后端

![Build Status]([] ![Go Report Card]([]

MailBear是一个开源的自托管表单后端。只需向API发送包含表单数据的POST请求，MailBear就会确保提交内容通过邮件发送给你！

MailBear始终隐藏收件人的***地址，因为表单通过唯一密钥访问。

用Docker运行

你可以轻松通过Docker运行MailBear：

将config_sample.yml复制到config.yml并运行服务器：

bash
docker run -v $(PWD)/config.yml:/mailbear/config.yml denbeke/mailbear

为方便起见，我创建了一个docker-compose.yml文件。

开发环境运行

将config_sample.yml复制到config.yml并运行服务器：

bash
go run cmd/mailbear/main.go

配置

配置非常简单。只需在config.yml中创建任意数量的表单：

yaml
global:
    smtp:
        host: smtp.example.com
        port: 25
        user:
        password:
        disable_tls: true
        from_email: no-reply@example.com
        from_name: MailBear
    http:
        address: ":1234"


forms:
    some-form-name:
        key: some-random-key
        allowed_domains:
            - localhost:8080
            - example.com
        to_email:
            - recepient@example.com

使用方法

MailBear运行后，你可以在JSON体中发送包含表单数据的请求：

bash
curl \
    -X POST \
    http://localhost:1234/api/v1/form/some-random-key \
    -H 'Content-Type: application/json' \
    -H 'Origin: http://localhost:8080' \
    -d '{"name":"Joe","email":"joe@example.com", "subject": "Some subject", "content": "Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis."}'

示例

与VueJS结合使用

html
<template>
    <div id="contact">
  
      <div class="form" >

  
          <form @submit.prevent="submit">
  
              <div class="form-overlay" v-if="loading">
                  <font-awesome-icon icon="circle-notch" spin />
              </div><!-- form-overlay -->
  
              <div>
                  <div class="status" v-if="status !== ''">
                      <span v-if="status === 'success'">你的邮件已成功发送。</span>
                      <span v-if="status === 'error'">发送邮件时出现问题。</span>
                  </div>
              </div>
  
              <div>
                  <input type="text" name="name" v-model="form_data.name" placeholder="姓名或公司" required />
              </div>
  
              <div>
                  <input type="email" name="email" v-model="form_data.email" placeholder="邮箱" required />
              </div>
  
              <div>
                  <input type="text" name="subject" v-model="form_data.subject" placeholder="主题" required />
              </div>
  
  
              <div>
                  <textarea type="text" name="content" v-model="form_data.content" placeholder="消息" rows="6" required />
              </div>
  
  
              <div>
                  <button type="submit">发送</button>
              </div>
          
        </form>
  
      </div>
  
    </div><!-- contact -->
</template>
  
<script>

import config from '../config'


export default {
    name: 'Contact',
    components: {
    },
    data: function() {
        return {
            contact_text: "",
            form_data: {
                name: "",
                email: "",
                subject: "",
                content: ""
            },
            status: "",
            loading: false
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        clearForm: function() {
            this.form_data.name    = "";
            this.form_data.email   = "";
            this.form_data.subject = "";
            this.form_data.content = "";
        },
        submit: function(e) {
            e.preventDefault();

            var self = this
            self.loading = true
            
            this.axios.post(config.MAILBEAR_URL + `/api/v1/form/10810dce-1074-4988-a8f5-4c538a749a95`, this.form_data)
            .then(response => {
                self.status = "success"
                self.clearForm()

                return response
            })
            .catch(error => {
                self.status = "error"
                console.log(error)
            })
            .then(function () {
                // 始终执行
                self.loading = false
            })
        }
    }
}
</script>

<style lang="scss">
/*
 * 样式已从本示例中省略。
 * 请在 ./examples/vuejs_example.vue 中查找。
 */
</style>

与jQuery结合使用

html
<form id="contact-form" class="pure-form">
            
    <div class="meta">
        <input type="text" name="name" placeholder="姓名">
        
        <input type="email" name="email" placeholder="邮箱">

        <input type="text" name="subject" placeholder="主题">
    </div><!-- .meta -->
    
    
    <textarea name="content" placeholder="你的消息" rows="7"></textarea>
    
    <button type="submit" class="">
        <i class="fa fa-send-o"></i> 发送
    </button>

    
    <div class="overlay">
        <div> 
        </div>
    </div><!-- .overlay -->
    
    
</form>



<script>
    $( document ).ready(function() {    
        
        var $contactForm = $('#contact-form');
        $contactForm.submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'https://mailbear.yourdomain.com/api/v1/form/10810dce-1074-4988-a8f5-4c538a749a95',
                method: 'POST',
                data: $(this).serialize(),
                dataType: 'json',
                beforeSend: function() {
                    $contactForm.find('.overlay div').html('<div class="alert alert--loading"><i class="fa fa-circle-o-notch fa-spin"></i> &nbsp; 正在发送消息...</div>');
                    $contactForm.find('.overlay').fadeIn();
                },
                success: function(data) {
                    $contactForm.find('.alert--loading').hide();
                    $contactForm.find('.overlay div').html('<div class="alert alert--success"><i class="fa fa-check"></i> &nbsp; 消息发送成功！</div>');
                    $contactForm.find('.overlay').fadeIn();
                },
                error: function(err) {
                    $contactForm.find('.alert--loading').hide();
                    $contactForm.find('.overlay div').html('<div class="alert alert--error"><i class="fa fa-warning"></i> &nbsp; 哎呀，出了点问题。</div>');
                    $contactForm.find('.overlay').fadeIn();
                }
            });
        });
        $contactForm.find('.overlay').click(function(e) {
            $(this).fadeOut(); 
        });                
    });
</script>

监控指标

Prometheus指标默认可在:9090/metrics获取。要查看每个表单的提交统计，请使用指标：mailbear_form_submissions_total{form="some-form-name"}。

Grafana仪表板可在此处获取：./grafana/dashboard.json

致谢

• https://github.com/labstack/echo
• https://github.com/sirupsen/logrus
• https://github.com/go-yaml/yaml
• https://github.com/go-mail/mail
• https://github.com/badoux/checkmail
• https://github.com/globocom/echo-prometheus
• https://github.com/prometheus/client_golang

作者

Mathias Beke