首页
所有分类
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判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解
Feb 15 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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) re模块(2) for(1) while(1) sched(1) 分词器(1) 事件调度器(1) mediapipe(1) okenizer(1) cvzone(1)
You might like
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
对Python 内建函数和保留字详解
2018/10/15 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
java字符串格式化输出实例讲解
2021/01/06 Python
eBay澳大利亚站：eBay.com.au
2018/02/02 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
大学生实习自我鉴定
2013/12/11 职场文书
干部行政关系介绍信
2014/01/17 职场文书
初一生物教学反思
2014/01/18 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
党支部活动策划方案
2014/08/18 职场文书
大学军训决心书
2015/02/05 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
大学生读书笔记范文
2015/07/01 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS