384 json-server, axios

使用接口的形式发送数据

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

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

  2. 地址 : json-server

  3. 使用步骤

    1. 全局安装 json-server : `npm i -g json-server`2. 准备一个json数据3. 执行 : `json-server data.json`> json数据参考json数据可以参考 :{ "todos": [ { "id": 1, "name": "吃饭", "age": 20 } ]}
  4. REST API 格式

* 1. 查询 : GET* 2. 添加 : POST* 3. 删除 : DELETE* 4. 更新 : PUT 或者 PATCH(打补丁)
  1. 具体接口
* 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
  1. 可以借助 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. 导入 axios3. 使用

  • GTE 方式发送请求
// 方式1axios.get('http://localhost:3000/todos/3').then(res => { console.log('获取到数据了:', res.data)})// 方式2axios .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

  1. 获取全部

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

  2. 删除任务

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

  3. 添加任务

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

  4. 更新任务 (在 hideEdit 里实现)

    # 难点1 : 在 hideEdit 这个方法里# 难点2 : 获取的这个id 就是editIdhideEdit(e) {axios.patch('http://localhost:3000/list/' + this.editId, { name: e.target.value}).then(res => { console.log(res); this.editId = -1;})},

  5. 删除已经完成 的

    # 因为 这个假接口没有实现以下删除 完毕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]); }); }},

  6. 点击修改状态

    # 单独给 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); });}

相关文章