axios的介紹
/**
*
* 1. 安裝 npm i axios
* 2. 引入
* node : const axios = require('axios')
* 瀏覽器 : <script src='..'></script>
*
*/
const axios = require('axios')
// > http://localhost:3000/list
/**
* GET
*/
//1. 獲取全部數據
// 參數 : url地址接口
axios.get('http://localhost:3000/list').then(res => {
console.log(res)
})
具體的使用
<!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>
詳細的示例
;(function(window) {
'use strict'
// 開始的是,就要從本地獲取list數據
// let list = JSON.parse(localStorage.getItem('list')) || []
// 實例化vue
const vm = new Vue({
el: '#app',
data: {
list: [],
// 任務名稱
todoName: '',
// 編輯id
editId: -1
},
created() {
// this.list = JSON.parse(localStorage.getItem('list')) || []
// 獲取全部數據 演示:get
axios.get('http://localhost:3000/list').then(res => {
console.log(res.data)
this.list = res.data
})
},
methods: {
/**
* 添加任務
*/
addTodo() {
// if (e.keyCode === 13) {
// console.log(this.todoName)
// 判斷如果input值爲空,
if (this.todoName.trim().length === 0) {
return
}
// 處理id 取 數組裏最後一個元素的id+1
// const id =
// this.list.length === 0 ? 1 : this.list[this.list.length - 1].id + 1
// 添加到數組裏面
// this.list.push({
// id,
// name: this.todoName,
// done: false
// })
// 添加任務 post
axios
.post('http://localhost:3000/list', {
name: this.todoName,
done: false
})
.then(res => {
// console.log(res.data)
// 把新加的對象,添加到list,更新視圖
this.list.push(res.data)
})
// 清空input裏的值
this.todoName = ''
// }
},
/**
* 刪除任務
*/
delTodo(id) {
// console.log(id)
// 拿到id,直接刪除不好刪, 過濾, 過濾出來不等於當前id的元素,新的數組,
// 把之前的list覆蓋掉就可以了
// this.list = this.list.filter(item => item.id != id)
axios.delete(`http://localhost:3000/list/${id}`).then(res => {
console.log(res)
this.list = this.list.filter(item => item.id != id)
})
},
/**
* 顯示編輯狀態
*/
showEdit(id) {
console.log('123')
this.editId = id
},
/**
* 隱藏編輯狀態
*/
hideEdit(e) {
console.log(e.target.value)
// 修改
axios
.patch(`http://localhost:3000/list/${this.editId}`, {
name: e.target.value
})
.then(res => {
console.log(res)
})
this.editId = -1
},
/**
* 底部的顯示與隱藏
*/
isFooterShow1() {
console.log('重新計算了')
return this.list.length > 0
},
/**
* 清除已完成的
*/
clearCompleted() {
// 清除已完成的(done:true) , 其實就是想過濾出來 未完成的(done:false)
this.list = this.list.filter(item => !item.done)
},
// 狀態改變
stateChange(id) {
//1.根據id 拿到 list的對象
let todo = this.list.find(item => item.id == id)
//2. 發送請求修改
axios
.patch(`http://localhost:3000/list/${id}`, {
done: !todo.done
})
.then(res => {
console.log(res.data.done)
})
}
},
computed: {
// 底部的顯示與隱藏
isFooterShow() {
return this.list.length > 0
},
// 剩餘未完成的個數
itemLeftCount() {
return this.list.filter(item => !item.done).length
},
// clearCompleted 的顯示與隱藏
isClearCompletedShow() {
// 如果只要有一個以上完成的 => 顯示(true)
// some 只要有一個滿足條件的,返回 true
return this.list.some(item => item.done)
}
}
// 監聽器
// watch: {
// list: {
// // 深度監聽
// deep: true,
// // 處理
// handler(newVal) {
// console.log('改變了')
// // 監聽到數組的變化 ,保存到本地
// // 以後不要直接把數組保存到本地,轉化爲字符串
// localStorage.setItem('list', JSON.stringify(newVal))
// }
// }
// }
})
})(window)
