千锋扣丁学堂HTML5培训详解Vue结合后台的列表增删改案例

2019-05-07 14:06:27 1953浏览

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于详解Vue结合后台的列表增删改案例，首先列表内容还是与之前的列表内容类似，不过此处我们会采用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>

上述代码中有两个地方略显啰嗦，第一个是url，第二个是传递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>

以上就是关于千锋扣丁学堂HTML5培训详解Vue结合后台的列表增删改案例的全部内容，希望对大家的学习有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

【扫码进入HTML5VIP免费公开课】

【关注微信公众号获取更多学习资料】【扫码进入HTML5前端开发VIP免费公开课】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 Vue框架

上一篇 5月7日HTML5公开课之Vue打造京东购物车项目实战下一篇 5月8日HTML5公开课之小米轮播图项目案例实战

千锋扣丁学堂HTML5培训详解Vue结合后台的列表增删改案例

热门专区

课程推荐