VUE 結合 vue-resource 進行ajax操作
阿新 • • 發佈:2018-11-09
有意思的!
初始化需要ajax獲取資料!
搜尋商品需要ajax獲取資料!
提交資料需要ajax傳遞資料!
有了 vue-resource ,操作挺方便的。
這是html
<form class="form-horizontal addForm" id="edit_form"> <div class="form-group"> <label for="goods_id" class="col-lg-2 control-label">商品ID</label> <div class="col-lg-3"> <!-- 通過div控制長度 --> <input type="text" class="form-control" id="goods_id" placeholder="請輸入商品id進行搜尋"> </div> <label for="goods_type" class="col-lg-2 control-label">型別</label> <div class="col-lg-2"> <select id="goods_type" class="form-control"> <option value="1">線上</option> <option value="2">門店</option> </select> </div> <label class="control-label col-lg-1 del-btn"> <button type="button" class="btn btn-sm btn-primary" @click="search">搜尋</button> </label> </div> <div class="form-group col-lg-12"> <label class="control-label col-lg-4"></label> <label class="col-lg-5 text-left">相關商品</label> <label class="control-label col-lg-1"></label> </div> <div class="form-group" v-for="(item, i) in items"> <label class="col-lg-1 control-label">ID:{{item.goods_id}}</label> <label class="col-lg-1 control-label">型別: <span v-if="item.type == 1"> 線上 </span> <sapn v-else> 門店 </sapn> </label> <label class="col-lg-2 control-label">名稱:{{item.name}}</label> <label class="col-lg-1 control-label">圖片:</label> <div class="col-lg-2"> <img :src="item.img_url" width="120px;"> </div> <label for="is_heavy" class="col-lg-1 control-label">是否頭部:</label> <div class="col-lg-1"> <input type="checkbox" class="" id="is_heavy" v-model="item.is_heavy"> </div> <label class="control-label col-lg-1 del-btn"> <button type="button" class="btn btn-xs btn-danger del-img" @click="remove_item(i)">刪除</button> </label> </div> <input type="hidden" name="id" id="id" value="{$id}" /> <input type="hidden" name="page" id="page" value="{$page}" /> <div class="form-group"> <div class="col-lg-2 col-lg-offset-3"> <button type="button" class="btn btn-primary col-lg-8" @click="submit">儲存</button> </div> <div class="col-lg-2"> <button type="button" class="btn btn-danger col-lg-8" @click="cancel">取消</button> </div> <div class="clear"></div> </div> </form>
這是js
<script> // 定義全域性鎖 var lock_flag = false; var page = $('#page').val(); var app = new Vue({ el: '#edit_form', data: { items: [] }, mounted() { // 獲取資料並進行初始化操作 var id = GetQueryString('id'); this.$http.post('step_3_init',{ id:id, },{emulateJSON:true}).then(function(res){ if (res.body.errno !== 0) { layer.msg(res.body.errdesc); return false; } res.body.data.forEach(function (item,index) { res.body.data[index]['is_heavy'] = parseInt(res.body.data[index]['is_heavy']); }); this.items = res.body.data; },function(res){ console.log(res.status); }); }, methods: { remove_item:function(index) { this.items.splice(index,1); }, cancel:function() { window.location.href='index?page=' + page; }, search:function() { var goods_id = parseInt($('#goods_id').val()); var goods_type = $('#goods_type').val(); if (!/^[0-9]*[1-9][0-9]*$/.test(goods_id)) { layer.msg('請輸入商品id'); return; } //傳送 post 請求 this.$http.post('get_search_goods',{ goods_id:goods_id, goods_type:goods_type },{emulateJSON:true}).then(function(res){ if (res.body.errno !== 0) { layer.msg(res.body.errdesc); return false; } // 檢查相同的資料是否存在 var exist = 0; this.items.forEach(function (item,index) { if (item.id == res.body.data.id && item.type == res.body.data.type) { exist ++; } }); if (exist > 0) { layer.msg('商品資料已存在,請勿重複新增'); return; } this.items.push(res.body.data); },function(res){ console.log(res.status); }); }, submit:function() { if (!lock_flag) { lock_flag = true; var post_data = {}; post_data.id = $("#id").val(); post_data.items = this.items; //傳送 post 請求 this.$http.post('step_3_save',post_data,{emulateJSON:true}).then(function(res){ if(res.body.errno == 0){ layer.msg("已儲存"); console.log(JSON.stringify(res)); setTimeout(function() { window.location.href = 'index?page=' + page; },2000); }else{ // 解鎖 lock_flag = false; layer.msg(res.body.errdesc); } },function(res){ lock_flag = false; console.log(res.status); }); } } } }); </script>
這是php
// 相關的商品 public function step_3() { $id = (int)$_GET['id']; $this->assign('id',$id); $page = (int)$_GET['page']; $this->assign('page', $page); $mill_dishes_model = M('mill_dishes'); $result = $mill_dishes_model->where(array('id'=>$id))->find(); if(!$result){ $this->success('資料不存在','index?page='.$page); return false; } // 獲取配料資料 $this->display(); } // 初始化 public function step_3_init() { vendor('Func.Json'); $json = new Json(); $id = (int)$_POST['id']; // 獲取配料資料 $mill_dishes_cross_model = M('mill_dishes_cross'); $mill_dishes_cross_list = $mill_dishes_cross_model->where(['dishes_id'=>$id,'is_del'=>0])->field('id,goods_id,type,is_heavy')->select(); foreach ($mill_dishes_cross_list as $k=>&$v) { // 獲取商品名稱圖片 if ($v['type'] == 1) { $goods_model = M('goods'); $info = $goods_model->where(['id'=>$v['goods_id']])->find(); $v['name'] = $info['name']; $v['img_url'] = C('CDN_HOST') . $info['img_list']; } else { $store_goods_model = M('store_goods'); $info = $store_goods_model->where(['id'=>$v['goods_id']])->find(); $v['name'] = $info['name']; $v['img_url'] = C('CDN_HOST') . $info['main_image']; } } $json->setErr(0, '操作成功'); $json->setAttr('data', $mill_dishes_cross_list); $json->send(); } // 相關的商品儲存 public function step_3_save() { vendor('Func.Json'); $json = new Json(); // json傳入的資料 $id = (int)$_POST['id']; $items = $_POST['items']; $mill_dishes_cross_model = M('mill_dishes_cross'); $mill_dishes_cross_model->where(['dishes_id'=>$id])->save(['is_del'=>1]); foreach ($items as $k=>$item) { // 進行新增修改操作 $info = $mill_dishes_cross_model->where(['id'=>$item['id']])->find(); if ($info) { // 修改 $op_data = [ 'goods_id' => $item['goods_id'], 'type' => $item['type'], 'is_heavy' => $item['is_heavy'] == 'true' ? 1 : 0, 'is_del' => 0 ]; $mill_dishes_cross_model->where(['id'=>$item['id']])->save($op_data); } else { // 新增 $op_data = [ 'dishes_id' => $id, 'goods_id' => $item['goods_id'], 'type' => $item['type'], 'is_heavy' => $item['is_heavy'] == 'true' ? 1 : 0, 'add_time' => time() ]; $mill_dishes_cross_model->add($op_data); } } $json->setErr(0, '操作成功'); $json->setAttr('id', $id); $json->send(); } // 搜尋商品 public function get_search_goods() { vendor('Func.Json'); $json = new Json(); $goods_id = $_POST['goods_id']; if (!$goods_id){ $json->setErr('10001','缺少引數goods_id'); $json->Send(); } $goods_type = $_POST['goods_type']; if (!$goods_type){ $json->setErr('10002','缺少引數goods_type'); $json->Send(); } $out_data = []; if ($goods_type == 1) { // 獲取線上商品 $goods_model = M('goods'); $info = $goods_model->where(['id'=>$goods_id,'is_sold'=>1,'status'=>1])->find(); if (!$info) { $json->setErr('10003','商品不存在或已下架'); $json->Send(); } $out_data = [ 'id' => 0, 'goods_id' => $info['id'], 'name' => $info['name'], 'img_url' =>C('CDN_HOST') . $info['img_list'], 'type' => 1, 'is_heavy' => 0 ]; } else { // 獲取門店商品 $store_goods_model = M('store_goods'); $info = $store_goods_model->where(['id'=>$goods_id,'is_sale'=>1,'is_del'=>0])->find(); if (!$info) { $json->setErr('10003','商品不存在或已下架'); $json->Send(); } $out_data = [ 'id' => 0, 'goods_id' => $info['id'], 'name' => $info['name'], 'img_url' =>C('CDN_HOST') . $info['main_image'], 'type' => 2, 'is_heavy' => 0 ]; } $json->setErr(0, '操作成功'); $json->setAttr('data', $out_data); $json->send(); }