编程 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 相关文章推荐

IE autocomplete internet explorer's autocomplete

Jun 30 Javascript

javascript 语法基础想学习js的朋友可以看看

Dec 16 Javascript

js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

May 15 Javascript

JavaScript字符串删除重复字符的方法

Dec 25 Javascript

jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

Jul 09 Javascript

Bootstrap零基础入门教程(二)

Jul 18 Javascript

js获取html页面代码中图片地址的实现代码

Mar 05 Javascript

详解vue移动端项目的适配(以mint-ui为例)

Aug 17 Javascript

layui点击弹框页面表单请求的方法

Sep 21 Javascript

Vue学习之组件用法实例详解

Jan 06 Javascript

js实现mp3录音通过websocket实时传送+简易波形图效果

Jun 12 Javascript

OpenLayers3实现对地图的基本操作

Sep 28 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