03(02

axios.get('http://localhost:3000/brands') //就是一個promise對象 .then(res=>{ // res 使用響應對象 包含了響應的數據 console.log(res.data) //響應的數據 }) .catch(err=>{ // err 錯誤對象 console.log(err.message) }) 有請求體 xios.post('http://localhost:3000/brands', { // 請求主體的數據 brandName: 'xxx', createTime: new Date() }).then(res => { console.log(res.data) }).catch(err => { console.log(err.message) })

// 其餘請求函數 // axios.get() // axios.post() // axios.put() // axios.delete()

09-表格案例-axios版-列表

• 獲取接口的數據
• mounted時候獲取，等vue的視圖渲染完畢，獲取數據。
• 經過axios來獲取數據
• 獲取數據成功--->渲染到頁面--->數據驅動視圖--->修改數據

data: { list: [] }, mounted () { // 視圖安裝完成 渲染完成 axios獲取全部品牌數據 axios.get('http://localhost:3000/brands') .then(res => { // 渲染列表 res.data 全部品牌數據 // 使用指令去渲染視圖 this.list = res.data }).catch(err => { //錯誤提示 alert('請求品牌數據失敗') }) }

{{item.id}} {{item.brandName}} {{item.createTime}} 刪除 10-表格案例-axios版-添加

• 當你點擊添加按鈕 綁定事件@click=「add()」 methdos定義函數 add(){}
• add(){} 準備添加品牌時候的數據
• 當你想獲取用戶輸入的品牌名稱時候 給輸入框綁定v-model=「brandName」
• 經過axios去發送 post 請求 同時 輸入框內容清空
• 當處理成功的時候 更新列表

<button class="btn btn-primary" @click="add()">添加 data: { list: [], brandName: '' }, // methods 定義 add () { // 準備數據 const brand = { brandName: this.brandName, createTime: new Date() } // post 請求 axios.post('http://localhost:3000/brands', brand) .then(res => { // 處理成功時候 更新列表 this.getList() }) .catch(err => alert('添加品牌失敗')) //清空輸入框 this.brandName = '' }, 封裝getList函數 // methods 定義 getList () { // 視圖安裝完成 渲染完成 axios獲取全部品牌數據 axios.get('http://localhost:3000/brands') .then(res => { // 渲染列表 res.data 全部品牌數據 // 使用指令去渲染視圖 this.list = res.data }).catch(err => { //錯誤提示 alert('請求品牌數據失敗') }) }