本文编写于 171 天前,最后修改于 138 天前,其中某些信息可能已经过时。

此案例继续完善上一篇的品牌列表的功能,实现添加功能!

添加功能api说明如下如所示:

添加品牌列表到后台服务器

      分析:
      1. 经过查看 数据API接口,发现,要发送一个 Post 请求,  this.$http.post
      2. this.$http.post() 中接收三个参数:
      2.1 第一个参数: 要请求的URL地址
      2.2 第二个参数: 要提交给服务器的数据 ,要以对象形式提交给服务器 { name: this.name }
      3.3 第三个参数: 是一个配置对象,要以哪种表单数据类型提交过去, { emulateJSON: true }, 以普通表单格式,将数据提交给服务器 application/x-www-form-urlencoded
     3. 在 post 方法中,使用 .then 来设置成功的回调函数,如果想要拿到成功的结果,需要 result.body

添加部分vue代码如下:

add() { 
          this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
            if (result.body.status === 0) {
              // 成功了!
              // 添加完成后,只需要手动,再调用一下 getAllList 就能刷新品牌列表了
              this.getAllList()
              // 清空 name 
              this.name = ''
            } else {
              // 失败了
              alert('添加失败!')
            }
          }) 
        },

完整案例代码见上一篇末! Vue-resource这个包可以自行下载导入,这里就不做提供!

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 过滤器以及 padStart 和 padEnd
http://blog.zh66.club/index.php/archives/499/
18.vue.js 自定义按键修饰符
http://blog.zh66.club/index.php/archives/500/
19.vue.js 自定义全局指令
http://blog.zh66.club/index.php/archives/501/
20.vue.js 自定义私有指令
http://blog.zh66.club/index.php/archives/502/
21.vue.js 指令函数的简写形式
http://blog.zh66.club/index.php/archives/503/
22.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
23.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/
24.vue.js品牌列表-从数据库获取列表
http://blog.zh66.club/index.php/archives/506/
25.vue.js 品牌列表 - 完成添加功能
http://blog.zh66.club/index.php/archives/508/
26.vue.js 品牌列表 - 完成删除功能
http://blog.zh66.club/index.php/archives/510/
27.vue.js 品牌列表 - 全局配置数据接口的根域名
http://blog.zh66.club/index.php/archives/512/