Smo*_*son 5 javascript php email typescript angular
我正在尝试从我页面上的联系表单发送电子邮件,我正在使用PHP脚本将其发送到我的电子邮件,我正在按照本教程,我已经使用了他的示例,它确实有效. ..但我似乎无法让它在我的应用程序中工作,我一开始遇到一些麻烦,404但我发布了我的网站并把它放在一个实时服务器上,现在我得到了成功代码
但我没有收到电子邮件,所以我去了http://mysite/assets/email.php,我看到这个错误
获得功能于touch.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService, IMessage } from '../../services/email.service';
@Component({
selector: 'app-get-in-touch',
templateUrl: './get-in-touch.component.html',
styleUrls: ['./get-in-touch.component.scss'],
providers: [AppService]
})
export class GetInTouchComponent implements OnInit {
message: IMessage = {};
constructor(
private appService: AppService
) { }
ngOnInit() {
}
sendEmail(message: IMessage) {
this.appService.sendEmail(message).subscribe(res => {
console.log('AppComponent Success', res);
}, error => {
console.log('AppComponent Error', error);
});
}
}
Run Code Online (Sandbox Code Playgroud)
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '@angular/router';
import { AppComponent } from './app.component';
import { GetInTouchComponent } from './get-in-touch/get-in-touch.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { httpModule } from @angular/forms;
export const ROUTES: Routes = [
{ path: 'get-in-touch', component: GetInTouchComponent }
];
@NgModule({
declarations: [
AppComponent,
GetInTouchComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES),
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)
email.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Resolve } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
export interface IMessage {
name?: string;
email?: string;
message?: string;
}
@Injectable()
export class AppService {
private emailUrl = '../app/get-in-touch/email.php';
constructor(private http: Http) {
}
sendEmail(message: IMessage): Observable<IMessage> | any {
return this.http.post(this.emailUrl, message)
.map(response => {
console.log('Sending email was successfull', response);
return response;
})
.catch(error => {
console.log('Sending email got error', error);
return Observable.throw(error);
});
}
}
Run Code Online (Sandbox Code Playgroud)
email.php
<?php
header('Content-type: application/json');
$errors = '';
if(empty($errors)){
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$from_email = $request->email;
$message = $request->message;
$from_name = $request->name;
$to_email = $from_email;
$contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
$content = "<p>$message</p>";
$website = "Thirsty Studios";
$email_subject = "Contact Form";
$email_body = '<html><body>';
$email_body .= '$contact $content';
$email_body .= '</body></html>';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "From: $from_email\n";
$headers .= "Reply-To: $from_email";
mail($to_email,$email_subject,$email_body,$headers);
$response_array['status'] = 'success';
$response_array['from'] = $from_email;
echo json_encode($response_array);
echo json_encode($from_email);
header($response_array);
return $from_email;
} else {
$response_array['status'] = 'error';
echo json_encode($response_array);
header('Location: /error.html');
}
?>
Run Code Online (Sandbox Code Playgroud)
我以前从未做过这样的事(Angular + PHP),但是我已经完成了教程中所说的一切,我似乎无法让它工作,任何帮助都会受到赞赏,请告诉我,如果你需要更多信息
此时,似乎请求甚至没有到达您的 PHP 脚本,因为请求返回了 404。第一个错误可能会发生,因为节点服务器不会执行.php文件。您需要使用xammp (或您首选的替代方案)之类的东西在不同的端口上设置本地 Apache 服务器。或者以其他方式向实时网络服务器发出请求。
似乎第二条和第三条错误消息可能.catch来自电子邮件服务中的回调,请尝试使用以下命令:
.catch((error: Error) => {
console.log('Sending email got error', error.message);
return Observable.throw(error.message);
});
Run Code Online (Sandbox Code Playgroud)
有一些使用 PHP 的替代方案,例如formspree甚至Gmail API,我相信您会通过谷歌搜索找到其他方案。但这里是一个使用 fromspree 的示例。
您还应该能够稍微简化 PHP 脚本,如下所示:
<?php
$errors = '';
if( empty( $errors ) ) {
$response_array = array();
$from_email = $_POST['email'];
$message = $_POST['message'];
$from_name = $_POST['name'];
$to_email = $from_email;
$contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
$content = "<p>$message</p>";
$website = "Thirsty Studios";
$email_subject = "Contact Form";
$email_body = "<html><body>";
$email_body .= "$contact $content";
$email_body .= "</body></html>";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "From: $from_email\n";
$headers .= "Reply-To: $from_email";
mail( $to_email, $email_subject, $email_body, $headers );
$response_array['status'] = 'success';
$response_array['from'] = $from_email;
echo json_encode( $response_array );
} else {
$response_array['status'] = 'error';
echo json_encode($response_array);
}
?>
Run Code Online (Sandbox Code Playgroud)