php - Angular 4 使用 PHP POST 到 MYSQL 数据库

Question

我已经搜索了两个星期来找到我的问题的答案，我觉得这个问题应该比较简单，但我一直没有使用正确的关键字。我知道 Angular 是前端框架，我可以使用任何我喜欢的数据库和后端。

对于一个学校项目，我正在创建一个带有 MySQL 数据库的 Ionic 3/Angular 4 应用程序，其中一项作业要求登录/注册系统。虽然有很多教程使用 Firebase 来做这件事，但我还没有看到任何关于 MySQL 的教程。

我的基本问题是，如何设置我的 register.ts 文件以在服务器上运行 PHP 文件并传递名称、用户名、电子邮件和密码等数据？我们在学校学习了基本的 PHP，但如果有有用的快速入门，我愿意使用 Node/Mongo - 我们不允许使用任何 BaaS，如 Firebase。

这是一些代码: 注册.ts文件

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

/**
 * Generated class for the RegisterPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

let user_id: any;
let headers = new Headers(
  {
    'Content-Type' : 'application/x-www-form-urlencoded'
  });





@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {

  @ViewChild('username') username;
  @ViewChild('email') email;
  @ViewChild('firstname') firstname;
  @ViewChild('password') password;
  @ViewChild('confirmpass') confirmpass;
  //successfully gets this data from the form on the HTML register page


  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public http: Http) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RegisterPage');
  }

registerUser() {
  //runs this when register button is pressed
  //bad validation, but what can ya do 
  if (this.password.value != this.confirmpass.value) {
    console.log("confirm pass and password don't match");
    let confirm = this.alertCtrl.create({
    title: 'Sorry!',
    message: 'Password & Confirm Password do not match',
    buttons: [
        {
          text: 'Okay',
          handler: () => {
            console.log('Disagree clicked');
          }
        }
      ]
    });
    confirm.present();
  } else {
//this is where I'm struggling
  let url: string = 'mySchoolsDB.com/myuser/insertuser.php';
  let responseData: any;
  let userData = {"firstname": this.firstname.value, "username": this.username.value, "password": this.password.value, "email": this.email.value };
    console.log('would register user with', this.username.value, this.password.value);

   console.log(userData);
    this.http.post(url, userData, {headers:headers, method:"POST"})
    .map(res => res.json())
    .subscribe(
        data => {
          console.log(data);
        },
        err => {
          console.log("ERROR!: ", err);
        }
    );
  }
}



}

insertuser.php

<?php

header('Access-Control-Allow-Origin: *');

$servername = "db.school.edu";
$dbusername = "myuser";
$dbpassword = "mypass";
$dbname = "mydbname";


$firstname = $_POST['firstname'];
$password = $_POST['password'];
$username = $_POST['username'];
$email = $_POST['email'];
// Create connection
$conn = mysqli_connect($servername, $dbusername, $dbpassword, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
} 

$sql = "INSERT INTO users (firstname, email, username, password)
VALUES ('$firstname', '$email', '$username', '$password')";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error:  " . $sql . "<br>" . mysqli_error($conn);
} 

mysqli_close($conn);
?>

Answer 1

下面是你需要修改的两行

第一个变化:

let headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});

到:

let headers = new Headers({'Content-Type': 'application/json'});

---

第二

改变

this.http.post(url, userData, {headers:headers, method:"POST"})

收件人:

this.http.post(url, userData, {headers}).map(...)....