VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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模板来编写网站后台界面

    广而告之:
    热门推荐:
    weex里Vuex state使用storage持久化详解

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state。 先看下该模块介绍: storage 是一个在前端比较常用的模块,可以对本地数据进行存储、修改、删除,并且该数据是永久保存···

    node.js入门教程之querystring模块的使用方法

    querystring模块 querystring从字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析。querystring模块只提供4个方法,在我看来,这4个方法是相对应的。 这4个方法分别是querystring.parse和querystring.stringify,querystring.escape和querystring.unescape。 首···

    Html5原创俄罗斯方块(基于canvas)

    第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久。 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块。 在大三的暑假,我又用了es6的语法进行了改进,包含了class的语法糖、箭头函···

    帝国cms前台投稿标题图片字段上传图片自动加上水印的方法

    在e/class/userfun.php这个自定义函数文件中添加一个函数 function user_TranImgAuto($mid,$f,$isadd,$isq,$value,$cs){ global $empire,$dbtbpre,$public_r,$emod_r,$class_r,$tranpicturetype,$musername; //$filetf=$f.'imgf';//变量名 $filetf=$f.'file'···

    PHP生成短网址方法汇总

    正常的网址带上参数的那种可能会很长,尤其是我们在印刷纸质品如企业宣传册中要印上某个长的url的话非常难看,而且也没几个人会去记这个网址,虽然现在可以用扫二维码的方式打开长网址。但是人们可以使用短网址来实现优美的链接,尤其是有字数限制的应用如微博。 短网址的实现···

    MySQL外键使用详解

    最近有开始做一个实验室管理系统,因为分了几个表进行存储·所以要维护表间的关联··研究了一下MySQL的外键。 (1)只有InnoDB类型的表才可以使用外键,mysql默认是MyISAM,这种类型不支持外键约束 (2)外键的好处:可以使得两张表关联,保证数据的一致性和实现一些级联操作; ···

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1"  删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="my···

    PHP如何获取当前主机、域名、网址、路径、端口等参数

    实验环境: 测试域名daxiangtravel.com,apache根目录/mnt/,测试目录/mnt/qa/test,测试文件名为index.php。 获取代码: 获取当前目录: getcwd(); // /mnt/qa/test dirname(__FILE__); // /mnt/qa/test 获取域名或主机地址 $_SERVER['HTTP_HOST']; //daxiangtravel.com ···

    js实现多个倒计时并行 js拼团倒计时

    本文是对类似于拼团,多个商品每个都有各自的倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了, 但是这次数据是活的,看一些拼团app都可以实现,既然能实现就搞起来,有了以下的想法 使用环境 v···

    利用Node.js如何实现文件循环覆写

    前言 这次编写Node.js项目的时候用到了日志模块,其中碰到了一个小问题。 这是一个定时执行可配置自动化任务的项目,所以输出信息会不断增加,也就意味着日志文件会随时间不断增大。如果对日志文件大小不加以控制,那么服务器的磁盘迟早会被撑满。所以限制文件大小是有必要的···