首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解Vue结合后台的列表增删改案例

Posted in Javascript onAugust 21, 2018

首先列表内容还是与之前的列表内容类似，不过此处我们会采用Vue中数据请求的方式来实现数据的增删。那么我们使用的Vue第三方组件就是vue-resource，vue发起请求的方式与jQuery的ajax相似，组要是请求地址与参数。和方法

首先我们先看到的是列表请求

获取列表

<table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">删除</a></td>
    
            </tr>
          </tbody>
          
        </table>

在methods中获取到的加入获取数据的list方法，使用get请求

getList(){
          this.$http.get('list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("获取数据失败");
            }
          })
        },

需要注意的是，使用vue-resource的请求获取的数据，都封装在回调数据的body域中，同时我们需要在Vue组件的created生命周期函数中加入使用该方法来渲染页面

created(){
      //在其他方法中调用定义的方法使用this关键字
          this.getList();
      },

增加和删除元素的方法与此类似，这里给出详细代码，不做讲解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
    <script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" rel="external nofollow" rel="external nofollow" />
  </head>
  <body>
    <div id="app">
      
      <div class="panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
      <div class="panel-body form-inline">
        <label>
          Id:<input type="text" v-model="id" class="form-control" />
        </label>
        <label>
          Name:
          <input type="text" v-model="title" class="form-control" />
        </label>
        <label>
          关键字
        </label>
        <input type="text" v-model="description" class="form-control"/>
        <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

      </div>       
      </div>
        <table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">删除</a></td>
    
            </tr>
          </tbody>
          
        </table>
    </div>

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        id:"",
        title:"",
        description:"",
        list:[],

      },
      created(){
          this.getList();
      },
      methods:{

        getList(){
          this.$http.get('http://localhost:8080/list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("获取数据失败");
            }
          })
        },
        add(){
          this.$http.post('http://localhost:8080/submit',{id:this.id,title:this.title,description:this.description},{emulateJSON:true}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("获取数据失败");
            }
          })
        },
        del(id){
            this.$http.get('http://localhost:8080/del/'+id,{emulateJSON:true}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("获取数据失败");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>

上述代码中有两个地方略显??拢?谝桓鍪?rl，第二个是传递Json数据之后对json的处理，vue-resource 提供了两个简化的操作，

url简化

我们可以在定义Vue对象之前使用

​ Vue.http.options.root=http://localhost:8080/;

来定义请求的基础url，然后直接使用请求本身的url就可以了，但是需要注意的是两段url连接起来之后，不允许出现‘//',否则会出问题，一般我会采用基础url最后多‘/',而自定义的url则无

还有一个是对传递数据的参数的简化，

我们可以在定义Vue对象之前使用

Vue.http.options.emulateJSON = true;

这样我们在请求时即可默认有此参数，请求的时候就不用加上这个参数了。

经过简化，上述代码被简化为

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
    <script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" rel="external nofollow" rel="external nofollow" />
  </head>
  <body>
    <div id="app">
      
      <div class="panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
      <div class="panel-body form-inline">
        <label>
          Id:<input type="text" v-model="id" class="form-control" />
        </label>
        <label>
          Name:
          <input type="text" v-model="title" class="form-control" />
        </label>
        <label>
          关键字
        </label>
        <input type="text" v-model="description" class="form-control"/>
        <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

      </div>       
      </div>
        <table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">删除</a></td>
    
            </tr>
          </tbody>
          
        </table>
    </div>

  <script>
    Vue.http.options.root="http://localhost:8080/";
     Vue.http.options.emulateJSON = true;
    var vm = new Vue({
      el:'#app',
      data:{
        id:"",
        title:"",
        description:"",
        list:[],

      },
      created(){
          this.getList();
      },
      methods:{

        getList(){
          this.$http.get('list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("获取数据失败");
            }
          })
        },
        add(){
          console.log("1");
          this.$http.post('submit',{id:this.id,title:this.title,description:this.description}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("获取数据失败");
            }
          })
        },
        del(id){
          console.log(2);
            this.$http.get('del/'+id).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("获取数据失败");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>

此案例后台为我使用mybatis和springboot所做的简单后台，大家也可以自行操作。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解Vue结合后台的列表增删改案例

- Author -

镇?乓?嫦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
通过js动态操作table(新增，删除相关列信息)
May 23 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
简单理解vue中Props属性
Oct 27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
Aug 16 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
小程序开发基础之view视图容器
Aug 21 #Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标（阿里icon）的方法
Aug 20 #Javascript
VOLVO(1) 军机(1) 收信机(3) 沃尔沃(1) BOSE(2) 摩托罗拉(1) MOTOROLA(1) 77A(2) 晶体管(2) 66-XI(1)
You might like
什么是MVC，好东西啊
2007/05/03 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php常用数学函数汇总
2014/11/21 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php curl 上传文件代码实例
2015/04/27 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法
2019/06/04 Javascript
python编写Logistic逻辑回归
2020/12/30 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
jurlique茱莉蔻英国官网：澳洲天然护肤品
2018/08/03 全球购物
英国可持续奢侈品包包品牌：Elvis & Kresse
2018/08/05 全球购物
大二学期个人自我评价
2014/01/13 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
golang import自定义包方式
2021/04/29 Golang
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB