在使用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 条评论
登录 后参与评论

相关文章

来自专栏阿杜的世界

Spring Cloud学习-Eureka、Ribbon和Feign引子实践源码下载参考资料

看完《微服务设计》后,算是补上了自己在服务化这块的理论知识,在业界,一般有两种微服务的实践方法:基于dubbo的微服务架构、基于Spring Cloud的微服务...

1062
来自专栏IT笔记

SpringBoot开发案例之微信小程序文件上传

前言 最近在做一个口语测评的小程序服务端,小程序涉及到了音频文件的上传,按理说应该统一封装一个第三方上传接口服务提供给前段调用,但是开发没有那么多道理,暂且为了...

3926
来自专栏写代码的海盗

初生牛犊不怕虎 golang入坑系列

读前必读,下面所有内容都是来自这里。 放到这里的目的,就是为了比对一下,哪里的读者多。。(X := '难' || X :='耐' || X := '好' ) 都...

2704
来自专栏大魏分享(微信公众号:david-share)

六种开发环境部署大全:基于Openshift

前言 本文包含在Openshift上部署六种开发环境的步骤,分别是: OpenShift for Fuse Developers Eclipse Vert.x ...

1.2K6
来自专栏漏斗社区

黑客游戏| Owasp juice shop (一)

0x01 前言 最近看到一篇关于owasp juice shop的文章,觉的很有意思,斗哥就自己撸了个环境,上手后深深觉的这是一个很棒的漏洞靶场,所以就把该...

3658
来自专栏自动化测试实战

看到就是赚到!Selenium完整框架——告别2017

3509
来自专栏along的开发之旅

从源码看DL4J中Native BLAS的加载,以及配置

最近在用DeepLearning4J(DL4J)尝试语音识别的深度学习,git DL4J的代码,用IntelliJ IDEA打开,配置好相关依赖后,运行包org...

803
来自专栏ImportSource

Spring Boot 2.0 新特性和发展方向

以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持。 内嵌容器包结构调整 为了支持react...

3949
来自专栏蓝天

C/C++编程可用的Linux自带工具

GNU Binary Utilities或binutils是一整套的编程语言工具程序,用来处理许多格式的目标文件。当前的版本原本由在Cygnus Soluti...

1092
来自专栏云计算

使用 Spring Boot 2.0,Eureka 和 Spring Cloud 的微服务快速指南

原文地址:https://dzone.com/articles/quick-guide-to-microservices-with-spring-boot-20...

9361

扫码关注云+社区