全栈开发攻略：如何用RESTful架构构建高效数据交互探索全栈开发的精髓，掌握如何通过RESTful架构，实现高效的数据

一：为什么要做一个网站？

技术上，网站作为一种平台，可以将各种资源以结构化的方式展现给用户。网站的核心概念是将信息、服务和功能组织成易于访问的形式。通过使用RESTful架构，网站能够将这些资源以统一的、标准化的方式向外暴露，使得数据的获取和操作更加高效和灵活。这种“资源即一切”的理念使得网站不仅仅是展示信息的工具，而是一个功能丰富、互动性强的平台。下面用一个小demo为友友们展示一下restful

项目结构

二：后端

2.1：创建后端文件夹（backend）

初始化化为后端项目：npm init -y

2.2：安装包：npm i json-server

json-server是json文件快速编程后端数据的package
json 是对象字面量，也是前后端数据格式

2.3：准备数据（db.json）

创建db.json文件，手动输入json格式的数据,z这里写两个数组做示范，其中users是用户信息，posts是文章的信息

{
    "users":[
        {
            "id":1,
            "name":"midsummer",
            "hometown":"南昌"
        }
    ],
    "posts": [
    {
      "id": "7392471384968708135",
      "title": "秋招冲榜：掌握全栈，AI加持"
    }
  ]
}

2.在package.json包中加入脚本dev，将数据传出

package.json 为项目描述文件

"dev": "json-server users.json"

2.4：运行项目：npm run dev

dev为 script-name（脚本名字）

资源文件（json,mysql,excel...）通过http服务，作为一个网站暴露出去，通过json-server访问http://localhost:3000/users 就能拿到相应的users设计数据,这就是restful的设计原则

三：restful 网站开发世界

3.1：暴露的方式

通过db.json资源，json文件的方式
- users
- posts
restful 定义了资源的提供方式-->名词+动词=资源暴露方式
- Method，GET对资源进行获取
- url-->localhost:3000/users，可以在Postman中可以测试一下，Postman是http 请求的模拟工具

3.2：HTTP动作

http协议是基于请求响应的简单协议

1. GET读操作

GET （读操作）

2. POST写操作

POST （写操作）

插入成功

3. PATCH修改操作

修改一个用户

修改成功

4. DELETE删除操作

删除一个用户

删除成功

请求:

1.请求行：http，Method

2.请求头：Cookie

3.请求体：表单数据

响应:

1.响应头：状态码（200|201|304)

2.响应体：json

四：前端

4.1：获取数据

fetch('http://localhost:3000/users')：向指定的 URL 发起一个 GET 请求。
.then(response => response.json())：将服务器返回的响应转换为 JSON 格式。
.then(data => { resolve(data); })：将转换后的数据传递给 resolve，使得 Promise 变为已解决状态。

    <script>
        function getAjaxUserData(){
            return new Promise((resolve,reject)=>{
                fetch('http://localhost:3000/users')
                    .then(data=>data.json())
                    .then(data=>{
                        resolve(data);
                  })
            })
        }
    </script>

4.2：模拟请求

await getAjaxUserData()：等待 getAjaxUserData 函数执行完成并返回数据。这使得 users 变量在数据准备好之后才会被赋值
模拟发送一个 POST 请求到服务器,创建或更新用户数据

<script>
    //function getAjaxUserData(){...}
    (async function(){
         const users = await getAjaxUserData();
         //发送一个 POST 请求到服务器
         fetch('http://localhost:3000/users',{
             method:'post',
             body:JSON.stringify({//JSON格式字符串
                 id:"20",
                 name:"midsummer",
                 hometown:"上海"
             })
         })    
     })()
</script>

五：总结

后端设置：
- 使用 json-server 快速搭建模拟后端。
- 创建 db.json 文件定义数据结构，并通过 npm run dev 启动服务器提供数据服务。
RESTful 架构：
- GET：读取数据。
- POST：创建数据。
- PATCH：更新数据。
- DELETE：删除数据。
前端交互：
- 使用 fetch API 发起请求，结合 Promise 和 async/await 处理异步数据。

全栈开发攻略：如何用RESTful架构构建高效数据交互