angular4学习笔记（第九章服务器通信篇）

1.使用nodejs安装本地服务器（使用的是vscode编辑器）

创建一个空的项目(什么都没有)
创建package.json
```
npm init -y
```
引入 node 的运行定义文件
```
npm i @types/node -–save
```

创建tsconfig.json(node 本身是不认 typeScript 语言的，所以要将 typeScript 编译成 javaScript，所以在项目的根目录就要创建一个“tsconfig.json”，这个文件是用来告诉编译器如何将 typeScript 编译成 javaScript)

  {
    "compilerOptions": {
      "module": "commonjs",  // 指定生成哪个模块系统代码
      "target": "es5",   // 目标代码类型
      // emitDecoratorMetadata 和 experimentalDecorators 是与装饰器相关的
      // 在编译的时候保留装饰器里面的原数据
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "outDir": "build",   // 编译完后要放在哪个文件夹里面
      "lib": ["es6"]  // 开发的时候要使用 es6 的语法
    },
    // 排除编译的时候哪些个文件要排除掉
    "exclude": [
      "node_modules"
    ]
  }

安装TypeScript Compiler(可以通过这个Complier将typescript编译成javascript)
```
npm install -g typescript
```

创建一个打印hello world 的服务文件(server/hello_server.ts)

import * as http from 'http'

const server=http.createServer(function (request,response) {
    response.end('Hello World\n');
}).listen(8888);

配置TypeScript编译(使用快捷键ctrl+shift+b)（使用vscode编辑器）
配置TypeScript编译(使用快捷键ctrl+shift+b)（使用webstorm编辑器）
运行服务器
```
node build/hello_server.js
```

打开游览器输入地址访问（http://localhost:8888/）

2.使用Express创建restful的http服务

安装express框架
```
npm install express -–save
```
安装express的类型文件（让编译器识别express）
```
npm install @types/express -–save
```

创建新的服务（server/userinfo_server.ts）

import * as express from 'express';

const app = express();
var fs = require("fs");         //引入nodejs的file system 模块
var path=require("path");      //引入nodejs的 path 模块


app.get('/', (req, res) => {
    res.send("服务器启动成功");
});

app.get('/api/userInfo', (req, res) => {
    // 获取数据存放的data文件夹路线
    var dataSource = path.join(path.resolve(__dirname, '..'),'/data');
    // 读取文件内容，返回data数据字符串
    fs.readFile(dataSource + "/" + "userinfo.json", 'utf8', function (err, data) {
        // 将字符串转换成json格式
        data = JSON.parse(data).userinfo;
        // 判断是否传参数id
        if (JSON.stringify(req.query) != "{}") {
            if ((data.find((data) => data.id == req.query.id) != null)) {
                res.json(data.find((data) => data.id == req.query.id));  /* 返回相应 id 的数据 */
            } else {
                res.json('没有相对应的数据');   /* 输入无效 id 是返回 */
            }
        } else {
            res.json(data);   /* 没有传参时返回全部数据 */
        }
    });
});

// 启动并监听 8888 端口服务器
const server = app.listen(8888, "localhost", () => {
    console.log("服务器已启动，地址是：http://localhost:8888");
});

创建数据userinfo.json文件(data/userinfo.json)

 {
    "userinfo" : [{
        "name" : "cx",
        "sex" : "man",
        "age" : 23,
        "id" : 1
    },{
        "name" : "cy",
        "sex" : "women",
        "age" : 30,
        "id" : 2
    },{
        "name" : "cn",
        "sex" : "man",
        "age" : 18,
        "id" : 3
    },{
        "name" : "cmx",
        "sex" : "man",
        "age" : 50,
        "id" : 4
    },{
        "name" : "qsx",
        "sex" : "women",
        "age" : 50,
        "id" : 5
    }]
 }

安装nodemon （监听服务文件的改变，无需重新启动服务器）
```
npm install -g nodemon
```
使用nodemon启动服务
```
nodemon build/auction_server.js
```
在浏览器中访问（http://localhost:8888，http://localhost:8888/api/userinfo，http://localhost:8888/api/userinfo?id=1）
修改服务的数据，保存重新刷新界面，即可看到新的数据，无需重启服务器

3.http通信

创建一个新的angular项目

配置代理服务器（创建proxy.conf.json文件）

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

修改项目启动配置（package.json文件，修改start）
```
"start": "ng serve --proxy-config proxy.conf.json",
```

创建获取用户信息的界面

<input type="text" [(ngModel)]="userId">
<button type="button" (click)="getData()">获取用户信息</button>
<div *ngIf="hasInfo">
  <div *ngFor="let userinfo of userinfo">
    <span>姓名：{{userinfo.name}} </span>
    <span>性别：{{userinfo.sex}} </span>
    <span>年龄：{{userinfo.age}}</span>
  </div>
</div>
<div *ngIf="!hasInfo">
  <span>暂无数据</span>
</div>

使用HTTPclient服务访问接口，获取数据

在app.module.ts中引入HttpClientModule（angular4.3以后http改为采用httpclient）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms'

import { AppComponent } from './app.component';
import { GetFormHttpComponent } from './get-form-http/get-form-http.component';

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

在获取用户信息组件控制器中声明httpclient服务
```
constructor(private http: HttpClient) { }
```

调用get方法获取数据

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-get-form-http',
  templateUrl: './get-form-http.component.html',
  styleUrls: ['./get-form-http.component.css']
})
export class GetFormHttpComponent implements OnInit {

  private userId: number = null;  // 默认查询全部数据 
  private userinfo;  //用户信息
  private hasInfo: boolean = false;  //判断是否有用户信息


  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getData();
  }

  //  获取数据方法
  getData() {

    if (this.userId) {
      this.http.get('/api/userinfo', {
        params: new HttpParams().set('id', this.userId.toString())  //使用HttpParams传参
      }).subscribe(res => {
        if (res == null) {
          this.hasInfo = false;

        } else {
          this.hasInfo = true;
          this.userinfo = res;
        }
      });
    } else {
      this.http.get('/api/userinfo').subscribe(res => {
        this.hasInfo = true;
        this.userinfo = res;
      })
    }
  }
}

angular4学习笔记（第九章服务器通信篇）

1.使用nodejs安装本地服务器（使用的是vscode编辑器）

2.使用Express创建restful的http服务

3.http通信

4.websocket(未完待续。。)

猜你喜欢

angular4学习笔记（第九章 服务器通信篇）

1.使用nodejs安装本地服务器（使用的是vscode编辑器）

2.使用Express创建restful的http服务

3.http通信

4.websocket(未完待续。。)

猜你喜欢

angular4学习笔记（第九章服务器通信篇）