zoukankan      html  css  js  c++  java
  • Json-Server模拟数据接口开发

    前端开发过程中调用后台接口是常事,在前后台定义好接口规范和参数后,后台接口的进度有时会成为我们的掣肘,这里推荐使用一款简单的小工具json-server,小而轻便。

    确保本地已有node环境。

    一:安装json-server

    npm install -g json-server

    二:创建json-server文件

    在项目文件夹创建一个文件夹,随意命名,这里命名为API-server,在API-server文件夹下创建json格式文件,这里命名为db.json。如下图:
    

    三:创建数据并启动json服务

    在第二部创建的db.json文件中填充json数据:如下图:

    插入完数据后,cd 到 api-server文件夹下启动json服务,运行 json-server --watch db.json   如下图:
    


    运行完后本地就已经生成了两个API,在浏览器输入localhost:3000/posts就会出现相应数据,如下图:

    四:进行应用

    现在本地已经生成了相应的api接口,可以使用ajax进行相应接口调用,接口会返回相应的数据。如下图:
    


    或者是这样的 $.get('localhost:3000/posts',function(){});

    五:修改监听端口

    修改监听端口,可以开启多个终端进行多个json文件的监听
         json-server --watch -port 8888 db.json(监听8888端口)
    

    六:RESTful风格接口实现CURD:

    RESTful API设计指南:推荐阮一峰的(http://www.ruanyifeng.com/blog/2014/05/restful_api.html)
    根据请求方法的不同来实现不同的目的
    

    GET : 获取数据(获取表单列表数据)
    POST : 新增数据(新增一个表单项)
    DELETE :删除数据(删除一条表单数据)
    PATCH :更新数据 (修改一条表单数据)//根据某个属性修改,上传修改的某个属性
    PUT :更新数据(修改一条表单数据)//更新整条数据,上传修改的整条数据

    七:数据过滤

    数据过滤是json-server中非常强劲的功能,通过url加上简单的query字段,即可以过滤得到各种各样的数据
    

    八:表单分页的简单实现

    json-server的高级定义,高级过滤等(未完待续!!!)
    

    github地址:https://github.com/typicode/json-server

  • 相关阅读:
    UVA11375
    uva11806(容斥原理)
    uva10325(容斥原理)
    hdu4135(容斥原理)
    CF798
    多线程
    (转载)SVN 提交操作缩写(A D M R) .
    上不了网,如何判断
    (转载)myeclipse项目名称重命名
    mysql模糊查询
  • 原文地址:https://www.cnblogs.com/blackgan/p/7435228.html
Copyright © 2011-2022 走看看