在使用angular2中使用nodejs创建服务器,并成功获取参数

老是遇到很多坑等着自己去填.

首先创建服务器:

1.最好使用express,这个库有更多的api,方法:npm install express --save;

2. npm install @types/express --save;

安装nodemon 可以让服务器自动重启,

方法:npm install nodemon;

在启动服务器的时候用:nodemon build/...js;

这样服务器就算启动完成了.

/**
 * Created by Administrator on 2017/5/16.
 */
import * as express from "express";
const app=express();

app.get("/", (req,res)=>{
  res.send("hello express")
})
export class Produce{
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public rating:number,
    public desc:string,
    public categories:Array<any>
  ){

  }
}

const products:Produce[] =[
  new Produce(1,"第一个商品",1.99,3.5,"这是第一个商品描述",["图书","音乐"]),
  new Produce(2,"第二个商品",3.99,2.5,"这是第二个商品描述",["语文"]),
  new Produce(3,"第三个商品",4.99,4.5,"这是第三个商品描述",["音乐","体育"]),
  new Produce(4,"第四个商品",5.99,1.5,"这是第四个商品描述",["化学","体育"]),
  new Produce(5,"第五个商品",16.99,4.5,"这是第五个商品描述",["生物","图书"]),
  new Produce(6,"第六个商品",12.99,3.5,"这是第六个商品描述",["科学"]),
]



app.get("/api/products",(req,res)=>{
  res.json(products)
})
app.get("/api/products/:id",(req,res)=>{
  //在命令行中打印,当发送个请求的时候才触发,
  // console.log(req.params)
  res.json(products.find( produce => produce.id==req.params.id))
})

const server =app.listen(8000,"localhost",()=>{
  console.log("服务器已经启动,地址是http://localhost:8000")
});

接着在本地从创建好的服务器上获取数据:

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>;

  products :Array<any>=[];

  constructor(private http:Http) {
    console.log(http)
    this.dataSource = this.http.get('/api/products')
      .map((res)=>res.json())
    console.log(this.dataSource)
  }

  ngOnInit() {
    this.dataSource.subscribe((data)=>{
      this.products=data
    })
  }

}

dataSource:Observable<any> 将获得的数据保存为流.对应 的需要引入Observable from "rxjs"

http服务已经在app.module中引入过了,这里需要声明在构造函数里头,并引入Http from "@angular/Http";

接着就是坑了,写完后,发现还是获取不到服务器上的数据:

接下来还有配置:

在根目录新建一个文件:proxy.conf.json  内容为:

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

然后在package.json文件中,修改一行

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

然后启动

要用npm run start;

只要使用这个命令,才能告诉页面,需要到这个地址去拿数据.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

Java中不同的并发实现的性能比较

正如即将上映的星球大战那样,Java 8的并行流也是毁誉参半。并行流(Parallel Stream)的语法糖就像预告片里的新型光剑一样令人兴奋不已。现在Jav...

961
来自专栏Android群英传

实现 APK 保护时常见的坑和解决方案

983
来自专栏北京马哥教育

Python Unicode编码混乱 :来自大洋彼岸的怨念

Unicode已经解决了很多问题。知晓ISO-8859-*和CP437带来的混乱(当然对于非西方语言来说更糟糕)的人都可以证明这一点。当然,这些天他们正在做一项...

1284
来自专栏Ryan Miao

如何优化coding

如何优化coding 前言 最近一直在做修改bug工作,修改bug花费时间最多的不是如何解决问题而是怎样快速读懂代码。如果代码写的好的,不用debug就可以一眼...

3837
来自专栏IMWeb前端团队

Unix Pipes to Javascript Pipes

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 Unix Pipes Unix管道扫描稿 ? 简单样例: $ ne...

18510
来自专栏葡萄城控件技术团队

如何使用MOQ进行单元测试

使用MOQ来伪装和隔离被依赖对象,从而提高被测对象的测试效果。 安装 通过http://code.google.com/p/moq可以下载MOQ的最新版本。在S...

1996
来自专栏草根专栏

使用C# (.NET Core) 实现适配器模式 (Adapter Pattern) 和外观模式 (Facade Pattern)

本文的概念内容来自深入浅出设计模式一书 现实世界中的适配器(模式) ? 我带着一个国标插头的笔记本电脑, 来到欧洲, 想插入到欧洲标准的墙壁插座里面, 就需要用...

2876
来自专栏前端那些事

同步、异步、回调执行顺序之经典闭包setTimeout分析

聊聊同步、异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你...

24510
来自专栏JackieZheng

Dubbo源码-从HelloWorld开始

Dubbo简介 Dubbo,相信做后端的同学应该都用过,或者有所耳闻。没错,我就是那个有所耳闻中的一员。 公司在好几年前实现了一套自己的RPC框架,所以也就没有...

3218
来自专栏腾讯云API

【视频】腾讯云API使用指南

云API团队在云学院上线了一套视频教程,目的是和大家分享如何进行API、SDK和CLI的使用。

4729

扫码关注云+社区