因为之前用element-admin感觉完全前后端分离在目前项目上并不是太适用所以想用laravel和vue写一个后台
开始想利用laravel原生的vue,折腾了半天感觉不是很理想
一是app.js太大,用网上的方法确实减小了很多不过感觉后面用vue和blade混写不是太方便,主要还是有点无从下手
其实后台如果纯用blade的话倒也没啥,就是section套进来呗,主要还是想用到vue
后台主要有以下几块
1.顶部(logo,顶部导航nav,顶部user下拉)
2.侧边栏(sidebar)
3.内容(content)
先纸上谈兵走一下吧
1.在layout文件引入公共的css和js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous" > < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" ></ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous" ></ script > < script src=" //这里的js是后面sideber要用到的 <script> var sidebar = new Vue({ el: '#sidebar', data: { menus: [], active: '' }, methods: { toggleMenu: function(id){ this.active = this.active == id ? '' : id; }, setMenus: function(menus){ this.menus = menus; }, isCurrentUrl: function(url, key){ var parser = document.createElement('a'); parser.href = url; if(parser.pathname === window.location.pathname){ this.active = key ? key : this.active; return true; } return false; } }, created: function(){ this.setMenus(JSON.parse('{!! Speedy::getMenus(true) !!}')); } }); </ script > |
2.相关位置引入sidebar和nav
1 2 | @include('xxxxxx.sidebar') @include('xxxxxx.nav') |
sidebar代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < div id = "sidebar" class = "sidebar" > < div class = "sidebar-brand" > < a href = "{{ url('admin') }}" >{{ config('app.name') }}</ a > </ div > < div class = "sidebar-body" > < ul > < template v-for = "(menu, key) in menus" > < li class = "first-menu-li" > < a v-bind:class = "[isCurrentUrl(menu.url) ? 'active' : '', 'first-menu']" v-on:click = "toggleMenu(key)" v-bind:id = "'menu-' + key" v-bind:href = "menu.url ? menu.url : 'javascript:;'" >@{{ menu.display }} < span v-if = "menu.sub" class = "glyphicon glyphicon-chevron-down" v-bind:class = "{ 'menu-expand-indicator' : active == key }" ></ span > </ a > < ul v-if = "menu.sub" v-bind:id = "'sub-menu-' + key" class = "sub-menu" v-bind:style = "{display: active == key ? 'block' : 'none'}" > < template v-for = "sub in menu.sub" > < li class = "second-menu-li" >< a v-bind:class = "[isCurrentUrl(sub.url, key) ? 'active' : '', 'first-menu']" v-bind:href = "sub.url" v-bind:target = "sub.target ? sub.target : ''" >@{{ sub.display }}</ a ></ li > </ template > </ ul > </ li > </ template > </ ul > </ div > </ div > |
可以看到是通过layout在这里获取到的menus然后再sidevar里使用
其实我的理想后台是在顶部和侧部都会有导航,顶部的导航展示的是不同的模块,左侧是模块的内部导航,类似微擎的后台
那就用一个多层的menus先把顶部的检查is current然后再把下面2层对应的菜单从左侧循环出来就可以了,后面我会实践一下然后再更。