首页 > angular开发 > angular6.0使用教程:HTTP请求远程服务器数据

angular6.0使用教程:HTTP请求远程服务器数据

作者: 分类:angular开发 点击: 173 次
wordpress CMS主题:ssmay主题

    前面的章节我们介绍了angular6.0使用教程:angular通过反向代理实现跨域,angular6.0实现跨域后,我们就可以向远程服务器请求数据了。本章我们就来通过angular6.0的HTTP向远程服务器请求数据。

    在前面的章节中我们创建了主组件list【产品列表】和子组件post【产品详情】。当时我们没有使用远程数据,只是创建了一个数组数据来做测试。现在我们来让List组件请求获取远程服务器的数据。

    第一步:远程服务器是PHP环境,使用thinkphp接口文件:http://www.hestiahaus.cn/dream/index.php/home/index/angular    代码如下:

    //angular6 开发项目测试
    function angular(){
    $hots = M("post")->limit(10)->select();  //从数据库的post表中获取10产品信息
    $json = json_encode($hots);  //把数组转成json字符串
    echo $json;
    }

    这个远程服务器的域名地址,我们要放到angular的反向代理中。这里就不多说了,可以查阅前面的跨域章节。

    第二步:在根主件app.component.ts中引入HttpClientModule模块

    angular6.0中似乎已经取消对HTTP和JSONP模块的支持,而改用HttpClientModule模块

    import {HttpClientModule} from "@angular/common/http";  //引入HttpClientModule 模块
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule  //声明HTTP模块
    ],

    第三步:在list组件中使用HTTP模块向远程服务器请求数据【list.component.ts文件】:

    1:引入HTTP模块:

    import {HttpClient} from "@angular/common/http";  //这里是HttpClient
    

    2:在list组件的构造函数中实例化HttpClient

    constructor(private http:HttpClient) { }

    3:创建用来接收数据的变量:

    postList:any;

    4:通过HTTP的get方法请求数据:

    ngOnInit() {  //这个是初始化
      this.http.get("/api/index.php/home/index/angular")
         .subscribe(data=>{ this.postList = data })
    }
    这里的/api是前面跨域中的反向代理处理标识。
    get方法中接收的是一个接口文件的地址,它会接收接口传递过来的数据,并默认处理为json数据。
    subscribe方法是对get接收的数据进行处理。参数data就是接收过来的数据对象。然后把data对象赋值给postList变量。

    5:前台输出【list.component.html文件】:

    <ul *ngFor="let v of postList"> 循环输出postList对象数据
      <a routerLink="/post/{{v.id}}"> 这里的routerLink是angular的a链接形式
        <img src="{{v.thumb}}" alt=""> 这里的v.thumb是调用postList对象的每条数据的thumb缩略图
        <h3>{{v.name}}</h3>
      </a>
    </ul>

    这时,再打开前台页面,就可以看到输出的数据信息了。

文章作者:高时银博客
本文地址:http://wanlimm.com/77201806215711.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:
wordpress CMS主题:ssmay主题

或许你会感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.