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('请求品牌数据失败') }) }