vue 与后台交互的 增删 改查

vue 与后台交互的 增删 改查

首先，先把后台的增删改查接口写完，我的代码如下：

//展示
public function index()
{
    $data = Shop::all();
    return json_encode($data);
}

/**
 * @return string
 */
 
public function show()
{
    $id = $_GET['id'];
    $data = Shop::findOrFail($id);
    return json_encode($data);
}

/**
 * @param Request $request
 * @return string
 * 修改
 */
 //修改
public function update(Request $request)
{
   $id = $_GET['id'];
    $res=Shop::findOrFail($id);
    $data = $res->update([
        'name'=>$request->name,
        'price'=>$request->price,
        'stock'=>$request->stock
    ]);
    if ($data) {
        return json_encode(['code' => '2000', 'msg' => '修改成功']);
    } else {
        return json_encode(['code' => '1001', 'msg' => '修改失败']);
    }
}
/**
 * @return string
 * 删除
 */
 //删除
public function del()
{
    $id = $_GET['id'];
    $data = Shop::findOrFail($id);
    $res = $data->delete();
    $info = Shop::all();
    if ($res) {
        return json_encode(['code' => '2000', 'msg' => '删除成功', 'data' => $info]);
    } else {
        return json_encode(['code' => '1001', 'msg' => '删除失败']);
    }
}

/**
 * @param Request $request
 * @return string
 * 添加
 */
 //添加
public function add(Request $request)
{
    $data = Shop::create([
        'name' => $request->name,
        'price' => $request->price,
        'stock' => $request->stock
    ]);
    if ($data) {
        return json_encode(['code' => '2000', 'msg' => '添加成功']);
    } else {
        return json_encode(['code' => '1001', 'msg' => '添加失败']);
    }
}

vue我先写的展示、：

<template> 
    <div class="div">  
        <div class="div1" v-for="v in name" :key="index">   <!--循环-->
              <img class="img" src="../../img/img.png" alt />      
              <p class="p1">{{v.name}}</p>      
             <p class="p2">{{v.price}}</p>     
             <p @click="del(v.id)" class="p3">删除</p>      
             <p class="p4" @click="update(v.id)">修改</p>    
         </div>    
            <button @click="add">添加</button>  
    </div>
 </template>
 <script>
 export default {
   data() {    
       return {      
        name: {}    //当你的接口请求成功获取到数据后，吧数据存入这里，用于上面循环
        };  
   },  
   mounted() {  
     this.load();  //加载
   },  
   methods: {   
    load() {   //调用load这个方法
       let t = this;      
       wx.request({       
        url: "http://www.laravel.com/api/index", //仅为示例，并非真实的接口地址        
        data: {},        
        header: {     
             "content-type": "application/json" // 默认值        
         },        
         success(res) {          
              console.log(res.data);          
              t.name = res.data;        //把数据存入name中
              }      
       });    
       },    
       //这是删除  和上面对比一下
       del(id) {      
          let t = this;    
           wx.request({        
               url: "http://www.laravel.com/api/del", //仅为示例，并非真实的接口地址        
               data: {       
                  id: id    
              },        
       header: {     
            "content-type": "application/json" // 默认值        
       },        
       success(res) {     
            console.log(res.data);          
            t.name = res.data.data;        
        }      
    });   
   },    
   //这是添加，会跳到另一个人页面
   add() {     
    wx.navigateTo({       
     url: "../add/main"      
            });    
      },   
      这是修改，会跳到另一个人页面
     update(id) {      
     wx.navigateTo({        
     url: '../update/main?id='+id+''      
                   });    
             },  
     }};
     </script>
     <style scoped>
             样式自己写，
     </style>

下面是我的效果图：

当你点击删除时会调用删除的方法，

点击添加跳到

<template> 
 <div>   
  <table>   
     <tr>        
     商品名称：   
          <input type="text" v-model="name" />     
     </tr>      
     <tr>     
     商品价格：   
         <input type="text" v-model="price" />   
     </tr>  
    <tr>       
     库存：  
     <input type="text" v-model="stock" />    
    </tr>   
          <button @click="add">添加</button>  
</table>  
</div>
</template>
<script>export default {  
data() {    
     return {     
        name: "",   
        price: "",   
       stock: ""  
     };  
     }, 
      methods: {   
       add() {     
      wx.request({   
    url: "http://www.laravel.com/api/add", //仅为示例，并非真实的接口地址       
    data: {       
       name: this.name,    
       price: this.price,  
       stock: this.stock  
     },   
    header: {    
        "content-type": "application/json" // 默认值    
     },     
     success(res) {     
	      wx.showToast({    
	          title: "成功",   
	         icon: "success",   
	         duration: 2000     
	     });   
	      wx.navigateTo({     
	          url: "../shop/main"   
	       }); 
	        console.log(res.data);   
        }     
     });  
    }  
   }};
   </script>

这是添加效果图：样式可以自己加

点击修改时跳到

<template> 
   <table>   
      <div>   
         <tr>        
         商品名称：        
         <input type="text" v-model="data.name" />     //通过data.xxx来获取数据
          </tr>   
          <tr>       
          商品名称：     
         <input type="text" v-model="data.price" />     
         </tr>    
         <tr>        
         商品名称：       
          <input type="text" v-model="data.stock" />      
          </tr>      
     <button @click="up">修改</button>   
        </div> 
  </table>
</template>

<script>
export default { 
 data() {   
  return {     
   data: ""   //查出来的数据存入这里
    }; 
     },  
  onLoad: function(a) {  //获取前面传来的id
    let id = a.id;  
    console.log(id);   
    let t = this;    
    wx.request({     
     url: "http://www.laravel.com/api/show", //仅为示例，并非真实的接口地址      
  data: {      
    id: id     
 },     
  header: {    
      "content-type": "application/json" // 默认值    
        },     
  success(res) {     
     console.log(res.data);     
    t.data = res.data;    //获取前面传来的id
         }  
    });
},  
methods: {       
 up() {         
    wx.request({     
       url: "http://www.laravel.com/api/update", //仅为示例，并非真实的接口地址        
   data: {       
     id:this.data.id,        //获取要修改的这条数据的id
     name: this.data.name,         //获取要修改的这条数据的name    格式 this.data.xxx
     price: this.data.price,     
     stock: this.data.stock      
     },      
   header: {      
      "content-type": "application/json" // 默认值     
   },       
  success(res) {
            wx.showModal({   
               title: '提示',    
                content: '确认修改吗',     
                 success (res) {      
                   if (res.confirm) {    
                     wx.navigateTo({       
                          url: "../shop/main"       
           });        
     } else if (res.cancel) {     
            console.log('用户点击取消')       
                   }   
                 }    
            });  
          } 
       });  
   } 
} 
};
 </script> 

效果图：