第八章 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

});

}