此笔记我是仿照 https://www.jianshu.com/p/f47284cd5327整理的
一、用nodejs搭建本地web服务器

1. 使用node.js创建服务器
   在F盘新建一个名叫serve的文件夹,用vscode编辑器打开serve文件夹，并用npm初始化这个文件夹，会生成包含默认配置的package.json文件。

npm init -y

2. 使用typescript语言开发，引入node的类型定义文件，类型定义文件的作用是可以让typescript可以使用现在已有的javascript的库。命令如下：

npm i @types/node --save

3.serve文件夹下新建配置文件tsconfig.json（node本身不认typescript，所以需要将typescript编译成javascript），tsconfig.json代码如下

{"compileOnSave": true,"compilerOptions":{       //编译器配置"target":"es5",       //目标是编译成es5规范的脚本，也就是js"module":"commonjs",  //模块的规范是commonjs"emitDecoratorMetadata": true,"experimentalDecorators":true,   //这两个是要保留装饰器的元数据"outDir":"build",   //编译后文件默认放置在build文件夹下"lib":["es6"]       //开发时使用es6的语法},"exclude": [            //编译时要排除的文件"node_modules"]
}

4.serve文件夹下新建文件serve\helloServe.ts，内容代码如下：

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

5.在vsCode界面用Ctrl+Shift+B命令编译ts文件，弹出框选择tsc监视 -tsconfig.json，如果vsCode配置过自动编译ts就不用这个步骤了（点击vscode菜单 终端-运行任务 点击 tsc:监视-tsconfig.json 然后就可以自动生成代码
了）。
如果本机没有安装Typescript，那么需要先安装：（不确定是否安装可以tsc -v查看版本）

npm install -g typescript

6.用helloServe.js文件启动node服务器

F:\serve> node build/helloServe.js

7.浏览器中访问http://localhost:8000

二、使用Epress创建restful的http服务
（ RESTful service是一种架构模式，近几年比较流行了，它的轻量级web服务，发挥HTTP协议的原生的GET，PUT，POST，DELETE。 REST模式的Web服务与复杂的SOAP和XML-RPC对比来讲明显的更加简洁，越来越多的web服务开始采用REST风格设计和实现。例如，Amazon.com提供接近REST风格的Web服务进行图书查找；雅虎提供的Web服务也是REST风格的。REST 并非始终是正确的选择。 它作为一种设计 Web 服务的方法而变得流行，这种方法对专有中间件（例如某个应用程序服务器）的依赖比基于 SOAP 和 WSDL 的方法更少。 在某种意义上，通过强调URI和HTTP等早期 Internet 标准，REST 是对大型应用程序服务器时代之前的 Web 方式的回归。http 接口 按照rest 风格设计 就是 restfull http）
Epress框架提供了所以web应用都需要的一些常用功能
1.安装Epress框架

F:\serve> npm install express --save

2.安装Epress框架类型定义文件来进行typescript开发

F:\serve> npm install @types/express --save

3.在serve/serve目录下新建配置文件actionServe.ts

import * as express from 'express';
const app = express();
// 当服务器为开启状态时，如果在根目录'/'下,
// 接收到了get请求，那么服务器会返回hello express
app.get('/',(req, res) => {res.send("hello express");
});
app.get('/product',(req,res) => {res.send("接收到产品查询请求");
});
const serve = app.listen(8000,"localhost",() => {console.log("服务器已启动，地址为http://localhose:8000");
});

4.vscode编译器下用Ctrl+Shift+B命令编译actionServe.ts文件

5.用actionServe.js文件启动node服务器

   F:\serve> node build/actionServe.js

控制台中会出现：服务器已启动，地址为http://localhose:8000
6.浏览器中访问http://localhost:8000出现

访问http://localhost:8000/product时

此时已经建立好了两个http服务。

三、监控服务器文件的变化

因为当修改文件时，重新刷新地址，内容是不会变化的，必须要重启服务才可以更新内容，所以下面安装可以监控源代码变化并自动重启服务器的工具nodemonitor。
1.安装nodemon（nodemon -v可以看自己电脑是否装过）

F:\serve> npm install -g nodemon

2.用nodemon来启动服务器

F:\serve> nodemon build/actionServe.js

当修改内容时注意：修改actionServe.js里面内容才及时生效，要是修改actionServe.ts，需要先监听ts，待js重新生成才能刷新页面看到修改后的效果！

3、修改产品查询请求的服务
产品查询请求的服务应该返回一个json数据
1)修改actionServe.ts

import * as express from 'express';const app = express();// 商品类的定义文件
export class Product {constructor(public id:number,public title:string,public price:number,public rating:number,public desc:string){}
}
// 商品数据
const products:Product[] = [new Product(1,"商品1",1.99,1.5,"这是商品1"),new Product(2,"商品2",2.99,2.5,"这是商品2"),new Product(3,"商品3",3.99,3.5,"这是商品3"),new Product(4,"商品4",4.99,4.5,"这是商品4"),new Product(5,"商品5",5.99,4.5,"这是商品5")
];app.get('/',(req, res) => {res.send("hello express");
});//此时返回的是一个json数据，传入定义的products
app.get('/product',(req,res) => {res.json(products);
});
const serve = app.listen(8000,"localhost",() => {console.log("服务器已启动，地址为http://localhose:8000");
});

2）刷新浏览器

4、新增服务，可以根据指定的id来获取商品信息
修改auctionServe.ts

import * as express from 'express';
const app = express();
export class Product {constructor(public id:number,public title:string,public price:number,public rating:number,public desc:string){}
}
const products:Product[] = [new Product(1,"商品1",1.99,1.5,"这是商品1"),new Product(2,"商品2",2.99,2.5,"这是商品2"),new Product(3,"商品3",3.99,3.5,"这是商品3"),new Product(4,"商品4",4.99,4.5,"这是商品4"),new Product(5,"商品5",5.99,4.5,"这是商品5")
];app.get('/',(req, res) => {res.send("hello express");
});
app.get('/product',(req,res) => {res.json(products);
});// 新增根据id查询数据的服务
app.get('/product/:id',(req,res) => {res.json(products.find((product) => product.id == req.params.id));
});const serve = app.listen(8000,"localhost",() => {console.log("服务器已启动，地址为http://localhose:8000");
});

此时地址栏输入http://localhost:8000/product/1，就可以获得相应id的数据

**三、Angular6 项目新建模块简历http通信
在angular应用中发送http请求来调用上面新建的服务，并处理服务器返回的数据。
在默认情况下，angular的http服务使用响应式编程的方式来处理http请求。
1.在angular项目中新建一个产品组件

F:\angular> ng g component product

2.修改app.module.ts，引入HttpModule模块

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';@NgModule({declarations: [AppComponent,ProductComponent],imports: [BrowserModule,// 引入HttpModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

3.修改product.component.ts

import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs';
import { Http } 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>;// 用来和模版做数据绑定的数组myproducts:Array<any> = [];// 将angular的服务依赖注入进来constructor(private http:Http) { this.dataSource = this.http.get('/product').map((res) => res.json());}ngOnInit() {// 订阅流this.dataSource.subscribe(// 把订阅到的数据传给myproducts属性(data) => this.myproducts = data)}}

http发get请求，返回response,拿到response里的json数据赋值给myproducts
因为此时获取产品信息的路径为http://localhost:4200/product，而服务器的地址为http://localhost:8000/product，所以还要进行配置。
4.根目录下新建一个配置文件proxy.conf.json

将前缀为api的路径转发到http://localhost:8000上

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

5.修改package.json，修改后：
6.修改serve文件下的actionServe.ts

7.用下面的命令重启angular项目

ng start即可

此处有个坑：angular总报错：类型“Observable”上不存在属性“map”，输入以下命令即可解决

npm install rxjs-compat

地址栏输入：http://localhost:4200/api/product 即可访问nodejs搭建的web服务器