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; }) } } }
- 在app.module.ts中引入HttpClientModule(angular4.3以后http改为采用httpclient)
4.websocket(未完待续。。)