交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • laravel-admin 与 vue 结合使用实例代码详解

    由于 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 结合使用实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

    广而告之:
    热门推荐:
    javascript编程实现栈的方法详解【经典数据结构】

    本文实例讲述了javascript编程实现栈的方法。分享给大家供大家参考,具体如下: 栈是限定仅在表尾进行插入或删除操作的线性表,栈是先进后出的。栈的表尾称为栈顶(top),而表头端称为栈底(bottom)。 和线性表类似,栈也有两种存储表示方法,顺序栈和链栈。 这里讲一下顺序···

    AngularJS基础学习笔记之控制器

    AngularJS控制器用来控制AngularJS applications的数据。   AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器   AngularJS applications通过控制器进行控制。   ng-controller指令定义了一个application的控制器。   一个控制器就是一个JavaScript对象,它···

    js return返回多个值,通过对象的属性访问方法

    return返回多个值,通过对象的属性访问 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> <script> function add(a,b){ var sum; var s···

    跨域传值即主页面与iframe之间互相传值

    需求一:主页面A 怎么向 iframe B 传递数据呢? 这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理 实现方式 实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在主页面A中设置 iframe B 的 src 后···

    微信小程序之仿微信漂流瓶实例

    周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 下面带图说模块: 1.主页面 三个button.不多说了.别吐槽这画风.哈哈哈. 2.编辑漂流瓶内容 内容可以是语音,也可以···

    ASP.NET Core 2.0 支付宝扫码支付的实现代码

    前言 自从微软更换了CEO以后,微软的战略方向有了相当大的变化,不再是那么封闭,开源了许多东西,拥抱开源社区,.NET实现跨平台,收购xamarin并免费提供给开发者等等。我本人是很喜欢.net的,并希望.net core能够崛起。我是从.net core 1.1的时候开始使用的,到现在的.net cor···

    详解css中的float

    float与margin 两个相邻的浮动元素,当第一个浮动元素(不论是左浮动还是右浮动)的宽度为100%时,第二个浮动元素会被挤到下面,通过添加负margin-right值(绝对值最少等于它自身的宽度),可以使它回到第一行。 在书写html代码时,我们通常的习惯根据UI样式,从左往右来写代码···

    深入PHP数据缓存的使用说明

    复制代码 代码如下:<?php// //www.kunjuke.com/article/23093.htmfunction set_cache($name, $value) {    // 设置相对或者绝对目录,末尾不要加 "/"    $cache_dir = "./cache";    // 设置扩展名    $···

    window.requestAnimationFrame是什么意思,怎么用

    再看别人实现粒子效果的时候会有以下代码: 复制代码 代码如下: window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnima···

    Google 二维条码 API 整理

    QR二维条码简介 QR码- 维基百科 C# 创建生成实例:http://www.codeproject.com/KB/cs/qrcode.aspx 二维条码创建读取程序:http://files.cnblogs.com/zjfree/PsqrEdit_Zh.rar 二维条码在线生成:http://zxing.appspot.com/generator/ 在线解析二维条码:http://zxing···