首页
所有分类
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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
详解微信小程序实现跑马灯效果（附完整代码）
Apr 29 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
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
异步机制(1) 限流器(1) springCloud(6) 轮询锁(1) reduce()(1) 远程连接(2) 死锁(3) 信号同步(1) 生命周期(1) 逻辑备份(1)
You might like
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
工商管理应届生求职信
2013/10/07 职场文书
实习生的自我评价
2014/01/08 职场文书
商场周年庆活动方案
2014/08/19 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL
frg-100简单操作(设置）说明
2022/04/05 无线电
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技