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


Posted in Javascript onJune 04, 2019

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

Javascript 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 #Javascript
ES6中字符串的使用方法扩展
Jun 04 #Javascript
详解vue-cli3多页应用改造
Jun 04 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
php4的session功能评述(二)
2006/10/09 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python生成任意频率正弦波方式
2020/02/25 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
秘书岗位职责
2013/11/18 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
电子信息专业自荐书
2014/02/04 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
现实表现材料范文
2014/12/23 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
新闻通讯稿范文
2015/07/22 职场文书
感恩老师主题班会
2015/08/12 职场文书
初中政治教学反思
2016/02/23 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android