使用接口的形式发送数据
一 、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 发送请求 (重点掌握)
读音 : /艾克笑丝/ 【哈哈，不准确。】
如果以后 发现一个工具名
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); }); }