Building a Full-Stack RESTful API with json-server and Postman
This tutorial walks through creating a full‑stack project that uses json-server to expose a RESTful API, demonstrates CRUD operations via Postman, and shows how to interact with the API from a simple frontend using JavaScript fetch calls.
Introduction
RESTful is a software architecture style based on the HTTP protocol and REST principles, using URIs to identify resources and standard HTTP methods (GET, POST, PUT, DELETE) to manipulate them in a stateless manner.
Let’s start full‑stack RESTful development.
Project Initialization
A full‑stack project named fullstack is created with separate frontend and backend folders. In the backend folder, run npm init -y to generate package.json , then create a db.json file to hold mock data.
Install json-server with npm i json-server . After installation, add a script in package.json :
"dev": "json-server db.json"Run the server using npm run dev and access the generated HTTP address to view the data defined in db.json .
db.json is a resource file that can be exposed via an HTTP service using json-server .
CRUD Operations with Postman
Download Postman, then use the GET method to retrieve the list of users. To fetch a specific user, append the ID to the URL, e.g., http://localhost:3000/users/1 .
Create (POST)
In Postman, select POST , set the body to raw JSON, and send the request to add a new record to db.json .
Update (PATCH)
Use PATCH with the URL http://localhost:3000/users/{id} to modify a user’s fields; the change is reflected in db.json .
Delete (DELETE)
Send a DELETE request to http://localhost:3000/users/{id} to remove a record, which disappears from db.json .
Summary of RESTful Methods
资源 名词 users
- Method GET 列表
- url http://localhost:3000/postHTTP actions:
GET 读取列表 http://localhost:3000/users/:id
POST 新增 http://localhost:3000/users
PATCH 修改 http://localhost:3000/users/id
DELETE 删除 http://localhost:3000/users/idBrief Overview of HTTP Protocol
HTTP consists of a request line (method, URI, version), request headers, request body, status line (version, status code, reason phrase), and response headers/body.
Next, we will implement the same operations from the frontend.
Frontend Example
Create index.html with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getAjaxUserData() {
return new Promise((resolve, reject) => {
fetch('http://localhost:3000/users')
.then(data => data.json())
.then(data => { resolve(data); });
});
}
(async function() {
const users = await getAjaxUserData();
console.log(users);
fetch('http://localhost:3000/users', {
method: 'post',
body: JSON.stringify({
id: "100",
name: "鹏哥",
hometown: "赣州"
})
})
})();
</script>
</body>
</html>JavaScript Functions
The getAjaxUserData() function returns a Promise that fetches data from /users , converts it to JSON, and resolves with the result.
function getAjaxUserData() {
return new Promise((resolve, reject) => {
fetch('http://localhost:3000/users')
.then(data => data.json())
.then(data => { resolve(data); });
});
}An immediately‑invoked async function calls getAjaxUserData() , logs the users, and then sends a POST request to add a new user.
(async function() {
const users = await getAjaxUserData();
console.log(users);
fetch('http://localhost:3000/users', {
method: 'post',
body: JSON.stringify({
id: "100",
name: "鹏哥",
hometown: "赣州"
})
});
})();Conclusion
By simulating a full‑stack RESTful workflow, we learned basic HTTP concepts, performed CRUD operations with Postman, and interacted with the API from a simple frontend using JavaScript fetch calls.
Selected Java Interview Questions
A professional Java tech channel sharing common knowledge to help developers fill gaps. Follow us!
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.