angular4.0 HTTP初级，nodejs搭建服务器，并使用

看了一点与服务器通讯的知识，整理一下今天get到的一点关于http的知识，非常简单 可能都够不成初级（手动笑哭）
首先说一下如何搭建一个服务器，
1.创建一个空的工程，
2.npm init -y, ide自动生成一个package.json文件，如下图

3.npm i @types/node --save，ide生成node_modules文件夹和package-lock.json文件，作用：引入node的类型定义文件 可以在typesscript里用javascript的库
4.创建一个新的tsconfig.json文件 他是用来告诉编译器如何将typesscript编译成javascript

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",
    "lib": ["es6"]
  },
  "exclude": [
    "node_modules"
  ]
}

5.在file的setting菜单里进行相关设置，最终是下图这样子

6.配置好了，就开始写一个简单的程序，创建一个server文件夹，hello_server.ts（会自动生成一个build文件夹js文件也会自动生成，只修改ts文件就可以了）
6.运行 node build/hello_sever.js
下面贴一下服务器的数据

hello_sever.ts

import * as http from  'http'
const server = http.createServer((request,response) => {
    response.end("hello Node");
});
server.listen(8000);

package.json

{
  "name": "untitled",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.0.36",
    "@types/node": "^8.0.20",
    "express": "^4.15.4"
  }
}

tsconfig.ts

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",
    "lib": ["es6"]
  },
  "exclude": [
    "node_modules"
  ]
}

需要注意的是node不会自动加载服务器变化的文件的，只能够重新启动node服务器（node build….），可以安装一个工具,自动重启node服务器，只需要刷新浏览器即可更新文件内容，npm install -g nodemon,然后用nodemon build/hello_sever.js

下一步，在自己的应用中使用自己创建的服务器里的数据

先描述一下要实现的功能，我要用auxtion_server.ts里的product数据，传入products，然后展示在product组件上，根据服务器里的数据，创建li标签

1.首先app.module.ts里要引入http模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.创建一个proxy.conf.json的文件，按如下配置

{
  "/api": {
    "target": "http://localhost:8000"
  }
}

3.配置完以后要在package.json文件的start里添一段代码

  "start": "ng serve --proxy-config proxy.conf.json",

4.product.component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, Headers} from '@angular/http';
import 'rxjs/RX';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
// dataSource: Observable<any>;
  products: Observable<any>;
  // private url = 'api/products';
// products: Array<any> = [];
  constructor(private http: Http) {
    //this.dataSource = this.http.get('api/products')
    let myHeaders: Headers = new Headers();
    myHeaders.append('Authorization', 'Basic 123456');

    this.products = this.http.get('api/products', {headers: myHeaders})
      .map((res) => res.json());
  }

  ngOnInit() {
    // this.dataSource.subscribe(
    //   (data) => this.products = data
    // );
    // console.log('222222frfr2222' + this.products);
  }

}

product.compoent.html

<div>
  商品信息ssssss
</div>
<ul>
  <li *ngFor="let product of products | async">
    {{product.title}}
  </li>
</ul>
<!--{{products}}/-->

comments部分是第二种方法，这种比较繁琐，

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, Headers} from '@angular/http';
import 'rxjs/RX';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
dataSource: Observable<any>;
  // private url = 'api/products';
products: Array<any> = [];
  constructor(private http: Http) {
    let myHeaders: Headers = new Headers();
    myHeaders.append('Authorization', 'Basic 123456');
    this.dataSource = this.http.get('api/products', {headers: myHeaders}).map((res) => res.json());
  }

  ngOnInit() {
    this.dataSource.subscribe(
      (data) => this.products = data,
    );
    console.log('222222frfr2222' + this.products);
  }
}

product.component.html,只有li便签无需async那个管道，其他代码一样就不贴了

<li *ngFor="let product of products">
    {{product.title}}
  </li>

效果图都是一样的，那个头部也可以不传，
，

官方文档的http部分有很多。。。看了之后再补充吧