前言

该demo是一个前后端分离的简单应用程序，展示如何使用前端JavaScript技术（HTML、fetch API及async/await语法）与后端Node.js搭建的RESTful API进行交互。后端服务器部分采用了json-server工具，能够快速搭建一个模拟REST API的服务器，模拟真实后端数据交互。下面我将为大家介绍详细的实现过程。

后端（Node.js + json-server）

1. 技术栈：使用Node.js和json-server创建了一个简单的RESTful API服务器。

2. 数据存储：数据存储在内存中，模拟了一个JSON数据库，可以通过HTTP请求来进行操作。

3. API端点：

   • /users：用于GET请求获取所有用户，POST请求添加新用户。
   • /users/:id：用于GET请求获取特定ID的用户，PUT请求更新特定ID的用户，DELETE请求删除特定ID的用户。

优点：简化了后端开发设置，无需复杂的数据库配置和API实现，便于前端开发者独立进行接口调用测试。

配置后端环境

初始化后端项目 npm init -y

npm init -y 是一个命令行指令，用于快速初始化一个新的 Node.js 项目， 一旦项目初始化完成，你可以开始安装项目依赖（使用 npm install <package-name>），编写代码，以及添加更详细的项目配置到 package.json 文件中。

安装json-server工具 npm i json-server

安装完成后，就可以在终端中通过 json-server 命令来启动一个模拟的 RESTful API 服务器了。

编写后端JSON数据

新建db.json文件，该文件用于存储项目所需的数据。

来到package.json文件中，找到scripts对象，在scripts对象里，定义了与项目相关的可执行脚本命令。这里的dev是一个自定义的脚本名称，其值 json-server db.json 指定了当运行这个脚本时要执行的命令。

部署http服务器 npm run dev

执行成功后，会返回一个http地址，访问该地址可以看到后端中所存储的数据。

前端

数据获取和显示：getAjaxUserData函数通过Fetch API从http://localhost:3000/users获取JSON数据，然后在页面加载时更新表格。

用户操作：四个按钮的onclick事件分别调用add、remove、update和get函数，这些函数使用Fetch API执行CRUD操作：

    -   `add`函数执行POST请求，添加新的用户数据。
    -   `remove`函数执行DELETE请求，删除指定ID的用户。
    -   `update`函数执行PUT请求，更新指定ID的用户信息。
    -   `get`函数执行GET请求，获取指定ID的用户详情。

代码详解

前端页面效果如图:

增加操作

当点击添加按钮时，会执行add()函数，向后端服务器发送POST请求，具体执行过程如下:

 // 增加
        async function add() {

            const user = {
                id: "7",
                name: "雪豹",
                hometown: "理塘",
            };

            await fetch('http://localhost:3000/users', {
                method: "POST",
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(user),
            });
        };

这段代码定义了一个名为add的异步JavaScript函数，用于向后端服务器（通过JSON-Server运行在http://localhost:3000/users）添加一个新的用户。函数做了以下几个步骤：

1. 创建了一个名为user的对象，包含用户的基本信息，包括id、name和hometown。
2. 使用fetch函数发起一个HTTP POST请求到http://localhost:3000/users，将user对象以JSON格式作为请求体发送。
3. fetch调用是异步的，使用await关键字确保请求完成后再继续执行其他代码。
4. JSON-Server正在本地运行并监听3000端口，提供一个RESTful API来处理用户数据。

函数执行完成之后，在页面上将会看到一个新增的数据,此时db.json文件中的数据也会同步改变:

删除操作

当点击删除按钮时，会执行remove()函数，向后端服务器发送DELETE请求，具体执行过程如下:

async function remove() {
            // 假设要删除id为5的用户
            const deleteUserId = "4";
            await fetch(`http://localhost:3000/users/${deleteUserId}`, {
                method: "DELETE",
                headers: { 'Content-Type': 'application/json' },
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`删除id: ${deleteUserId}失败`);
                    }
                    console.log(`删除id: ${deleteUserId} 成功`);
                })
                .catch(error => console.error('Error:', error));
        }

以上代码定义了一个名为remove的异步JavaScript函数，用于向后端服务器发送一个HTTP DELETE请求以删除指定ID的用户。

当函数执行完成之后，id为4的用户将被删除，效果如下:

更新操作

当点击“改”按钮时，会执行update()函数，向后端服务器发送PUT请求，具体执行过程如下:

async function update() {
            // 假设要更新id为1的用户信息
            const userIdToUpdate = "1";
            const updatedUser = {
                id: userIdToUpdate,
                name: "曼巴",
                hometown: "费城",
            };

            await fetch(`http://localhost:3000/users/${userIdToUpdate}`, {
                method: "PUT",
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(updatedUser),
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`id:${userIdToUpdate}更新失败`);
                    }
                    console.log(`用户id:${userIdToUpdate} 更新成功.`);
                })
                .catch(error => console.error('Error:', error));
        }

1. 初始化: 函数内部首先定义了一个变量userIdToUpdate，其值为字符串"1"，表示要更新ID为1的用户。然后，定义了一个名为updatedUser的对象，包含了更新后的用户信息，包括id、name和hometown。
2. 构建请求: 使用fetch函数构造一个PUT请求，目标URL根据userIdToUpdate动态生成为http://localhost:3000/users/1。请求头设置了Content-Type为application/json，并将更新后的用户对象转换为JSON字符串作为请求体。

成功执行后，效果如下：

更新前：

更新后：

查找操作

发送GET请求: 使用fetch函数构造一个HTTP GET请求，目标URL根据userIdToGet动态生成为http://localhost:3000/users/4。这个请求用于从服务器获取指定ID的用户数据。

async function get() {
            // 查询id为4的用户信息
            const userIdToGet = "4";
            await fetch(`http://localhost:3000/users/${userIdToGet}`)
                .then(response => response.json())
                .then(user => console.log(`id: ${userIdToGet}:`, user))
                .catch(error => console.error('Error fetching user:', error));
        }

查找操作执行成功后会在控制台输出所查询到的内容：

以上便是完成CRUD操作的核心讲解。本篇文章就到此为止啦，希望通过这篇文章能对你理解JS全栈有所帮助，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。

项目源码可访问gitee地址获取:gitee.com/pigs-like-p…