384 json-server， axios

2024-02-21 12:46:46

使用接口的形式发送数据

一、json-server 提供假数据接口

json-server 作用 : 根据指定的 JSON 文件, 提供假数据接口
地址 : json-server

使用步骤

1. 全局安装 json-server  : `npm i -g json-server`
2. 准备一个json数据
3. 执行 :  `json-server data.json`

> json数据参考
json数据可以参考 :
{
  "todos": [
    {
      "id": 1,
      "name": "吃饭",
      "age": 20
    }
  ]
}

REST API 格式

* 1. 查询 : GET
* 2. 添加 : POST
* 3. 删除 : DELETE
* 4. 更新 : PUT 或者 PATCH(打补丁)

具体接口

* 1. 查询全部数据 http://localhost:3000/todos
*    查询指定数据 http://localhost:3000/todos/2
*
*  2. 添加一个对象 //localhost:3000/todos
*     POST
*     id 会自动帮我们添加 【不用写id。】
*
* 3. 更新数据 http://localhost:3000/todos/3
*    PUT 或者 PATCH
*    PUT 需要提供该对象的所有数据
*    PATCH 只需要提供要修改的数据即可
*
* 4. 删除数据
*    http://localhost:3000/todos/3
*    DELETE

可以借助 postman 测试接口

二、axios 发送请求 (重点掌握)

读音 : /艾克笑丝/ 【哈哈，不准确。】

axios 使用说明

如果以后发现一个工具名 XXX：

（1）XXX的官方文档

（2）github

（3）npm

（4）百度 / 谷歌

作用 : 一个专门用来发送 ajax 请求的库, 可以在浏览器或者 node.js 中使用

Promise based HTTP client for the browser and node.js
    以Promise为基础的HTTP客户端，适用于：浏览器和node.js
    封装ajax，用来发送请求，异步获取数据

使用步骤

1. 本地安装 axios : `npm i axios`
2. 导入 axios
3. 使用

GTE 方式发送请求

// 方式1
axios.get('http://localhost:3000/todos/3').then(res => {
  console.log('获取到数据了：', res.data)
})

// 方式2
axios
  .get('http://localhost:3000/menus', {
    params: {
      id: 003
    }
  })
  .then(res => {
    console.log('获取到数据了：', res.data)
  })

POST 方式发送请求

     // post 请求
     axios
         // 第一个参数：表示接口地址
         // 第二个参数：表示接口需要的参数
         .post('http://localhost:3000/todos', {
           name: 'axios添加数据',
           done: true
         }).then ( res =>  打印 res)

使用axios测试 todos 的几种接口

     //1. GET
      // 没有参数
      axios.get('http://localhost:3000/todo').then(res => {
        console.log(res)
      })
      // 有参数
      axios.get('http://localhost:3000/todo/1').then(res => {
        console.log(res)
      })
      axios
        .get('http://localhost:3000/todo', {
          params: {
            id: 2
          }
        })
        .then(res => {
          console.log(res)
        })

      // 2. POST
      axios
        .post('http://localhost:3000/todo', {
          name: 'XXX',
          age: 1
        })
        .then(res => {
          console.log(res)
        })

      //3. 删除
      axios.delete('http://localhost:3000/todo/8', {}).then(res => {
        console.log(res)
      })

      //4. 更新 - put
      axios
        .put('http://localhost:3000/todo/2', {
          name: '111',
          age: 300
        })
        .then(res => {
          console.log(res)
        })

      // 4. 更新 - patch
      axios
        .patch('http://localhost:3000/todo/1', {
          age: 3000
        })
        .then(res => {
          console.log(res)
        })

05-axios的基本使用.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        // get
        //1. 获取全部数据
        // 参数 : url地址接口
        axios.get('http://localhost:3000/list').then(res => console.log(res))


        //2. 获取具体某一个
        axios.get('http://localhost:3000/list/3').then(res => {
            console.log(res)
        })


        //3. 获取具体某一个  id 作为 参数
        // 格式 : axios.get(url, config)
        // 配置项 config: { params(对象) 参数, headers(对象) : 请求头 }
        axios.get('http://localhost:3000/list', {
                params: {
                    id: 4
                },
                headers: {}
            })
            .then(res => {
                console.log(res)
            })



        // post 添加
        // post 添加是不需要传id的
        // 格式  axios.post(url, data)
        axios.post('http://localhost:3000/list', {
            name: '丽丽',
            done: false
        }).then(res => {
            console.log(res);
        })


        // delete 删除
        axios.delete('http://localhost:3000/list/5').then(res => {
            console.log(res)
        })


        // put / patch 修改
        axios.put('http://localhost:3000/list/6', {
            name: '春春3号',
            done: false
        }).then(res => {
            console.log(res);
        })


        axios.patch('http://localhost:3000/list/6', {
            name: '春春4号'
        }).then(res => {
            console.log(res)
        });
    </script>
</body>

</html>

三、完善 TodoMVC

获取全部

axios.get('http://localhost:3000/list').then(res => {
    console.log(res.data);
    this.list = res.data;
});

删除任务

axios.delete('http://localhost:3000/list/' + id).then(res => {
    this.list = this.list.filter(item => item.id !== id);
    console.log(res);
});

添加任务

# id 会自动加
axios
    .post('http://localhost:3000/list', {
    name: todoName,
    done: false
})
    .then(res => {
    console.log(res.data);
    this.list.push(res里的对象);
});

更新任务 (在 hideEdit 里实现)

# 难点1 : 在 hideEdit 这个方法里
# 难点2 : 获取的这个id 就是editId
hideEdit(e) {

axios.patch('http://localhost:3000/list/' + this.editId, {
    name: e.target.value
}).then(res => {
    console.log(res);

    this.editId = -1;
})

},

删除已经完成的

# 因为 这个假接口没有实现以下删除 完毕
clearCompleted() {
    // 清除已经完成的,,只需要过滤出来未完成的即可

    let arr = this.list.filter(item => item.done);
    arr = arr.map(item => item.id);

    for (let i = 0; i < arr.length; i++) {
        axios.delete('http://localhost:3000/list/' + arr[i]).then(res => {
            this.list = this.list.filter(item => item.id != arr[i]);
        });
    }
},

点击修改状态

# 单独给 checkbox 都注册点击事件
# @input='stateChanged(item.id)' 

stateChanged(id) {
    let todo = this.list.find(item => item.id == id);

    axios.patch('http://localhost:3000/list/' + id, {
        done: !todo.done
        }).then(res => {
        console.log(res);
        });
}

码农公寓

使用接口的形式发送数据

一 、json-server 提供假数据接口

二 、axios 发送请求 (重点掌握)

三、完善 TodoMVC

相关文章

一、json-server 提供假数据接口

二、axios 发送请求 (重点掌握)