- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的应用程序中使用联系表单。在此我将通过特定电子邮件 ID 发送联系表单详细信息。所有这些我都必须在 Angular 6 中完成。我已经使用 Nodemailer 尝试过此操作,但没有获得正确的程序来实现它。提前致谢
这是support.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { client, response } from '../../interface'
import { ClientService } from '../../services/client.service'
import { EmailService } from '../../services/email.service'
import { Store } from '@ngrx/store'
import { AppState } from '../../app.state'
@Component({
selector: 'app-support',
templateUrl: './support.component.html',
styleUrls: ['./support.component.css']
})
export class SupportComponent implements OnInit {
angForm: FormGroup;
osVersion: {};
browserName: {};
browserVersion: {};
userAgent: {};
appVersion: {};
platform: {};
vendor: {};
osName : {};
clientList: client[]
clientListLoading: boolean = false;
orgMail: any;
user: any;
constructor(public clientService: ClientService,private store: Store<AppState>,
private fb: FormBuilder,
private emailService: EmailService) {
store.select('client').subscribe(clients => this.clientList = clients.filter(cli => cli.enabled == 0))
this.user = JSON.parse(localStorage.getItem('user'))
console.log(this.user);
{
this.createForm();
}
}
createForm() {
this.angForm = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
message: ['', Validators.required],
});
}
sendMail(name, email, message) {
this.emailService.sendEmail(name, email, message).subscribe(success => {
console.log(success);
}, error => {
console.log(error);
});
}
ngOnInit() {
// this.browser_details();
}
}
HTML 文件:
<form [formGroup]="angForm" novalidate>
<div class="message">
<h3> Write to us </h3>
</div>
<div class="form__top">
<div class="form__left">
<div class="form__group">
<input class="form__input form__input--name" type="text" formControlName="name" placeholder="name" #name>
</div>
<div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['name'].errors.required">
Name is required.
</div>
</div>
<div class="form__group">
<input class="form__input form__input--email" type="email" formControlName="email" placeholder="email" #email>
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['message'].errors.required">
message is required.
</div>
</div>
</div>
<div class="form__right">
<div class="form__group">
<textarea class="form__input form__input--textarea" placeholder="Message" formControlName="message" #message
rows="3"></textarea>
</div>
<div *ngIf="angForm.controls['message'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['message'].errors.required">
message is required.
</div>
</div>
</div>
</div>
<div class="form__down">
<div class="form__group">
<button (click)="sendMail(name.value, email.value, message.value)" [disabled]="angForm.pristine || angForm.invalid" class="form__input form__input--submit" name="submit" type="submit" value="SEND MESSAGE">SEND MESSAGE
</button>
</div>
</div>
contact.js
const express = require('express');
const router = express.Router();
const request = require('request');
const nodemailer = require('nodemailer');
const cors = require('cors');
router.options('/send', cors());
router.get('/send', cors(), (req, res) => {
const outputData = `
<p>You have a new contact request</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 465,
secure: false,
port: 25,
auth: {
user: 'email',
pass: 'pass'
},
tls: {
rejectUnauthorized: false
}
});
let HelperOptions = {
from: '"kutomba" <email',
to: 'email',
subject: 'Majeni Contact Request',
text: 'Hello',
html: outputData
};
transporter.sendMail(HelperOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log("The message was sent!");
console.log(info);
});
});
module.exports = router;
服务器.js
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const app = express();
// CORS Middleware
app.use(cors());
// Port Number
const port = process.env.PORT || 3000
// Run the app by serving the static files
// in the dist directory
app.use(express.static(path.join(__dirname, '/majeni/dist/majeni')));
// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//routes
const contact = require('./app/components/support/contact');
app.use('/contact', contact);
// If an incoming request uses
// a protocol other than HTTPS,
// redirect that request to the
// same url but with HTTPS
const forceSSL = function () {
return function (req, res, next) {
if (req.headers['x-forwarded-proto'] !== 'https') {
return res.redirect(
['https://', req.get('Host'), req.url].join('')
);
}
next();
}
}
// Instruct the app
// to use the forceSSL
// middleware
// app.use(forceSSL());
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
if ('OPTIONS' == req.method) {
res.sendStatus(200);
} else {
next();
}
});
// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname + '/majeni/dist/majeni/index.html'));
});
// Start Server
app.listen(port, () => {
console.log('Server started on port '+port);
});
这是我的 email.service.ts
import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
@Injectable({
providedIn: 'root'
})
export class EmailService {
constructor(private http: Http) { }
sendEmail(name, email, message) {
const uri = 'http://localhost:4200/support/contact';
const obj = {
name: name,
email: email,
message: message,
};
return this.http.post(uri, obj);
}
}
最佳答案
您不应在 contact.js 上使用两个端口,并且端口 465 是安全端口,因此请替换:
port: 465,
secure: false,
port: 25,
auth: {
user: 'email',
pass: 'pass'
},
tls: {
rejectUnauthorized: false
}
对于:
port: 465,
secure: true,
auth: {
user: email,
pass: pass
}
在变量 email 和 pass 中,您应该设置发送电子邮件的帐户的电子邮件和密码(我建议仅为表单联系人创建一个新的电子邮件帐户,因为默认情况下,gmail 帐户不允许客户在未设置 DMARK e 的情况下登录) DKIM),并始终确保将此信息排除在 GitHub 等公共(public)代码存储库之外。
你可以在我的 github 上看到类似的代码:https://github.com/anajuliabit/my-website-backend/blob/master/src/Controllers/ContactController.js
关于node.js - 如何在 Angular 6 中将联系表单详细信息发送到电子邮件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54547323/
目录 进程 其他相关概念 创建线程的两种方式 为什么使用start()方法而不直接使用run()方法 start()方法底层
CURL状态码列表 状态码 状态原因 解释 0 正常访问
ODBC连接类函数 odbc_connect函数:打开一个ODBC连接 odbc_close函数:关闭一个已经打开的ODBC连接 odbc_close_all函数:关闭所有已经打开的ODBC连
作为标题,如何计算从纪元1900到现在使用boost的持续时间? 编辑:很抱歉以前的问题太短。我将再次描述我的问题。 我有关于将生日另存为整数的问题。我创建了四个函数,用法如下: ptime转换为整数
前言 在Java中,有一个常被忽略 但 非常重要的关键字Synchronized今天,我将详细讲解 Java关键字Synchronized的所有知识,希望你们会喜欢 目录 1. 定义 J
详细 JVM 垃圾收集日志的时间戳是收集的开始还是结束? 2016-08-09T21:04:19.756-0400: 224890.317: [GC Desired survivor size 167
我在“Master-Detail”概念上苦苦挣扎,除了一点点(但很重要)的细微差别外,几乎所有东西都按预期工作。我应该在 Storyboard上更改什么以在详细信息 View (屏幕截图底部的右上角)
我希望能够显示表格的详细 View ,但不推送新屏幕,而只显示表格所在的详细 View 。 设置它的最佳方式是什么......如果真的可行的话? ---------------------------
我在我的博客中为我的帖子使用了详细 View ,每篇帖子都有评论,所以我想对它们进行分页,但我不知道该怎么做,因为我请求了帖子模型。我知道如何在功能 View 中执行此操作,但不知道如何在详细 Vie
在下面的代码中,与 pm 对齐,该行是否会 move 整个内存并将其分配给 pm,或者它只会 move p 指向的内存而不是整个数组? int main() { int*
1·下载 https://dev.mysql.com/downloads/mysql/ 2·安装服务 1)管理员运行cmd 2)D: 3)cd D:\mysql
今天以前一直用的SQL Server 2005做开发,偶尔也用MySQL,现入手公司项目,用到SQL Server 2008,于是乎必须安装它,免得出现其他很纠结的小问题,现将自己安装图解分享如下:
1. crontab命令选项 复制代码 代码如下: #crontab -u <-l, -r, -e> -u指定一个用
我们有一个 WPF 应用程序,它有一个主窗口/详细信息窗口,两者都是 WPF 数据网格。当您在上部数据网格中选择一行时,详细信息将显示在下部数据网格中。我想知道从 UI 的角度来看是否有任何关于如何处
在可视化 Perforce 客户端 (p4v) 中有一个选项: 显示文件操作的 p4 命令输出 启用后,在日志 Pane 中,我可以看到这样的详细日志记录: p4 sync /Users/az/ftp
在其他服务器上设置测试环境后,在几个API调用中出现错误。 99%肯定这是MySQL的事情,但是返回的错误根本没有帮助: global name 'sys' is not defined" 我已经导入
我正在维护一个通用的 iOS 应用程序,其开发已开始于 iOS 6。我正在为 iOS 7 更新 UI。现在我遇到了应用程序的 iPad 部分的奇怪问题。这部分遵循使用 UISplitViewContr
我希望我能正确描述这种情况。当它发生时很容易在屏幕上看到,但很难用语言解释,但我会尽力而为。 我有一个带有固定主视图 (UITableView) 和两个详细 View 之一的 UISplitViewC
我尝试在 eclipse 和 intelliJ 参数中使用垃圾收集记录器来配置简单的测试程序。尝试了不同类型的配置,但尚未创建日志文件。 -XX:+PrintGCDetails -XX:+PrintG
正如您所知,.cap 文件中的 java 小程序的输出文件格式必须通过智能卡读卡器/写卡器(如 ACR122 或任何其他读卡器)部署到 java 卡,而且我相信 java 卡与 java 卡之间的部署
我是一名优秀的程序员,十分优秀!