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 了。
     
  • 相关阅读:
    数据结构HashMap(Android SparseArray 和ArrayMap)
    一篇文章教你读懂UI绘制流程
    死磕安卓前序:MVP架构探究之旅—基础篇
    我就死磕安卓了,怎么了?
    戏说移动江湖开发历程
    姿势摆好,一招学会android的布局优化!
    学习React Native必看的几个开源项目
    开发了几个小程序后,说说我对小程序的看法
    jQuery基础一
    JavaScript基础二
  • 原文地址:https://www.cnblogs.com/lvshoutao/p/8549004.html
Copyright © 2011-2022 走看看