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.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
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.