【Vue.js 入门与实战】--品牌列表-完成添加功能

简介: 一、添加品牌数据二、范例

品牌列表-完成添加功能

内容介绍

一、添加品牌数据

二、范例

 

一、添加品牌数据

想要进行添加,首先要看API接口是什么,找到左侧的品牌列表,可以看到下表:

地址

http://vue.studylt.io/api/addproduct

作用描述

添加品牌数据

请求方式

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(‘添加失败!’)

}

}}

相关文章
|
15天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
15天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
18天前
|
JavaScript
vue element plus Descriptions 描述列表
vue element plus Descriptions 描述列表
41 0
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
24 1
|
1天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
5 1
|
4天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
7天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
8 0
|
8天前
|
JavaScript 安全 前端开发
|
10天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
57 1
|
14天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
13 0