zoukankan      html  css  js  c++  java
  • json-server使用及路由配置

    1.先安装node.js,node.js中包含了json-server模块

    2.在angular-hello/src/app/data-base.json文件中,编辑json格式的服务数据,

    {  

      "GetUsers":[
        {
          "id":1,
          "Name":"zhaoling"
        },
        {
          "id":2,
          "Name":"lst"
        }
      ]

    }

    3.启动服务

    cd angular-hello

    json-server ./src/app/data-base.json

    4.访问接口

    http://localhost:3000/GetUsers 返回所有数据(数组)

    http://localhost:3000/GetUsers/1 返回id=1的数据,采用这种路径风格id必须为小写 (数组)

    http://localhost:3000/GetUsers/?Name=lst 返回Name=lst的用户数据(数组)

    5.自定义路由

    这是我们在开发过程中在本地虚拟的wepapi服务,假设我们最终部署时要调用第三方真实的api接口是这种形式

    http://www.xxxx.com/WepApi/Users/Gets?Name=lst ,

    为了部署时方便,显然不能在开发时用本地虚拟服务路径格式,而在部署时一一替换,最好的做法是只改变路径前部分的IP或域名,而后部分的格式不需改变就能轻松切换。

    (1)angular-hello/src/app/data-routes.json文件中编写路由映射

    {
      "/WepApi/Users/Gets?Name=:Name":"/GetUsers?Name=:Name"
    }
    WepApi/Users/Gets?Name=:Name 是真实部署时要访问的api路径
    /GetUsers?Name=:Name是我们开发时虚拟的api路径
     
    程序中就可以这样写了
    private apiUrl:string = 'http://localhost:3000/WebApi/';
    getUsers(name:string){
      return this.http.request({
        method:'get',
        url: this.apiUrl+'Users/Gets',
        data:{
          Name:name
        }
      });
    }
     
    在部署时我们只需把http://localhost:3000/WebApi/ 替换成  http://真实的地址/WebApi/  就可以了
     
    (2)启动服务
    cd angular-hello
    json-server ./src/app/data-base.json --routes ./src/app/data-routes.json
     
    可以用 http://localhost:3000/WepApi/Users/Gets?Name=:Name":"/GetUsers?Name=lst
    代替  http://localhost:3000/GetUsers/?Name=lst 了。
     
  • 相关阅读:
    段落排版--对齐
    1055. The World's Richest (25)
    1054. The Dominant Color (20)
    (八十一)利用系统自带App来实现导航
    (八十)MapKit放置系统默认大头针和自定义大头针
    (七十九)MapKit的基本使用
    1052. Linked List Sorting (25)
    (七十八)使用第三方框架INTULocationManager实现定位
    (七十七)地理编码与反地理编码
    1051. Pop Sequence (25)
  • 原文地址:https://www.cnblogs.com/lvshoutao/p/8549004.html
Copyright © 2011-2022 走看看