一.创建web服务器
1.使用nodejs创建服务器
-
创建一个server文件夹
-
初始化server文件夹
npm init -y
,创建package.json -
引入node的类型定义文件
npm i @types/node --save
,类型定义文件的作用:让开发者在typescript中使用现在已有的javascript的库(安装类型定义文件是保证对应内容可以使用typescript进行开发) -
搭建简单的web服务器
-
创建server文件夹,并创建hello_server.ts,内容填写
import * as http from 'http'; const server = http.createServer((request,response)=>{ response.end('hello node'); }); server.listen(8000);
-
通过webstrom的自动编译将ts转换成js,如下
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var http = require("http"); var server = http.createServer(function (request, response) { response.end('hello node'); }); server.listen(8000);
-
使用
node hello_server.js
启动服务器,访问8000端口就可以看到页面显示hello node
-
2.使用express创建restful的http服务
-
安装express框架,
npm install express --save
-
安装express的类型定义文件
npm install @types/express --save
-
创建服务器配置文件
aution_server.ts
- 内容如下
import * as express from 'express'; const app = express();//app用来声明服务器端可以使用的服务 app.get('/',(req,res)=>{ res.send('hello express'); });//声明用来处理get请求的服务 app.get('/products',(req,res)=>{ res.send('接收到商品查询请求'); }); const server = app.listen(8000,"localhost",()=>{ console.log('服务器已启动,地址是:http://localhost:8000');//服务器启动时执行的操作 });
-
将对象或是数组以json的格式返回使用
res.json(对象名);
-
通过请求查询参数获得对应的数据信息
app.get('/product/:id',(req,res)=>{ res.json(products.find((product)=>product.id == req.params.id)); });
3.监控服务器文件的变化
- 安装nodemonitor工具来监控源代码,当代码改变时自动重启node服务器并加载最新的代码。
npm install -g nodemon
- 使用
nodemon aution_server.js
启动服务 - 当修改服务器文件时,服务器就会自动重启
- 使用
二.Http通讯
- angular使用响应式编程的方式处理http请求
1.了解angular的Http服务
- Http的class就是标准的typescript类,对应不同的方法就是发送不同请求的
- 方法的参数
- url:发送的路径
- RequestOptionsArgs(可选的)定义了一组与请求相关的参数
- 每个方法都返回一个可观测的流
Observable<Response>
,通过订阅流来得到服务端响应数据和错误信息
2.发送Http请求
-
生成组件
ng g component product
-
代码内容
//控制器内容 import 'rxjs/Rx';//引入内容就可以进行响应式编程 export class ProductComponent implements OnInit{ dataSource:Observable<any>;//用来接受http服务中返回的流 products:Array<any>=[];//用于和模板进行数据绑定 constructor(private http:Http){//需在module引入http模块 this.dataSource = this.http.get('/api/products').map((res)=>res.json());//get方法只是定义了http请求 } ngOnInit(){ this.dataSource.subscribe((data)=>this.products=data);//当使用subscripe订阅方法时,请求才真正发出去,将结果存到products中 } }
-
创建
proxy.conf.json
文件- 文件内容
{ "/api":{//api表示请求的前缀 "target":"http://localhost:8000"//表示如果访问/api开头的路径,则将请求内容转发到localhost的8000端口上.如访问/api/products则会访问http://localhost:8000/api/products } }
-
修改一下脚本内容package.json
"scripts":{ "start":"ng serve --proxy-config proxy.conf.json"//添加相关参数配置 }
-
在模板上使用async异步管道获得对应的流数据
- 控制器代码
import 'rxjs/Rx';//引入内容就可以进行响应式编程 export class ProductComponent implements OnInit{ products:Observable<any>; constructor(private http:Http){//需在module引入http模块 this.products = this.http.get('/api/products').map((res)=>res.json());//直接获得对应流传给模板,由异步管道来处理 } ngOnInit(){} }
- 模板代码
<ul> <li *ngFor="let product of products | async"><!-- 使用async管道 --> {{product.title}} </li> </ul>
-
发送Http请求时带上请求头
- 控制器代码
import 'rxjs/Rx';//引入内容就可以进行响应式编程 import {Headers} from '@angular/http';//通过angular包获得Headers类 export class ProductComponent implements OnInit{ products:Observable<any>; constructor(private http:Http){//需在module引入http模块 let myHeaders:Headers = new Headers(); myHeaders.append("Authorization","Basic 123456"); this.products = this.http.get('/api/products',{headers:myHeaders}).map((res)=>res.json());//将请求头Header放到方法的第二个参数中 } ngOnInit(){} }
未完待续…