json-service-editor
pianoboy
Posted on June 14, 2023
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
.json-service.json
{
"url": "src/demo.json",
"port": 3000
}
run
json-service-editor
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',
})
Set JSonValue
fetch('http://localhost:3000/set/demo.json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: 'hello world!' }),
})
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!' });
}
}
}
}
};
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
() => {}
)
Posted on June 14, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.