Home / Questions / 17600
Accepted
Sergio Romero
Asked: 2020-07-24 21:48:50 +0800 CST 2020-07-24 21:48:50 +0800 CST

使用角度 2 从数据库中获取信息

  • 772

我是 angular 2 的新手，我在大学项目中使用了 angular 1x。

我的问题是 Angular 2，你能从数据库中获取信息吗？

例如 MySQL 中的数据库，但我的问题是如何。在 Angular 1 中，我在 php 中创建了一个脚本，对数据库进行了查询，但在中它是一样的吗？如何从数据库中获取信息？

我见过的几乎所有示例都使用@angular/http该方法.get(<la url>) ，但使用文件.json而不是表中的记录。

有想过.php在查询服务器的组件的文件夹中放一个文件，但是不完全确定为什么http.get(<la url>) 不知道怎么把地址放在url中的方法中。我已经尝试过.json，一切都很好，但是从服务器带来数据我有疑问。

angularjs-2.0

3 Answers

  1. Best Answer

    虽然您可以直接从 Angular2 进行连接，但这是一种不好的做法，因为它涉及将数据库暴露给客户端。您提到的方法，连接到中间服务器是首选。

    为了发出请求，PHP 脚本必须托管在 Web 服务器上（即使它在同一台机器上）。这样，<la url>它将是您的脚本所在的 url，无论是在http://localhost/xxxx/tu_script.php还是托管它的地方。

    代码

    从广义上讲，仅作为示例

    来自 Angular2

    import {Http, Response} from 'angular2/http';


class Componente {
  data: Object;

  constructor(private http: Http) {
    http.get('http://localhost/xxxx/tu_script.php')  //usar la url que corresponda
        .map((res: Response) => res.json())
        .subscribe(
            res => this.data = res,
            err => console.error(err),
            () => console.log('Funciona!')
        );
  }
}

    在 PHP 中

    <?php

    //Conectar a MySQL y obtener los valores deseados.. 
    // En este ejemplo se asume que ya tenemos los datos en un array
    $json['query_de_bd'][] = array(
        'campo1' => 'valor1', 
        'campo2' => 'valor2',
        'etc'    =>  '...'
    );

    //Enviar headers y el JSON como respuesta
    header('Content-Type: application/json');
    header('Content-Type: text/html; charset=utf-8');
    echo json_encode($json);
?>
    • 3

  2. 要将数据从MySQL 数据库导入Angular 2，我建议使用以下方法。

    • 它使用Angular 2服务向RESTFul API发出请求。

    • 创建接收和返回JSON类型数据的服务器端RESTFul API ，以提高数据传输速度，以便您可以在Angular 2视图中正确处理它们。

    • 我建议您将Express与Node JS一起使用。

    查看如何发出请求并在视图中打印数据的示例。

    Angular 2 HTTP 请求

    • 3

  3. 如果技术相同，尽管 TypeScript 的代码当然会有所不同，但由于 angular 2 它具有 http 能够调用返回 json 的服务

    如果您查看文档

    http客户端

    你会看到在创建服务时它被导入

    import { Http, Response } from '@angular/http';

    正是通过这个，您将调用服务，它将使用http.get它返回一个可观察的（它相当于承诺）

    • 1