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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️