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 相关文章推荐
js替换字符串的所有示例代码
Jul 23 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
js闭包用法实例详解
Dec 13 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
js实现页面图片消除效果
Mar 24 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函数http_build_query使用详解
2014/08/20 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Python正则表达式知识汇总
2017/09/22 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python3字符串操作总结
2019/07/24 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
课程改革实施方案
2014/03/16 职场文书
投标担保书范文
2014/04/02 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
合作协议书范文
2014/08/20 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
高中生军训感言
2015/08/01 职场文书
六年级语文教学反思
2016/03/03 职场文书