详解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所做的简单后台,大家也可以自行操作。

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

Javascript 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
js单线程的本质 Event Loop解析
Oct 29 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
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
详解webpack自动生成html页面
2017/06/29 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
python实现自动更换ip的方法
2015/05/05 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
民间个人借款协议书
2014/09/30 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
教师个人培训总结
2015/02/11 职场文书
网吧员工管理制度
2015/08/05 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python