DEV Community

pianoboy
pianoboy

Posted on

json-service-editor

If you are planning to create a front-end DEMO for demonstration, but do not have support from server personnel; If you are developing a front-end page but the server is not well developed; So json-service-editor is a good choice!

git: https://github.com/zhuqingyv/json-service-editor
npm: https://www.npmjs.com/package/json-service-editor

Quick Start

npm install json-service-editor -g
Enter fullscreen mode Exit fullscreen mode

.json-service.json


{
  "url": "src/demo.json",
  "port": 3000
}
Enter fullscreen mode Exit fullscreen mode

run

json-service-editor
Enter fullscreen mode Exit fullscreen mode

Now you have started a local JSON read and write service with port 3000.

Interface

Here are the most basic read and write interfaces get and set

Get JSonValue

fetch('http://localhost:3000/get/demo.json', {
  method: 'GET',
})
Enter fullscreen mode Exit fullscreen mode

Set JSonValue

fetch('http://localhost:3000/set/demo.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ message: 'hello world!' }),
})
Enter fullscreen mode Exit fullscreen mode

Options

There are two types of configuration files provided here, one is. json service. json and the other is. json service. js. If both js and json configurations exist in the running directory, the js script takes precedence.

Option .json-service.js .json-service.json description
url File relative path
port Service port
service Custom Service Configuration

Here are some code demonstrations:

module.exports = () => {
  const url = "src/demo.json";
  const port = 3110;
  return {
    url,
    port,
    service: {
      '/post': {
        methods: 'post',
        handle: ({ json, params, res, req }) => {
          res.json(200, { message: 'pass!' });
        }
      },

      '/get': {
        methods: 'get',
        handle: ({ json, params, res, req }) => {
          res.json(200, { message: 'pass!' });
        }
      }
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Simpler Browser API (Base on FetchAPI)

First:

npm install json-service-editor

Code:

import JsonServiceEditorCore from 'json-service-editor';

const serviceSDK = new JsonServiceEditorCore({
  baseUrl: 'http://localhost:3000',
  fileName: 'demo.json'
});

const { getValue, setValue } = serviceSDK;

getValue(
  // success callback
  () => {},
  // fail callback
  () => {}
)

Enter fullscreen mode Exit fullscreen mode

Top comments (0)