开发者学堂课程【Vue.js 入门与实战：品牌列表-完成添加功能】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8160
品牌列表-完成添加功能
内容介绍
一、添加品牌数据
二、范例
一、添加品牌数据
想要进行添加，首先要看API接口是什么，找到左侧的品牌列表，可以看到下表：
地址 |
|
作用描述 |
添加品牌数据 |
请求方式 |
Post |
传入api的参数 |
name：‘品牌名称’ |
返回数据格式 |
Json
|
返回数据格式样例 |
{ status:0, message:”添加成功” } |
二、范例
add() { //添加品牌列表到后台服务器
// 分析：
//1.通过查看 数据API接口，发现，要发送一个Post请求， this 。$http,post
//2.this.$http.post()中接收三个参数：
// 2.1 第一个参数：要请求的URL地址
// 2.2 第二个参数：要提交给服务器的数据，要以对象形式提交给服务器( name:this.name )
// 2.3 第三个参数：是一个配置对象，要以哪种表单数据类型提交过去，(emulateJSON:true ),以普通表单格式，将数据提交给服务器
application/x-www-form-urlencoded
//3.在post方法中，使用。then 来设置成功的回调函数，如果想要拿到成功的结果，需要result.body
this.$http.post(‘http://vue.studyit.io/api/addproduct’,{name:this.name},{emulateJSON:true})
.then(result=> {
if(result.body.statue === 0) {
//成功了！
//添加完成后，只需要手动，在调动一下getAllList就能刷新品牌列表了
this.getAllLIst()
//清空name
this.name =‘’
}else{
//失败了
alert(‘添加失败！’)
}
}}
