使用vue ajax 调用数据库内容进行增删改查

本项目要先预备好以下内容
1.car数据库
2.增删改查接口，我已经写好了一个简单的PHP增删改查四个接口
3.vue的指令、循环、生命函数，及get、post请求等知识点
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css"/>
    </head>
    <body>
        
        <div id="app" class="container">        
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
        
              <label>
                Name:
                <input type="text"  class="form-control" v-model="name">
              </label>
        
              <input type="button" value="添加"  class="btn btn-primary" @click="add">
              <label>
                newName:
                <input type="text"  class="form-control" v-model="newName" id="edit" ref="edit">
              </label>
                      
              <input type="button" value="确认修改"  class="btn btn-primary" @click="edited">
            </div>
          </div>
        
        
        
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>删除</th>
                <th>修改</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td>
                  <a href="" @click.prevent="del(item.id)">删除</a>
                </td>
                <td>
                  <a href="" @click.prevent="edit(item.name)">修改</a>
                </td>
              </tr>
            </tbody>
          </table>
        
        </div>
        <script type="text/javascript">
            // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
            Vue.http.options.root = 'http://localhost/dome/';
            // 全局启用 emulateJSON 选项，gpost方法就不用加 { emulateJSON: true } 参数了
            Vue.http.options.emulateJSON = true;
            var vm = new Vue({
              el: '#app',
              data:{
                  // id:"",
                  name:"",                 
                  oldName:"",
                 list: [
                        {"id":1,"name":"宝马","ctime":new Date}                 
                  ]
              },
              created() {//生命周期函数
                  this.getList()
              },
              methods:{
                  getList(){
                      this.$http.get('vueserver/data1.php').then(result => {
                          var result=result.body//获得数据
                        this.list=result//给list赋值
                      })
                  },
                  add(){
                      this.$http.post('vueserver/data3.php',{name:this.name},{ emulateJSON: true }).then(result=>{
                          
                          this.getList()
                          this.name=''
                         
                      })
                  },
                  del(id){
                      this.$http.post('vueserver/data2.php',{id:id}).then(result=>{
                                                
                          this.getList()
                                               
                      })
                  },
                  edit(name){
                      //this.oldName=name;//将要修改的内容                      
                      this.name=name
                      // document.getElementById("edit").focus()//js获取焦点
                      this.$nextTick((x)=>{ //vue获取焦点 ref
                      
                          this.$refs.edit.focus();
                      
                      })
                  },
                edited(){
                    
                      this.$http.post('vueserver/data4.php',{old:this.name ,news:this.newName}).then(result=>{
                                              
                        this.getList()
                        this.name=''
                        this.newName=""
                      })
                  },
                  
              }
              
              
              
            })
        
        
        </script>
    </body>
</html>
原文地址：https://www.cnblogs.com/shangrao/p/12933747.html