• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:HTTP请求远程服务器数据

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

    作者: 分类:angular开发 点击: 1,144 次
    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>

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



      QQ二维码

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

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

    或许你会感兴趣的文章:

    一条回应:“angular6.0使用教程:HTTP请求远程服务器数据”

    1. zgliuhouqing说道:

      很有用,刚好在学angular,谢谢!

    发表评论

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

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