angular中创建Web服务器----angualr总结

前言：之前做Angular项目的时候，都是自己创建一个自己设置一个端口登录的，那么 如何自己创建一个服务器没呢？下面和大家分享一下angualr中自己创建服务器的步骤。

1.初始化文件夹

cnpm -y

2.引入node类型定义文件

在typescript中可以使用javascript中已有的库

cnpm i @types/node --save

3.将typescript编译成javascript

{
    "compilerOptions": {  //编译配置器
        "target":"es5",     //目标是编译成es5规范的脚本，也就是js
        "module": "commonjs", //模块的规范是commonjs
        "emitDecoratorMetadata":true, 
        "experimentalDecorators":true,//这来给你个是要保存呢装饰器的源数据
        "outDir":"build",//编译后文件默认放在build文件夹下
        "lib":["es6"]//开发时使用es6的语法
    },
    "exclude": [
        "node_moudles"
    ]
}

3.使用vs code每次编译之后都要使用tsc-w

4.建立一个hello_server.js的服务器

import * as http from 'http'

const server = http.createServer((request, response) => {
        response.end("Hello Node!");
});
server.listen(8000);

5.在终端输入以下内容

node build/hello_server.js启动服务器
cnpm install express --save
cnpm install @types/express --save
cnpm install -g nodemon
加载时，自动重启服务器，加载最新的代码
nodemon build/auction_server.js

6.服务器auction_server.js代码如下：

import * as express from "express";
import {Server} from 'ws';


const app = express();


export class Product  {

    constructor(public id: number,
      public title:string,
      public price:number,
      public rating:number,
      public desc:string,
      public categories:Array<string>) {
  
    }
  }


const products: Product[] = [
    new Product(1,"第一个商品",1.99,3.5,"这是第一个商品",["化妆品","口红"]),
    new Product(2,"第二个商品",2.99,2.5,"这是第二个商品",["化妆品","眼影"]),
    new Product(3,"第三个商品",3.99,4.5,"这是第三个商品",["服装","汉服"]),
    new Product(4,"第四个商品",4.99,1.5,"这是第四个商品",["包包","香奈儿"]),
    new Product(5,"第五个商品",5.99,3.5,"这是第五个商品",["化妆品","口红"]),
    new Product(6,"第六个商品",6.99,2.5,"这是第六个商品",["化妆品","口红"])
  
];


app.get('/',(req, res) =>{
    res.send("Hello Express");
});

app.get('products',(req,res) =>{
    res.json(products);
});
app.get('product/:id',(req, res) => {
    res.json(products.find((product) => product.id == req.params.id));
});


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

const wsServer = new Server({port:8085});
wsServer.on("connection", websocket => {
    websocket.send("这个消息是服务器主动推送的");
    websocket.on("message", message =>{
        console.log("接收到消息:" + message)
    })
});

setInterval(()=> {
    if(wsServer.clients){
        wsServer.clients.forEach(client =>{
            client.send("这是定时推送")
        })
    }
},2000);

效果：

当为id为2时，界面如下：

总结：到这里angular的基本内容，就结束了。开始的时候非常困惑，不过随着学习的深入，对于angualr的了解越来越多，感觉还是挺有意思的。学习也不是一遍就可以的，在以后的学习中，多总结，多成长吧。