第八章 Http服务与数据库

本章主要内容:

1.掌握Angualr中使用http获取数据的步骤

2.掌握使用http访问Json格式文件

3.掌握建立Firebase数据库的方法和使用http请求Firebase数据。

一、使用http获取数据

angular的http服务是用于从后台程序获取或更新数据的一种机制,通常情况下需要将与后台交换数据的模块做出angular服务,然后利用http获取更新后台数据,angular使用http的get或put进行后台调用采用的是ajax方式。在Angular开发中是使用一个专门的模块,使用时只要将该模块引入后,并实例化一个http对象,就可以调用该对象中对应的属性和方法实现相应的功能。具体实现步骤如下:

实例化http对象,使用以下格式获取后台数据

http.get(‘用于从后台获取数据’)

通过订阅方式来处理获取到的数据

subscribe((data) => console.log(data))

通常获取到的数据为json格式的,可以使用第三方库(rxjs)对json数据进行映射map()对数据进行映射

下面以改造新闻发布系统为例介绍使用http服务方式访问Json格式文件,并实现第七章的效果。

1.在项目的assets文件下创建一个news.json文件用于存储news的内容(json格式),Json文件格式如图8.1所示。

图8.1 json文件格式

2.在news.service中请求本地的json数据

(1)需要将HttpModule导入到项目的app.module.ts中:

import { HttpModule } from '@angular/http';

(2)获取json数据

1.constructor(private http: Http){

3.(datas) =>console.log(datas)//直接从控制台输出

4.);

5.}

上述代码表示在news.service的构造方法中使用http服务的get方式获取assets本地目录下的news.json文件内容,然后通过订阅的方式将数据通过控制台打印出来。但时此时的数据是不能传递给news.component使用的,所以需要使用第三方库将json数据进行映射。

3.使用第三方库(rxjs)对json数据进行映射

(2)用map()对json数据进行映射:

fetchData()方法表示将http请求的数据通过map映射后返回给调用者,以便在news.component中将返回的news数据显示在页面上。

8.2从Json文件获取数据

上述代码的getFindNews1()方法将原来的搜索方法进行了改造,因为此时news.service中的数据是由news.component传递过去的。即news.service中的搜索方法getFindNews1()的代码如下:

1.getFindNews1(findnews: FindArgs, myNews: News[]): News[] {

2.if (findnews.cates === '-1'){ //全部类别

5.}

9.}

由于此时detail组件中news不再是news.service中传递过来的数据,而是通过订阅方式从json文件中获得的数据,所以需要对detail组件的控制文件进行修改,其代码如下:

1.mynews: News[];

2.constructor(private route:ActivatedRoute, private newsService: NewsService) {

3.this.newsService.fetchData().subscribe(

4.(data) => {

5.this.mynews = data;

7.this.news =this.newsService.getNews1(this.newsId, this.mynews);

8.this.comments =this.newsService.getCommentForNews(this.newsId);

9.}

10.);

11.}

6.修改service中的根据新闻id搜索新闻的方法

同样,news.service中根据新闻id搜索新闻后,将搜索结果传递给detail组件页面显示的方法也要进行修改,其代码如下:

1.getNews1(id: number, mynews:News[]): News {

2.return mynews.find((news)=> news.id == id);

3.}

二、建立FireBase数据库

大部分时候,用户使用的数据都是存储在远程服务器上的,所以angular开发的Web也需要访问远程服务器上的数据,本节将以firebase数据为例介绍angular访问其的实现过程。

1.什么是FireBase

Firebase是一家实时后端数据库创业公司,它能帮助开发者很快的写出Web端和移动端的应用。自2014年10月Google收购Firebase以来,用户可以在更方便地使用Firebase的同时,结合Google的云服务。即,Firebase可以帮助手机以及网页应用的开发者轻松构建App。通过Firebase背后负载的框架就可以简单地开发一个App,无需服务器以及基础设施。无需管理基础架构,快速构建您的应用。

2.创建数据库的步骤

(1)打开https://firebase.google.com/网站,并登录。单击图8.3所示的页面右上角的“登录”,输入Gmail账号和密码就可以登录(如果没有,可以注册)。

图8.3登录firebase

(2)创建firebase项目,登录成功后,单击图8.4页面上的“添加项目”,弹出添加项目对话框,在对话框中输入相应的信息。

图8.4添加项目

(3)创建firebase数据库,在图8.5所示的界面上选择实时数据库,并修改其读写规则。

图8.5创建数据库

(4)向数据库中导入数据,本案例以news.json文件为例,将数据导入到网络数据库。如图8.6所示。

图8.6导入json格式数据文件

三、请求FireBase数据库

FireBase数据库创建完成会自动生成一个网络访问的地址,如图8.7所示。该地址就是使用http的get方式请求的地址,通过修改news.service中fetchdata()方法中的访问地址即可实现从远程网络中将数据显示在news组件的页面上,其代码如下:

1.fetchData(): any {

2.return this.http.get('https://newsreport-****.firebaseio.com/.json')

3..map((res) =>res.json());

4.}

上述代码的第2行地址根据开发者创建的数据库地址设置,此时连接的数据库只能从网络上获取数据,并不能对数据库进行相应的增删改等操作。

图8.7数据库的网络地址

四、在页面上链接FireBase数据

1.将firebase数据库添加到项目的index.html网页中

前面已经介绍过,通过http方式访问数据库不能对数据库进行实时操作,需要在页面中通过链接的方式实现。如图8.8所示。

图8.8页面上链接数据库

2.在项目中引入firebase和angularfire2两个模块

要引入firebase和angularfire2两个模块,需要使用如图8.9所示的命令下载模块包。

图8.9安装firebase和angularfire2

3.修改app.module.ts,导入AngularFireModule模块

要在项目中使用模块,需要在图8.10所示位置导入模块。

图8.10导入模块

4.修改news组件实现使用firebase

(1)定义变量

declare var firebase: any;

(2)获取数据

将news组件中的ngOnInit()方法获取news数据的功能代码修改为如下代码:

1.ngOnInit() {

2.this.mynews = [];

3.this.news = [];

4.firebase.database().ref('/').on('child_added',(data) => {

5.// this.news.push(data);

6.console.log(data.val());

9.});

(3)增加数据

在news组件的模板文件中添加增加新闻的UI,其代码如下:

请输入新闻标题:

请输入新闻类别:

请输入新闻内容:

插入新闻

修改news组件的控制文件,向数据库中添加新闻,其代码如下:

insertNews() {

this.rating = 0.0;

this.time =Date().toString();

firebase.database().ref('/').push({

id: this.id, title:this.title,

time: this.time, rating:this.rating,

descript: this.descript,categories: this.categories

});

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180714G0EKB600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券