欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

laravel-admin 与 vue 结合使用实例代码详解

程序员文章站 2022-03-20 15:01:28
由于 laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再...

由于 laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $(“#pjax-container”).html(newpart) 的方式更新的。

这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射。

所以理论上有2种方法解决:

重新绑定一下 vue 的映射关系

在某些页面禁止 pjax

1 太难搞,而且没啥资料,放弃。2 的话比较可行。

部分禁止 pjax

打开 public/vendor/laravel-admin/laravel-admin/laravel-admin.js

添加代码:

// 不使用 pjax 刷新的页面
$(document).on('pjax:beforereplace', function (e, options) {
 // console.log(arguments)
 var freshpaths = [
  /\/admin.*\/products/,
 ]
 for (let path of freshpaths) {
  if (path.test) {
   if (path.test(e.state.url)) {
    location.reload()
    return false
   }
  }
  else if (options.url.search(path) !== -1) {
   location.reload()
   return false
  }
 }
})

使用自定义 view

很多时候我们并不需要大动干戈地建立一个全部的 view,只需要在内置 view 中稍作修改。

这时候,我们需要先自定义一个 content 类:

use encore\admin\layout\content;
class mycontent extends content {
  public function render() {
    $items = [
      'header'   => $this->header,
      'description' => $this->description,
      'breadcrumb' => $this->breadcrumb,
      'content'   => $this->build(),
    ];
    return view('admin.content', $items)->render();
  }
}

然后引用它:

public function index(mycontent $content) {
    return $content
      ->header('product')
      ->description($this->brand)
      ->body($this->grid());
  } 

    这样一来,每次进入到 index 页面,都会渲染 admin.content 这个 view 。

view 的内容直接 copy 自 vendor/encore/laravel-admin/resources/views/content.blade.php

在 view 里插入 vue 组件

添加2部分代码即可。

第一部分是初始化 vue app:

<script data-exec-on-popstate>
  // boot up the demo
  $(function () {

   // vapp
   window.vapp = new vue({
    el: '#app',
    data () {
     return {
      status: {
       showgalleryeditor: false,
      },
      store: {
       images: [],
       el: '',
      },
     }
    },
    components: {},
    methods: {
     startgalleryediting (event) {
      this.status.showgalleryeditor = true
      this.store.pk = $(event.target).parent().find('ul').data('pk')
      this.store.images = $(event.target).parent().find('img').toarray().map((e) => e.getattribute('src'))
      window.p = $(event.target).parent().find('ul')
     },
    },
   })
  })
  </script>

 第2部分是插入组件:

<gallery-editor :status="status" :images="store.images" :pk="store.pk">
</gallery-editor>

vue 组件单独一个 js 文件

位置如下:

public/vendor/components/gallery-editor.js

定义如下:

vue.component('gallery-editor', {
 props: {
  status: {
   showgalleryeditor: false,
  },
  images: [],
  pk: 0,
  moveto: [],
 },
 data () {
  return {}
 },
 watch: {
  images (newval, oldval) {
   this.moveto = []
   for (let src of newval) {
    this.moveto.push({
     src: src,
     productid: this.pk,
     deleted: 0,
    })
   }
  },
 },
 methods: {
  close () {
   this.status.showgalleryeditor = false
  },
  save () {
   let args = {_token: la.token}
   args.id = this.pk
   args.images = []
   args.move_to = []

   // console.log(json.stringify(this.moveto))
   for (let imgobj of this.moveto) {
    if (imgobj.deleted) {
     continue
    }
    if (imgobj.productid === this.pk) {
     args.images.push(imgobj.src)
    } else {
     args.move_to.push({src: imgobj.src, product_id: imgobj.productid})
    }
   }
   // console.log(json.stringify(args))
   $.post('/admin/products/move-images', args).done(() => {
    toastr.success('success')
    this.status.showgalleryeditor = false
   }).fail((response) => {
    toastr.error(response.responsetext)
   })
  },
 },
 template: `
      <div class="modal" tabindex="-1" role="dialog" :class="{show: status.showgalleryeditor, fade: !status.showgalleryeditor}">
       <div class="modal-dialog" role="document">
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="close" @click="close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title">editing images</h4>
         </div>
         <div class="modal-body">
         <ul style="list-style-type: none;">
           <li v-for="(imageobj, key) in moveto" :key="key" style="margin-bottom: 8px">
             <img :src="imageobj.src" alt="" style="width:40px;height:40px">
             <label>move to product: <input type="text" v-model="imageobj.productid"></label>
             <label>delete:<input type="checkbox" v-model="imageobj.deleted"></label>
          </li>
          </ul>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" @click="close">close</button>
          <button type="button" class="btn btn-primary" @click="save">save changes</button>
         </div>
        </div>
       </div>
      </div>`,
})

这是一个弹出式编辑框,具体作用就不解释了,只是个示例。

然后还需要在 admin/bootstrap.php 中引用这个 js 文件:

admin::js('/vendor/components/gallery-editor.js');为什么不把组件代码直接写进 view 中呢?

因为 pjax 的后端逻辑似乎有 bug,template 的内容无法全部渲染到前端,导致页面出错。

总结

以上所述是小编给大家介绍的laravel-admin 与 vue 结合使用实例代码详解,希望对大家有所帮助